/* ================================================================ Sign-in page

   A brand panel (the mark, a line, a picture of a desk) beside the sign-in card.

   Every colour here is a token, so the page follows the chosen palette and the dark theme with the rest of
   the application: nothing is a literal white or navy. The picture is a background image of the panel
   (wwwroot/img/login-hero.svg) that fades into the panel's own surface on its right and top edges, which
   is what lets one picture sit on a light or a dark ground; in the dark theme it is also dimmed.

   Logical properties throughout (inset-inline, margin-inline, padding-inline), so right-to-left turns the
   whole page round, picture included.
*/

.login {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100vh / var(--zoom, 1));
    padding: var(--space-6);
    background:
        radial-gradient(900px 520px at 8% -10%, rgb(var(--accent-rgb) / 18%), transparent 60%),
        radial-gradient(800px 500px at 104% 0%, rgb(var(--bloom-2-rgb) / 16%), transparent 58%),
        radial-gradient(900px 600px at 50% 112%, rgb(var(--bloom-3-rgb) / 14%), transparent 60%),
        var(--surface-app);
    background-attachment: fixed;
}

.login__tools {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-5);
    z-index: 2;
}

/* ---- the shell: two panes inside one rounded frame ---------------------------------------- */

.login__shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: min(1120px, 100%);
    min-height: min(640px, calc((100vh / var(--zoom, 1)) - 3rem));
    overflow: hidden;
    border: 1px solid var(--glass-border, var(--border));
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

/* ---- the brand panel ----------------------------------------------------------------------- */

.login__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 44px;
    overflow: hidden;
    isolation: isolate;
}

.login__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--text);
}
.login__brand .sidebar__mark { flex: none; }

.login__headline {
    margin: var(--space-8) 0 var(--space-3);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--accent-strong);
}

.login__tagline {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text);
}

/* The picture: bottom-left of the panel, fading into the panel's own surface on the sides that face the card
   and the headline. The picture is the ::before (dimmed in the dark theme); the fade is the ::after, drawn in
   the panel's surface colour and never dimmed, so the edge cannot show on either theme. */
.login__art {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 68%;
    z-index: -1;
}
.login__art::before,
.login__art::after {
    content: "";
    position: absolute;
    inset: 0;
}
.login__art::before {
    background: url("../img/login-hero.svg") left bottom / contain no-repeat;
}
.login__art::after {
    background:
        /* Opaque until past the drawing's own top edge (the picture is letter-boxed in its box), then clear. */
        linear-gradient(to bottom, var(--surface) 0%, var(--surface) 24%, transparent 64%),
        linear-gradient(to right, transparent 40%, var(--surface) 99%);
}
[dir="rtl"] .login__art { transform: scaleX(-1); }

/* In the dark theme the picture is dimmed so it sits on the dark panel instead of glowing. */
:root[data-theme="dark"] .login__art::before { filter: brightness(0.55) saturate(0.85); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .login__art::before { filter: brightness(0.55) saturate(0.85); }
}

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

.login__panel {
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-6);
}

/* The form sits straight on the shell's own surface: no second frame inside the first, so the page reads
   as one box whose edge is the shell's, and the form has no boundary of its own to show. */
.login__card {
    width: min(420px, 100%);
    padding: 36px 36px 30px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.login__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
}
.login__sub {
    margin: 4px 0 var(--space-6);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.login__form { display: flex; flex-direction: column; gap: var(--space-4); }

/* A field with an icon in front and, on the password, an eye behind. */
.login__input { position: relative; display: flex; align-items: center; }
.login__input .input {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    padding-inline: 44px 14px;
}
.login__input-icon {
    position: absolute;
    inset-inline-start: 14px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    pointer-events: none;
}
.login__input:focus-within .login__input-icon { color: var(--accent); }
.login__input:has(.login__eye:not([hidden])) .input { padding-inline-end: 46px; }
.login__eye {
    position: absolute;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.login__eye:hover { background: rgb(var(--neutral-rgb) / 10%); color: var(--text); }
.login__eye[hidden] { display: none; }

.login__go {
    height: 48px;
    border-radius: 12px;
    font-size: var(--text-md);
    font-weight: 600;
    gap: 10px;
}
.login__go-arrow { display: inline-grid; place-items: center; }
[dir="rtl"] .login__go-arrow { transform: scaleX(-1); }

.login__switch { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.login__switch summary { cursor: pointer; }
.login__switch .login__form { margin-top: var(--space-3); }

/* The line about the company account: the shield and the words, with no tinted box round them. */
.login__note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.login__note-icon { display: grid; place-items: center; flex: none; color: var(--accent); }

.login__dev {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.login__dev code { font-family: var(--font-mono); color: var(--text); }

/* ---- narrow screens: the panel becomes a banner above the card, the picture is dropped ----- */

@media (max-width: 900px) {
    .login { padding: var(--space-3); align-items: start; }
    .login__tools { inset-block-start: var(--space-2); inset-inline-end: var(--space-3); }
    .login__shell { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: 3rem; }
    .login__hero { padding: 24px 24px 8px; }
    .login__headline { margin-top: var(--space-4); font-size: 1.5rem; }
    .login__tagline { font-size: var(--text-md); }
    .login__art { display: none; }
    .login__panel { padding: var(--space-4) var(--space-3) var(--space-5); }
    .login__card { padding: 26px 22px 22px; }
}