/* Vika Ponto: local-only public login theme, independent of the entity theme. */
body {
    --login-bg: #080f20;
    --login-surface: #0c162b;
    --login-field: #091325;
    --login-ink: #edf6ff;
    --login-muted: #a4b5ca;
    --login-accent: #5ce1f2;
    --login-border: rgba(149, 188, 221, .2);
    visibility: visible;
    background: var(--login-bg);
    color: var(--login-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}

body.theme-loaded { visibility: visible; }

.login-bg {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 16% 10%, rgba(28, 103, 143, .2), transparent 48%),
        radial-gradient(ellipse at 88% 85%, rgba(22, 119, 139, .13), transparent 44%),
        linear-gradient(145deg, #0c162b, #080f20 62%);
}

.login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(rgba(117, 175, 205, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 175, 205, .025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(#000, transparent 80%);
}

.login-shell { max-width: 1440px; }
.login-bg header { min-height: 56px; gap: 1rem; }
.vika-brand { display: flex; align-items: center; gap: 1rem; }
.vika-brand > span {
    padding-left: 1rem;
    border-left: 1px solid var(--login-border);
    color: var(--login-ink);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .025em;
}

/* Logo oficial da Vika Holding (branco, PNG transparente, o mesmo do mail.vika.com.pt) */
.vika-brand-logo { display: block; flex: 0 0 auto; line-height: 0; border-radius: 4px; }
.vika-brand-logo:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }
#appLogo {
    display: block;
    width: auto;
    height: 92px;
    max-width: none;
    object-fit: contain;
}

.login-stage { align-items: center; padding-block: 2.5rem; }
.login-column { width: 100%; max-width: 500px; }
.login-card {
    position: relative;
    color: var(--login-ink);
    background: rgba(12, 22, 43, .92);
    border: 1px solid var(--login-border);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .4), 0 0 50px rgba(44, 194, 218, .045);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.login-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--login-accent), transparent);
    pointer-events: none;
}

.login-eyebrow {
    color: var(--login-accent);
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.login-card h1 { font-size: 1.65rem; line-height: 1.25; letter-spacing: -.035em; }
.login-card h1 > .bi { color: var(--login-accent); }
.login-card p { line-height: 1.65; }
.login-card .text-muted,
.login-card .text-secondary { color: var(--login-muted) !important; }
.login-card .text-dark { color: var(--login-ink) !important; }
.login-card .form-label { margin-bottom: .55rem; }
.login-card .input-group { border-radius: 12px; }
.login-card .form-control,
.login-card .form-select,
.login-card .input-group-text,
.login-card .btn-toggle-password {
    min-height: 50px;
    background-color: var(--login-field) !important;
    border-color: var(--login-border) !important;
    color: var(--login-ink);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Keep Bootstrap's joined control corners and existing JS selectors intact. */
.login-card .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.login-card .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.login-card .input-group-text { padding-inline: 1rem; }
.login-card .input-group-text .bi { color: var(--login-muted) !important; }
.login-card .form-control::placeholder { color: #8295ad; opacity: 1; }
.login-card .form-select { color-scheme: dark; }
.login-card .form-select option { background: var(--login-field); color: var(--login-ink); }
.login-card .input-group:focus-within { box-shadow: 0 0 0 3px rgba(92, 225, 242, .13); }
.login-card .input-group:focus-within > * { border-color: var(--login-accent) !important; }
.login-card .form-control:focus,
.login-card .form-select:focus { box-shadow: 0 0 0 3px rgba(92, 225, 242, .13); border-color: var(--login-accent) !important; }
.login-card .input-group .form-control:focus,
.login-card .input-group .form-select:focus { box-shadow: none; }
.login-card input:-webkit-autofill {
    -webkit-text-fill-color: var(--login-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--login-field) inset;
    caret-color: var(--login-ink);
}
.login-card .btn-toggle-password { padding-inline: 1rem; background: var(--login-field) !important; }
.login-card .btn-toggle-password:hover { background: #15253b !important; }
.login-card .btn-toggle-password .bi { color: var(--login-muted) !important; }

.login-card .btn-styled-theme,
#consentimentoModal .btn-success {
    --bs-btn-color: #05222d;
    --bs-btn-bg: #5ce1f2;
    --bs-btn-border-color: #5ce1f2;
    color: #05222d;
    background: linear-gradient(110deg, #5ce1f2, #43cce3);
    border: 1px solid #5ce1f2;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    min-height: 50px;
    box-shadow: 0 6px 24px rgba(42, 200, 224, .15) !important;
    transition: background .15s ease, box-shadow .15s ease;
}
.login-card .btn-styled-theme:hover,
#consentimentoModal .btn-success:hover { color: #05222d; background: #8bedf8; border-color: #8bedf8; }
.login-card .btn-styled-theme:active,
#consentimentoModal .btn-success:active { color: #05222d; background: #43cce3; }
.login-card .btn:disabled,
#consentimentoModal .btn:disabled { opacity: .5; box-shadow: none !important; }
.login-card .btn-outline-primary { color: var(--login-accent); border-color: rgba(92, 225, 242, .4); }
.login-card .btn-outline-primary:hover { background: rgba(92, 225, 242, .12); }
.login-card .btn-outline-danger,
#consentimentoModal .btn-outline-danger { color: #ffabb5; border-color: rgba(255, 135, 155, .4); }
.login-card .btn-outline-danger:hover,
#consentimentoModal .btn-outline-danger:hover { background: rgba(255, 135, 155, .12); }
.login-card .text-danger { color: #ffabb5 !important; }
.login-card hr { border-color: var(--login-border); opacity: 1; }
.login-card .codigo-digit-input-for-mfa { width: 2.8rem; height: 3.3rem; font-weight: 600; }
.login-card #mfaPanel > .col-12 > .row { flex-wrap: nowrap; --bs-gutter-x: .4rem; }

#languageDropdown {
    border: 1px solid var(--login-border);
    border-radius: 10px;
    font-size: .85rem;
    background: rgba(12, 22, 43, .6);
    min-height: 42px;
}
#languageDropdown:hover { border-color: rgba(92, 225, 242, .5); }
.login-bg .dropdown-menu {
    color: var(--login-ink);
    background: #111e33;
    border: 1px solid var(--login-border);
    border-radius: 12px;
    padding: .4rem;
}
.login-bg .dropdown-item { color: var(--login-ink); border-radius: 7px; padding: .6rem .8rem; }
.login-bg .dropdown-item:hover,
.login-bg .dropdown-item:focus { background: rgba(92, 225, 242, .1); color: var(--login-accent); }

.login-bg footer { color: var(--login-muted) !important; font-size: .75rem; line-height: 1.8; }
.login-bg footer .opacity-75 { opacity: 1 !important; }
.login-bg footer a.text-white { color: var(--login-muted) !important; }
.login-bg footer a:hover { color: var(--login-accent) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.login-bg :is(button, a):focus-visible,
#consentimentoModal button:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }

#consentimentoModal .modal-content {
    background: #0c162b;
    color: var(--login-ink);
    border: 1px solid var(--login-border);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
#consentimentoModal .modal-header.bg-primary { background: #12243a !important; border-color: var(--login-border); border-radius: 18px 18px 0 0; }
#consentimentoModal .modal-header .bi,
#consentimentoModal .modal-body > [role="alert"] > .bi { color: var(--login-accent); }
#consentimentoModal .modal-body { line-height: 1.7; }
#consentimentoModal .modal-footer { border-color: var(--login-border); gap: .5rem; }
#consentimentoModal a { color: var(--login-accent); }
#consentimentoTexto { overflow-wrap: anywhere; }

.login-card.loading { pointer-events: none; opacity: .7; }
.login-card.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 32, .35);
    border-radius: inherit;
    pointer-events: none;
}
#loginLoader { z-index: 1060; }
#loginLoader .spinner-border { color: var(--login-accent) !important; }
#alertContainer .alert { border-radius: 10px; font-size: .9rem; }
.login-bg ::selection,
#consentimentoModal ::selection { color: #05222d; background: var(--login-accent); }

@media (max-width: 575.98px) {
    .login-shell { padding: 1.25rem !important; }
    .login-stage { padding-block: 1.5rem; }
    .login-card { border-radius: 18px; }
    .login-card .card-body { padding: 1.5rem !important; }
    .login-card h1 { font-size: 1.4rem; }
    .vika-brand { gap: .65rem; }
    .vika-brand > span { font-size: .85rem; padding-left: .65rem; }
    #appLogo { height: 60px; }
    .login-card .codigo-digit-input-for-mfa { width: clamp(1.75rem, 8vw, 2.8rem); min-height: 44px; height: 2.8rem; }
    #consentimentoModal .modal-footer > .btn { flex: 1 1 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-bg *, .login-bg *::before, .login-bg *::after,
    #consentimentoModal, #consentimentoModal * { animation: none !important; transition: none !important; }
}