/* =========================================================
   PRO-IT CALL CENTER
   ZERO FRAPPE FLASH
   ========================================================= */


/* ---------------------------------------------------------
   LOGIN
   Hide native Frappe login BEFORE JavaScript branding runs.
   Frappe puts data-path="login" directly on BODY.
   --------------------------------------------------------- */

body[data-path="login"]:not(.cc-login-ready) {
    min-height: 100vh !important;

    background: #0b0f14 !important;

    overflow: hidden !important;
}


/*
 * Native login is physically present but cannot flash
 * before our branding has finished.
 */

body[data-path="login"]:not(.cc-login-ready)
#page-login,

body[data-path="login"]:not(.cc-login-ready)
.for-login,

body[data-path="login"]:not(.cc-login-ready)
.for-forgot,

body[data-path="login"]:not(.cc-login-ready)
.for-signup,

body[data-path="login"]:not(.cc-login-ready)
.for-email-login {
    opacity: 0 !important;
    visibility: hidden !important;
}


/*
 * Temporary branded boot screen.
 */

body[data-path="login"]:not(.cc-login-ready)::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 2147483600;

    background: #0b0f14;

    pointer-events: none;
}


body[data-path="login"]:not(.cc-login-ready)::after {
    content: var(--cc-brand-loading, "");

    white-space: pre;

    position: fixed;

    z-index: 2147483601;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    color: #fff;

    text-align: center;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 22px;
    font-weight: 500;

    line-height: 1.5;

    letter-spacing: .04em;

    pointer-events: none;
}


/* Branding finished */

body[data-path="login"].cc-login-ready
#page-login,

body[data-path="login"].cc-login-ready
.for-login {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------------------------------------------------------
   LOGIN -> AGENT/SUPERVISOR TRANSITION
   --------------------------------------------------------- */

/*
 * This class is placed on <html> BEFORE Desk paints.
 * The overlay therefore covers the entire native Frappe shell.
 */

html.cc-desk-transition {
    background: #0c1018 !important;
}


html.cc-desk-transition body {
    overflow: hidden !important;
}


html.cc-desk-transition body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 2147483640;

    background: #0b0f14;

    pointer-events: all;
}


html.cc-desk-transition body::after {
    content: var(--cc-brand-loading, "");

    white-space: pre;

    position: fixed;

    z-index: 2147483641;

    left: 50%;
    top: 47%;

    transform:
        translate(-50%,-50%);

    width: 240px;

    color: #fff;

    text-align: center;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.55;

    letter-spacing: .05em;

    pointer-events: none;

    animation:
        ccBootPulse 1.05s
        ease-in-out infinite alternate;
}


@keyframes ccBootPulse {
    from {
        opacity: .55;
        transform:
            translate(-50%,-50%)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media(max-width:600px) {

    body[data-path="login"]:not(.cc-login-ready)::after,

    html.cc-desk-transition body::after {
        font-size: 18px;
    }
}


/*
 * Reduced motion accessibility
 */

@media(prefers-reduced-motion:reduce) {

    html.cc-desk-transition body::after {
        animation: none;
    }
}