/*
 * IPcom CRM authentication pages.
 * Shared by Admin and Seller login/password-reset screens.
 */

.fi-simple-layout {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgb(245 158 11 / 0.18) 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgb(30 58 95 / 0.16) 0,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgb(248 250 252) 0%,
            rgb(255 251 235) 48%,
            rgb(241 245 249) 100%
        );
}

.fi-simple-layout::before,
.fi-simple-layout::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
}

.fi-simple-layout::before {
    top: -160px;
    right: -110px;
    width: 420px;
    height: 420px;
    border: 1px solid rgb(245 158 11 / 0.16);
    box-shadow:
        0 0 0 55px rgb(245 158 11 / 0.035),
        0 0 0 110px rgb(245 158 11 / 0.025);
}

.fi-simple-layout::after {
    bottom: -220px;
    left: -170px;
    width: 520px;
    height: 520px;
    border: 1px solid rgb(30 58 95 / 0.12);
    box-shadow:
        0 0 0 70px rgb(30 58 95 / 0.025),
        0 0 0 140px rgb(30 58 95 / 0.018);
}

.fi-simple-main-ctn,
.fi-simple-main {
    position: relative;
    z-index: 1;
}

.fi-simple-main {
    border: 1px solid rgb(226 232 240 / 0.95);
    border-radius: 20px;
    background: rgb(255 255 255 / 0.96);
    box-shadow:
        0 2px 6px rgb(15 23 42 / 0.04),
        0 24px 70px rgb(15 23 42 / 0.12);
    backdrop-filter: blur(12px);
}

.fi-simple-header {
    margin-bottom: 1.5rem;
}

.fi-simple-header .fi-logo,
.fi-simple-header-heading {
    color: rgb(15 23 42);
}

.fi-simple-header-heading {
    font-weight: 750;
    letter-spacing: -0.025em;
}

.fi-simple-header-subheading {
    color: rgb(100 116 139);
}

/* Form controls */

.fi-simple-main .fi-input-wrp {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252 / 0.72);
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease;
}

.fi-simple-main .fi-input-wrp:focus-within {
    border-color: rgb(245 158 11);
    background: rgb(255 255 255);
    box-shadow:
        0 0 0 3px rgb(245 158 11 / 0.12);
}

/* Primary authentication action */

.fi-simple-main .fi-btn-color-primary {
    min-height: 2.8rem;
    border: 1px solid rgb(217 119 6);
    background:
        linear-gradient(
            135deg,
            rgb(245 158 11) 0%,
            rgb(217 119 6) 100%
        );
    box-shadow:
        0 4px 12px rgb(217 119 6 / 0.20);
    font-weight: 700;
}

.fi-simple-main .fi-btn-color-primary:hover {
    background:
        linear-gradient(
            135deg,
            rgb(251 191 36) 0%,
            rgb(245 158 11) 100%
        );
}

/* Links */

.fi-simple-main a {
    text-underline-offset: 3px;
}

/* Demo credentials block */

.fi-simple-main code {
    padding: 0.08rem 0.28rem;
    border-radius: 0.3rem;
    background: rgb(241 245 249);
    color: rgb(30 41 59);
    font-size: 0.82em;
}

/* Slightly roomier desktop presentation */

@media (min-width: 768px) {
    .fi-simple-main {
        padding: 2.25rem !important;
    }
}

/* Mobile */

@media (max-width: 640px) {
    .fi-simple-layout::before {
        width: 260px;
        height: 260px;
    }

    .fi-simple-layout::after {
        width: 320px;
        height: 320px;
    }

    .fi-simple-main {
        border-radius: 16px;
    }
}

/* Dark mode */

.dark .fi-simple-layout {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgb(245 158 11 / 0.12) 0,
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgb(59 130 246 / 0.10) 0,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgb(15 23 42) 0%,
            rgb(17 24 39) 55%,
            rgb(2 6 23) 100%
        );
}

.dark .fi-simple-main {
    border-color: rgb(71 85 105 / 0.7);
    background: rgb(17 24 39 / 0.94);
}

.dark .fi-simple-main .fi-input-wrp {
    border-color: rgb(71 85 105);
    background: rgb(15 23 42 / 0.7);
}

.dark .fi-simple-main code {
    background: rgb(30 41 59);
    color: rgb(226 232 240);
}

/*
 * Final login-page refinements.
 */

@media (min-width: 900px) {
    .fi-simple-main-ctn {
        transform: translateY(-3vh);
    }
}

/*
 * Demo credentials remain clear but secondary
 * to the actual authentication form.
 */

.fi-simple-main [style*="rgba(245, 158, 11, 0.35)"] {
    border-color: rgb(253 186 116 / 0.55) !important;
    background: rgb(255 251 235 / 0.62) !important;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.7);
}

.dark .fi-simple-main [style*="rgba(245, 158, 11, 0.35)"] {
    border-color: rgb(217 119 6 / 0.45) !important;
    background: rgb(120 53 15 / 0.16) !important;
}