/*
 * House & Kitchen Suppliers - Keycloak login/registration theme
 * Visual language mirrors the Spring application:
 * dark blue / white / black, with orange/red only for alerts.
 */

:root {
    --hks-navy: #102a43;
    --hks-navy-deep: #0b2239;
    --hks-navy-soft: #173b5e;
    --hks-blue: #1f4f7d;
    --hks-text: #1f2d3d;
    --hks-muted: #66788a;
    --hks-border: #dbe4ec;
    --hks-bg: #f4f7fa;
    --hks-white: #ffffff;
    --hks-orange: #d97706;
    --hks-red: #b42318;
    --hks-shadow: 0 24px 60px rgba(11, 34, 57, .14);
}

/* Remove the generic Keycloak background and establish the app shell. */
html,
body,
.login-pf,
.login-pf body,
.pf-v5-c-background-image,
.pf-v5-c-login {
    min-height: 100%;
    background: var(--hks-bg) !important;
    background-image: none !important;
}

body {
    color: var(--hks-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Desktop brand panel. */
body::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0 auto 0 0;
    width: min(38vw, 560px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
        var(--hks-navy-deep);
}

/* Large H&K brand statement without introducing extra template markup. */
body::after {
    content: "H&K\A House & Kitchen Suppliers\A\A Quality suppliers.\A Better spaces.";
    white-space: pre;
    position: fixed;
    z-index: 1;
    left: clamp(32px, 5vw, 76px);
    top: 50%;
    width: min(27vw, 360px);
    transform: translateY(-50%);
    color: #fff;
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.55;
    letter-spacing: .01em;
    font-weight: 500;
    pointer-events: none;
}

/* Make the first H&K line feel like the square brand mark. */
@supports (background-clip: text) {
    body::after {
        text-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
}

/* Keycloak v2 / PatternFly login container. */
.pf-v5-c-login__container,
.pf-c-login__container,
#kc-container,
.login-pf-page {
    position: relative;
    z-index: 2;
}

/* Keep the form on the right on desktop. */
.pf-v5-c-login__container,
.pf-c-login__container {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-left: min(38vw, 560px);
    width: calc(100% - min(38vw, 560px));
    max-width: none !important;
    min-height: 100vh;
    align-items: center;
    justify-items: center;
    padding: 48px clamp(28px, 6vw, 92px) !important;
}

/* Legacy/fallback Keycloak wrapper support. */
.login-pf-page {
    padding: 48px clamp(28px, 6vw, 92px) !important;
    margin-left: min(38vw, 560px);
    width: calc(100% - min(38vw, 560px));
}

/* Hide the old standalone wordmark; the app-style brand panel replaces it. */
#kc-header,
.pf-v5-c-login__header,
.pf-c-login__header {
    display: none !important;
}

/* Registration/login card. */
#kc-content,
#kc-content-wrapper,
.card-pf,
.pf-v5-c-login__main,
.pf-c-login__main {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
}

.card-pf,
.pf-v5-c-login__main,
.pf-c-login__main {
    background: var(--hks-white) !important;
    border: 1px solid var(--hks-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--hks-shadow) !important;
    overflow: hidden;
}

/* PatternFly main body spacing. */
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-footer,
.pf-c-login__main-body,
.pf-c-login__main-header,
.pf-c-login__main-footer,
#kc-content-wrapper {
    padding-left: clamp(24px, 4vw, 46px) !important;
    padding-right: clamp(24px, 4vw, 46px) !important;
}

.pf-v5-c-login__main-header,
.pf-c-login__main-header {
    padding-top: 38px !important;
    padding-bottom: 12px !important;
}

.pf-v5-c-login__main-body,
.pf-c-login__main-body {
    padding-top: 24px !important;
    padding-bottom: 38px !important;
}

/* Titles. */
#kc-page-title,
h1,
.pf-v5-c-title,
.pf-c-title {
    color: var(--hks-navy-deep) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
}

#kc-page-title {
    font-size: clamp(1.7rem, 3vw, 2.15rem) !important;
    margin-bottom: 8px !important;
}

/* Labels and required markers. */
label,
.pf-v5-c-form__label-text,
.pf-c-form__label-text {
    color: var(--hks-text) !important;
    font-weight: 650 !important;
}

.required,
.pf-v5-c-form__label-required,
.pf-c-form__label-required {
    color: var(--hks-red) !important;
}

/* Inputs. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea,
.pf-v5-c-form-control,
.pf-c-form-control {
    min-height: 46px;
    border: 1px solid #b9c8d5 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--hks-text) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus,
.pf-v5-c-form-control:focus-within,
.pf-c-form-control:focus-within {
    border-color: var(--hks-navy) !important;
    box-shadow: 0 0 0 3px rgba(16, 42, 67, .12) !important;
    outline: none !important;
}

/* Primary actions = dark blue. Never green. */
input[type="submit"],
button[type="submit"],
.btn-primary,
.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
    min-height: 46px;
    border: 1px solid var(--hks-navy) !important;
    border-radius: 8px !important;
    background: var(--hks-navy) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover,
.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: var(--hks-navy-deep) !important;
    border-color: var(--hks-navy-deep) !important;
}

/* Links. */
a {
    color: var(--hks-blue) !important;
    font-weight: 600;
}

a:hover {
    color: var(--hks-navy-deep) !important;
}

/* Neutral helper text. */
#kc-info,
#kc-info-wrapper,
.instruction,
.subtitle,
.pf-v5-c-form__helper-text,
.pf-c-form__helper-text {
    color: var(--hks-muted) !important;
}

/* Alerts: orange for warning, red for error. */
.alert-warning,
.pf-v5-c-alert.pf-m-warning,
.pf-c-alert.pf-m-warning {
    background: #fff7ed !important;
    border-color: var(--hks-orange) !important;
    color: #8a4b08 !important;
}

.alert-error,
.alert-danger,
.pf-v5-c-alert.pf-m-danger,
.pf-c-alert.pf-m-danger {
    background: #fff1f0 !important;
    border-color: var(--hks-red) !important;
    color: #8f1d18 !important;
}

/* Success is kept neutral/dark-blue rather than green. */
.alert-success,
.pf-v5-c-alert.pf-m-success,
.pf-c-alert.pf-m-success {
    background: #eef4f8 !important;
    border-color: var(--hks-navy-soft) !important;
    color: var(--hks-navy-deep) !important;
}

/* Spacing between dynamic Keycloak user-profile fields. */
.form-group,
.pf-v5-c-form__group,
.pf-c-form__group {
    margin-bottom: 18px !important;
}

/* Password reveal/control icons stay understated. */
.pf-v5-c-input-group,
.pf-c-input-group {
    border-radius: 8px !important;
}

/* Mobile: brand becomes a compact top masthead, form fills the viewport cleanly. */
@media (max-width: 768px) {
    html,
    body {
        background: #fff !important;
    }

    body::before {
        position: absolute;
        inset: 0 0 auto 0;
        width: 100%;
        height: 156px;
        background: var(--hks-navy-deep);
    }

    body::after {
        content: "H&K\A House & Kitchen Suppliers";
        left: 24px;
        top: 36px;
        width: calc(100% - 48px);
        transform: none;
        font-size: 15px;
        line-height: 1.45;
    }

    .pf-v5-c-login__container,
    .pf-c-login__container,
    .login-pf-page {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 100vh;
        padding: 118px 14px 28px !important;
        align-items: start;
    }

    #kc-content,
    #kc-content-wrapper,
    .card-pf,
    .pf-v5-c-login__main,
    .pf-c-login__main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .card-pf,
    .pf-v5-c-login__main,
    .pf-c-login__main {
        border-radius: 14px !important;
        box-shadow: 0 14px 34px rgba(11, 34, 57, .12) !important;
    }

    .pf-v5-c-login__main-body,
    .pf-v5-c-login__main-header,
    .pf-v5-c-login__main-footer,
    .pf-c-login__main-body,
    .pf-c-login__main-header,
    .pf-c-login__main-footer,
    #kc-content-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    select,
    textarea,
    .pf-v5-c-form-control,
    .pf-c-form-control {
        min-height: 50px;
        font-size: 16px !important; /* prevents iOS form zoom */
    }

    input[type="submit"],
    button[type="submit"],
    .btn-primary,
    .pf-v5-c-button.pf-m-primary,
    .pf-c-button.pf-m-primary {
        min-height: 50px;
        width: 100%;
    }
}

/* Small phones. */
@media (max-width: 390px) {
    body::before {
        height: 142px;
    }

    body::after {
        top: 30px;
        left: 20px;
    }

    .pf-v5-c-login__container,
    .pf-c-login__container,
    .login-pf-page {
        padding: 108px 10px 20px !important;
    }
}

/* Registration submit feedback: explicit, touch-safe processing state. */
#kc-register-form[aria-busy="true"] input[type="submit"],
#kc-register-form[aria-busy="true"] button[type="submit"],
#kc-register-form input[type="submit"].hks-submit-pending,
#kc-register-form button[type="submit"].hks-submit-pending {
    cursor: wait !important;
    opacity: .72 !important;
    pointer-events: none !important;
}

#kc-register-form input[type="submit"]:disabled,
#kc-register-form button[type="submit"]:disabled {
    cursor: wait !important;
    opacity: .72 !important;
    pointer-events: none !important;
}