/* ==========================================================================
   Notilyze brand theme for Keycloak (keycloak.v2 login theme)
   Matches src/SWD.Web.Client's NACI look & feel: light gray page background,
   white card, yellow primary buttons, yellow focus ring, Poppins typeface.
   Verified against the compiled keycloak.v2 / PatternFly v5 CSS actually
   served by this repo's Keycloak 26.7.0 container.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* NACI palette (src/SWD.Web.Client/Theme/AppTheme.cs) */
    --naci-bg: #F9F9F9;
    --naci-surface: #FFFFFF;
    --naci-primary: #ffcd00;
    --naci-primary-dark: #d9ae00;
    --naci-primary-light: #ffe033;
    --naci-text: #3E4C59;
    --naci-heading: #1F2933;
    --naci-text-muted: #676D80;
    --naci-border: #E3E6EC;
    --naci-disabled-bg: #F3F4F6;
    --naci-disabled-text: #E3E6EC;
    --naci-error: #D32F2F;

    /* Swap PatternFly's global font stack for Poppins, everywhere */
    --pf-v5-global--FontFamily--text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pf-v5-global--FontFamily--heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* keycloak.v2 ships a dark background image + blue card accent by default (see
       login/keycloak.v2/css/styles.css) - neutralize both. */
    --keycloak-bg-logo-url: none;
    --keycloak-card-top-color: transparent;
}

html, body {
    font-family: var(--pf-v5-global--FontFamily--text);
}

/* ---------- Page background (overrides .login-pf body's dark bg image) ---------- */
html.login-pf body {
    background: var(--naci-bg) !important;
    background-image: none !important;
}

/* ---------- Card ---------- */
.pf-v5-c-login__main {
    --pf-v5-c-login__main--BackgroundColor: var(--naci-surface);
    --pf-v5-c-login__main--BoxShadow: 0 10px 40px -10px rgba(28, 35, 51, 0.15), 0 4px 6px -2px rgba(28, 35, 51, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.pf-v5-c-login__main-header {
    border-top: none;
}

/* ---------- Logo (injected via login/messages/messages_en.properties: loginTitleHtml) ----------
   url.resourcesPath is not available inside a .properties bundle, so the logo is applied as a
   background-image via a path relative to this stylesheet - the same technique keycloak.v2's own
   theme uses for div.kc-logo-text. */
#kc-header-wrapper {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0;
    line-height: 0;
}

#kc-header-wrapper .notilyze-logo {
    display: inline-block;
    width: 260px;
    height: 73px;
    background-image: url('../img/logo.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Force a single, centered column (logo above card) instead of keycloak.v2's
   wide-screen two-column layout, to match NACI's centered-card convention. */
.pf-v5-c-login__container {
    grid-template-columns: minmax(auto, 30rem) !important;
    grid-template-areas: "header" "main" "footer" !important;
    justify-items: center;
}

/* ---------- Headings & body text ---------- */
.pf-v5-c-title,
#kc-page-title {
    color: var(--naci-heading);
    font-weight: 600;
}

.pf-v5-c-login__main-body,
.pf-v5-c-form__label-text,
#kc-content-wrapper {
    color: var(--naci-text);
}

.pf-v5-c-login__main-header-desc,
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text {
    color: var(--naci-text-muted);
}

/* ---------- Links (register / try-another-way / back-to-login etc.) ---------- */
#kc-content-wrapper a,
.pf-v5-c-login__main a,
.pf-v5-c-login__main-footer a {
    color: var(--naci-text);
    font-weight: 500;
    text-decoration: underline;
}

#kc-content-wrapper a:hover,
.pf-v5-c-login__main a:hover,
.pf-v5-c-login__main-footer a:hover {
    color: var(--naci-heading);
}

/* ---------- Form controls (username/password/OTP/select/textarea) ---------- */
.pf-v5-c-form-control {
    /* keycloak.v2 auto-switches to a dark PatternFly palette on
       prefers-color-scheme:dark (html.pf-v5-theme-dark) - pin these explicitly
       so inputs always render NACI's light look regardless of OS theme. */
    --pf-v5-c-form-control--BackgroundColor: var(--naci-surface);
    --pf-v5-c-form-control--Color: var(--naci-text);
    --pf-v5-c-form-control--before--BorderTopColor: var(--naci-border);
    --pf-v5-c-form-control--before--BorderRightColor: var(--naci-border);
    --pf-v5-c-form-control--before--BorderBottomColor: var(--naci-border);
    --pf-v5-c-form-control--before--BorderLeftColor: var(--naci-border);
    /* keycloak.v2's own hover/focus state is a Material-style bottom-edge accent line
       (this ::after pseudo has no border-radius, unlike ::before below, so it draws a
       flat straight line that pokes out past the box's rounded corners) - our own
       focus/hover indicators are handled via ::before's full border instead, so keep
       this one matching the plain default border always instead of accenting it. */
    --pf-v5-c-form-control--after--BorderBottomColor: var(--naci-border);
    --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--naci-border);
    --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--naci-border);
    --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--naci-disabled-bg);
    --pf-v5-c-form-control--m-disabled--Color: var(--naci-disabled-text);
    border-radius: 8px;
    transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pf-v5-c-form-control.pf-m-readonly {
    --pf-v5-c-form-control--BackgroundColor: var(--naci-disabled-bg);
    --pf-v5-c-form-control--Color: var(--naci-text-muted);
}

.pf-v5-c-form-control:before {
    border-radius: 8px;
    border-style: solid;
}

/* ::after only ever draws a bottom border (border-block-end, upstream PatternFly
   rule) - top/right/left widths are intentionally left unset (invisible) there, so
   only add radius here, NOT border-style: that would flip those unset sides to the
   browser's default (3px, currentColor), drawing three unwanted extra borders. */
.pf-v5-c-form-control:after {
    border-radius: 8px;
}

/* Suppress the browser's own native focus outline on the actual <input>/<select>/
   <textarea> - without this it renders alongside (not instead of) our custom
   yellow/dark border above, showing as two overlapping outlines. */
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control select:focus,
.pf-v5-c-form-control textarea:focus {
    outline: none;
}

/* The yellow focus ring the user asked for, on whichever control has focus.
   Turn the control's own border fully yellow (not a separate box-shadow ring
   layered on top of the still-gray border - that read as two overlapping
   borders instead of one clean yellow one). */
.pf-v5-c-form-control:focus-within {
    --pf-v5-c-form-control--before--BorderTopColor: var(--naci-primary);
    --pf-v5-c-form-control--before--BorderRightColor: var(--naci-primary);
    --pf-v5-c-form-control--before--BorderLeftColor: var(--naci-primary);
    --pf-v5-c-form-control--before--BorderTopWidth: 2px;
    --pf-v5-c-form-control--before--BorderRightWidth: 2px;
    --pf-v5-c-form-control--before--BorderLeftWidth: 2px;
    --pf-v5-c-form-control--after--BorderBottomColor: var(--naci-primary);
}

/* ...except for read-only/disabled controls (e.g. the locked username field
   shown again on the password step) - focusing those should show a neutral
   dark border, not the "you can edit this" yellow one. */
.pf-v5-c-form-control.pf-m-readonly:focus-within,
.pf-v5-c-form-control.pf-m-disabled:focus-within {
    --pf-v5-c-form-control--before--BorderTopColor: var(--naci-text-muted);
    --pf-v5-c-form-control--before--BorderRightColor: var(--naci-text-muted);
    --pf-v5-c-form-control--before--BorderLeftColor: var(--naci-text-muted);
    --pf-v5-c-form-control--before--BorderTopWidth: 1px;
    --pf-v5-c-form-control--before--BorderRightWidth: 1px;
    --pf-v5-c-form-control--before--BorderLeftWidth: 1px;
    --pf-v5-c-form-control--after--BorderBottomColor: var(--naci-text-muted);
}

/* ---------- Checkboxes / radios (remember me, etc.) ---------- */
.pf-v5-c-check__input {
    accent-color: var(--naci-primary);
}

/* ---------- Buttons ---------- */
.pf-v5-c-button {
    border-radius: 9999px;
    font-weight: 600;
    font-family: var(--pf-v5-global--FontFamily--text);
}

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--naci-primary);
    --pf-v5-c-button--m-primary--Color: var(--naci-heading);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--naci-primary-dark);
    --pf-v5-c-button--m-primary--hover--Color: var(--naci-heading);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--naci-primary-dark);
    --pf-v5-c-button--m-primary--focus--Color: var(--naci-heading);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--naci-primary-dark);
    --pf-v5-c-button--m-primary--active--Color: var(--naci-heading);
    border: none;
}

.pf-v5-c-button.pf-m-primary:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--naci-heading);
    outline: none;
}

.pf-v5-c-button:disabled {
    --pf-v5-c-button--disabled--BackgroundColor: var(--naci-disabled-bg);
    --pf-v5-c-button--disabled--Color: var(--naci-disabled-text);
}

/* Secondary/control buttons (e.g. "Restart login", "Try another way", password
   visibility toggle) - NACI's outlined-button look */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-control {
    background-color: #F5F6FA;
    border: 1px solid #D0D5DD;
    color: var(--naci-text);
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-control:hover {
    background-color: #ECEFF4;
    border-color: #B0B7C3;
}

.pf-v5-c-button.pf-m-control svg,
.pf-v5-c-button.pf-m-control i {
    color: var(--naci-text);
}

/* pf-m-control buttons draw their own decorative ::after border (independent of
   the plain `border` above, defaulting to a dark PatternFly gray on 3 sides and
   a different gray on the 4th) - suppress it, our own border above is enough. */
.pf-v5-c-button.pf-m-control:after {
    content: none;
}

/* Text input + adjacent action button (username/"Restart login", password/show-
   password) share a .pf-v5-c-input-group flex row that PatternFly merges into one
   seamless control via a -1px overlap margin by default - split them apart with a
   visible 16px gap instead, matching NACI's spacing between adjacent controls. */
.pf-v5-c-input-group {
    gap: 16px;
}

.pf-v5-c-input-group__item {
    margin-left: 0 !important;
}

/* keycloak.v2's dark palette draws a 1px divider border between input-group
   children (:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + *) - meant for
   the merged look we just split apart with the 16px gap above, so under a dark
   OS/browser theme it now shows as a stray dark line next to the button. Kill it. */
.pf-v5-c-input-group > * + * {
    border-inline-start: none !important;
}

/* ---------- The action link on Keycloak's info page ---------- */

/* The "Perform the following action(s)" page an onboarding e-mail leads to.
   Measured in a headless browser on 2026-07-30 against Keycloak 26.7: keycloak.v2
   puts a single anchor in that page's body and gives it no class and no id at all,
   so the primary-button rules above cannot reach it and the same recipe has to be
   spelled out by hand here.

   An id, because the only other rule that matches that anchor is the
   .pf-v5-c-login__main a link treatment further up - a class loses to an id
   wherever the two sit in this file, so no !important is needed. The generic
   a:focus-visible ring below loses the same way, which is why its 4px radius never
   rounds this off.

   No .ftl template is copied into this theme, so a Keycloak upgrade leaves nothing
   here to re-check but the id itself, and only a browser can check that. */
#kc-info-message a {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 24px;
    border-radius: 9999px;
    background-color: var(--naci-primary);
    color: var(--naci-heading);
    font-weight: 600;
    text-decoration: none;
}

#kc-info-message a:hover,
#kc-info-message a:focus {
    background-color: var(--naci-primary-dark);
    color: var(--naci-heading);
    text-decoration: none;
}

#kc-info-message a:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--naci-heading);
    outline: none;
}

/* ---------- Generic focus-visible ring for anything else focusable ---------- */
a:focus-visible,
.pf-v5-c-check__input:focus-visible {
    outline: 2px solid var(--naci-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Errors / alerts ---------- */
#kc-error-message .instruction,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-form-control.pf-m-error {
    color: var(--naci-error);
}

.pf-v5-c-alert.pf-m-danger {
    --pf-v5-c-alert--BorderTopColor: var(--naci-error);
}