/* =========================================================================
   KEYCLOAK 26 (PATTERNFLY 5) CUSTOM THEME CSS
   =========================================================================
   This stylesheet overrides the native PatternFly 5 CSS variables and
   classes to inject the completely custom e-lucid orange branding into
   the Keycloak login, registration, and account interfaces.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. GLOBAL BACKGROUND
   ------------------------------------------------------------------------- */
/* Remove Keycloak's default gray background and force it to pure white */
.login-pf body {
    background: none;
    background-color: #ffffff;
}

/* -------------------------------------------------------------------------
   2. LOGIN BOX HEADER BORDER
   ------------------------------------------------------------------------- */
/* Adds the thick 4px orange horizontal stripe stretching across the very
   top of the white login box card */
.pf-v5-c-login__main-header {
    border-top: 4px solid #e27a36;
}

/* -------------------------------------------------------------------------
   3. PRIMARY ACTION BUTTONS (Sign In / Register)
   ------------------------------------------------------------------------- */
.pf-v5-c-button.pf-m-block {
    display: block;
    width: 100%;
    padding: 15px;
}

/* Overrides the native blue primary button with the e-lucid orange */
.pf-v5-c-button.pf-m-primary {
    background-color: #fb8c00;
    color: #ffffff;
}
.pf-v5-c-button.pf-m-primary:hover {
    background-color: #e27a36;
}

/* -------------------------------------------------------------------------
   4. SECONDARY ACTION BUTTONS (Admin Login)
   ------------------------------------------------------------------------- */
/* Styles secondary outline buttons (like Social Identity Providers) */
.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--after--BorderColor: #e27a36;
    background-color: #ffffff;
    color: #5e5e5e;
}

.pf-v5-c-button.pf-m-secondary:hover {
    background-color: #efefef;
}

/* Locks the hover border to orange instead of reverting to default blue */
.pf-v5-c-button.pf-m-secondary:hover::after,
.pf-v5-c-button.pf-m-secondary:focus::after {
    border-color: #e27a36 !important;
    border-width: 1px !important;
}

/* -------------------------------------------------------------------------
   5. ADMIN LOGIN SVG ICON COLOR
   ------------------------------------------------------------------------- */
/* Kills Keycloak's native CSS pixel filter that dynamically shifts icon colors to blue */
body #kc-social-providers svg:not(.google) {
    filter: none !important;
}
/* Explicitly targets the raw SVG shape data and paints it e-lucid orange */
body #kc-social-providers svg:not(.google) path {
    fill: #e27a36 !important;
}

/* -------------------------------------------------------------------------
   6. INPUT FIELD BASE STYLING (Email / Password Boxes)
   ------------------------------------------------------------------------- */
/* Paints the persistent, resting bottom-border of all text input boxes orange */
.pf-v5-c-form-control:after {
    border-block-end: 1px solid #e27a36;
}

/* -------------------------------------------------------------------------
   7. INPUT FIELD FOCUS STATES (When user clicks into a box)
   ------------------------------------------------------------------------- */
/* Aggressively destroys the native browser's thick black outline focus ring */
body .pf-v5-c-form-control,
body .pf-v5-c-form-control:focus,
body .pf-v5-c-form-control:active,
body .pf-v5-c-form-control:focus-within {
    outline: none !important;
    border-color: transparent !important;
    --pf-v5-c-form-control--focus--OutlineWidth: 0 !important;
    --pf-v5-c-form-control--active--BorderColor: transparent !important;
}
/* Destroys the implicit outline ring placed directly on the nested raw <input> field */
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control > :is(input, select, textarea):focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
/* Doubles the thickness of the bottom orange line to 2px when actively typing */
body .pf-v5-c-form-control:focus::after,
body .pf-v5-c-form-control:focus-within::after,
body .pf-v5-c-form-control:active::after {
    border-bottom: 2px solid #e27a36 !important;
}

/* -------------------------------------------------------------------------
   8. PASSWORD VISIBILITY TOGGLE (The "Eye" Box)
   ------------------------------------------------------------------------- */
/* Resets the box geometry to match standard sizing without curved corners */
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--BorderRadius: 0;
    --pf-v5-c-button--disabled--BackgroundColor: #bfbfbf;
    --pf-v5-c-button--after--BorderWidth: 1px;
    --pf-v5-c-button--after--BorderColor: #f0f0f0 #f0f0f0 #e27a36 #f0f0f0;
    background-color: #ffffff;
    color: #5e5e5e;
}
/* Prevents the eye button's thin 1px border from suddenly jumping to 2px
   thickness on mouse hover, which causes the layout to jitter */
.pf-v5-c-button.pf-m-control {
    --pf-v5-c-button--m-control--hover--after--BorderWidth: 1px !important;
    --pf-v5-c-button--m-control--focus--after--BorderWidth: 1px !important;
}
.pf-v5-c-button.pf-m-control:hover::after,
.pf-v5-c-button.pf-m-control:focus::after {
    border-width: 1px !important;
    border-color: #f0f0f0 #f0f0f0 #e27a36 #f0f0f0 !important;
}