/* Corporate Light — login / unauthenticated layout (centered, corner blobs).
   Colour + radii + feel are INHERITED from corporate-light.css (loaded first);
   this file only adds the login-specific layout on top — no token redefinition. */

.cl-login-body {
    margin: 0; min-height: 100vh; position: relative; overflow: hidden;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--cl-body); background: #ffffff;
}

/* ── Decorative corner blobs (inherit the theme colour) ───────────────────── */
.cl-login-blob {
    position: fixed; z-index: 0; pointer-events: none; aspect-ratio: 1; width: 40vw; max-width: 600px;
    /* Inherits the theme green; hex fallbacks keep the blobs visible even if the token sheet lags. */
    background: linear-gradient(140deg, var(--cl-green-400, #3da46b) 0%, var(--cl-green, #1a7a4a) 55%, var(--cl-green-700, #114f31) 100%);
}
.cl-login-blob--start {
    inset-inline-start: -5vw;
    bottom: -8vw;
    border-radius: 3% 20% 5% 48% / 58% 42% 58% 42%;
    transform: rotate(-10deg);
}
.cl-login-blob--end {
    inset-inline-end: -5vw;
    top: -11vw;
    border-radius: 4% 5% 49% 54% / 80% 6% 9% 39%;
    transform: rotate(10deg);
}

/* Language picker — solid white pill so it stays legible over the white page AND the green corner blob. */
.cl-login-lang {
    background: #fff !important; color: var(--cl-green-700) !important; border: 0 !important;
    border-radius: var(--cl-radius); font-weight: 600; box-shadow: var(--cl-shadow);
}
.cl-login-lang:hover, .cl-login-lang:focus, .cl-login-lang.show {
    background: #fff !important; color: var(--cl-green-900) !important;
}
.cl-login-lang::after { color: var(--cl-green-700); }

/* ── Centered shell + flat card on white ──────────────────────────────────── */
.cl-login-shell {
    position: relative; z-index: 1; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.cl-login-card { width: 100%; max-width: 850px; background: transparent; }
.cl-login-card h1, .cl-login-card h2, .cl-login-card h3 { font-weight: 800; color: var(--cl-ink); }
.cl-login-logo { max-height: auto; width: 45%; }

/* Inputs */
.cl-login-card .form-control {
    border-radius: var(--cl-radius); padding: .7rem .9rem; border: 1px solid #d7dde6; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.cl-login-card .form-control:focus { border-color: var(--cl-green); box-shadow: 0 0 0 .2rem rgba(26,122,74,.15); }
.cl-login-card .form-label { color: var(--cl-muted); font-weight: 500; font-size: .9rem; }

/* Primary button */
.cl-login-card .btn-primary {
    background: var(--cl-green); border: none; border-radius: var(--cl-radius); padding: .7rem 1.6rem; font-weight: 700; letter-spacing: .02em;
    transition: background .2s;
}
.cl-login-card .btn-primary:hover { background: var(--cl-green-700); }
.cl-login-card a { color: var(--cl-green); }
.cl-login-card a:hover { color: var(--cl-green-900); }
.cl-login-card .validation-summary-errors ul, .cl-login-card .text-danger { font-size: .875rem; }
.cl-login-card .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220,53,69,.15); }

/* External / SSO provider buttons → clean outlined pill (matches the minimal look) */
.cl-login-card section h1, .cl-login-card section .fs-4 {
    font-size: .8rem !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: .6rem;
}
.cl-login-card section > hr { display: none; }
.cl-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100% !important;
    padding: .7rem 1rem;
    border-radius: var(--cl-radius-pill);
    font-weight: 600;
    font-size: .95rem;
    background: #15663e !important;
    color: var(--cl-ink) !important;
    border: 1px solid #d7dde6 !important;
    box-shadow: none !important;
    transition: border-color .2s, background .2s;
}
.cl-social::before { content: "\F65D"; font-family: "bootstrap-icons"; font-size: 1.1rem; color: var(--cl-green); }
.cl-social:hover { background: var(--cl-green-50) !important; border-color: var(--cl-green-200) !important; }

.cl-or { display: flex; align-items: center; text-align: center; color: var(--cl-muted); margin: 0.8rem 0; }
.cl-or::before, .cl-or::after { content: ""; flex: 1; height: 1px; background: var(--cl-line); }
.cl-or span { padding: 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; }

/* Footer */
.cl-login-footer { text-align: center; margin-top: 1.8rem; }
.cl-login-footer a { color: var(--cl-body); font-weight: 600; font-size: .9rem; text-decoration: none; }
.cl-login-footer a:hover { color: var(--cl-ink); }
.cl-login-copy { color: var(--cl-muted); font-size: .82rem; margin: .6rem 0 0; }

/* Error shake */
@keyframes cl-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.cl-shake { animation: cl-shake .45s ease-in-out; }

@media (max-width: 575.98px) {
    .cl-login-blob { width: 62vw; opacity: .92; }
    .cl-login-blob--start { bottom: -16vw; inset-inline-start: -16vw; }
    .cl-login-blob--end   { top: -18vw;   inset-inline-end: -16vw; }
}