/******************************************************************************
 BRANDING
 ***/

@font-face {
    font-family: 'Inter';
    src: local('Inter'), url('../fonts/Inter-VariableFont.ttf') format('truetype');
}

* {
    font-family: Inter, 'Open Sans', sans-serif;
}

.card-pf {
    background-color: #FFFFFF;
}

.logo-pane .gradient-background {
    background: linear-gradient(270.02deg, #D4107F 0.01%, #FD6232 99.99%);
}

.pf-c-button:not(#nav-toggle):not(.pf-m-link):not([data-password-toggle]) {
    border-radius: 1000px;
    height: 55px;
    font-size: 20px;
    padding: 8px 32px;
}

.pf-c-button:not(.pf-m-link):hover,
.pf-c-button:not(.pf-m-link):focus {
    border: 1px solid #454545;
}

.pf-c-button.pf-m-link {
    color: #454545;
}

#kc-form-buttons .pf-m-primary:hover,
.btn:hover {
    filter: brightness(1.2);
}

#kc-form-buttons .pf-m-primary,
.pf-c-button.pf-m-primary {
    background: #DD007D;
    color: white;
}

.pf-c-button.pf-m-secondary {
    color: #DD007D;
}

.pf-c-button.pf-m-secondary::after {
    border-color: #DD007D;
    border-radius: 1000px;
}


.pf-c-form-control {
    border-bottom-color: #eb018c;
}

.pf-c-form-control:hover, .pf-c-form-control:focus {
    border-width: 0 !important;
    border-bottom-width: 4px !important;
    outline: -webkit-focus-ring-color auto 0 !important;
}

.pf-c-button.pf-m-control::after {
    display: none;
}

a:not(.pf-c-button):not(.pf-c-nav__link):not(.kc-social-item) {
    color: #eb018c;
    text-decoration: underline;
}

a:not(.pf-c-button):not(.pf-c-nav__link):not(.kc-social-item):hover,
a:not(.pf-c-button):not(.pf-c-nav__link):not(.kc-social-item):focus {
    color: #AB0064 !important;
}

.kc-social-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 55px;

    background-color: #454545;
    border: 1px solid #DD007D !important;
    border-radius: 1000px;
}

.kc-social-item:hover {
    border-width: 4px !important;
}

.kc-social-item i {
    margin-right: 8px;
}

input {
    box-shadow: unset !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

div#spinner_screen {
    background-color: #2B2B2B;
    color: #f0f0f1;
}

div#spinner_screen svg {
    background: transparent !important;
}

div#spinner_screen svg path {
    fill: #DD007D;
}

.qc-login-button {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#try-another-way {
    display: none;
}

/******************************************************************************
 CUSTOM SCROLLBAR
 ***/
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: #E2E1E2;
    border-radius: 1000px;
}

::-webkit-scrollbar-thumb {
    border-radius: 1000px;
    background: #838182;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: var(--qc-login-scrollbar-track);
}

/******************************************************************************
 LIGHT / DARK
 The app stores its theme choice in localStorage under `dark_mode` and Keycloak is served from the
 same origin, so template.ftl can stamp html[data-theme] before first paint. Without that stamp
 (or without JS) the system preference decides.
 ***/
:root {
    color-scheme: light;
    --qc-login-background: #ffffff;
    --qc-login-surface: #ffffff;
    --qc-login-text: #2b2b2b;
    --qc-login-text-muted: #747274;
    --qc-login-border: #dfdfe7;
    --qc-login-scrollbar-track: #e2e1e2;
    --qc-login-mobile-banner: #dfdfe7;
    --qc-login-social: #454545;
    --qc-login-link: #da3d00;
    --qc-login-link-hover: #b62100;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --qc-login-background: #1e1e1e;
        --qc-login-surface: var(--qc-login-background);
        --qc-login-text: #f0f0f1;
        --qc-login-text-muted: #aba7ae;
        --qc-login-border: #454545;
        --qc-login-scrollbar-track: #373737;
        --qc-login-mobile-banner: #373737;
        --qc-login-social: #373737;
        --qc-login-alert: #373737;
        /* orange 400 - ui brand's --qc-app-text-accent, the "text" cut of the accent orange already
           kept identical across light/dark because it's meant to stay readable on a dark surface */
        --qc-login-link: #ff7b31;
        --qc-login-link-hover: #ff9153;
        /* Google's own dark sign-in button spec (developers.google.com/identity/branding) */
        --qc-login-google-bg: #131314;
        --qc-login-google-border: #8e918f;
        --qc-login-google-text: #e3e3e3;
    }

    /* PatternFly's .pf-c-button.pf-m-control (2 classes) otherwise outranks .kc-social-item
       (1 class) and its white background-color always wins the cascade regardless of source
       order - match its specificity here so the dark surface actually applies. Scoped inside
       this media query so light mode never sees the rule at all (an unset var() falls to
       initial/inherited, not the previous cascade value, so scoping - not just unset vars -
       is what keeps light mode untouched). */
    html:not([data-theme="light"]) .pf-c-button.pf-m-control.kc-social-item.kc-social-gray {
        background-color: var(--qc-login-google-bg);
        border-color: var(--qc-login-google-border) !important;
        color: var(--qc-login-google-text);
    }

    /* Paint the background directly rather than re-pointing a PF token: PF v3 loads after v4 and its bare
       .alert-* rules (0,1,0) outrank every --pf-c-alert-- declaration, so only (0,2,1) here is safe.
       A per-variant title colour would clobber the status colours, which the icon and border keep. */
    html:not([data-theme="light"]) .pf-c-alert {
        background-color: var(--qc-login-alert);
        --pf-c-alert__title--Color: var(--qc-login-text);
    }

    /* PF re-points --pf-global--BackgroundColor--100 to #fff on .pf-c-input-group itself, so the group
       and its password-visibility button paint white behind our transparent, light-text input. */
    html:not([data-theme="light"]) .pf-c-input-group {
        --pf-global--BackgroundColor--100: transparent;
        --pf-global--Color--100: var(--qc-login-text);
    }

    /* Chrome's autofill background is a UA !important that only an inset shadow can cover, and the
       `input { box-shadow: unset !important }` rule above means ours needs !important as well. */
    html:not([data-theme="light"]) .pf-c-form-control:-webkit-autofill,
    html:not([data-theme="light"]) .pf-c-form-control:-webkit-autofill:hover,
    html:not([data-theme="light"]) .pf-c-form-control:-webkit-autofill:focus {
        -webkit-box-shadow: inset 0 0 0 1000px var(--qc-login-background) !important;
        box-shadow: inset 0 0 0 1000px var(--qc-login-background) !important;
        -webkit-text-fill-color: var(--qc-login-text);
        caret-color: var(--qc-login-text);
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --qc-login-background: #1e1e1e;
    --qc-login-surface: var(--qc-login-background);
    --qc-login-text: #f0f0f1;
    --qc-login-text-muted: #aba7ae;
    --qc-login-border: #454545;
    --qc-login-scrollbar-track: #373737;
    --qc-login-mobile-banner: #373737;
    --qc-login-social: #373737;
    --qc-login-alert: #373737;
    --qc-login-link: #ff7b31;
    --qc-login-link-hover: #ff9153;
    --qc-login-google-bg: #131314;
    --qc-login-google-border: #8e918f;
    --qc-login-google-text: #e3e3e3;
}

html[data-theme="dark"] .pf-c-button.pf-m-control.kc-social-item.kc-social-gray {
    background-color: var(--qc-login-google-bg);
    border-color: var(--qc-login-google-border) !important;
    color: var(--qc-login-google-text);
}

html[data-theme="dark"] .pf-c-alert {
    background-color: var(--qc-login-alert);
    --pf-c-alert__title--Color: var(--qc-login-text);
}

html[data-theme="dark"] .pf-c-input-group {
    --pf-global--BackgroundColor--100: transparent;
    --pf-global--Color--100: var(--qc-login-text);
}

html[data-theme="dark"] .pf-c-form-control:-webkit-autofill,
html[data-theme="dark"] .pf-c-form-control:-webkit-autofill:hover,
html[data-theme="dark"] .pf-c-form-control:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--qc-login-background) !important;
    box-shadow: inset 0 0 0 1000px var(--qc-login-background) !important;
    -webkit-text-fill-color: var(--qc-login-text);
    caret-color: var(--qc-login-text);
}

html,
html body {
    background-color: var(--qc-login-background) !important;
    color: var(--qc-login-text);
}

.card-pf {
    background-color: var(--qc-login-surface);
    color: var(--qc-login-text);
}

#kc-page-title,
label,
.pf-c-form__label,
.pf-c-form__label-text {
    color: var(--qc-login-text);
}

.subtitle {
    color: var(--qc-login-text-muted);
}

.pf-c-form-control {
    background-color: transparent;
    color: var(--qc-login-text);
}

.pf-c-button.pf-m-link {
    color: var(--qc-login-text);
}

.kc-social-item {
    background-color: var(--qc-login-social);
}

::-webkit-scrollbar {
    background: var(--qc-login-scrollbar-track);
}