/* Sidspecifik layout for /logga-in - bygger pa tokens/komponenter i style.css */

.login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 480px;
}
@media (max-width: 840px) {
    .login-layout { grid-template-columns: 1fr; }
}

.login-panel {
    position: relative;
    overflow: hidden;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-panel .logo-watermark {
    left: -170px;
    bottom: -130px;
    width: 560px;
    height: 766px;
}
.login-panel-header { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-panel-body { position: relative; z-index: 1; max-width: 400px; }
.login-panel-body .t-login-h1 { margin: 12px 0 20px; color: var(--gold-300); }
.login-panel-footer { position: relative; z-index: 1; color: var(--text-on-green-muted); font-size: 12.5px; }

.login-form-panel {
    background: var(--cream-100);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-form-panel form { max-width: 360px; width: 100%; }
.login-form-panel .t-h2-form { margin: 0 0 8px; }
.login-form-helper { color: var(--text-on-cream-secondary); margin: 0 0 28px; }
.login-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.login-footer-line { margin-top: 20px; font-size: 13.5px; color: var(--text-on-cream-secondary); }
.login-qr { background: var(--surface); border: 1px solid var(--border-on-cream); padding: 16px; width: fit-content; margin-bottom: 20px; }
.login-error {
    background: rgba(180, 40, 40, .08);
    border: 1px solid rgba(180, 40, 40, .3);
    color: #7a1f1f;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 14px;
}