/* ------------------------------------------------------------------
   Auth pages redesign (login + registration) — mockup-aligned polish.
   Theme-aware: colours come from the active theme's CSS variables
   (var(--nav-bg), var(--primary-color) …) so it matches the mockup's
   teal on the default theme and adapts to the other themes.
   CSP-nonce safe: external stylesheet, no inline styles.
   Purely presentational — no functional markup depends on these rules.
------------------------------------------------------------------ */

/* ===== Portal header (emblem + government name) above the card ===== */
.portal-header {
    text-align: center;
    margin: 0 auto 16px;
    max-width: 861px;
}

.portal-emblem {
    width: 58px;
    height: 58px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid color-mix(in srgb, var(--nav-bg, #095a6f) 25%, #fff);
    border-radius: 10px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--nav-bg, #095a6f) 12%, transparent);
}

.portal-emblem img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.portal-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--nav-bg, #095a6f);
    margin: 0 0 2px;
    letter-spacing: 0.02em;
}

.portal-sub {
    font-size: 0.82rem;
    color: #5e666d;
    margin: 0;
}

/* ===== Citizen / Employee login-type toggle (left brand panel) ===== */
.login-types {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    margin-top: 20px;
    position: relative;
}

.login-types-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 2px;
    text-align: center;
}

.login-type-btn {
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-type-btn:hover,
.login-type-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    outline: none;
}

.login-type-btn.active {
    background: #fff;
    color: var(--nav-bg, #095a6f);
    border-color: #fff;
    font-weight: 700;
}

/* ===== Register chips — citizen (theme colour) / employee (amber) ===== */
.login-register-links a.chip-citizen {
    color: var(--nav-bg, #095a6f);
    background: color-mix(in srgb, var(--nav-bg, #095a6f) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--nav-bg, #095a6f) 25%, #fff);
}

.login-register-links a.chip-citizen:hover,
.login-register-links a.chip-citizen:focus-visible {
    background: var(--nav-bg, #095a6f);
    color: #fff;
}

.login-register-links a.chip-employee {
    color: #c2410c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.login-register-links a.chip-employee:hover,
.login-register-links a.chip-employee:focus-visible {
    background: #c2410c;
    color: #fff;
}

.login-register-links a.chip-institute {
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
}

.login-register-links a.chip-institute:hover,
.login-register-links a.chip-institute:focus-visible {
    background: #0f766e;
    color: #fff;
}

@media (max-width: 900px) {
    /* Keep the login-type toggle usable when the brand panel stacks on top */
    .login-types {
        max-width: 320px;
    }
}

/* ===== Brand panel: match the mockup (soft ghosted avatar + divider) ===== */
/* Higher specificity (2 classes) so it overrides the view's inline avatar rules. */
.login-brand-profile .login-profile-avatar {
    width: 118px;
    height: 118px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    align-items: center;        /* centre the silhouette within the ring */
    justify-content: center;
    overflow: hidden;
    margin-bottom: 14px;
}

.login-brand-profile .login-profile-avatar svg {
    width: 90px;
    height: 99px;
    display: block;
}

.login-brand-divider {
    width: 42px;
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    margin: 4px auto 12px;
}

.login-brand-profile .login-brand-title {
    margin-bottom: 4px;
}

.login-brand-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.5;
    margin: 0 0 4px;
    text-align: center;
    max-width: 220px;
}

.login-brand-profile .login-types {
    margin-top: 14px;
}

/* ===== Captcha refresh button (theme-coloured) ===== */
.login-captcha-refresh {
    /* flex: 0 0 auto; */
    width: 42px;
    align-self: stretch;
    /* border: 1px solid color-mix(in srgb, var(--nav-bg, #095a6f) 22%, #fff); */
    /* background: color-mix(in srgb, var(--nav-bg, #095a6f) 4%, #fff); */
    color: var(--nav-bg, #095a6f);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.login-captcha-refresh:hover,
.login-captcha-refresh:focus-visible {
    background: var(--nav-bg, #095a6f);
    color: #ffffff;
    border-color: var(--nav-bg, #095a6f);
    outline: none;
}

.login-captcha-refresh:disabled {
    cursor: default;
    opacity: 0.8;
}

.login-captcha-refresh.spinning i {
    animation: captcha-spin 0.5s linear;
}

@keyframes captcha-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    /* Captcha stacks on very small screens — keep the refresh button sensible */
    .login-captcha-refresh {
        width: 100%;
        height: 40px;
        align-self: auto;
    }
}

/* ==================================================================
   RESPONSIVE — login page across all screen sizes.
   Selectors are prefixed with .login-page-bg / use 2+ classes so they
   reliably beat the view's inline <style> rules (equal-specificity
   inline rules would otherwise win by source order).
   ================================================================== */

/* Small laptops / large tablets — narrow the shell a little before it stacks */
@media (max-width: 991px) {
    .login-page-bg .login-shell {
        max-width: 640px;
    }
}

/* Stacked layout (card is single-column at <=900 in the view): make the brand
   panel compact and lay the Citizen/Employee toggle out side-by-side so the
   page isn't overly tall on tablets/phones. */
@media (max-width: 900px) {
    .login-page-bg .login-brand-profile {
        padding: 22px 20px;
    }

    .login-brand-profile .login-profile-avatar {
        width: 92px;
        height: 92px;
        margin-bottom: 10px;
    }

    .login-brand-profile .login-profile-avatar svg {
        width: 76px;
        height: 84px;
    }

    .login-page-bg .login-brand-profile .login-brand-title {
        font-size: 1.35rem;
    }

    .login-brand-divider {
        margin: 2px auto 8px;
    }

    .login-brand-profile .login-types {
        flex-direction: row;
        max-width: 380px;
        margin-top: 12px;
    }

    .login-brand-profile .login-type-btn {
        flex: 1 1 0;
    }
}

/* Phones */
@media (max-width: 576px) {
    .login-page-bg {
        padding: 10px 6px;
    }

    .portal-header {
        margin-bottom: 12px;
    }

    .portal-title {
        font-size: 0.9rem;
    }

    .portal-sub {
        font-size: 0.74rem;
    }

    .portal-emblem {
        width: 50px;
        height: 50px;
    }

    .portal-emblem img {
        width: 34px;
        height: 34px;
    }

    .login-page-bg .login-form-panel {
        padding: 20px 16px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .login-brand-profile .login-profile-avatar {
        width: 80px;
        height: 80px;
    }

    .login-brand-profile .login-profile-avatar svg {
        width: 66px;
        height: 74px;
    }

    .login-brand-profile .login-types {
        flex-direction: column;   /* stack the toggle again when it's too tight */
    }

    .portal-title {
        font-size: 0.8rem;
        letter-spacing: 0;
    }
}