/* ==========================================================================
   Mahacakra -- login page
   --------------------------------------------------------------------------
   Ported from MahaSSO-FE (public/css/login.css) so the two products present
   the same front door. The markup in login.html matches it class for class.

   Standalone. login.html loads ONLY this file: no Metronic bundle, no
   plugins bundle, no htmx. The page is a headline, two inputs and a button,
   and pulling the theme in to style that only bought cascade fights - the
   same reason the original dropped AdminLTE and Bootstrap. Icons are inline
   SVG in the view.

   The tokens below are the Metronic values, copied rather than imported for
   that reason. style.bundle.css stays the source of truth; if one changes
   there, change it here too. The list is short on purpose.
   ========================================================================== */

:root {
    color-scheme: light;

    /* from style.bundle.css */
    --primary: #009EF7;
    --primary-active: #0095E8;
    --body: #181C32;
    --muted: #7E8299;
    --label: #3F4254;
    --input-border: #E4E6EF;
    --solid: #F5F8FA;
    --page: #F5F8FA;
    --danger: #F1416C;
    --danger-light: #FFF5F8;
    --success: #50CD89;
    --success-light: #E8FFF3;
    --radius: 0.475rem;
    --radius-lg: 0.625rem;

    /* login only -- the brand panel. Both stops are dark enough to carry
       plain white body copy: 5.2:1 at the top, 9.9:1 at the bottom. The
       accent is the light blue of the logo mark and is used for glow only,
       never behind text. */
    --brand-top: #1270BE;
    --brand-bottom: #083F73;
    --brand-accent: #38B6F5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Poppins, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--body);
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ shell */

.login-page {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ----------------------------------------------------------- brand column */

/* Centred as one block, not spread. The original pinned a mark to the top and
   a copyright to the bottom with the cover floating between them; with the
   copyright gone there is nothing to anchor the bottom, and space-between
   would push the mark and the cover to opposite ends of a tall panel. The two
   belong together - the wordmark reads as a caption above the picture. */
.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3.5rem 3rem;
    color: #fff;
    background: linear-gradient(160deg, var(--brand-top) 0%, var(--brand-bottom) 100%);
}

/* Two soft lights, sized in vmax so they scale with the viewport instead of
   banding across a wide monitor. Decorative. */
.login-brand::before,
.login-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-brand::before {
    top: -18vmax;
    right: -14vmax;
    width: 44vmax;
    height: 44vmax;
    background: radial-gradient(circle, rgba(56, 182, 245, 0.42) 0%, rgba(56, 182, 245, 0) 62%);
}

.login-brand::after {
    bottom: -22vmax;
    left: -16vmax;
    width: 40vmax;
    height: 40vmax;
    background: radial-gradient(circle, rgba(113, 197, 232, 0.28) 0%, rgba(113, 197, 232, 0) 65%);
}

.login-brand > * {
    position: relative;
    z-index: 1;
}

.login-brand__mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    text-align: center;
}

/* The wordmark is blue on transparent -- it all but disappears onto the
   gradient, so it gets a white tile to sit on. Sized by its own width rather
   than squared off: the original tile held a square logo mark, and forcing a
   wordmark into that shape would shrink it to the height of the box. */
.login-brand__logo {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 0.5rem 1.25rem rgba(4, 30, 55, 0.25);
}

.login-brand__logo img {
    display: block;
    width: auto;
    height: 1.75rem;
}

.login-brand__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.login-brand__tag {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.82);
}

/* 70% of the panel, with a height cap so a short laptop viewport cannot let a
   wide cover grow past the fold.

   Sized by its own aspect rather than to a fixed box: both caps are max-* with
   width and height auto, so whichever binds first the element ends up the
   shape of the picture, and the rounded corners and shadow hug the artwork
   instead of framing an empty box around it. That holds whether the cover is
   landscape or portrait, which it has been both of. */
.login-brand__cover {
    position: relative;
    z-index: 1;
    display: block;
    /* Both auto, not just width. The <img> carries width/height attributes so
       the browser can reserve the right box before the file arrives; those are
       presentational hints, and leaving height alone let the attribute pin the
       element at its intrinsic height while max-width squeezed the width - a
       landscape cover rendered as a stretched portrait. */
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 58vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 1.25rem 2.5rem rgba(4, 30, 55, 0.28);
}

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

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #fff;
}

.login-card {
    width: 100%;
    max-width: 24rem;
}

/* Stands in for the brand column once it is dropped on narrow screens. */
.login-card__brand {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.login-card__logo {
    display: block;
    width: auto;
    height: 1.75rem;
}

.login-card__brandname {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.login-card h2 {
    margin: 0 0 0.375rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-card__sub {
    margin: 0 0 2rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* ----------------------------------------------------------------- alerts */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.alert svg {
    flex: none;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.0625rem;
}

.alert-danger {
    color: var(--danger);
    background: var(--danger-light);
    border-color: rgba(241, 65, 108, 0.24);
}

.alert-success {
    color: #2f9c67;
    background: var(--success-light);
    border-color: rgba(80, 205, 137, 0.3);
}

/* ------------------------------------------------------------------ field */

.login-field {
    margin-bottom: 1.125rem;
}

.login-field label {
    display: block;
    margin-bottom: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--label);
}

.login-input {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input__icon {
    position: absolute;
    left: 0.875rem;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--muted);
    pointer-events: none;
}

.login-input input {
    width: 100%;
    padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--body);
    background: var(--solid);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.login-input input::placeholder {
    color: var(--muted);
}

.login-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.18);
}

/* Chrome paints its own background over an autofilled field. The inset shadow
   is the only way to override it, and it has to be restated on :focus because
   it occupies the same box-shadow slot as the focus ring. */
.login-input input:-webkit-autofill {
    -webkit-text-fill-color: var(--body);
    -webkit-box-shadow: 0 0 0 100px var(--solid) inset;
}

.login-input input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 0.2rem rgba(0, 158, 247, 0.18);
}

/* :focus-within rather than a sibling selector on the input -- the icon is
   painted before the input in the markup, so `input:focus ~ .icon` would
   never match. */
.login-input:focus-within .login-input__icon {
    color: var(--primary);
}

.login-input--password input {
    padding-right: 3rem;
}

.login-toggle {
    position: absolute;
    right: 0.375rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

.login-toggle:hover {
    color: var(--body);
}

.login-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.25);
}

.login-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* [hidden] in the UA stylesheet is scoped to the HTML namespace, so it does
   not reliably hide an <svg>. Say it explicitly. */
.login-toggle svg[hidden] {
    display: none;
}

/* Caps Lock warning. Hidden by default; the view's script flips [hidden]. */
.login-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.4375rem;
    font-size: 0.8125rem;
    color: #b3503f;
}

.login-hint[hidden] {
    display: none;
}

.login-hint svg {
    flex: none;
    width: 0.9375rem;
    height: 0.9375rem;
}

/* ----------------------------------------------------------------- submit */

.login-submit {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.8125rem 1rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.login-submit:hover {
    background: var(--primary-active);
}

.login-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.35);
}

.login-submit[disabled] {
    cursor: default;
    opacity: 0.75;
}

.login-submit__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    vertical-align: -0.1875rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

.login-submit.is-busy .login-submit__spinner {
    display: inline-block;
}

@keyframes login-spin {
    to {
        transform: rotate(360deg);
    }
}

.login-help {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: center;
}

.login-card__foot {
    display: none;
    margin: 2rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}

/* ------------------------------------------------------------ narrow view */

/* The brand column is decoration plus a value proposition; on a phone the
   form is the whole job, so the column goes and its logo reappears above the
   heading. */
@media (max-width: 61.99em) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-brand {
        display: none;
    }

    .login-main {
        align-items: flex-start;
        padding-top: 3rem;
        background: var(--page);
    }

    .login-card {
        max-width: 26rem;
        padding: 2rem 1.75rem 2.25rem;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: 0 0 2.5rem rgba(76, 87, 125, 0.08);
    }

    .login-card__brand {
        display: flex;
    }

    .login-card__foot {
        display: block;
    }
}

@media (max-width: 24em) {
    .login-card {
        padding: 1.75rem 1.25rem 2rem;
    }
}

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