/* Login / account pages — standalone styling for the anonymous _LoginLayout.
   Reuses the shared theme variables so the sign-in screen matches the app shell. */

.login-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Classic (AntDesign blue) is the default theme. --page-bg comes from site.css and is
       overridden per theme in theme-variables.css, so it still shows through while the photo
       loads and anywhere the photo cannot cover. */
    background-color: var(--page-bg, #4e73cb);
    /* The gradient sits above the photo and darkens it just enough to keep the white card edge
       and the footer text readable regardless of what part of the image is in view. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                      url("../img/HomeBackground1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.login-page main {
    flex: 1 1 auto;
    display: flex;
}

.login-shell {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--pop-bg, #ffffff);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    padding: 40px 36px 32px;
}

.login-brand {
    text-align: center;
    margin-bottom: 20px;
}

/* The mark is roughly 5:3 (892×537 viewBox), so height is the dimension worth pinning — 84px
   lands it at ~140px wide, well inside the card's 328px content width at any card size. */
.login-logo {
    display: block;
    height: 84px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* The mark is near-black green (#06381d) and the card turns #1c2338 under the dark theme, where
   it would all but disappear. A light plate keeps the brand colours intact rather than filtering
   or inverting them. Only the dark theme needs this — every other theme's card is white. */
[data-theme="dark"] .login-logo {
    /* content-box so the plate grows around the mark instead of the inherited border-box
       sizing eating the padding out of the 84px and shrinking it below the other themes. */
    box-sizing: content-box;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 8px;
}

.login-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    color: var(--pop-title, rgba(0, 0, 0, 0.88));
    text-align: center;
}

.login-subtitle {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--pop-muted, rgba(0, 0, 0, 0.45));
    text-align: center;
}

.login-field {
    margin-bottom: 16px;
}

.login-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pop-text, rgba(0, 0, 0, 0.88));
}

.login-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pop-text, rgba(0, 0, 0, 0.88));
    background: #ffffff;
    border: 1px solid var(--pop-border, #d9d9d9);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-input:focus {
    outline: none;
    border-color: var(--btn-accent-bg, #1890ff);
    box-shadow: 0 0 0 2px var(--btn-accent-shadow, rgba(24, 144, 255, 0.35));
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--pop-text, rgba(0, 0, 0, 0.88));
    cursor: pointer;
    user-select: none;
}

.login-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--btn-accent-bg, #1890ff);
    cursor: pointer;
}

.login-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--btn-accent-shadow, rgba(24, 144, 255, 0.35));
}

.login-button {
    width: 100%;
    margin-top: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--btn-accent-color, #ffffff);
    background: var(--btn-accent-bg, #1890ff);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.login-button:hover {
    background: var(--btn-accent-hover-bg, #40a9ff);
}

/* Busy state, set by login.js on submit. The sign-in round trip hits the database and then
   loads the app shell, so the button carries the progress rather than leaving the form looking
   untouched. Keeps the accent fill — greying out reads as "rejected"; the spinner is the signal.
   :hover and :disabled are matched too, both of which apply to the same element while busy. */
.login-button.is-busy,
.login-button.is-busy:hover,
.login-button.is-busy:disabled {
    background: var(--btn-accent-bg, #1890ff);
    color: var(--btn-accent-color, #ffffff);
    cursor: progress;
}

/* currentColor keeps the ring on the button's own foreground token, so it tracks every theme. */
.login-button.is-busy::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

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

/* Still turns — a frozen ring would read as "stuck" — just slowly enough not to provoke. */
@media (prefers-reduced-motion: reduce) {
    .login-button.is-busy::before {
        animation-duration: 2.4s;
    }
}

.login-link {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--pop-muted, rgba(0, 0, 0, 0.45));
}

/* Validation summary renders an empty <div> when there are no errors — keep it hidden. */
.login-alert:empty,
.login-alert.validation-summary-valid {
    display: none;
}

.login-alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 6px;
}

.login-alert ul {
    margin: 0;
    padding-left: 18px;
}

.login-alert--error {
    color: #a8071a;
    background: #fff1f0;
    border: 1px solid #ffccc7;
}

.login-alert--info {
    color: #0958d9;
    background: #e6f4ff;
    border: 1px solid #91caff;
}

.login-footer {
    flex: 0 0 auto;
    padding: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--footer-text, rgba(255, 255, 255, 0.80));
}