/* ==========================================================================
   Auth V5 — split-panel login / registracija
   Paleta preuzeta iz FitTask mobilne aplikacije (MAUI) — "Kinetic Overdrive"
   design sustav: electric lime (#CCFF00) akcent na obsidian tamnoj podlozi.
   ========================================================================== */

:root {
    --av5-void: #141616;
    --av5-bg: #191b1b;
    --av5-surface-container-lowest: #0c0f0f;
    --av5-surface-container-low: #1a1c1c;
    --av5-surface-container: #1e2020;
    --av5-surface-container-high: #282a2b;
    --av5-surface-container-highest: #333535;

    --av5-on-surface: #e2e2e2;
    --av5-on-surface-variant: #c4c9ac;

    --av5-outline: #8e9379;
    --av5-outline-variant: #444933;

    --av5-primary: #ccff00;
    --av5-primary-tint: #abd600;
    --av5-on-primary: #0d0d0d;

    --av5-error: #ffb4ab;
    --av5-error-container: #93000a;

    --av5-font-display: 'Anybody', var(--font-sans);
    --av5-font-body: 'Space Grotesk', var(--font-sans);
    --av5-font-mono: 'Space Mono', ui-monospace, monospace;
}

body.av5-body {
    background: var(--av5-void);
    background-image:
        radial-gradient(ellipse 900px 500px at 50% 100%, rgba(204, 255, 0, .10), transparent 70%),
        radial-gradient(ellipse 600px 400px at 15% 0%, rgba(204, 255, 0, .07), transparent 70%);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center bottom, top left;
}

.av5-body .auth-orb {
    display: none;
}

.av5-body .auth-brand {
    font-family: var(--av5-font-display);
}

.av5-circuit-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.av5-body .auth-brand .brand-mark {
    background: linear-gradient(135deg, var(--av5-primary), var(--av5-primary-tint));
    color: var(--av5-on-primary);
    box-shadow: 0 4px 16px rgba(204, 255, 0, .35);
}

.av5-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
    position: relative;
    z-index: 1;
}

/* ---------- Card shell (fluid sliding pattern) ---------- */

.av5-card {
    position: relative;
    width: 100%;
    max-width: 860px;
    min-height: 640px;
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgba(20, 22, 22, .6);
    border: 1px solid var(--av5-surface-container-highest);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(204, 255, 0, .08);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* --- Form panels: absolutely stacked, cross-fade + slide --- */

.av5-form-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: rgba(25, 27, 27, .82);
    transition: transform .65s cubic-bezier(.65, 0, .35, 1), opacity .5s ease;
}

.av5-form-login {
    z-index: 2;
    transform: translateX(0);
    opacity: 1;
}

.av5-form-signup {
    z-index: 1;
    transform: translateX(0);
    opacity: 0;
}

.av5-card.av5-signup .av5-form-login {
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
}

.av5-card.av5-signup .av5-form-signup {
    transform: translateX(100%);
    opacity: 1;
    z-index: 2;
}

.av5-form-title {
    font-family: var(--av5-font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    color: var(--av5-on-surface);
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

/* --- Overlay: fixed 50% window that slides + a 200%-wide inner strip --- */

.av5-overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 5;
    transition: transform .65s cubic-bezier(.65, 0, .35, 1), clip-path .65s cubic-bezier(.65, 0, .35, 1);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}

.av5-card.av5-signup .av5-overlay-container {
    transform: translateX(-100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.av5-overlay {
    position: relative;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(155deg, var(--av5-primary) 0%, var(--av5-primary-tint) 55%, #7a9900 100%);
    transform: translateX(0);
    transition: transform .65s cubic-bezier(.65, 0, .35, 1);
}

.av5-card.av5-signup .av5-overlay {
    transform: translateX(50%);
}

.av5-overlay-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--av5-on-primary);
    padding: clamp(1.5rem, 4vw, 3rem);
    transition: transform .65s cubic-bezier(.65, 0, .35, 1);
}

.av5-overlay-left {
    left: 0;
}

.av5-overlay-right {
    right: 0;
}

.av5-overlay-panel h2 {
    font-family: var(--av5-font-display);
    font-weight: 700;
    font-size: var(--fs-2xl);
    margin-bottom: .75rem;
    letter-spacing: -0.01em;
}

.av5-overlay-panel p {
    font-family: var(--av5-font-body);
    color: rgba(13, 13, 13, .72);
    font-size: var(--fs-sm);
    max-width: 260px;
    margin: 0 auto 1.75rem;
}

/* Entrance animation for whichever overlay panel becomes visible */

@keyframes av5OverlayIn {
    from { opacity: 0; transform: translateY(14px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.av5-overlay-left h2,
.av5-overlay-left p,
.av5-overlay-left .av5-ghost-btn,
.av5-overlay-right h2,
.av5-overlay-right p,
.av5-overlay-right .av5-ghost-btn {
    animation: none;
}

.av5-card.av5-signup .av5-overlay-left h2,
.av5-card.av5-signup .av5-overlay-left p,
.av5-card.av5-signup .av5-overlay-left .av5-ghost-btn {
    animation: av5OverlayIn .5s cubic-bezier(.34, 1.56, .64, 1) .28s both;
}

.av5-card:not(.av5-signup) .av5-overlay-right h2,
.av5-card:not(.av5-signup) .av5-overlay-right p,
.av5-card:not(.av5-signup) .av5-overlay-right .av5-ghost-btn {
    animation: av5OverlayIn .5s cubic-bezier(.34, 1.56, .64, 1) .28s both;
}

.av5-ghost-btn {
    background: transparent;
    border: 1.5px solid rgba(13, 13, 13, .55);
    color: var(--av5-on-primary);
    font-family: var(--av5-font-mono);
    font-weight: 700;
    border-radius: .85rem;
    padding: .7rem 2rem;
    transition: background .2s ease, transform .15s ease;
}

.av5-ghost-btn:hover {
    background: rgba(13, 13, 13, .1);
}

.av5-ghost-btn:active {
    transform: scale(.97);
}

/* ---------- Fields ---------- */

.av5-field {
    position: relative;
    margin-bottom: 1rem;
}

.av5-field input,
.av5-field select {
    width: 100%;
    background: var(--av5-surface-container-low);
    border: 1px solid var(--av5-outline-variant);
    border-radius: .85rem;
    padding: .85rem 2.75rem .85rem 2.6rem;
    color: var(--av5-on-surface);
    font-family: var(--av5-font-body);
    font-size: var(--fs-base);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.av5-field input::placeholder {
    color: var(--av5-outline);
}

.av5-field input:focus,
.av5-field select:focus {
    outline: none;
    border-color: var(--av5-primary);
    background: var(--av5-surface-container);
    box-shadow: 0 0 0 4px rgba(204, 255, 0, .16);
}

.av5-field-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--av5-outline);
    pointer-events: none;
}

.av5-field-toggle {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--av5-outline);
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.av5-field-toggle:hover {
    color: var(--av5-primary);
}

.av5-row {
    display: flex;
    gap: .75rem;
}

.av5-row .av5-field {
    flex: 1;
}

/* ---------- Buttons / links ---------- */

.btn-av5 {
    width: 100%;
    background: linear-gradient(90deg, var(--av5-primary), var(--av5-primary-tint));
    border: none;
    color: var(--av5-on-primary);
    font-family: var(--av5-font-mono);
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: .85rem;
    padding: .85rem 1rem;
    box-shadow: 0 8px 24px rgba(204, 255, 0, .28);
    transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-av5:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 30px rgba(204, 255, 0, .4);
    color: var(--av5-on-primary);
}

.btn-av5:active {
    transform: scale(.98);
}

.btn-av5:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.av5-switch-line {
    text-align: center;
    color: var(--av5-outline);
    font-family: var(--av5-font-body);
    font-size: var(--fs-sm);
    margin-top: 1.25rem;
}

.av5-switch-line a,
.av5-switch-line button.av5-linklike {
    color: var(--av5-primary);
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

.av5-switch-line a:hover,
.av5-switch-line button.av5-linklike:hover {
    text-decoration: underline;
}

.av5-forgot {
    display: block;
    text-align: right;
    color: var(--av5-outline);
    font-family: var(--av5-font-body);
    font-size: var(--fs-xs);
    margin: -.4rem 0 1.25rem;
    text-decoration: none;
}

.av5-forgot:hover {
    color: var(--av5-primary);
}

.av5-role-group {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
}

.av5-role-group input[type="radio"] {
    display: none;
}

.av5-role-group label {
    flex: 1;
    text-align: center;
    border: 1px solid var(--av5-outline-variant);
    border-radius: .85rem;
    padding: .55rem;
    color: var(--av5-on-surface-variant);
    font-family: var(--av5-font-body);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all .2s ease;
}

.av5-role-group input[type="radio"]:checked + label {
    background: rgba(204, 255, 0, .16);
    border-color: var(--av5-primary);
    color: var(--av5-primary);
}

.av5-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--av5-outline);
    font-family: var(--av5-font-body);
    font-size: var(--fs-xs);
    cursor: pointer;
    margin-bottom: 1.25rem;
}

.av5-remember input {
    accent-color: var(--av5-primary);
}

.av5-card .alert-danger {
    background: var(--av5-error-container);
    border-color: rgba(255, 180, 171, .35);
    color: var(--av5-error);
}

/* ---------- Responsive ---------- */
/* Below 760px the side-by-side sliding layout doesn't fit; fall back to a
   single stacked column and swap content with a simple cross-fade instead
   of the transform-based slide. */

@media (max-width: 760px) {
    .av5-card {
        min-height: 0;
    }

    .av5-form-panel,
    .av5-overlay-container {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        transform: none !important;
        clip-path: none !important;
        transition: opacity .4s ease;
    }

    .av5-form-login,
    .av5-form-signup {
        display: none;
        opacity: 1;
    }

    .av5-card:not(.av5-signup) .av5-form-login {
        display: flex;
        order: 1;
    }

    .av5-card.av5-signup .av5-form-signup {
        display: flex;
        order: 1;
    }

    .av5-overlay-container {
        order: 2;
        overflow: visible;
    }

    .av5-overlay {
        position: relative;
        left: auto;
        width: 100%;
        transform: none !important;
        display: flex;
    }

    .av5-overlay-panel {
        position: relative;
        width: 100%;
        padding: 1.75rem 1.5rem;
        transform: none !important;
        display: none;
    }

    .av5-card:not(.av5-signup) .av5-overlay-right {
        display: flex;
    }

    .av5-card.av5-signup .av5-overlay-left {
        display: flex;
    }
}

/* ---------- Android app download badge ---------- */

.av5-app-download {
    width: 100%;
    max-width: 860px;
    margin: 1.5rem auto 0;
    text-align: center;
}

.av5-app-download-label {
    font-family: var(--av5-font-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--av5-outline);
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

.av5-app-download-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.4rem;
    border-radius: .85rem;
    background: var(--av5-surface-container-low);
    border: 1.5px solid var(--av5-outline-variant);
    color: var(--av5-on-surface);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.av5-app-download-btn:hover {
    border-color: var(--av5-primary);
    background: var(--av5-surface-container);
    color: var(--av5-on-surface);
    transform: translateY(-1px);
}

.av5-app-download-btn i {
    font-size: 1.75rem;
    color: var(--av5-primary);
}

.av5-app-download-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.av5-app-download-text small {
    font-family: var(--av5-font-body);
    font-size: .72rem;
    color: var(--av5-outline);
}

.av5-app-download-text strong {
    font-family: var(--av5-font-display);
    font-size: 1rem;
    letter-spacing: .02em;
}

.av5-app-download-hint {
    font-family: var(--av5-font-body);
    font-size: .74rem;
    color: var(--av5-outline);
    margin: .65rem 0 0;
}