/*
 * Barasti login theme — Keycloak overrides only.
 *
 * Load order, set by theme.properties:
 *   1. PatternFly v5        (inherited from keycloak.v2)
 *   2. keycloak.v2 styles   (inherited)
 *   3. app.css              GENERATED — the app's own compiled stylesheet
 *   4. this file            the Keycloak-specific corrections
 *
 * ## What this file no longer does
 *
 * It used to carry a hand-copied brand palette, and a hand-written site header and footer. Both
 * are gone. `app.css` is the application's real stylesheet, fetched from the running app by
 * build-chrome.mjs, so `--color-accent` here is the same declaration the landing page uses. There
 * is nothing left to drift.
 *
 * That leaves only what is genuinely Keycloak's: PatternFly markup we do not own, restyled to sit
 * inside the site's chrome. Every colour below is an app token.
 *
 * Two rules from AGENTS.md §7 still apply and are not relaxed because this is a vendor page:
 *   - Logical properties only. Arabic is the default locale, so RTL is the common path.
 *   - Never letter-space Arabic; tracking is scoped to :lang(en).
 */

:root {
    /*
     * The one value the app does not define. Nothing in the product surfaces a destructive state
     * yet, so there is no token to borrow; a login form has field errors from day one. Chosen in
     * the brand's warm family rather than a stock red, and measured on both grounds.
     */
    --barasti-danger: #9c4a3c;
}

:root:is(.dark) {
    --barasti-danger: #e0958a;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --barasti-danger: #e0958a;
    }
}

/* ---- typeface: Cairo everywhere ------------------------------------------ */

/*
 * app.css ships the @font-face for Cairo, but the --font-cairo variable it relies on is declared
 * on a hashed next/font class that only exists on the app's own <html>. Here nothing defines it,
 * so --font-sans is invalid and PatternFly's RedHat stack wins. Name the family directly, and
 * repoint PatternFly's font variables so its own components follow.
 */
:root {
    /*
     * Define the variable app.css expects. Without it, app.css's `:lang(ar) { font-family:
     * var(--font-cairo), … }` is invalid at computed-value time and the whole Arabic page falls
     * back to the browser default (Times New Roman) — and, being a :lang() rule, it also outranks
     * the element selectors below.
     */
    --font-cairo: Cairo, "Cairo Fallback";
    --pf-v5-global--FontFamily--text: Cairo, "Cairo Fallback", ui-sans-serif, system-ui, sans-serif;
    --pf-v5-global--FontFamily--heading: Cairo, "Cairo Fallback", ui-sans-serif, system-ui, sans-serif;
    --pf-v5-global--FontFamily--sans-serif: Cairo, "Cairo Fallback", ui-sans-serif, system-ui, sans-serif;
    --pf-v5-global--FontFamily--monospace: Cairo, "Cairo Fallback", ui-sans-serif, system-ui, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: Cairo, "Cairo Fallback", ui-sans-serif, system-ui, sans-serif;
}

/* ---- page layout: site header, card centred, site footer --------------- */

/*
 * template.ftl renders the real site header and footer as siblings of PatternFly's login block,
 * so the page is three rows: chrome, content, chrome.
 *
 * PatternFly gives .pf-v5-c-login `min-height: 100vh`, which was right when it was the only thing
 * on the page and is wrong now — login block plus header plus footer would exceed the viewport and
 * scroll on every visit.
 */
body#keycloak-bg {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    background: var(--color-surface);
    color: var(--color-ink);
}

.pf-v5-c-login {
    /*
     * `1 0 auto` — grow into spare space, but NEVER shrink. `1 1 auto` with a zero minimum let
     * this collapse to 48px around a 499px card the moment the page grew taller than the viewport,
     * and the card then painted straight through the footer.
     */
    flex: 1 0 auto;
    min-block-size: auto;
    /*
     * Auto margins on the container, NOT align-items: center here. Both centre a short card
     * identically; they differ when the card outgrows the space — which it does the moment
     * Keycloak stacks two field errors. Flex centring overflows in both directions and scrolls the
     * first error off above the origin, unreachable. Auto margins collapse to zero and the page
     * simply scrolls.
     */
    align-items: flex-start;
}

.pf-v5-c-login__container {
    margin-block: auto;
    max-inline-size: 30rem;
}

/*
 * PatternFly's own brand slot above the card. The site header carries the logo now, and two brand
 * lockups on one short page is one too many.
 *
 * The loginTitleHtml message override stays regardless: it is what the browser tab falls back to,
 * and without it that reads "Barasti Platform (Production)".
 */
#kc-header,
.pf-v5-c-login__header {
    display: none;
}

/* ---- language: the app decides, not this page -------------------------- */

/*
 * Keycloak's own locale dropdown, removed. The site header already carries a language control, and
 * two on one page that can disagree is worse than either alone.
 *
 * The header's control switches Keycloak's locale rather than the app's — build-chrome.mjs rewrites
 * those two hrefs to `locale.supported[].url`, which re-renders this page in the other language and
 * stays inside the authentication flow. The app's own /ar link would abandon a half-finished login.
 *
 * display:none rather than visually-hidden: a control that is invisible but still focusable is
 * worse than either, because a keyboard user tabs into a select they cannot see.
 */
.pf-v5-c-login__main-header-utilities {
    display: none;
}

/* ---- the card ---------------------------------------------------------- */

.pf-v5-c-login__main {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-hairline);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(13, 27, 42, 0.05), 0 12px 32px -18px rgba(13, 27, 42, 0.28);
}

/*
 * keycloak.v2 paints a 4px accent rule across the top of the card in its own blue — found by
 * inspecting the rendered page, not by reading the parent CSS, because it comes from a PatternFly
 * custom property rather than a literal. It is the most Keycloak-looking element on the page.
 *
 * Recoloured, not removed: it anchors the card, and gold as a fill carries no text so it owes no
 * contrast ratio.
 */
.pf-v5-c-login__main-header {
    border-block-start-color: var(--color-accent);
}

#kc-page-title {
    color: var(--color-ink-strong);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}

/* ---- form -------------------------------------------------------------- */

.pf-v5-c-form__label-text {
    color: var(--color-ink-strong);
    font-weight: 500;
}

/*
 * Fields, matching the site's own `.field-input`: one 12px-radius box, one hairline border, no
 * underline. Values come from app.css, so they track the landing page.
 *
 * The first attempt put a border on the wrapper AND the inner <input> AND recoloured PatternFly's
 * `::after` underline gold. That is three stacked lines on one field, which is what made the
 * inputs look unfinished. PatternFly's structure is the trap: `.pf-v5-c-form-control` is a
 * wrapper SPAN around a bare <input>, not the input itself, so a rule naming both draws twice.
 */
.pf-v5-c-form-control,
.pf-v5-c-input-group {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-hairline-strong);
    border-radius: var(--radius-xl);
    color: var(--color-ink-strong);
    /* 44px minimum touch target, AGENTS.md §7. */
    min-block-size: 44px;
}

/*
 * A password field is `.pf-v5-c-input-group` holding the field and the reveal button as two
 * siblings — which PatternFly renders as two separate boxes with a gap. Read as "there is a
 * mystery square next to the password". The group owns the border so the pair reads as one field
 * with a control inside it, and the members give theirs up.
 */
.pf-v5-c-input-group {
    overflow: hidden;
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pf-v5-c-form-control > input,
input.pf-v5-c-form-control {
    border: 0;
    background: transparent;
    color: var(--color-ink-strong);
    /* Matches .field-input's 14px inline padding. */
    padding-inline: 0.875rem;
    min-block-size: 42px;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
    outline: none;
}

/* PatternFly's own focus underline, in Keycloak blue. Removed rather than recoloured — the field
   now carries a single ring, and an underline as well was the third line. */
.pf-v5-c-form-control::after {
    content: none;
}

/* The ring goes on whichever element owns the border, never on both. */
.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
    border-color: var(--color-accent);
    /* A ring rather than a border-width change, so the field does not shift on focus. */
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
    outline: none;
}

/* ---- primary action ---------------------------------------------------- */

/*
 * Navy on gold, never white. #0d1b2a on #c89d4a is 6.94:1 measured; white on the same gold is
 * 2.5:1 and fails WCAG AA outright. This is the most-copied mistake in the brand.
 */
.pf-v5-c-button.pf-m-primary,
#kc-login {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    font-weight: 600;
    min-block-size: 44px;
}

:lang(en) .pf-v5-c-button.pf-m-primary,
:lang(en) #kc-login {
    letter-spacing: 0.01em;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
}

.pf-v5-c-button.pf-m-primary:focus-visible,
#kc-login:focus-visible {
    outline: 2px solid var(--color-ink-strong);
    outline-offset: 2px;
}

/* ---- secondary controls ------------------------------------------------ */

/*
 * PatternFly hardcodes rgb(21, 21, 21) on these and paints their grounds white — invisible on the
 * dark palette. The password-reveal button and the "remember me" label both disappeared into the
 * card until this block existed. Found by inspecting computed styles; none of it is visible from
 * the markup.
 */
.pf-v5-c-button.pf-m-control {
    background: var(--color-surface-raised);
    color: var(--color-ink-strong);
    border: 1px solid var(--color-hairline);
    min-block-size: 44px;
}

.pf-v5-c-button.pf-m-control:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/*
 * The password-reveal icon.
 *
 * Keycloak renders it as `<i class="fa-eye fas">` — a **Font Awesome icon font**, not an SVG. When
 * that font fails to load the glyph falls back to tofu, and what the user sees beside the password
 * field is an unexplained empty square. I first wrote this off as an artifact of previewing; it is
 * not, it is a real dependency on a webfont loading before a control becomes legible.
 *
 * Replaced with a mask, so the shape is part of this stylesheet and cannot fail to arrive. `mask`
 * rather than `background-image` because the fill then comes from `currentColor`, which keeps the
 * icon correct in both palettes and in forced-colours mode — a data-URI SVG cannot read a token.
 */
.pf-v5-c-button.pf-m-control i.fas,
.pf-v5-c-button.pf-m-control i.far {
    /* Silences the font glyph. Belt and braces with the mask below: if masks were unsupported the
       result is a blank button rather than tofu, which is the better failure. */
    font-size: 0;
    display: block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    background-color: var(--color-ink-muted);
    -webkit-mask: var(--barasti-eye) center / contain no-repeat;
    mask: var(--barasti-eye) center / contain no-repeat;
}

.pf-v5-c-button.pf-m-control:hover i.fas,
.pf-v5-c-button.pf-m-control:hover i.far {
    background-color: var(--color-ink-strong);
}

/* Stroke weight 1.6 and round caps, matching the site header's own theme-toggle icons. */
.pf-v5-c-button.pf-m-control i.fa-eye {
    --barasti-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.pf-v5-c-button.pf-m-control i.fa-eye-slash {
    --barasti-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3 21 21'/%3E%3C/svg%3E");
}

.pf-v5-c-check__label,
label.pf-v5-c-check__label {
    color: var(--color-ink);
}

/* Lets the browser paint the tick in brand gold rather than its own blue. */
.pf-v5-c-check__input,
.pf-v5-c-login__main input[type='checkbox'] {
    accent-color: var(--color-accent);
}

/* ---- links inside the card --------------------------------------------- */

.pf-v5-c-login__main a {
    color: var(--color-accent-text);
    text-underline-offset: 2px;
}

.pf-v5-c-login__main a:hover {
    color: var(--color-accent-hover);
}

.pf-v5-c-login__main a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

#kc-info,
.pf-v5-c-login__main-footer-band {
    color: var(--color-ink-muted);
    border-block-start: 1px solid var(--color-hairline);
    background: transparent;
}

/* ---- errors ------------------------------------------------------------ */

/*
 * Colour is not the only signal — PatternFly supplies an icon and the message says what is wrong,
 * so a reader who cannot distinguish the red still gets both.
 */
#input-error-container-username,
#input-error-container-password,
.pf-v5-c-form__helper-text.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title {
    color: var(--barasti-danger);
}

/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}