.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
}
.authentication-wrapper .authentication-inner {
  width: 100%;
}
.authentication-wrapper.authentication-basic {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.authentication-wrapper.authentication-cover {
  align-items: flex-start;
}
.authentication-wrapper.authentication-cover .authentication-inner {
  height: 100vh;
}
.authentication-wrapper.authentication-basic .authentication-inner {
  max-width: 25rem;
  position: relative;
}
/*.authentication-wrapper.authentication-basic .authentication-inner:before {*/
/*  width: 21rem;*/
/*  height: 21rem;*/
/*  content: " ";*/
/*  position: fixed;*/
/*  top: -100px;*/
/*  background: url("../../../img/pages/auth-top-left.png");*/
/*  background-size: contain;*/
/*}*/
/*html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner:before {*/
/*  left: -100px;*/
/*}*/
/*[dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner:before {*/
/*  right: -100px;*/
/*  transform: rotate(90deg);*/
/*}*/
/*.authentication-wrapper.authentication-basic .authentication-inner:after {*/
/*  width: 7rem;*/
/*  height: 14.125rem;*/
/*  content: " ";*/
/*  position: fixed;*/
/*  bottom: 0;*/
/*  background-image: url("../../../img/pages/auth-right-bottom.png");*/
/*  background-size: contain;*/
/*}*/
/*html:not([dir=rtl]) .authentication-wrapper.authentication-basic .authentication-inner:after {*/
/*  right: 0;*/
/*}*/
/*[dir=rtl] .authentication-wrapper.authentication-basic .authentication-inner:after {*/
/*  left: 0;*/
/*  transform: rotate(180deg);*/
/*}*/
.authentication-wrapper.authentication-basic .authentication-inner .card {
  z-index: 1;
}
.authentication-wrapper.authentication-basic .authentication-inner .card .app-brand {
  margin-bottom: 2.5rem;
}
.authentication-wrapper .auth-input-wrapper .auth-input {
  max-width: 50px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 150%;
}

.authentication-cover-img {
  margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
  .authentication-wrapper .auth-input-wrapper .auth-input {
    font-size: 1.125rem;
  }
}
#twoStepsForm .fv-plugins-bootstrap5-row-invalid .form-control {
  border-color: #ff5b5c;
}

.light-style .authentication-wrapper .authentication-bg {
  background-color: #fff;
}

.dark-style .authentication-wrapper .authentication-bg {
  background-color: #283144;
}

@media (min-height: 737px) {
  .authentication-cover-img {
    margin-bottom: 3rem;
  }
}




/* BODY amimation Starts */

        body {
            margin: 0;
            padding: 0;
            font-family: "Plus Jakarta Sans", sans-serif;
            font-weight: 400;
            font-size: 15px;
            background-color: #010206;
            /* Correct Laravel public path */
            background: url('/maintheme/assets/img/banner_bg.jpg') no-repeat;
            background-position: center bottom;
            background-size: cover;
            background-attachment: fixed;
            color: #fff;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            -webkit-font-smoothing: antialiased;
        }

        /* Layer: High-Density Moving Stars */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Dense, sharp pin-pricks */
            background-image:
                radial-gradient(1px 1px at 25px 40px, #ffffff 100%, transparent),
                radial-gradient(0.5px 0.5px at 60px 110px, #ffffff 100%, transparent),
                radial-gradient(1px 1px at 90px 160px, #4d7cff 100%, transparent),
                radial-gradient(0.5px 0.5px at 140px 230px, #ffffff 100%, transparent),
                radial-gradient(1px 1px at 180px 20px, #ffffff 100%, transparent),
                radial-gradient(0.5px 0.5px at 220px 320px, #7daeff 100%, transparent),
                radial-gradient(1px 1px at 260px 60px, #ffffff 100%, transparent),
                radial-gradient(0.5px 0.5px at 330px 190px, #ffffff 100%, transparent),
                radial-gradient(1px 1px at 390px 270px, #ffffff 100%, transparent);

            background-size: 300px 300px;
            animation: moveStars 12s linear infinite;
            z-index: -2;
        }

        /* Layer: The Deep Blue Horizon Glow */
        body::after {
            content: "";
            position: fixed;
            bottom: -25vh;
            /* Pushed slightly lower for a subtler effect */
            left: 50%;
            transform: translateX(-50%);
            width: 140vw;
            height: 50vh;
            /* Using your theme blue: #0260fd */
            background: radial-gradient(ellipse at top,
                    #0260fd 0%,
                    #022155 35%,
                    transparent 75%);
            border-radius: 50%;
            filter: blur(80px);
            /* Heavy blur for a gaseous space look */
            opacity: 0.45;
            z-index: -1;
            pointer-events: none;
        }

        /* Animation: Bottom to Top Movement */
        @keyframes moveStars {
            from {
                background-position: 0 300px;
            }

            to {
                background-position: 0 0;
            }
        }

        /* BODY amimation Ends */

 /* BUTTON CSS */
        .btn-gradient {
            background: var(--gold-gradient);
            border: none;
            color: black;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-size: 0.875rem;
            transition: all 0.3s ease;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-gradient:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--gold-glow);
        }


/* GLASS CARD CSS*/
:root {
            --gold-primary: #0260fd;
            --gold-secondary: #3d9dfd;
            --gold-light: #3d9dfd;
            --gold-gradient: linear-gradient(135deg,
                    #0260fd 0%,
                    #3d9dfd 45%,
                    #0241b3 70%,
                    #022155 100%);

            --deep-black: #011433;
            --card-black: rgba(2, 33, 85, 0.6);
            --gold-glow: rgba(2, 96, 253, 0.45);
            --sidebar-width: 280px;
            --sidebar-mini: 80px;
            --status-pending: #84b3ff;   /* Soft light blue */
            --status-completed: #3d9dfd; /* Your secondary blue */
            --status-open-clr: #60a5fa;      /* Electric Blue */
            --status-pending-clr: #fbbf24;   /* Amber/Gold */
            --status-waiting-clr: #f87171;   /* Soft Red/Coral (Waiting usually implies a block) */
            --status-closed-clr: #34d399;
            --status-rejected: #6e86ad;  /* Muted grey-blue */
        }
/* Glass Card */
        .glass-card {
            position: relative;
            border-radius: 10px;
            background: rgba(10, 30, 60, 0.55);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            overflow: hidden;
            border: 1.5px solid transparent;
            transition: transform 0.3s ease;
        }

        .glass-card::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1.5px;
            border-radius: inherit;
            background: linear-gradient(120deg,
                    transparent 20%,
                    #0260fd,
                    /* Brand Blue */
                    #3d9dfd,
                    /* Sky highlight */
                    #022155,
                    /* Deep Navy */
                    transparent 80%);
            background-size: 300% 300%;
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
            animation: border-flow 4s linear infinite;
            animation-play-state: paused;
        }

        @keyframes border-flow {
            0% {
                background-position: 0% 50%;
                opacity: 0.6;
            }

            50% {
                opacity: 1;
            }

            100% {
                background-position: 300% 50%;
                opacity: 0.6;
            }
        }

        .glass-card:hover::before {
            opacity: 1;
            animation-play-state: running;
        }

        .glass-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            /* Blue Glow Shadows instead of Cyan */
            box-shadow:
                0 0 20px rgba(2, 96, 253, 0.3),
                inset 0 0 15px rgba(2, 96, 253, 0.15);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .glass-card:hover::after {
            opacity: 1;
        }

        /* Mobile-optimized hover effects */
        @media (hover: hover) and (pointer: fine) {
            .glass-card:hover {
                transform: translateY(-6px) translateZ(0);
                border-color: rgba(2, 96, 253, 0.4);
                /* Brand Blue border */
                box-shadow:
                    0 15px 35px rgba(0, 0, 0, 0.4),
                    0 5px 15px rgba(2, 96, 253, 0.2),
                    /* Blue glow shadow */
                    inset 0 1px 0 rgba(2, 96, 253, 0.1);
                /* Corrected from red to blue */
            }
        }

        @media (min-width: 641px) and (max-width: 1024px) {
            .glass-card {
                margin-bottom: 16px;
                padding: 20px !important;
            }

            .grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .lg\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (hover: none) and (pointer: coarse) {
            .glass-card {
                transform: translateZ(0);
            }

            /* Active state for touch feedback */
            .glass-card:active {
                transform: scale(0.98) translateZ(0);
                transition: transform 0.1s ease;
            }

            .stat-card:active .ripple {
                animation: ripple 0.6s linear;
            }

            /* Enhanced touch targets */
            button,
            a.nav-link,
            .clickable {
                min-height: 50px;
                min-width: 50px;
                touch-action: manipulation;
            }

            /* Prevent text selection */
            .no-select {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
            }

            /* Smooth scrolling for iOS */
            * {
                -webkit-overflow-scrolling: touch;
            }
        }

        @media (max-width: 768px) {

            /* Reduce heavy effects for better performance */
            .glass-card {
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }

            /* Simplify animations for mobile */
            * {
                animation-duration: 5s !important;
                transition-duration: 0.3s !important;
            }

            /* Optimize images */
            img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
            }

            /* Reduce paint areas */
            .glass-card::before,
            .glass-card::after {
                content: none;
            }
        }

        @media (max-height: 500px) and (orientation: landscape) {

            .glass-card {
                padding: 12px !important;
                margin-bottom: 8px;
            }
        }

        /* Dark Mode Optimizations */
        @media (prefers-color-scheme: dark) {
            .glass-card {
                /* Uses your deep blue-black with 85% opacity */
                background: rgba(1, 20, 51, 0.85);

                /* Uses your primary neon blue with a low opacity for the border */
                border-color: rgba(2, 96, 253, 0.25);

                /* Reactivating the glow using your specific glow variable */
                box-shadow:
                    0 8px 32px 0 rgba(0, 0, 0, 0.37),
                    0 0 20px var(--gold-glow),
                    inset 0 0 15px rgba(61, 157, 253, 0.1);

                /* Ensures the glass blur remains effective */
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
            }
        }

        /* Reduced Motion Preference */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            .marquee-content {
                animation: none;
                justify-content: center;
            }
        }
         @media (max-width: 640px) {
            .glass-card {
                margin-bottom: 12px;
                border-radius: 16px;
                padding: 16px !important;
            }
         }

        .gradient-border {
            /* border-bottom: 2px solid;  */
            border-image-source: linear-gradient(90deg,
                #0260fd 0%,
                #3d9dfd 50%,
                #022155 100%
            );
            border-image-slice: 1;
            filter: drop-shadow(0 2px 4px var(--gold-glow));
        }