/* autosync sign-in pages (Login, AdminLogin). Used only by _AuthLayout.cshtml. */

/* Archivo variable (weight 100-900, width 62-125%), self-hosted. Licence: /fonts/Archivo-OFL.txt */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations"),
         url("../fonts/archivo-latin-wdth.woff2") format("woff2");
}

:root {
    --ledger-900: #123b32;   /* brand panel, ledger-book green */
    --ledger-800: #174a3d;   /* primary hover */
    --ledger-700: #1e5a4a;   /* primary button, links */
    --paper: #eef3ec;        /* ledger paper */
    --rule: #c7d8cd;         /* paper rule lines */
    --margin-red: #b3261e;   /* ledger margin rule, errors */
    --tick: #2e8a56;         /* reconciled tick */
    --focus: #2f64b0;        /* focus ring, ledger blue */
    --ink: #17231f;
    --muted: #56685f;
    --line: #b8c8bf;         /* input borders */
    --surface: #ffffff;

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 6px;
}

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

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

body.auth {
    margin: 0;
    min-height: 100vh;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    font-stretch: 100%;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Shell ---------- */

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(26rem, 46%) 1fr;
}

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

.auth-brand {
    background: var(--ledger-900);
    color: #e3ede7;
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.wordmark {
    font-size: 1.375rem;
    font-weight: 700;
    font-stretch: 125%;
    letter-spacing: 0.005em;
    color: #ffffff;
}

.brand-body {
    margin-block: auto;
    max-width: 32rem;
    container-type: inline-size;
}

.brand-headline {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.1vw, 2.75rem);
    line-height: 1.08;
    font-weight: 600;
    font-stretch: 115%;
    letter-spacing: -0.01em;
    color: #f4f8f5;
    max-width: 20ch;
    text-wrap: balance;
}

.brand-sub {
    margin: 0 0 2.25rem;
    color: #a9c3b8;
    max-width: 38ch;
}

/* The reconciliation tape: a strip of ledger paper with today's postings */

.tape {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    border-radius: 3px;
    padding: 0.25rem 1.25rem 1rem 2.75rem;
    position: relative;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 22px 40px -22px rgba(0, 0, 0, 0.55);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* ledger margin: double red rule */
.tape::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.75rem;
    width: 4px;
    border-left: 1px solid rgba(179, 38, 30, 0.55);
    border-right: 1px solid rgba(179, 38, 30, 0.55);
}

.tape-date {
    padding: 0.75rem 0 0.5rem;
    font-weight: 600;
    color: var(--ledger-700);
    border-bottom: 1px solid var(--rule);
}

.tape-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tape-rows li,
.tape-total {
    display: grid;
    grid-template-columns: 3.75rem 1fr auto 6.25rem;
    align-items: center;
    column-gap: 0.75rem;
    min-height: 2.25rem;
    border-bottom: 1px solid var(--rule);
}

.t-ref {
    color: var(--muted);
}

.t-amt {
    text-align: right;
    font-weight: 600;
}

.t-post {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ledger-700);
    font-weight: 500;
}

.tick {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.tick path {
    fill: none;
    stroke: var(--tick);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: tick-draw 0.32s ease-out forwards;
    animation-delay: calc(0.6s + var(--i, 0) * 0.3s);
}

/* total: single rule above, double rule below */
.tape-total {
    grid-template-columns: 1fr auto 6.25rem;
    font-weight: 600;
    border-top: 1px solid var(--ink);
    border-bottom: 3px double var(--ink);
    margin-top: 0.5rem;
    opacity: 0;
    animation: total-in 0.4s ease-out forwards;
    animation-delay: 1.95s;
}

@container (max-width: 27rem) {
    .tape-rows li {
        grid-template-columns: minmax(0, 1fr) auto 5.75rem;
    }

    .tape-total {
        grid-template-columns: minmax(0, 1fr) auto 5.75rem;
    }

    .t-ref {
        display: none;
    }
}

@keyframes tick-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes total-in {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tick path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .tape-total {
        animation: none;
        opacity: 1;
    }
}

/* ---------- Main (form side) ---------- */

.auth-main {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.auth-main-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin {
    width: 100%;
    max-width: 23rem;
}

.signin-title {
    overflow-wrap: anywhere;
    margin: 0 0 0.375rem;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 650;
    font-stretch: 110%;
    letter-spacing: -0.01em;
}

.signin-lede {
    margin: 0 0 2rem;
    color: var(--muted);
}

.signin-form {
    display: grid;
    gap: 1.25rem;
}

.field {
    display: grid;
    gap: 0.375rem;
}

.field label {
    font-size: 0.875rem;
    font-weight: 600;
}

.field input {
    width: 100%;
    height: 2.875rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}

.field input:hover {
    border-color: #8fa89b;
}

.field input:focus {
    outline: 3px solid rgba(47, 100, 176, 0.3);
    outline-offset: 1px;
    border-color: var(--focus);
}

.field input.input-validation-error {
    border-color: var(--margin-red);
}

.field-error {
    font-size: 0.8125rem;
    color: var(--margin-red);
}

.field-error:empty {
    display: none;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 4.5rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    height: 2rem;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ledger-700);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.password-toggle:hover {
    background: var(--paper);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    cursor: pointer;
    width: fit-content;
}

.check input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--ledger-700);
}

.check input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    padding: 0 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:focus-visible {
    outline: 3px solid rgba(47, 100, 176, 0.45);
    outline-offset: 2px;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    cursor: progress;
    opacity: 0.75;
}

.btn-primary {
    color: #ffffff;
    background: var(--ledger-700);
    border: 1px solid var(--ledger-700);
    margin-top: 0.25rem;
}

.btn-primary:hover:not(:disabled) {
    background: var(--ledger-800);
    border-color: var(--ledger-800);
}

.btn-secondary {
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
}

.btn-secondary:hover {
    border-color: #8fa89b;
    background: #f7faf7;
}

.signin-external {
    display: grid;
    gap: 0.75rem;
}

.or {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.5rem 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.or::before,
.or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dbe5df;
}

/* ---------- Messages ---------- */

.form-alert {
    padding: 0.75rem 0.875rem;
    border-left: 3px solid var(--margin-red);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #fbeeed;
    color: #8a1c15;
    font-size: 0.9375rem;
}

.form-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-alert.validation-summary-valid {
    display: none;
}

.signin-help {
    margin: 1.75rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}

.auth-footer {
    width: 100%;
    max-width: 23rem;
    margin-inline: auto;
    padding-top: 2rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ---------- Small screens: compact brand band, form first ---------- */

@media (max-width: 860px) {
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-brand {
        padding: 1.125rem 1.25rem;
    }

    .brand-body {
        display: none;
    }

    .auth-main {
        padding: 2rem 1.25rem 1.5rem;
    }

    .auth-main-inner {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .signin,
    .auth-footer {
        max-width: 26rem;
        margin-inline: 0;
    }
}