/* ========================================================================
   Page: Login (/prijava) — javna autentikacija.
   Izvor: Pages/Account/Login.cshtml inline <style>. Bez vizuelnih izmena.
   ======================================================================== */

:root {
    /* Lokalni aliasi prebaceni na semanticke tokene iz foundation/tokens.css.
       Vrednosti su 1:1 (zero-visual-change). */
    --navy:  var(--c-text-strong);   /* var(--c-text-strong) */
    --blue:  var(--c-brand);         /* var(--c-brand) */
    --text:  var(--c-text-primary);  /* var(--c-text-primary) */
    --muted: var(--c-text-muted);    /* var(--c-text-muted) */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--p-font-text);
    color: var(--text);
    background:
        radial-gradient(circle at 78% 36%, rgba(37, 99, 235,.12), transparent 32%),
        radial-gradient(circle at 22% 78%, rgba(96, 165, 250,.10), transparent 34%),
        linear-gradient(180deg, var(--p-white) 0%, var(--p-slate-75) 56%, var(--c-surface-page-soft) 100%);
    overflow-x: hidden;
}

a { color: inherit; }

/* Header */
.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    pointer-events: none;
}

.nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(7,31,77,0) 0%, rgba(7,31,77,.08) 30%, rgba(7,31,77,.08) 70%, rgba(7,31,77,0) 100%);
    pointer-events: none;
}

.nav {
    position: relative;
    height: 60px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-block;
    text-decoration: none;
    font-family: var(--p-font-display);
    font-weight: 680;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -0.062em;
    color: var(--navy);
    padding-bottom: 6px;
    background-image: linear-gradient(90deg, var(--blue), rgba(37, 99, 235,.15), transparent);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
}
.brand .rs { color: var(--blue); }

.nav-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 14px;
    color: var(--p-slate-600);
    padding: 8px 14px;
    border-radius: 999px;
}
.nav-back:hover { background: rgba(7,31,77,.04); }
.nav-back svg { width: 14px; height: 14px; }

/* Layout */
.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 28px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    min-height: calc(100vh - 60px);
}

/* Intro side */
/* .intro-eyebrow je uklonjen iz vizuelnog jezika (kill switch u foundation/primitives.css). */

.intro-title {
    margin: 0;
    font-family: var(--p-font-display);
    font-weight: 650;
    font-size: clamp(38px, 4.4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--navy);
}

.intro-sub {
    margin: 18px 0 28px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--p-slate-500);
    letter-spacing: -0.01em;
    max-width: 460px;
}

.intro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    max-width: 460px;
}
.intro-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--p-slate-600);
}
.intro-list li::before {
    content: "";
    width: 20px; height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat;
}

.intro-foot {
    margin-top: 30px;
    font-size: 13px;
    color: var(--c-text-subtle);
    max-width: 460px;
}

/* Card */
.card {
    position: relative;
    padding: 36px 36px 30px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.92) 100%) padding-box,
        linear-gradient(160deg, rgba(255,255,255,1), rgba(180,205,255,.5), rgba(255,255,255,.85)) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        0 40px 80px -30px rgba(7,31,77,.28),
        0 14px 30px -16px rgba(37, 99, 235,.15),
        inset 0 1px 0 rgba(255,255,255,1);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.card-head { margin-bottom: 24px; }
.card-head h1 {
    margin: 0 0 8px;
    font-family: var(--p-font-display);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.03em;
    color: var(--navy);
}
.card-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--c-text-secondary);
}

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 6px; }
.label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.input {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    border: 1.5px solid var(--c-border-strong);
    background: rgba(255,255,255,.9);
    padding: 0 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    /* Dug placeholder na uskom mobilnom: skrati sa „…" umesto tvrdog odsecanja bez naznake. */
    text-overflow: ellipsis;
}
.input::placeholder { color: var(--c-text-subtle); }
.input:hover { border-color: rgba(7,31,77,.18); }
.input:focus {
    border-color: var(--c-focus-ring-border);
    background: var(--p-white);
    box-shadow: 0 0 0 4px var(--c-focus-ring);
}

.password-wrap { position: relative; }
.password-wrap .input { padding-right: 46px; }
.pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: var(--c-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pw-toggle:hover { background: var(--c-border-hairline); color: var(--navy); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .icon-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .icon-eye { display: none; }
.pw-toggle[aria-pressed="true"] .icon-eye-off { display: inline; }

.field-error {
    min-height: 16px;
    font-size: 12.5px;
    color: var(--p-red-500);
    letter-spacing: -0.01em;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--p-slate-600);
    cursor: pointer;
    user-select: none;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(7,31,77,.20);
    background: var(--p-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.check input:checked + .box {
    background: var(--blue);
    border-color: var(--blue);
}
.check input:checked + .box::after {
    content: "";
    width: 10px; height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
}
.check input:focus-visible + .box {
    box-shadow: 0 0 0 4px var(--c-focus-ring);
}

.link {
    font-size: 13.5px;
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
}
.link:hover { text-decoration: underline; }

.alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.4;
}
.alert.is-visible { display: flex; }
.alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.alert-error {
    background: rgba(211,59,59,.08);
    border: 1px solid rgba(211,59,59,.18);
    color: var(--p-red-600);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: transform .12s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
    color: var(--p-white);
    background: linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-strong) 100%);
    box-shadow: 0 14px 28px rgba(37, 99, 235,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(37, 99, 235,.38), inset 0 1px 0 rgba(255,255,255,.35); }

/* Loading state — sakrij sadržaj, prikaži ring-spinner; aktivira pb-util.js (data-submit-lock). */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: .9;
    transform: none;
}
.btn.is-loading svg { visibility: hidden; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: var(--p-white);
    border-radius: 50%;
    animation: login-btn-spin .7s linear infinite;
}
@keyframes login-btn-spin { 100% { transform: rotate(360deg); } }

/* Link stilizovan kao primarno dugme (npr. „Idi na prijavu" posle reseta) */
.btn--as-link { text-decoration: none; }

/* Pomoćni tekst u kartici (ForgotPassword potvrda) */
.card-note {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.card-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border-divider);
    text-align: center;
    font-size: 13.5px;
    color: var(--c-text-secondary);
}
.card-foot a { color: var(--blue); text-decoration: none; font-weight: 500; }
.card-foot a:hover { text-decoration: underline; }
.card-foot .legal { display: block; margin-top: 10px; font-size: 12px; color: var(--c-text-subtle); }

@media (max-width: 980px) {
    .page {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 22px 48px;
        min-height: 0;
    }
    /* Mobile: forma je primarni cilj — ide prva, intro pada ispod kao podrška. */
    .page > [aria-label="Prijava"] { order: 1; }
    .page > .intro-side { order: 2; text-align: center; }
    .intro-sub, .intro-list, .intro-foot { margin-left: auto; margin-right: auto; }
    .intro-list li { text-align: left; }
    .card { padding: 28px 24px 24px; border-radius: 24px; }
}

@media (max-width: 720px) {
    /* Na pravom mobile-u skraćujemo intro na minimum: naslov + jedna rečenica.
       Lista benefita i disclaimer se sakrivaju da forma bude odmah u prvom kadru. */
    .page { padding: 18px 18px 40px; gap: 22px; }
    .intro-side { padding: 0 4px; }
    .intro-title {
        font-size: clamp(22px, 6.4vw, 28px);
        line-height: 1.18;
        letter-spacing: -0.025em;
    }
    .intro-sub {
        margin: 10px auto 0;
        font-size: 14px;
        line-height: 1.45;
        max-width: 360px;
    }
    .intro-list,
    .intro-foot { display: none; }
}

@media (max-width: 560px) {
    /* Header — TAMNA verzija (kao app topbar / landing): navy traka, beli
       wordmark + plavi „.rs". Pokriva i Prijavu i Registraciju (deljeni nav). */
    .nav-wrap::after {
        opacity: 1;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 100%);
    }
    .nav-wrap::before {
        background:
            radial-gradient(320px 180px at 0% 0%, rgba(37,99,235,.16), transparent 70%),
            linear-gradient(180deg, rgba(14,26,51,.97) 0%, rgba(11,20,38,.97) 100%);
    }
    .nav { height: 64px; padding: 0 20px; }
    .brand { font-size: 32px; color: var(--c-surface-page-soft); }
    .brand .rs { color: var(--c-brand-soft); }
    .nav-back { color: var(--c-side-text); }
    .nav-back:hover { background: rgba(255,255,255,.08); }
    .nav-back span { display: none; }
    .card { padding: 22px 18px 20px; border-radius: 20px; }
    .card-head { margin-bottom: 18px; }
    .card-head h1 { font-size: 24px; }
    .card-head p { font-size: 13.5px; }
}