/* Workbridge Jobs — Keycloak login/register theme
   Flat, minimal look: white page background, no card/border wrapper
   around the form — matches the "no card, white bg" direction rather
   than a boxed card floating on a dark background. */

:root {
    --wb-navy-900: #0f1f3d;
    --wb-primary: #1f3567;
    --wb-primary-dark: #16294f;
    --wb-accent: #b8862f;
    --wb-text: #1a1d24;
    --wb-text-muted: #5c6270;
    --wb-border: #e0e2e8;
    --wb-danger: #9b2226;
    --wb-danger-bg: #fbeceb;
    --wb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html, body {
    height: 100%;
    font-family: var(--wb-font) !important;
}
body#keycloak-bg {
    background: #fff !important;
}

/* Center the whole login unit (brand + form) on the white page. */
.pf-v5-c-login {
    min-height: 100vh !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box;
}
.pf-v5-c-login__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px;
    margin: 0 !important;
    width: min(400px, 100%) !important;
}

/* Brand header */
.pf-v5-c-login__header {
    width: 100%;
    text-align: center;
}
.pf-v5-c-login__header .pf-v5-c-brand {
    color: var(--wb-navy-900);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}
.pf-v5-c-login__header .pf-v5-c-brand strong { color: var(--wb-accent); font-weight: 800; }

/* No card — form sits flat on the white page. */
.pf-v5-c-login__main, .card-pf {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}
.pf-v5-c-login__main-header, .pf-v5-c-login__main-body {
    width: 100% !important;
    box-sizing: border-box !important;
    /* PatternFly's own base CSS puts 48px of left/right padding on
       main-body (measured via computed-style: 400px border-box width
       with 48px+48px padding = a 304px content area) — that's the real
       source of the password field/title being stuck at 304px, not a
       grid or flex sizing issue at all. Every child (form, title, the
       304px-wide divs) was correctly filling this element's content
       box; the box itself was just 96px narrower than it looked at a
       glance because border-box hides padding from the outer width.
       Remove the padding so the 400px container is only ever measured
       against the form/title's own true 100% width. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* main-header is display:grid in the base theme with an auto-sized
   column, confirmed via computed-style inspection (400px container,
   but the title inside measured only 288px) — force a single full-width
   column instead of fighting the grid's own auto sizing. */
.pf-v5-c-login__main-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
}

/* Headings */
#kc-page-title, .pf-v5-c-title, h1 {
    display: block !important;
    color: var(--wb-navy-900) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.01em;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
}

/* Labels */
.pf-v5-c-form__label-text, label {
    color: var(--wb-text) !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
}

/* Inputs. Keycloak's actual markup (verified against the rendered DOM,
   not assumed) wraps each <input> in a <span class="pf-v5-c-form-control">
   — the span carries the border/padding styling in the base theme, and
   the bare <input> inside has NO class of its own. Both need explicit
   block/100%-width treatment: the span defaults to inline-flex sized to
   its content, and the input needs to fill it. */
.pf-v5-c-form-control {
    display: block !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: 8px !important;
    padding: 11px 13px !important;
    box-shadow: none !important;
    transition: border-color .12s ease, box-shadow .12s ease;
    width: 100% !important;
    box-sizing: border-box !important;
}
.pf-v5-c-form-control input,
input[type="text"], input[type="password"], input[type="email"] {
    font-size: 0.95rem !important;
    font-family: var(--wb-font) !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}
.pf-v5-c-form__group {
    width: 100% !important;
}
/* Keeps the form block-level and full width within its container.
   (The actual 304px-vs-400px bug traced further up the tree, to
   48px of left/right padding PatternFly bakes into
   .pf-v5-c-login__main-body — see that rule's comment. This rule is
   still correct to keep, just not the fix for that specific bug.) */
form, #kc-form-login, .pf-v5-c-form {
    display: block !important;
    width: 100% !important;
}
.pf-v5-c-form-control:focus-within {
    border-color: var(--wb-primary) !important;
    box-shadow: 0 0 0 3px rgba(31, 53, 103, 0.12) !important;
}
.pf-v5-c-form-control input:focus {
    outline: none !important;
}

/* Primary button */
.pf-v5-c-button.pf-m-primary, #kc-login, input[type="submit"] {
    background: var(--wb-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 12px !important;
    width: 100%;
    transition: background-color .12s ease;
}
.pf-v5-c-button.pf-m-primary:hover, #kc-login:hover {
    background: var(--wb-primary-dark) !important;
}

/* Links (Forgot password?, Register) */
a, .pf-v5-c-login__main-footer-links a {
    color: var(--wb-primary) !important;
    font-weight: 600;
    text-decoration: none;
}
a:hover {
    color: var(--wb-primary-dark) !important;
    text-decoration: underline;
}

/* Register / "New user?" footer prompt */
#kc-registration, .pf-v5-c-login__main-footer-band {
    text-align: center;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--wb-border);
    color: var(--wb-text-muted);
    font-size: 0.9rem;
}

/* Error/alert messages */
.pf-v5-c-alert.pf-m-danger, .alert-error {
    background: var(--wb-danger-bg) !important;
    border-color: var(--wb-danger) !important;
    color: var(--wb-danger) !important;
    border-radius: 8px !important;
}

/* Checkbox (remember me, terms acceptance) */
input[type="checkbox"] { accent-color: var(--wb-primary); }

/* Every field (email AND password) is wrapped in a
   .pf-v5-c-input-group > .pf-v5-c-input-group__item, not the input
   sitting directly in .pf-v5-c-form__group — that wrapper needs the
   width/flex treatment too, or the input inside stays at its intrinsic
   auto width regardless of what's set on the input itself. */
.pf-v5-c-input-group {
    width: 100% !important;
    display: flex !important;
}
.pf-v5-c-input-group__item {
    flex: 0 0 auto;
}
.pf-v5-c-input-group__item.pf-m-fill {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}