/*
 * Sign-in screens (auth/login + auth/syslogin) — split layout ported from the
 * TRAICE v3 auth pages: gradient brand panel on the left with decorative
 * rotated squares, form panel on the right. Palette: dark navy (primary)
 * with Bovine (#52585c, slate grey) as the secondary colour. Scoped to
 * .ial-auth so the other pages that load login.css are not affected.
 */

.ial-auth {
    --ial-navy-dark: #0b1830;  /* darkest navy (gradient start, button hover) */
    --ial-navy: #13254a;       /* dark navy (primary: button, headings, focus) */
    --ial-bovine: #52585c;     /* Bovine (secondary: icons, gradient end) */
    --ial-soft: #b7bdc1;       /* light Bovine (brand-panel details) */
    --ial-bg: #f3f4f5;         /* form panel background */
    --ial-text: #24282b;
    --ial-muted: #6b7276;
    --ial-border: #dcdfe1;

    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: .95rem;
    color: var(--ial-text);
    background: var(--ial-bg);
}

@media (min-width: 992px) {
    .ial-auth {
        grid-template-columns: 1.1fr 1fr;
    }
}

.ial-auth h1,
.ial-auth h2,
.ial-auth .font-display {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---- Brand panel ------------------------------------------------------- */

.ial-auth-brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--ial-navy-dark) 0%, var(--ial-navy) 55%, var(--ial-bovine) 100%);
    padding: 3.5rem;
    display: none;
}

@media (min-width: 992px) {
    .ial-auth-brand {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* decorative steps */
.ial-auth-brand::before,
.ial-auth-brand::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(183, 189, 193, .18);
    transform: rotate(45deg);
}

.ial-auth-brand::before {
    width: 520px;
    height: 520px;
    right: -260px;
    bottom: -200px;
}

.ial-auth-brand::after {
    width: 340px;
    height: 340px;
    right: -120px;
    bottom: -80px;
    border-color: rgba(183, 189, 193, .32);
}

.ial-auth-brand > * {
    position: relative;
}

.ial-auth-brand .ial-auth-logo {
    height: 42px;
}

.ial-auth-brand .ial-auth-rule {
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--ial-soft);
    margin-bottom: 1.5rem;
}

.ial-auth-brand h1 {
    color: #fff;
    font-size: 2.85rem;
    line-height: 1.08;
    margin-bottom: 1rem;
}

.ial-auth-brand .lead {
    color: rgba(255, 255, 255, .78);
    font-style: italic;
    max-width: 30rem;
    margin-bottom: 0;
}

.ial-auth-brand .ial-auth-copy {
    color: var(--ial-soft);
    font-size: .8rem;
}

/* ---- Form panel -------------------------------------------------------- */

.ial-auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--ial-bg);
}

/* Home icon (top right of the form panel): back to the public landing page `/`. */
.ial-auth-home {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ial-border);
    background: #fff;
    color: var(--ial-navy);
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ial-auth-home:hover {
    color: var(--ial-navy-dark);
    border-color: var(--ial-navy);
    box-shadow: 0 6px 18px rgba(30, 58, 95, .15);
}

.ial-auth-home:focus-visible {
    outline: 3px solid var(--ial-navy);
    outline-offset: 2px;
}

.ial-auth-card {
    width: 100%;
    max-width: 420px;
}

.ial-auth-card h2 {
    font-size: 1.95rem;
    color: var(--ial-navy);
    margin-bottom: .25rem;
}

.ial-auth-card .ial-auth-subtitle {
    color: var(--ial-muted);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.ial-auth-card .form-label {
    font-weight: 600;
    color: var(--ial-text);
}

.ial-auth-card .input-group-text {
    background: #fff;
    border-color: var(--ial-border);
    color: var(--ial-bovine);
}

.ial-auth-card .form-control,
.ial-auth-card .form-select {
    height: 46px;
    background-color: #fff;
    border: 1px solid var(--ial-border);
    color: var(--ial-text);
}

.ial-auth-card .form-control:focus,
.ial-auth-card .form-select:focus {
    border-color: var(--ial-navy);
    box-shadow: 0 0 0 3px rgba(19, 37, 74, .15);
}

.ial-auth-card .input-group:focus-within .input-group-text {
    border-color: var(--ial-navy);
}

.ial-auth-card .form-control.is-invalid {
    background-image: none !important;
    border-color: #b42318;
}

.ial-auth-card .form-select.is-invalid {
    border-color: #b42318;
}

.ial-auth-card .ial-auth-toggle {
    cursor: pointer;
}

.ial-auth-card .form-check-input:checked {
    background-color: var(--ial-navy);
    border-color: var(--ial-navy);
}

.ial-auth-card .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(19, 37, 74, .15);
    border-color: var(--ial-navy);
}

.ial-auth-card a {
    color: var(--ial-navy);
    text-decoration: none;
}

.ial-auth-card a:hover {
    color: var(--ial-bovine);
}

.ial-auth-card .btn-ial {
    height: 48px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    background: var(--ial-navy);
    transition: background .15s ease, box-shadow .15s ease;
}

.ial-auth-card .btn-ial:hover,
.ial-auth-card .btn-ial:focus {
    color: #fff;
    background: var(--ial-navy-dark);
    box-shadow: 0 6px 18px rgba(11, 24, 48, .28);
}

/* Submit button while the login request is in flight (spinner + label,
   see auth/login + auth/syslogin): keeps its colour, signals progress. */
.ial-auth-card .btn-ial:disabled {
    opacity: .9;
    color: #fff;
    background: var(--ial-navy-dark);
    cursor: progress;
}

/* Label swap on submit: the button gets .is-busy (Alpine, auth/login +
   auth/syslogin). Default = the normal label only, so nothing extra shows
   even if scripts fail; busy = spinner + "Signing in…" only. */
.ial-auth-card .btn-ial .btn-ial-busy {
    display: none;
}

.ial-auth-card .btn-ial.is-busy .btn-ial-label {
    display: none;
}

.ial-auth-card .btn-ial.is-busy .btn-ial-busy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* "Back to sign in" on step 2 (auth/syslogin): signs out (POST /logout)
   and returns to step 1. Quiet link look, same busy swap as .btn-ial. */
.ial-auth-card .ial-auth-back {
    padding: .25rem .5rem;
    border: 0;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ial-navy);
    text-decoration: none;
}

.ial-auth-card .ial-auth-back:hover,
.ial-auth-card .ial-auth-back:focus-visible {
    color: var(--ial-navy-dark);
    text-decoration: underline;
}

.ial-auth-card .ial-auth-back:disabled {
    color: var(--ial-navy);
    opacity: .8;
    cursor: progress;
}

.ial-auth-card .ial-auth-back .btn-ial-busy {
    display: none;
}

.ial-auth-card .ial-auth-back.is-busy .btn-ial-label {
    display: none;
}

.ial-auth-card .ial-auth-back.is-busy .btn-ial-busy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.ial-auth-card .ial-auth-back-hint {
    font-size: .78rem;
    color: #6b7280;
}

.ial-auth-card .btn-ial-outline {
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--ial-navy);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ial-navy);
    background: transparent;
    transition: background .15s ease, color .15s ease;
}

.ial-auth-card .btn-ial-outline:hover,
.ial-auth-card .btn-ial-outline:focus {
    color: #fff;
    background: var(--ial-navy);
}

.ial-auth-card .ial-auth-foot {
    color: var(--ial-muted);
    font-size: .8rem;
}

.ial-auth-card .ial-auth-foot i {
    color: var(--ial-bovine);
}

/* ---- Login theme: Bovine palette (supplied as paleta-bovine.pdf) --------
 * Applied only to auth/login (root carries .ial-auth--bovine). Tonal scale
 * of Bovine #52585C (50–900) plus the blue accents; the brand panel uses the
 * darkest tones. The base variables above are re-pointed to the scale. */

.ial-auth.ial-auth--bovine {
    --bovine-50: #F3F4F5;
    --bovine-100: #E1E3E5;
    --bovine-200: #C3C7CA;
    --bovine-300: #9CA2A6;
    --bovine-400: #767D82;
    --bovine-500: #52585C;
    --bovine-600: #454A4E;
    --bovine-700: #383C3F;
    --bovine-800: #2A2D2F;
    --bovine-900: #1C1E20;
    --azul-nevoa: #DCE8F2;
    --azul-aco: #6F93B3;
    --azul-principal: #2F6FA8;
    --azul-marinho: #1E3A5F;

    --ial-navy-dark: var(--azul-marinho);    /* button hover, link hover */
    --ial-navy: var(--azul-principal);       /* button, links, checkbox, focus */
    --ial-bovine: var(--bovine-500);         /* input icons */
    --ial-soft: var(--azul-aco);             /* brand-panel rule */
    --ial-bg: var(--bovine-50);
    --ial-text: var(--bovine-800);
    --ial-muted: var(--bovine-500);
    --ial-border: var(--bovine-200);
}

.ial-auth--bovine .ial-auth-brand {
    color: var(--bovine-50);
    background: linear-gradient(145deg, var(--bovine-900) 0%, var(--bovine-800) 50%, var(--azul-marinho) 100%);
}

.ial-auth--bovine .ial-auth-brand::before {
    border-color: rgba(111, 147, 179, .18);
}

.ial-auth--bovine .ial-auth-brand::after {
    border-color: rgba(111, 147, 179, .36);
}

.ial-auth--bovine .ial-auth-brand h1 {
    color: var(--bovine-50);
}

.ial-auth--bovine .ial-auth-brand .lead {
    color: var(--bovine-200);
}

.ial-auth--bovine .ial-auth-brand .ial-auth-copy {
    color: var(--bovine-300);
}

.ial-auth--bovine .ial-auth-card h2 {
    color: var(--bovine-900);
}

.ial-auth--bovine .ial-auth-card .form-control:focus,
.ial-auth--bovine .ial-auth-card .form-select:focus,
.ial-auth--bovine .ial-auth-card .form-check-input:focus {
    border-color: var(--azul-principal);
    box-shadow: 0 0 0 3px rgba(47, 111, 168, .2);
}

.ial-auth--bovine .ial-auth-card a:hover {
    color: var(--azul-marinho);
}

.ial-auth--bovine .ial-auth-card .btn-ial:hover,
.ial-auth--bovine .ial-auth-card .btn-ial:focus {
    box-shadow: 0 6px 18px rgba(30, 58, 95, .3);
}

.ial-auth--bovine .ial-auth-card .ial-auth-foot i {
    color: var(--azul-aco);
}