/* Errthquake theme for Keycloak login */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap');

/* ── Color tokens ─────────────────────────────────────────── */
:root {
    --eq-bg:            #1c1d26;
    --eq-bg-alt:        #272833;
    --eq-accent:        #e44c65;
    --eq-accent-hover:  #e76278;
    --eq-accent-active: #e13652;
    --eq-text:          rgba(255, 255, 255, 0.75);
    --eq-text-heading:  #ffffff;
    --eq-border:        rgba(255, 255, 255, 0.15);
    --eq-card-bg:       rgba(39, 40, 51, 0.92);
    --eq-input-bg:      rgba(255, 255, 255, 0.06);

    /* Override PatternFly primary color tokens */
    --pf-v5-global--primary-color--100: var(--eq-accent);
    --pf-v5-global--primary-color--200: var(--eq-accent-hover);
    --pf-v5-global--link--Color: var(--eq-accent);
    --pf-v5-global--link--Color--hover: var(--eq-accent-hover);
}

/* ── Full-page background ─────────────────────────────────── */
html, body {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300;
    background-color: var(--eq-bg) !important;
}

.login-pf body,
body#keycloak-bg {
    background-image: url('../img/errthquake-banner.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: var(--eq-bg) !important;
    min-height: 100vh;
}

/* Dark overlay on the background so the card pops */
.pf-v5-c-login {
    background: rgba(28, 29, 38, 0.55) !important;
    min-height: 100vh;
}

/* ── Login container / card ───────────────────────────────── */
.pf-v5-c-login__container {
    grid-template-columns: 38rem;
    grid-template-areas: "header"
                         "main";
}

.pf-v5-c-login__main {
    background: var(--eq-card-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--eq-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ── Header / logo ────────────────────────────────────────── */
.pf-v5-c-login__header {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

#kc-header-wrapper {
    background-image: url('../img/errthquake-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    font-size: 0 !important; /* hide text, show image */
    color: transparent !important;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.pf-v5-c-title {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300 !important;
    color: var(--eq-text-heading) !important;
    letter-spacing: -0.01em;
}

.pf-v5-c-login__main-header .pf-v5-c-title {
    color: var(--eq-text-heading) !important;
    font-weight: 300 !important;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body,
.pf-v5-c-form,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300 !important;
    color: var(--eq-text) !important;
}

/* ── Links ────────────────────────────────────────────────── */
a, a:visited {
    color: var(--eq-accent) !important;
    text-decoration: none;
}
a:hover {
    color: var(--eq-accent-hover) !important;
    text-decoration: underline;
}

/* ── Input fields ─────────────────────────────────────────── */
.pf-v5-c-form-control {
    background: var(--eq-input-bg) !important;
    border-color: var(--eq-border) !important;
    color: var(--eq-text-heading) !important;
    border-radius: 2px !important;
    height: 3em;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300 !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
    border-color: var(--eq-accent) !important;
    box-shadow: 0 0 0 1px var(--eq-accent) !important;
}

.pf-v5-c-form-control input,
.pf-v5-c-form-control input::placeholder {
    color: var(--eq-text) !important;
    background: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--eq-text-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--eq-bg-alt) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── Primary button (Sign In / Enterprise Login) ──────────── */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--eq-accent) !important;
    border-color: var(--eq-accent) !important;
    color: #ffffff !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: var(--eq-accent-hover) !important;
    border-color: var(--eq-accent-hover) !important;
}

.pf-v5-c-button.pf-m-primary:active {
    background-color: var(--eq-accent-active) !important;
    border-color: var(--eq-accent-active) !important;
}

/* ── Secondary / link buttons ─────────────────────────────── */
.pf-v5-c-button.pf-m-secondary {
    background-color: transparent !important;
    border-color: var(--eq-accent) !important;
    color: var(--eq-accent) !important;
    border-radius: 2px !important;
    font-family: 'Roboto', Helvetica, sans-serif !important;
    font-weight: 300 !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
    border-color: var(--eq-accent-hover) !important;
    color: var(--eq-accent-hover) !important;
}

.pf-v5-c-button.pf-m-link {
    color: var(--eq-accent) !important;
}

.pf-v5-c-button.pf-m-control {
    background-color: transparent !important;
    border-color: var(--eq-border) !important;
    color: var(--eq-text) !important;
}

/* ── Checkbox ─────────────────────────────────────────────── */
.pf-v5-c-check__label {
    color: var(--eq-text) !important;
}

.pf-v5-c-check__input:checked {
    accent-color: var(--eq-accent);
}

/* ── Alerts / errors ──────────────────────────────────────── */
.pf-v5-c-alert {
    border: none !important;
    border-left: 3px solid var(--eq-accent) !important;
    background: rgba(228, 76, 101, 0.12) !important;
    border-radius: 2px !important;
}

.pf-v5-c-alert.pf-m-danger {
    border-left-color: var(--eq-accent) !important;
}

.pf-v5-c-alert.pf-m-warning {
    border-left-color: #f0ab00 !important;
    background: rgba(240, 171, 0, 0.12) !important;
}

.pf-v5-c-alert__title,
.pf-v5-c-helper-text__item-text {
    color: var(--eq-text) !important;
}

/* ── Form divider ("or") ──────────────────────────────────── */
.pf-v5-u-my-md.pf-v5-u-text-align-center {
    color: var(--eq-text) !important;
}

.pf-v5-c-title.pf-m-md {
    color: var(--eq-text) !important;
}

/* ── Footer band (register link) ──────────────────────────── */
.pf-v5-c-login__main-footer-band {
    background: rgba(39, 40, 51, 0.6) !important;
    border-top: 1px solid var(--eq-border) !important;
}

.pf-v5-c-login__main-footer-band-item {
    color: var(--eq-text) !important;
}

/* ── Password visibility button ───────────────────────────── */
.pf-v5-c-button.pf-m-control:hover {
    color: var(--eq-accent) !important;
}

/* ── Scrollbar (webkit) ───────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--eq-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--eq-accent);
    border-radius: 3px;
}

/* ── Tooltip ──────────────────────────────────────────────── */
.kc-login-tooltip {
    position: relative;
    display: inline-block;
}

.kc-login-tooltip .kc-tooltip-text {
    top: -3px;
    left: 160%;
    background-color: var(--eq-bg-alt);
    border: 1px solid var(--eq-border);
    visibility: hidden;
    color: var(--eq-text-heading);
    min-width: 130px;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    padding: 5px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
}

.kc-login-tooltip:hover .kc-tooltip-text {
    visibility: visible;
    opacity: 0.9;
}

.kc-login-tooltip .kc-tooltip-text::after {
    content: " ";
    position: absolute;
    top: 15px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--eq-bg-alt) transparent transparent;
}

/* ── Recovery codes list ──────────────────────────────────── */
#kc-recovery-codes-list {
    columns: 2;
}

#certificate_subjectDN {
    overflow-wrap: break-word;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        grid-template-columns: 70% 30%;
    }
}

@media (max-width: 600px) {
    .pf-v5-c-login__container {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}