/* =============================================
   H.A.I.R — Tenant Login Page
   Layout only — all visual styling from base.css
   ============================================= */

body.login-body {
    background: var(--color-bg) !important;
}

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1.5rem;
}

/* ── Tenant Logo ── */
.login-logo {
    margin-bottom: 3.5rem;
}

.login-logo img {
    max-height: 160px;
    max-width: 340px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.hair-logo--large {
    font-size: 3.5rem;
}

/* ── Form container ── */
.login-form-wrap {
    width: 100%;
    max-width: 560px;
}

/* ── Error ── */
.login-error {
    color: var(--color-danger);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}

/* ── Two fields flush in one row ── */
.login-fields-row {
    display: flex;
    gap: 10px;
}

.login-field {
    flex: 1;
}

.login-field .form-input {
    border-radius: 0;
    padding: 16px 20px;
}

/* ── Submit button in same row as fields ── */
.login-submit {
    flex-shrink: 0;
    border-radius: 0;
    padding: 16px 30px;
    white-space: nowrap;
}

/* ── Powered by ── */
.login-powered-by {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.login-powered-text {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-muted);
    opacity: 0.45;
}

.login-powered-logo .hair-logo {
    font-size: 1.4rem;
}

/* Always use H.A.I.R. CI teal for powered-by logo, not tenant color */
.login-powered-logo .hair-logo .ai {
    color: #1A989D;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .login-fields-row {
        flex-direction: column;
    }

    .login-submit {
        width: 100%;
    }

    .login-logo img {
        max-height: 120px;
    }
}