: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));
}

/* BUTTON CSS */
.btn-primary {
    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-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--gold-glow);
}

.text-gradient {
    background: linear-gradient(135deg,
            #0260fd 0%,
            #3d9dfd 45%,
            #022155 70%,
            #4d7cff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 7s ease-in-out infinite;
}


/* FORM FILD CSS */
.form-input {
    background: var(--deep-black) !important;
    border: 1px solid rgba(61, 157, 253, 0.3) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    color: #e5e5e5 !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--gold-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}