/* Decorative 3D shapes — Vision UI ambience */

.crm-shapes-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.crm-app-shell {
    position: relative;
    z-index: 1;
}

.crm-login-wrap {
    position: relative;
    z-index: 1;
}

.crm-shell {
    position: relative;
    z-index: 1;
}

.crm-shape {
    position: absolute;
    object-fit: contain;
    user-select: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 12px 40px rgba(0, 117, 255, 0.15));
    opacity: 0;
}

/* App layout positions */
.crm-shape--tl-lg {
    top: -8%;
    left: -4%;
    width: min(420px, 42vw);
    max-height: 55vh;
}

.crm-shape--tr-md {
    top: 6%;
    right: 2%;
    width: min(280px, 28vw);
}

.crm-shape--br-lg {
    bottom: -6%;
    right: 8%;
    width: min(360px, 36vw);
}

.crm-shape--bl-md {
    bottom: 12%;
    left: 12%;
    width: min(200px, 22vw);
}

.crm-shape--center-soft {
    top: 38%;
    left: 42%;
    width: min(240px, 24vw);
    opacity: 0.35;
    filter: blur(1px) drop-shadow(0 8px 32px rgba(33, 212, 253, 0.2));
}

.crm-shape--mr-sm {
    top: 28%;
    right: 18%;
    width: min(120px, 14vw);
}

.crm-shape--ml-sm {
    bottom: 28%;
    left: 28%;
    width: min(100px, 12vw);
}

.crm-shape--mid-right {
    top: 52%;
    right: 32%;
    width: min(160px, 16vw);
}

/* Login layout */
.crm-shapes-layer--login .crm-shape {
    filter: drop-shadow(0 16px 48px rgba(0, 117, 255, 0.25));
}

.crm-shape--login-hero-1 {
    top: 8%;
    left: 4%;
    width: min(380px, 55vw);
}

.crm-shape--login-hero-2 {
    bottom: 15%;
    left: 8%;
    width: min(260px, 40vw);
}

.crm-shape--login-card-1 {
    top: 12%;
    right: 8%;
    width: min(140px, 22vw);
}

.crm-shape--login-bg-1 {
    top: -5%;
    right: 15%;
    width: min(320px, 45vw);
    opacity: 0.5;
}

.crm-shape--login-bg-2 {
    bottom: 5%;
    right: 5%;
    width: min(200px, 30vw);
}

.crm-shape--login-bg-3 {
    bottom: 20%;
    right: 35%;
    width: min(120px, 18vw);
}

/* Card-embedded shapes (dashboard welcome, sidebar promo) */
.crm-card-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.crm-card-shape {
    position: absolute;
    object-fit: contain;
    opacity: 0.85;
}

.crm-welcome-card .crm-card-shapes .crm-card-shape--welcome-1 {
    right: -12%;
    top: -20%;
    width: 55%;
    max-width: 200px;
}

.crm-welcome-card .crm-card-shapes .crm-card-shape--welcome-2 {
    right: 5%;
    bottom: -15%;
    width: 35%;
    max-width: 110px;
}

.crm-sidebar-promo-card {
    position: relative;
    overflow: hidden;
}

.crm-sidebar-promo-card .crm-card-shape--promo {
    right: -20%;
    bottom: -25%;
    width: 70%;
    max-width: 140px;
    opacity: 0.9;
}

/* Mobile: fewer / smaller shapes */
@media (max-width: 991.98px) {
    .crm-shape--center-soft,
    .crm-shape--ml-sm,
    .crm-shape--mid-right,
    .crm-shape--mr-sm {
        display: none;
    }

    .crm-shape--tl-lg {
        width: min(280px, 55vw);
        top: -5%;
        left: -15%;
    }

    .crm-shape--tr-md,
    .crm-shape--br-lg {
        width: min(200px, 40vw);
        opacity: 0.7;
    }

    .crm-shape--login-hero-2,
    .crm-shape--login-bg-3 {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .crm-shape--bl-md,
    .crm-shape--login-bg-2 {
        display: none;
    }

    .crm-welcome-card .crm-card-shapes .crm-card-shape--welcome-2 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-shape,
    .crm-card-shape {
        animation: none !important;
        transition: none !important;
    }
}