/* ================================
   WINDOWS 11 MICA BACKGROUND
================================ */
.UsersManagementContainer .ViewContainer {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 10%, rgba(0,120,212,0.22), transparent 35%), radial-gradient(circle at 80% 90%, rgba(98,0,234,0.18), transparent 40%), linear-gradient(135deg, #e9edf3, #f7f9fc);
    padding: 2rem;
    overflow: hidden;
}

    /* ================================
   MAIN GRID
================================ */
    .UsersManagementContainer .ViewContainer .MainRow {
        width: 100%;
        max-width: 1100px;
        animation: fluent-fade-in 600ms ease-out;
    }

/* ================================
   MICA GLASS SURFACE
================================ */
.UsersManagementContainer .MainColumnSection {
    position: relative;
    background: rgba(255,255,255,0.58);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 32px 64px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
    padding: 2.75rem;
    max-width: 460px;
    margin-inline: auto;
    animation: mica-rise 650ms cubic-bezier(.2,.8,.2,1);
}

    /* Light overlay for real Mica feel */
    .UsersManagementContainer .MainColumnSection::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.1));
    }

/* ================================
   TYPOGRAPHY
================================ */
.UsersManagementContainer h1 {
    font-size: 1.9rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.3rem;
}

.UsersManagementContainer h2 {
    font-size: 0.95rem;
    font-weight: 400;
    color: #5f6b7a;
    text-align: center;
    margin-bottom: 1.75rem;
}

.UsersManagementContainer h3 {
    font-size: 1.2rem;
    font-weight: 500;
}

/* ================================
   INPUTS – FLUENT
================================ */
.UsersManagementContainer  .form-control {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

    .UsersManagementContainer  .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13,110,253,0.18);
        background: #ffffff;
    }

/* ================================
   WINUI PROGRESS BUTTON
================================ */
.UsersManagementContainer  .btn-primary {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.8rem;
    background-color: #0d6efd;
    background-image: linear-gradient(135deg, var(--win-accent, #0d6efd), color-mix(in srgb, var(--win-accent, #0d6efd), black 15%));
    border: none;
    color: #fff;
    box-shadow: 0 10px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

    .UsersManagementContainer  .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(0,0,0,0.28);
    }

    .UsersManagementContainer  .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45), transparent 70%);
        transform: translateX(-100%);
    }

    .UsersManagementContainer .btn-primary.loading::after {
        animation: win-progress 1.2s infinite;
    }

@keyframes win-progress {
    to {
        transform: translateX(100%);
    }
}

/* ================================
   LINKS / PASSKEY
================================ */
.UsersManagementContainer  .btn-link {
    font-weight: 500;
    color: #0d6efd;
}

.UsersManagementContainer  a {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
}

    .UsersManagementContainer  a:hover {
        text-decoration: underline;
    }

/* ================================
   VALIDATION
================================ */
.UsersManagementContainer .text-danger {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* ================================
   LOGIN FORM
================================ */
.UsersManagementContainer .ViewEditForm {
    width: 100%;
}

/* ================================
   ERROR SHAKE (WINUI)
================================ */
.UsersManagementContainer  .validation-summary-errors,
.UsersManagementContainer  .text-danger {
    animation: win-shake 400ms ease;
}

@keyframes win-shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}

/* ================================
   SUBTLE PARALLAX
================================ */
.UsersManagementContainer .MainColumnSection,
.UsersManagementContainer .ExternalLoginSection {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

    .UsersManagementContainer .MainColumnSection:hover,
    .UsersManagementContainer .ExternalLoginSection:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 36px 72px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
    }

/* ================================
   ANIMATIONS
================================ */
@keyframes mica-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fluent-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ================================
   ACCESSIBILITY
================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
    .UsersManagementContainer .MainColumnSection,
    .UsersManagementContainer .ExternalLoginSection {
        padding: 2rem;
    }

    .UsersManagementContainer .ViewContainer {
        padding: 1.25rem;
    }
}