/*
 * The authentication screens' legacy LOOK — decision D12, task 1.7.
 *
 * Every rule below is a rule from `../UniHalls/public/css/portal.css`, the block its
 * author labelled "NEW DEDIGN LOGIN" (lines 552-672), plus the `fadeInDown` entrance
 * `animate.css` gave `.login-container`. What is NOT here is legacy's way of getting
 * there: Bootstrap 3's grid, font-awesome, animate.css, toastr and jQuery 3.1.1 are how
 * a 2017 template achieved this appearance, not the appearance itself.
 *
 * # Why new class names rather than legacy's
 *
 * Legacy's markup is a Bootstrap 3 grid — `.login-container > .left + .right`, with
 * `.col-md-8.col-md-offset-2`, `.col-xs-6` and `.ibox-content` inside. Reusing those
 * names here would import Bootstrap 3's column semantics into a Bootstrap 5 page and
 * collide with the theme's own utilities. The names are `auth-legacy-*`; the geometry,
 * colours and type sizes are legacy's to the pixel.
 *
 * # Three legacy declarations are deliberately not carried
 *
 *   - `!important` on all 53 of them. Legacy needed it to beat the theme it was
 *     patching. This sheet uses its own class names, which nothing else styles, so it
 *     needs no weight to win.
 *   - `.login-container .right { animation-name: right; ... }`. There is no
 *     `@keyframes right` anywhere in legacy's stylesheets — the declaration animates
 *     nothing and has never rendered. Porting a no-op would be porting a bug.
 *   - `.login-container .right { overflow: hidden }` on a `height: 100vh` split. Legacy
 *     had three short forms behind this look; this project has ten screens, and
 *     `register` alone is nine fields. Clipping them below the fold is not a look, it is
 *     a form nobody can submit — so the panel scrolls instead. At the height legacy
 *     actually rendered at, the two are indistinguishable.
 *
 * The `uhu` branch of the legacy templates — `.passwordBox` over a photographic background,
 * the mark above the box — used to be missing here, on the grounds that per-location
 * branding needs a location and none is resolved before login. **D30's amendment settled
 * that the other way**: the hostname resolves it, as legacy's own `SecurityController:39`
 * does, and a visitor arriving on the U Residence host is meant to see a different page.
 * Both arms are in this sheet — this one first, the `uhu` one under its own banner at the
 * foot of the file — and `App\Service\LoginBranding` picks between them.
 *
 * **What the `uhu` arm is, since 2026-09-10, is no longer legacy's.** The operator ruled
 * that U Residence wears THIS PROJECT's own theme, exactly as `8ba9a39` shipped it, with
 * legacy supplying nothing but the primary button's colour. So this sheet is the split and
 * one rule: the banner at the foot says why there is no more than that, and everything above
 * it is legacy's to the pixel.
 */

/* `.login-container` */
.auth-legacy {
    display: flex;
    height: 100vh;

    /* `animated fadeInDown`, animate.css: `.animated` is 1s, fill-mode both. */
    animation: auth-legacy-fade-in-down 1s both;
}

@keyframes auth-legacy-fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* `.login-container .left` — the green panel. Hidden below 992px, see the query below. */
.auth-legacy-panel {
    flex: 1;
    background-color: #009641;
    background-image: url("../images/auth/login-background-JIoarC0.png");
    background-repeat: repeat;
}

/*
 * `.login-container .right` — the white panel, with legacy's own `justify-content:
 * center`. `position: relative` and the bottom padding are the two additions, and they
 * are the same fix: legacy's logo band is `position: absolute` with no positioned
 * ancestor, so it resolves against the viewport and only lands on the panel because its
 * static position puts it there. Anchoring it to the panel says what was meant, and
 * reserving its height below the form stops a nine-field screen like `register` running
 * underneath it — which legacy avoids only by clipping the overflow.
 *
 * Body text is INSPINIA's `#676a6c`, not this project's. It is the colour every
 * unstyled paragraph and label on these screens inherits.
 */
.auth-legacy-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 49%;
    padding-bottom: 156px;
    overflow-y: auto;
    color: #676a6c;
    background: #fff;
}

/*
 * Bootstrap 3's link colours, which is what these screens have always used: `#337ab7`,
 * `#23527c` on hover, and no underline — `style.css` removes the one Bootstrap adds.
 */
.auth-legacy-main a {
    color: #337ab7;
    text-decoration: none;
}

.auth-legacy-main a:hover,
.auth-legacy-main a:focus {
    color: #23527c;
    text-decoration: none;
}

/*
 * `.ibox-content`, whose padding is INSPINIA's `15px 20px 20px 20px` and whose border
 * legacy transparents away inside `.login-container`.
 *
 * The width is legacy's `.col-md-8.col-md-offset-2` — the Bootstrap 3 column the form
 * actually sits in — not a pixel cap. It is the difference between a 60px heading that
 * fills two thirds of the panel, which is what legacy shows, and the same 60px heading
 * crammed into a narrow column, which is what a `max-width` produced and what made every
 * size on the page read as oversized.
 */
.auth-legacy-form {
    width: 66.66667%;
    /* 15px of Bootstrap 3 column gutter either side, then `.ibox-content`'s own 20px. */
    padding: 15px 35px 20px;
    /* `.m-t-lg`, the class on legacy's column. The panel's flex centring does the rest. */
    margin: 30px auto 0;
    border-color: transparent;
}

/*
 * `.login-container h1` at `.login-container .right h1`'s 60px. The rest is INSPINIA's,
 * and it is the half that was wrong: `style.css` sets **`h1 { font-weight: 100 }`** and
 * the login heading's `.font-bold` class lifts it to **600, not 700** — bold there means
 * semibold. Bootstrap 3 supplies `line-height: 1.1` and `.ibox-content h1` the 5px top
 * margin; both matter at 60px, where the theme's own line-height is half a heading out.
 */
.auth-legacy-title {
    margin: 5px 0 10px;
    font-size: 60px;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
}

/*
 * The seven screens legacy never had — 2FA, the OTP steps, registration, the expired
 * password, the lock screen — keep their own headings (D12: "they are not ports and must
 * not be described as ported"). Their wording is longer than "Log in", so 60px does not
 * fit; the nearest thing legacy has is the heading on its other login panel,
 * `h2.font-bold`, which is INSPINIA's `h2` at **24px** lifted to weight 600. That is the
 * size below, and it keeps the set in one type scale instead of inventing a third.
 */
.auth-legacy-main .auth-brand h4,
.auth-legacy-main .auth-brand h2 {
    margin: 5px 0 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
}

/* `.m-t` on legacy's `<form class="m-t loginform">` — the gap under the heading. */
.auth-legacy-form form {
    margin-top: 15px;
}

/* `.login-container .right a` + `.login-container .loginbase-link a` */
.auth-legacy-main a {
    font-size: 18px;
    font-weight: 600;
}

/*
 * `.login-container .form-control` + `.login-container .right .form-control`, over
 * INSPINIA's own `.form-control`: `border-radius: 1px` (not Bootstrap 3's 4px and not
 * square), `color: inherit` — so the body's `#676a6c` — and `box-shadow: none`.
 */
.auth-legacy-main .form-control,
.auth-legacy-main .form-select {
    height: 50px;
    padding: 10px 12px;
    font-size: 18px;
    color: inherit;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 1px;
    box-shadow: none;
}

/*
 * **A legacy login field does not react to the pointer at all** — no hover state, no
 * focus state, nothing but the caret. Both halves of that need saying here, and for the
 * same reason: this project's theme styles them with a class plus a pseudo-class, which
 * ties with `.auth-legacy-main .form-control`, and `app.min.css` is linked after this
 * sheet — so the theme won every tie. Three selectors deep settles it.
 *
 *   - `.form-control:hover, .form-select:hover { border-color: var(--ins-dark-border-subtle) }`
 *     turned the black border grey under the pointer. **Legacy has no generic
 *     `.form-control:hover` rule at all** — the only one in `style.css` is
 *     `.navbar-form-custom .form-control:hover`, the top bar's search box.
 *   - `.form-control:focus { background-color: var(--ins-secondary-bg); border-color:
 *     var(--ins-dark-border-subtle) }` turned the field itself grey as well.
 *
 * Legacy's own focus rule is `border-color: #1ab394`, INSPINIA's green, and it never
 * fires on these screens either: `portal.css` sets the login field's `border: 2px solid
 * #000 !important`, and `!important` outranks it. Black throughout is legacy's rendered
 * behaviour, not an omission.
 */
.auth-legacy-main .form-control:hover,
.auth-legacy-main .form-select:hover,
.auth-legacy-main .form-control:focus,
.auth-legacy-main .form-select:focus {
    color: inherit;
    background-color: #fff;
    border-color: #000;
    outline: 0;
    box-shadow: none;
}

/* Bootstrap 3's placeholder grey. The login fields are placeholder-only, so it shows. */
.auth-legacy-main .form-control::placeholder {
    color: #999;
    opacity: 1;
}

/*
 * The joined field stack. Legacy draws username, password and the location select as one
 * bordered block by removing the borders between them:
 *
 *     .loginform .form-group:first-child .form-control { border-bottom: none }
 *     #user_location.form-control                      { border-top: none }
 *     .loginform .form-group                           { margin-bottom: 0 }
 *
 * Two differences in how that is expressed here, both forced:
 *
 *   - it removes the TOP border of every field after the first, not the bottom border of
 *     every field before the last. The two are the same picture until the location select is
 *     hidden — which is most logins, since a student never sees it — and legacy's
 *     version then leaves the password field with no bottom border and the block hanging
 *     open. Legacy gets away with it by hard-coding `:first-child` and `#user_location`
 *     for a stack that is exactly three fields long.
 *   - "the field" is the Bootstrap 5 input group, not the input: the password field
 *     carries a trailing show/hide eye, and a border removed from the input alone would
 *     leave it standing. The decorative leading icons these fields used to carry are
 *     gone — legacy's are plain bordered inputs and nothing else.
 */
.auth-legacy-stack > .auth-legacy-field {
    margin-bottom: 0;
}

.auth-legacy-stack .form-control,
.auth-legacy-stack .form-select,
.auth-legacy-stack .input-group-text {
    border-radius: 1px;
}

.auth-legacy-stack .input-group-text {
    border: 2px solid #000;
}

.auth-legacy-stack > .auth-legacy-field:not(:first-child) .form-control,
.auth-legacy-stack > .auth-legacy-field:not(:first-child) .form-select,
.auth-legacy-stack > .auth-legacy-field:not(:first-child) .input-group-text {
    border-top: none;
}

/*
 * `.login-container .buttons`, which is a Bootstrap 3 `.row` of two `.col-xs-6`: the
 * link in the left **half**, the button filling the right **half**. Not a
 * `space-between` row — the button's left edge is the panel's midpoint whatever the
 * label says, and that is the position that reads wrong when it is merely right-aligned.
 * The 15px column gutters cancel against the row's negative margin at the outer edges,
 * so only the gap between the two halves survives.
 */
.auth-legacy-buttons {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.auth-legacy-buttons > * {
    flex: 0 0 50%;
    max-width: 50%;
}

.auth-legacy-buttons > :first-child {
    padding-right: 15px;
}

.auth-legacy-buttons > :last-child {
    padding-left: 15px;
}

/*
 * `.login-container .loginbase-link`, whose `margin-top: 5px` is not carried. In legacy
 * the two halves are floated columns, so the link sits at the top of the row and the 5px
 * is a nudge towards the button's centre line — it lands about 5px short of it. The row
 * is flex here and `align-items: center` puts the link on that centre line exactly, so
 * the nudge would only push it back off.
 */
.auth-legacy-link {
    margin-top: 0;
}

/*
 * `.login-container .btn-success` + `.login-container .right button`. Legacy's submit is
 * a `.btn-success` repainted blue; this project's is `.btn-primary`, so the repaint
 * lands there instead — same colour, same radius, same size, one class along.
 *
 * `font-weight: 400` is not a detail: Bootstrap 3's `.btn` is `font-weight: normal` and
 * nothing in legacy lifts it, so a 24px button there is large but not heavy. The
 * templates carried Bootstrap 5's `fw-semibold` and `py-2`, both `!important`, which
 * overrode the weight and the padding — that pairing is most of what read as "too bold".
 *
 * Legacy paints the blue with `!important`, which also silences Bootstrap 3's
 * `.btn-success:hover/:focus/:active` — so the legacy button holds #004FDE through every
 * state and never changes colour under the pointer. Restating that here takes the
 * `--ins-btn-*` variables rather than more selectors: Bootstrap 5 resolves `.btn:hover`,
 * `.btn:focus-visible` and `.btn:first-child:active` out of them, and those three rules
 * tie or beat `.auth-legacy-main .btn-primary` on specificity while `app.min.css` is
 * linked after this file — so a plain `background-color` here loses every state to the
 * platform's teal. Setting the variables wins without an `!important` arms race.
 */
.auth-legacy-main .btn-primary,
.auth-legacy-main .btn-success {
    --ins-btn-color: #fff;
    --ins-btn-bg: #004fde;
    --ins-btn-border-color: #004fde;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #004fde;
    --ins-btn-hover-border-color: #004fde;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #004fde;
    --ins-btn-active-border-color: #004fde;
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #004fde;
    --ins-btn-disabled-border-color: #004fde;
    --ins-btn-focus-shadow-rgb: 0, 79, 222;
    width: 100%;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    background-color: #004fde;
    border-color: #004fde;
    border-radius: 20px;
}

/*
 * `.login-container .right .bottom-logo` — 15px off the bottom of the white panel, its
 * full width, with the initial-letter mark in a `col-xs-2` and the wordmark right-
 * aligned in a `col-xs-10`. Legacy re-states the panel's `49%` only because the band is
 * positioned against the viewport; anchored to the panel it is simply 100%.
 *
 * The two marks are 88x124 and 586x126 and legacy's login screen sets **no width on
 * either** — `img-responsive` caps them at their column and they otherwise render at
 * natural size. `forgotpassword` and `changepassword` do force 50 and 350, which is
 * where the wrong numbers here came from: those are two screens' local overrides, not
 * the band's size. Login's is the one the whole set now follows.
 */
.auth-legacy-logo {
    position: absolute;
    bottom: 15px;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 15px;
}

.auth-legacy-logo img {
    height: auto;
    max-width: 100%;
}

/* `.col-xs-2`, gutters included */
.auth-legacy-logo-initial {
    max-width: calc(16.66667% - 30px);
    margin-right: auto;
}

/* `.col-xs-10` with `pull-right` */
.auth-legacy-logo-wordmark {
    max-width: calc(83.33333% - 30px);
}

/*
 * The location's own logo, which replaces both marks above rather than joining them —
 * legacy's `.bottom-logo` is one arm or the other, never both.
 *
 * `width="500"` is legacy's, and it is an attribute rather than a rule: on `img-responsive`
 * it caps the image and lets it shrink below that. `max-width` is the same behaviour
 * expressed once, and the `100%` above still holds it inside the band on a narrow screen.
 * Centred because a single mark has no column to be pulled to the right of.
 */
.auth-legacy-logo-location {
    max-width: min(500px, 100%);
    margin: 0 auto;
}

/*
 * `@media(max-width:992px)` — the green panel goes and the white one takes the width.
 * The form goes full width with it, which is not an extra rule but the same one: its
 * `66.66667%` is Bootstrap 3's `col-md-8`, and `md` stops applying below 992px.
 */
@media (max-width: 992px) {
    .auth-legacy-panel {
        display: none;
    }

    .auth-legacy-main {
        width: 100%;
    }

    .auth-legacy-form {
        width: 100%;
    }
}

/* ==========================================================================
/* ==========================================================================
 * U Residence — THIS PROJECT's own theme, and two rules that reach it.
 *
 * The other design on these screens, and the one thing here that is deliberately not a port.
 * Until 2026-09-10 this block was legacy's `uhu` arm — `.passwordBox` over a full-bleed
 * photograph, `#e5e6e7` fields, the mark above the box, every declaration out of
 * `style.css`. **The operator ruled it out.** U Residence wears the authentication design
 * this repository shipped before task 1.7 took the legacy look (`8ba9a39`), and wears it
 * EXACTLY: the theme's `auth-box` card, its labelled input groups, its `d-grid` action, its
 * brand area and footer. D12's amendment records the ruling.
 *
 * So the card is styled by `app.min.css` and nothing else, and **one rule** is left here:
 * the palette, `#1ab394` or `#ed5565`, from `location.theme` — the only legacy thing on this
 * arm, and the reason `auth-theme-*` is still emitted on it.
 *
 * The side image is not here either. `.card-side-img` already carries the theme's own
 * photograph, and the location's upload overrides it from an inline `background-image` on
 * that element (`_shell.html.twig`) — one declaration on the one element, instead of a rule
 * here that would have to name the theme's image as its fallback and so keep a copy of it.
 *
 * Everything above this banner is the UniHalls arm and is still legacy's to the pixel. The
 * two arms share no markup — each screen writes a body for each — so no rule up there needs
 * qualifying to keep it out of the card.
 *
 * `app.min.css` is linked after this sheet (`layouts/base.html.twig` puts `block css`
 * first), so the rule below wins on specificity rather than on order.
 * ========================================================================== */

/*
 * The palette, blue — `#1ab394`. Legacy's `.btn-primary` on this arm, and the one piece of
 * its styling the ruling keeps.
 *
 * Set through INSPINIA's `--ins-btn-*` properties rather than `background-color`, because
 * Bootstrap 5 resolves `.btn:hover`, `.btn:focus-visible` and `.btn:first-child:active` out
 * of them, and those rules tie or beat a two-class selector while `app.min.css` is linked
 * after this sheet — a plain `background-color` here would lose every state back to the
 * theme's teal. `#18a689` is INSPINIA's own darker pair, which is what legacy's own
 * `.btn-primary:hover` uses outside the `!important` login rule.
 */
.auth-uhu-content .btn-primary {
    --ins-btn-color: #fff;
    --ins-btn-bg: #1ab394;
    --ins-btn-border-color: #1ab394;
    --ins-btn-hover-color: #fff;
    --ins-btn-hover-bg: #18a689;
    --ins-btn-hover-border-color: #18a689;
    --ins-btn-active-color: #fff;
    --ins-btn-active-bg: #18a689;
    --ins-btn-active-border-color: #18a689;
    --ins-btn-disabled-color: #fff;
    --ins-btn-disabled-bg: #1ab394;
    --ins-btn-disabled-border-color: #1ab394;
    --ins-btn-focus-shadow-rgb: 26, 179, 148;
}
/* ==========================================================================
 * The red palette — legacy's `redportal.css`, which is the OTHER axis.
 *
 * `location.code` chose the layout above; `location.theme` chooses what it is painted, and
 * legacy applies it the crude way: `<link href="/css/{{ theme }}">` swaps the whole
 * stylesheet on every page of every surface.
 *
 * **Of all 313 lines of `redportal.css`, exactly one rule reaches an authentication
 * screen** — `.btn-primary { background-color: #ed5565; border-color: #ed5565; color: #FFFFFF }`
 * (`:291`). Everything else in the file is the checkout funnel, the portal navigation and
 * select2/summernote plumbing: surfaces this project has not ported, and in the shell's
 * case does not build from INSPINIA markup at all. So this is the whole red theme as these
 * screens see it, and importing the other 300 lines would be importing rules for markup
 * that is not on the page.
 *
 * The blue palette needs no block of its own **for the split**: `portal.css` IS that design
 * — the `#009641` panel, the `#004FDE` button — so blue is what this sheet already renders
 * up there, and `auth-theme-blue` is a hook that deliberately styles nothing. The card arm
 * is the exception, because it is not legacy's design and has no stylesheet of legacy's to
 * be the blue case of: its `#1ab394` is declared with the arm, above.
 * ========================================================================== */

/*
 * Both arms, because legacy's rule is on `.btn-primary` unqualified and both arms' primary
 * action carries that class here. Legacy's split arm uses `.btn-success` instead and takes
 * its `#004FDE` from `portal.css`, so in legacy a red location and the split design never
 * meet — `redportal.css` contains no `.login-container` rules, and the design does not
 * render at all. That combination is a gap in the file rather than a decision, so it is not
 * reproduced: a red location on either layout gets the red button.
 */
.auth-theme-red .btn-primary,
.auth-theme-red .auth-legacy-main .btn-primary {
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
}

/*
 * Legacy paints no hover state — its rule is `!important` and flat, so the button holds
 * `#ed5565` through hover, focus and active alike. INSPINIA's own `.btn-primary:hover`
 * would otherwise show through and turn it green mid-press.
 */
.auth-theme-red .auth-legacy-main .btn-primary:hover,
.auth-theme-red .auth-legacy-main .btn-primary:focus,
.auth-theme-red .auth-legacy-main .btn-primary:active {
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
}

/*
 * The card arm takes the same red through the variables instead, for the reason its blue
 * rule gives: a bare `background-color` here would repaint the resting button and leave
 * `--ins-btn-hover-bg` green, so the button would turn green under the pointer.
 *
 * Flat through every state, unlike the blue card button, which darkens. That is not an
 * inconsistency to tidy: legacy's red rule is flat, `styles/theme.css` keeps it flat on
 * every other surface of this project, and `redportal.css` names no darker red to hover to.
 */
.auth-theme-red .auth-uhu-content .btn-primary {
    --ins-btn-bg: #ed5565;
    --ins-btn-border-color: #ed5565;
    --ins-btn-hover-bg: #ed5565;
    --ins-btn-hover-border-color: #ed5565;
    --ins-btn-active-bg: #ed5565;
    --ins-btn-active-border-color: #ed5565;
    --ins-btn-disabled-bg: #ed5565;
    --ins-btn-disabled-border-color: #ed5565;
    --ins-btn-focus-shadow-rgb: 237, 85, 101;
}