@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.7t9tbfaemk.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
.logo-header[b-pdyugfllbg] {
    width: 230px;
    height: auto; /* keeps aspect ratio */
}
/* /Components/Layout/HeaderMenu.razor.rz.scp.css */
/* Wallet container styling */
.wallet-container[b-fxrf75t1hn] {
    background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #d4af37 100%) !important;
    border: 2px solid #ffeb3b;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4), 0 0 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #000 !important;
}

    /* Hover effects */
    .wallet-container:hover[b-fxrf75t1hn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6), 0 0 25px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        background: linear-gradient(135deg, #ffd700 0%, #ffeb3b 50%, #ffd700 100%) !important;
    }

    /* Shine effect */
    .wallet-container[b-fxrf75t1hn]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent );
        transition: left 0.5s ease;
    }

    .wallet-container:hover[b-fxrf75t1hn]::before {
        left: 100%;
    }

/* Wallet icon styling */
.wallet-icon[b-fxrf75t1hn] {
    color: #000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    transition: all 0.3s ease;
    font-weight: bold;
}

.wallet-container:hover .wallet-icon[b-fxrf75t1hn] {
    transform: scale(1.2) rotate(-5deg);
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7);
}

/* Refresh icon styling */
.refresh-icon[b-fxrf75t1hn] {
    color: #000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.wallet-container:hover .refresh-icon[b-fxrf75t1hn] {
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7);
}

.refresh-icon.fa-spin[b-fxrf75t1hn] {
    animation: spin-b-fxrf75t1hn 1s linear infinite;
}

/* Balance text styling */
.balance-text[b-fxrf75t1hn] {
    color: #212b36 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.wallet-container:hover .balance-text[b-fxrf75t1hn] {
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7);
}

/* Pulsing animation */
@keyframes pulse-gold-b-fxrf75t1hn {
    0% {
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4), 0 0 20px rgba(255, 215, 0, 0.3) !important;
    }

    50% {
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(255, 215, 0, 0.5) !important;
    }

    100% {
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4), 0 0 20px rgba(255, 215, 0, 0.3) !important;
    }
}

@keyframes spin-b-fxrf75t1hn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.wallet-container.pulse[b-fxrf75t1hn] {
    animation: pulse-gold-b-fxrf75t1hn 2s ease-in-out;
}

/* Make it stand out */
.flag-nav.nav-item-box[b-fxrf75t1hn] {
    z-index: 10;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-mfs8of4or9] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-mfs8of4or9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavAccountant.razor.rz.scp.css */
/* /Components/Layout/NavMarketing.razor.rz.scp.css */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* 🌟 Golden Custom Upgrade Menu with ID Selectors */
#custom-upgrade-menu[b-p60pm36ue1] {
    position: relative;
    margin: 8px 0;
}

#custom-upgrade-link[b-p60pm36ue1] {
    background: linear-gradient(135deg, #fff9c4, #ffeb3b, #ffd700) !important;
    border: 2px solid #ffd700 !important;
    color: #8b6914 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    animation: golden-pulse-b-p60pm36ue1 3s infinite;
    position: relative;
    font-weight: 700;
    border-radius: 8px;
    margin: 4px 8px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

    #custom-upgrade-link:hover[b-p60pm36ue1] {
        background: linear-gradient(135deg, #ffeb3b, #ffd700, #ffc400) !important;
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.8), 0 6px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
        transform: translateY(-2px) scale(1.02);
        color: #7a5900 !important;
    }

@keyframes golden-pulse-b-p60pm36ue1 {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0,0,0,0.1);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 6px 18px rgba(0,0,0,0.15);
    }

    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0,0,0,0.1);
    }
}

/* Stars */
#custom-upgrade-stars[b-p60pm36ue1] {
    position: absolute;
    top: -8px;
    right: -5px;
    z-index: 10;
}

#star-1[b-p60pm36ue1], #star-2[b-p60pm36ue1] {
    color: #ffd700;
    text-shadow: 0 0 10px gold, 0 0 20px orange;
    animation: star-twinkle-b-p60pm36ue1 2s infinite alternate;
    font-size: 16px;
    position: absolute;
}

#star-1[b-p60pm36ue1] {
    top: 0;
    right: 0;
}

#star-2[b-p60pm36ue1] {
    top: -5px;
    right: -5px;
    font-size: 12px;
    animation-delay: 0.5s;
}

@keyframes star-twinkle-b-p60pm36ue1 {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Icon styling */
#custom-upgrade-icon[b-p60pm36ue1] {
    color: #b8860b !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Menu text styling */
#custom-upgrade-text[b-p60pm36ue1] {
    font-weight: 700;
}


/* AI Menu Container */
.ai-menu-item[b-p60pm36ue1] {
    margin: 8px 10px;
}

/* Main Button Style */
.ai-link[b-p60pm36ue1] {
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    color: #ffffff !important;
    /* Gradient Background */
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    /* Glow */
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.4);
    transition: all 0.3s ease;
}

/* Hover Effect */
.ai-link:hover[b-p60pm36ue1] {
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 6px 25px rgba(37, 117, 252, 0.7);
}

/* Animated Gradient Shine */
.ai-link[b-p60pm36ue1]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    transform: skewX(-20deg);
    animation: shine-b-p60pm36ue1 3s infinite;
}

@keyframes shine-b-p60pm36ue1 {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* AI Icon */
.ai-icon[b-p60pm36ue1] {
    font-size: 18px;
    color: #00f7ff;
    animation: pulse-b-p60pm36ue1 1.5s infinite;
}

/* Pulse Animation */
@keyframes pulse-b-p60pm36ue1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Floating Sparkles (like upgrade stars) */
.ai-stars span[b-p60pm36ue1] {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: float-b-p60pm36ue1 2.5s infinite ease-in-out;
}

.ai-stars span:nth-child(1)[b-p60pm36ue1] {
    top: 8px;
    right: 20px;
}

.ai-stars span:nth-child(2)[b-p60pm36ue1] {
    bottom: 8px;
    right: 35px;
    animation-delay: 1s;
}

@keyframes float-b-p60pm36ue1 {
    0% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-8px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.5; }
}

/* Text */
.menu-name[b-p60pm36ue1] {
    font-weight: 600;
    letter-spacing: 0.4px;
}
/* /Components/Layout/NavStickerBatching.razor.rz.scp.css */
/* /Components/Layout/NavStore.razor.rz.scp.css */
/* /Components/Layout/NavUser.razor.rz.scp.css */
/* /Components/Layout/PaymentStatus.razor.rz.scp.css */
/* Base Styles */
.payment-container[b-81dirqt8u3] {
    /* max-width: 500px; */
    /* margin: 50px auto; */
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: containerAppear-b-81dirqt8u3 0.6s ease;
}

@keyframes containerAppear-b-81dirqt8u3 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.page-title[b-81dirqt8u3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #2d3748;
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: 600;
    text-align: center;
}

.payment-icon[b-81dirqt8u3] {
    width: 28px;
    height: 28px;
    fill: #4c51bf;
}

/* Pure CSS Loader */
.css-loader[b-81dirqt8u3] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
}

.loader-card[b-81dirqt8u3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    padding: 12px;
    z-index: 2;
    animation: cardFloat-b-81dirqt8u3 2s ease-in-out infinite;
}

.card-chip[b-81dirqt8u3] {
    width: 20px;
    height: 16px;
    background: linear-gradient(135deg, #f6ad55, #ed8936);
    border-radius: 4px;
    margin-bottom: 10px;
}

.card-line[b-81dirqt8u3] {
    height: 4px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    margin-bottom: 6px;
}

    .card-line.short[b-81dirqt8u3] {
        width: 60%;
    }

.loader-ring[b-81dirqt8u3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 4px solid rgba(102, 126, 234, 0.1);
    border-top: 4px solid #4c51bf;
    border-radius: 50%;
    animation: ringRotate-b-81dirqt8u3 1.5s linear infinite;
}

@keyframes cardFloat-b-81dirqt8u3 {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-10px);
    }
}

@keyframes ringRotate-b-81dirqt8u3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.processing-heading[b-81dirqt8u3] {
    font-size: 1.8rem;
    color: #2d3748;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
}

.processing-message[b-81dirqt8u3] {
    color: #718096;
    font-size: 1.1rem;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
}

/* Progress Steps */
.payment-progress[b-81dirqt8u3] {
    margin: 40px 0;
}

.progress-steps[b-81dirqt8u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
}

    .progress-steps[b-81dirqt8u3]::before {
        content: '';
        position: absolute;
        top: 24px;
        left: 15%;
        right: 15%;
        height: 3px;
        background: #e2e8f0;
        z-index: 1;
    }

.step[b-81dirqt8u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-icon[b-81dirqt8u3] {
    width: 48px;
    height: 48px;
    background: #edf2f7;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #a0aec0;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step.active .step-icon[b-81dirqt8u3] {
    background: #4c51bf;
    border-color: #4c51bf;
    color: white;
    box-shadow: 0 4px 12px rgba(76, 81, 191, 0.3);
    animation: stepPulse-b-81dirqt8u3 1.5s ease-in-out infinite;
}

@keyframes stepPulse-b-81dirqt8u3 {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(76, 81, 191, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(76, 81, 191, 0.5);
    }
}

.step-label[b-81dirqt8u3] {
    color: #a0aec0;
    font-size: 0.9rem;
    font-weight: 500;
}

.step.active .step-label[b-81dirqt8u3] {
    color: #4c51bf;
    font-weight: 600;
}

.progress-bar[b-81dirqt8u3] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-81dirqt8u3] {
    height: 100%;
    width: 33%;
    background: linear-gradient(90deg, #4c51bf, #667eea);
    border-radius: 3px;
    animation: progressFill-b-81dirqt8u3 2s ease-in-out infinite;
}

@keyframes progressFill-b-81dirqt8u3 {
    0%, 100% {
        width: 33%;
    }

    50% {
        width: 66%;
    }
}

.security-badge[b-81dirqt8u3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f7fafc;
    border-radius: 10px;
    color: #4a5568;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
}

.shield-icon[b-81dirqt8u3] {
    width: 18px;
    height: 18px;
    fill: #48bb78;
}

/* Pure CSS Success Animation */
.css-success[b-81dirqt8u3] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
}

.success-circle[b-81dirqt8u3] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #48bb78, #38a169);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successScale-b-81dirqt8u3 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.checkmark[b-81dirqt8u3] {
    width: 40px;
    height: 20px;
    border-left: 8px solid white;
    border-bottom: 8px solid white;
    transform: rotate(-45deg) translate(2px, 2px);
    animation: checkmarkDraw-b-81dirqt8u3 0.5s 0.3s ease-out both;
}

@keyframes successScale-b-81dirqt8u3 {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes checkmarkDraw-b-81dirqt8u3 {
    0% {
        width: 0;
        height: 0;
        border-width: 0;
    }

    100% {
        width: 40px;
        height: 20px;
        border-width: 8px;
    }
}

.success-dots[b-81dirqt8u3] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.dot[b-81dirqt8u3] {
    width: 8px;
    height: 8px;
    background: #48bb78;
    border-radius: 50%;
    animation: dotBounce-b-81dirqt8u3 1.4s ease-in-out infinite;
}

    .dot:nth-child(2)[b-81dirqt8u3] {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3)[b-81dirqt8u3] {
        animation-delay: 0.4s;
    }

@keyframes dotBounce-b-81dirqt8u3 {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Pure CSS Pending Animation */
.css-pending[b-81dirqt8u3] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
}

.pending-circle[b-81dirqt8u3] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f6ad55, #ed8936);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pendingPulse-b-81dirqt8u3 2s ease-in-out infinite;
}

@keyframes pendingPulse-b-81dirqt8u3 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(246, 173, 85, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(246, 173, 85, 0);
        transform: scale(1.05);
    }
}

.pending-hand[b-81dirqt8u3] {
    width: 6px;
    height: 30px;
    background: white;
    border-radius: 3px;
    animation: handRotate-b-81dirqt8u3 2s linear infinite;
    transform-origin: bottom center;
}

@keyframes handRotate-b-81dirqt8u3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pending-arcs[b-81dirqt8u3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.arc[b-81dirqt8u3] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    border: 2px solid transparent;
    border-top: 2px solid rgba(237, 137, 54, 0.3);
    border-radius: 50%;
    animation: arcRotate-b-81dirqt8u3 3s linear infinite;
}

    .arc:nth-child(2)[b-81dirqt8u3] {
        animation-delay: 0.5s;
        width: 160px;
        height: 160px;
    }

@keyframes arcRotate-b-81dirqt8u3 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Pure CSS Failure Animation */
.css-failure[b-81dirqt8u3] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
}

.failure-circle[b-81dirqt8u3] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #f56565, #e53e3e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: failureShake-b-81dirqt8u3 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes failureShake-b-81dirqt8u3 {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.cross-line[b-81dirqt8u3] {
    position: absolute;
    width: 40px;
    height: 8px;
    background: white;
    border-radius: 4px;
}

.line1[b-81dirqt8u3] {
    transform: rotate(45deg);
    animation: crossLine1-b-81dirqt8u3 0.5s 0.2s ease-out both;
}

.line2[b-81dirqt8u3] {
    transform: rotate(-45deg);
    animation: crossLine2-b-81dirqt8u3 0.5s 0.2s ease-out both;
}

@keyframes crossLine1-b-81dirqt8u3 {
    0% {
        width: 0;
    }

    100% {
        width: 40px;
    }
}

@keyframes crossLine2-b-81dirqt8u3 {
    0% {
        width: 0;
    }

    100% {
        width: 40px;
    }
}

.failure-rings[b-81dirqt8u3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ring[b-81dirqt8u3] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    border: 2px solid rgba(229, 62, 62, 0.2);
    border-radius: 50%;
    animation: ringExpand-b-81dirqt8u3 1.5s ease-out infinite;
}

    .ring:nth-child(2)[b-81dirqt8u3] {
        animation-delay: 0.3s;
    }

@keyframes ringExpand-b-81dirqt8u3 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

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

/* Result States Common */
.result-title[b-81dirqt8u3] {
    font-size: 2rem;
    color: #2d3748;
    margin-bottom: 8px;
    font-weight: 800;
    text-align: center;
}

.error-title[b-81dirqt8u3] {
    color: #e53e3e;
}

.result-subtitle[b-81dirqt8u3] {
    color: #718096;
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-align: center;
}

/* Status Badges */
.status-badge[b-81dirqt8u3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 30px;
    animation: badgeAppear-b-81dirqt8u3 0.5s 0.3s both;
}

@keyframes badgeAppear-b-81dirqt8u3 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-badge[b-81dirqt8u3] {
    background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
    color: #065f46;
    border: 2px solid #68d391;
}

.pending-badge[b-81dirqt8u3] {
    background: linear-gradient(135deg, #feebc8, #fbd38d);
    color: #744210;
    border: 2px solid #ed8936;
}

.error-badge[b-81dirqt8u3] {
    background: linear-gradient(135deg, #fed7d7, #feb2b2);
    color: #991b1b;
    border: 2px solid #fc8181;
}

.badge-icon[b-81dirqt8u3] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Transaction Card */
.transaction-card[b-81dirqt8u3] {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    margin: 25px 0;
    border: 1px solid #e2e8f0;
    animation: cardSlide-b-81dirqt8u3 0.5s 0.4s both;
}

@keyframes cardSlide-b-81dirqt8u3 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header[b-81dirqt8u3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #edf2f7, #e2e8f0);
    border-bottom: 1px solid #e2e8f0;
}

.card-icon[b-81dirqt8u3] {
    width: 24px;
    height: 24px;
    fill: #4c51bf;
}

.card-header h4[b-81dirqt8u3] {
    color: #2d3748;
    margin: 0;
    font-size: 1.1rem;
}

.card-body[b-81dirqt8u3] {
    padding: 20px;
}

.detail-row[b-81dirqt8u3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
}

    .detail-row:last-child[b-81dirqt8u3] {
        border-bottom: none;
    }

.detail-label[b-81dirqt8u3] {
    color: #718096;
    font-size: 0.95rem;
}

.detail-value[b-81dirqt8u3] {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.95rem;
}

.success-text[b-81dirqt8u3] {
    color: #38a169;
}

/* Success Tips */
.success-tips[b-81dirqt8u3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 25px 0;
}

.tip[b-81dirqt8u3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #f0fff4;
    border-radius: 10px;
    color: #065f46;
    border: 1px solid #c6f6d5;
    animation: tipAppear-b-81dirqt8u3 0.5s 0.5s both;
}

    .tip:nth-child(2)[b-81dirqt8u3] {
        animation-delay: 0.6s;
    }

@keyframes tipAppear-b-81dirqt8u3 {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.tip-icon[b-81dirqt8u3] {
    width: 24px;
    height: 24px;
    background: #9ae6b4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

/* Info Box */
.info-box[b-81dirqt8u3] {
    background: #fffaf0;
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid #fed7d7;
    animation: cardSlide-b-81dirqt8u3 0.5s 0.4s both;
}

.info-header[b-81dirqt8u3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.info-icon[b-81dirqt8u3] {
    width: 24px;
    height: 24px;
    fill: #d69e2e;
}

.info-header h4[b-81dirqt8u3] {
    color: #744210;
    margin: 0;
    font-size: 1.1rem;
}

.info-list[b-81dirqt8u3] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .info-list li[b-81dirqt8u3] {
        padding: 8px 0;
        color: #744210;
        position: relative;
        padding-left: 24px;
    }

        .info-list li[b-81dirqt8u3]:before {
            content: "→";
            position: absolute;
            left: 0;
            color: #ed8936;
            font-weight: bold;
        }

/* Countdown */
.countdown[b-81dirqt8u3] {
    background: linear-gradient(135deg, #edf2f7, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    margin: 25px 0;
    text-align: center;
    border: 1px solid #cbd5e0;
    animation: pulseGlow-b-81dirqt8u3 2s ease-in-out infinite;
}

@keyframes pulseGlow-b-81dirqt8u3 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.1);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
}

.countdown-label[b-81dirqt8u3] {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.countdown-timer[b-81dirqt8u3] {
    color: #4c51bf;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

/* Error Details */
.error-details[b-81dirqt8u3] {
    margin: 25px 0;
}

.error-message[b-81dirqt8u3] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: #fef2f2;
    border-radius: 12px;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.error-icon[b-81dirqt8u3] {
    width: 24px;
    height: 24px;
    fill: #e53e3e;
    flex-shrink: 0;
}

.error-message h4[b-81dirqt8u3] {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.error-message p[b-81dirqt8u3] {
    margin: 0;
    font-size: 0.95rem;
}

/* Solutions */
.solutions[b-81dirqt8u3] {
    background: #f0f9ff;
    border-radius: 16px;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid #bae6fd;
    animation: cardSlide-b-81dirqt8u3 0.5s 0.4s both;
}

    .solutions h4[b-81dirqt8u3] {
        color: #0369a1;
        margin-bottom: 20px;
        font-size: 1.1rem;
        text-align: center;
    }

.solution-grid[b-81dirqt8u3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.solution[b-81dirqt8u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.solution-icon[b-81dirqt8u3] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4299e1, #3182ce);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.solution span[b-81dirqt8u3] {
    color: #4b5563;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Action Buttons */
.action-buttons[b-81dirqt8u3] {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.btn[b-81dirqt8u3] {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    text-decoration: none;
    animation: buttonAppear-b-81dirqt8u3 0.5s 0.6s both;
}

.btn-success[b-81dirqt8u3] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

    .btn-success:hover[b-81dirqt8u3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
        background: linear-gradient(135deg, #059669, #047857);
    }

.btn-primary[b-81dirqt8u3] {
    background: linear-gradient(135deg, #4c51bf, #667eea);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 81, 191, 0.3);
}

    .btn-primary:hover[b-81dirqt8u3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(76, 81, 191, 0.4);
        background: linear-gradient(135deg, #4338ca, #4c51bf);
    }

.btn-secondary[b-81dirqt8u3] {
    background: #6b7280;
    color: white;
}

    .btn-secondary:hover[b-81dirqt8u3] {
        background: #4b5563;
        transform: translateY(-2px);
    }

.btn-outline[b-81dirqt8u3] {
    background: transparent;
    color: #4a5568;
    border: 2px solid #cbd5e0;
}

    .btn-outline:hover[b-81dirqt8u3] {
        background: #f7fafc;
        border-color: #a0aec0;
        transform: translateY(-2px);
    }

.btn-icon[b-81dirqt8u3] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@keyframes buttonAppear-b-81dirqt8u3 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 600px) {
    .payment-container[b-81dirqt8u3] {
        margin: 20px;
        padding: 25px;
    }

    .action-buttons[b-81dirqt8u3] {
        flex-direction: column;
    }

    .btn[b-81dirqt8u3] {
        width: 100%;
    }

    .result-title[b-81dirqt8u3] {
        font-size: 1.6rem;
    }

    .solution-grid[b-81dirqt8u3] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .progress-steps[b-81dirqt8u3]::before {
        left: 10%;
        right: 10%;
    }
}
/* /Components/Pages/DashboardPage/EBMachineHome.razor.rz.scp.css */


.reading-banner[b-cfk633p1i0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 20px;
    padding: 25px 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.reading-item[b-cfk633p1i0] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reading-icon[b-cfk633p1i0] {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.reading-label[b-cfk633p1i0] {
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reading-value[b-cfk633p1i0] {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.reading-divider[b-cfk633p1i0] {
    width: 2px;
    height: 70px;
    background: rgba(255,255,255,.25);
}

@media (max-width: 768px) {
    .reading-banner[b-cfk633p1i0] {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .reading-divider[b-cfk633p1i0] {
        width: 100%;
        height: 2px;
    }

    .reading-value[b-cfk633p1i0] {
        font-size: 26px;
    }
}

.rz-button.rz-secondary.rz-shade-default[b-cfk633p1i0] {
    color: #211c1c;
}

.shift-consumption-table[b-cfk633p1i0] {
    min-width: 1200px; /* or whatever width fits all columnssss */
}

.attendance-overview-module .card.bg-light .badge.bg-warning[b-cfk633p1i0] {
    background: var(--warning-gradient) !important;
    border-color: rgba(255, 154, 158, 0.3);
    color: #333;
}

.attendance-overview-module .modern-datagrid th[b-cfk633p1i0] {
    background: white !important;
    color: black !important;
    font-weight: 600;
    padding: 1.25rem;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.table-responsive[b-cfk633p1i0] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

.active-shift-row[b-cfk633p1i0] {
    /* background: linear-gradient(90deg, #43e97b, #38f9d7); */
    color: #fff;
    font-weight: bold;
    /* animation: pulseGlow 3s infinite; */
}

.stat-pill-sm[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px; /* smaller radius */
    padding: 4px 8px; /* reduced padding */
    margin: 2px; /* tighter spacing */
    box-shadow: none; /* remove heavy shadow */
    font-size: 0.75rem; /* smaller text */
}

    .stat-pill-sm:hover[b-cfk633p1i0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
        border-color: rgba(102, 126, 234, 0.4);
    }

    .stat-pill-sm .stat-icon[b-cfk633p1i0] {
        font-size: 0.9rem; /* smaller icon */
        margin-right: 4px;
    }

    .stat-pill-sm .stat-label[b-cfk633p1i0] {
        font-size: 0.65rem; /* smaller label */
        margin-right: 2px;
    }

    .stat-pill-sm .stat-value[b-cfk633p1i0] {
        font-size: 0.8rem; /* smaller value */
        font-weight: 600;
    }


.chip-info .stat-icon[b-cfk633p1i0] {
    color: #3b82f6;
}

.chip-warning .stat-icon[b-cfk633p1i0] {
    color: #f59e0b;
}

@keyframes pulseGlow-b-cfk633p1i0 {
    0% {
        box-shadow: 0 0 10px rgba(67, 233, 123, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(67, 233, 123, 0.9);
    }

    100% {
        box-shadow: 0 0 10px rgba(67, 233, 123, 0.6);
    }
}

.stat-pill-sm[b-cfk633p1i0] {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.grand-total-row[b-cfk633p1i0] {
    background: linear-gradient(90deg, #ffeb3b, #ffc107, #ff9800);
    color: #212121;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    border-top: 2px solid #fff3cd;
    border-bottom: 2px solid #fff3cd;
}

    .grand-total-row td[b-cfk633p1i0] {
        padding: 12px;
    }

.stat-pill-sm .stat-icon[b-cfk633p1i0] {
    font-size: 1rem;
    margin-right: 4px;
}

.stat-pill-sm .stat-label[b-cfk633p1i0] {
    font-size: 0.7rem;
    color: #666;
}

.stat-pill-sm .stat-value[b-cfk633p1i0] {
    font-size: 0.85rem;
    font-weight: bold;
}

/* Auto height grid */
.auto-height-grid[b-cfk633p1i0] {
    height: auto !important;
    max-height: none !important;
}

/* Chips */
.chip[b-cfk633p1i0] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    transition: transform 0.3s ease-in-out;
}



    .chip:hover[b-cfk633p1i0] {
        transform: scale(1.1);
    }


@keyframes blink-b-cfk633p1i0 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.glow-text[b-cfk633p1i0] {
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
}

/* Premium progress bar */
.premium-progress .progress-bar[b-cfk633p1i0] {
    background: linear-gradient(90deg, #00f5ff, #ff00ff);
    animation: shimmer-b-cfk633p1i0 2s infinite linear;
}

@keyframes shimmer-b-cfk633p1i0 {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}



/* Container */
.attendance-overview-module .modern-datagrid[b-cfk633p1i0] {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}


    /* Table Body Cells */
    .attendance-overview-module .modern-datagrid td[b-cfk633p1i0] {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

    /* Row Hover Effect */
    .attendance-overview-module .modern-datagrid tr:hover td[b-cfk633p1i0] {
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.05), rgba(0, 242, 254, 0.05));
        transform: translateX(2px);
    }

/* Badge Enhancements */
.attendance-overview-module .badge[b-cfk633p1i0] {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.attendance-overview-module .badge-present[b-cfk633p1i0] {
    background: var(--success-gradient) !important;
    color: white;
    border: none;
}

.attendance-overview-module .badge-absent[b-cfk633p1i0] {
    background: var(--danger-gradient) !important;
    color: white;
    border: none;
}

.attendance-overview-module .badge-info[b-cfk633p1i0] {
    background: var(--info-gradient) !important;
    color: white;
    border: none;
}

.stat-pill[b-cfk633p1i0] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px; /* pill shape */
    padding: 12px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
}

    .stat-pill:hover[b-cfk633p1i0] {
        transform: translateY(-3px);
    }

.stat-icon[b-cfk633p1i0] {
    font-size: 1.8rem;
    margin-right: 12px;
}

.stat-content[b-cfk633p1i0] {
    display: flex;
    flex-direction: column;
}

.stat-label[b-cfk633p1i0] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.stat-value[b-cfk633p1i0] {
    font-size: 1.2rem;
    font-weight: bold;
    color: #212529;
}

/* General clean datagrid look */
.clean-datagrid .rz-datatable[b-cfk633p1i0] {
    border: none;
    font-size: 0.9rem;
}

.clean-datagrid .rz-datatable-header[b-cfk633p1i0] {
    background: #f5f7fa;
    font-weight: 600;
}

.clean-datagrid .rz-datatable-data tr:nth-child(even)[b-cfk633p1i0] {
    background-color: #fafafa;
}

.clean-datagrid .rz-datatable-data tr:hover[b-cfk633p1i0] {
    background-color: #eef6ff;
}

.card .card-header[b-cfk633p1i0] {
    border-bottom: 0;
    /*    background: var(--primary-gradient);*/
    padding: 20px;
}

    .card .card-header .card-title[b-cfk633p1i0] {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 20px;
    }
/* Chips for shifts */
.chip[b-cfk633p1i0] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.chip-success[b-cfk633p1i0] {
    background-color: #28a745;
}

.chip-danger[b-cfk633p1i0] {
    background-color: #dc3545;
}

.chip-warning[b-cfk633p1i0] {
    background-color: #ffc107;
    color: #212529;
}

.shift-chip[b-cfk633p1i0] {
    background-color: #6c757d;
}

    .shift-chip.Morning[b-cfk633p1i0] {
        background-color: #007bff;
    }
    /* Blue */
    .shift-chip.Afternoon[b-cfk633p1i0] {
        background-color: #fd7e14;
    }
    /* Orange */
    .shift-chip.Night[b-cfk633p1i0] {
        background-color: #6f42c1;
    }
/* Purple */

/* Badges for cost */
.badge[b-cfk633p1i0] {
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.bg-success[b-cfk633p1i0] {
    background-color: #28a745;
    color: #fff;
}

.bg-warning[b-cfk633p1i0] {
    background-color: #ffc107;
    color: #212529;
}

.bg-danger[b-cfk633p1i0] {
    background-color: #dc3545;
    color: #fff;
}

/* Progress bar for units */
.premium-progress[b-cfk633p1i0] {
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

    .premium-progress .progress-bar[b-cfk633p1i0] {
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
    }

/* Sparkline placeholder (can be replaced with Chart.js or inline SVG) */
.sparkline[b-cfk633p1i0] {
    display: inline-block;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, #17a2b8, #20c997);
    border-radius: 4px;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    line-height: 20px;
}

/* ===== Keep all existing styles ===== */
.eb-meter-section .modern-card[b-cfk633p1i0]::before,
.eb-service-section .modern-card[b-cfk633p1i0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    z-index: 2;
}

.text-muted[b-cfk633p1i0] {
    --bs-text-opacity: 1;
    color: #000000 !important;
    font-size: 14px;
    font-weight: 700;
}

/* ===== Premium Page Header Styling ===== */
.page-header[b-cfk633p1i0] {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(67, 97, 238, 0.25);
    animation: fadeInUp-b-cfk633p1i0 0.6s ease-out;
}

    .page-header[b-cfk633p1i0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        animation: shimmer-b-cfk633p1i0 6s infinite;
    }

    .page-header h4[b-cfk633p1i0] {
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 0.25rem;
        letter-spacing: -0.5px;
    }

    .page-header p[b-cfk633p1i0] {
        font-size: 0.95rem;
        opacity: 0.85;
        margin-bottom: 0;
    }

    .page-header .breadcrumb[b-cfk633p1i0] {
        background: transparent;
        margin-top: 1rem;
        padding: 0;
    }

        .page-header .breadcrumb a[b-cfk633p1i0] {
            color: rgba(255,255,255,0.85);
            text-decoration: none;
            font-weight: 500;
        }

        .page-header .breadcrumb .active[b-cfk633p1i0] {
            color: #fff;
            font-weight: 600;
        }

.header-actions[b-cfk633p1i0] {
    display: flex;
    gap: 0.75rem;
}

    .header-actions .btn[b-cfk633p1i0] {
        border-radius: 50px;
        font-weight: 600;
        padding: 0.5rem 1.25rem;
        transition: all 0.3s ease;
        color: #000;
        background-color: #fff;
        border: 2px solid transparent;
    }

        .header-actions .btn:hover[b-cfk633p1i0] {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            color: #fff !important;
        }

.btn-primary-premium[b-cfk633p1i0] {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    border: none;
    color: #000;
}

    .btn-primary-premium:hover[b-cfk633p1i0] {
        background: linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
        color: #fff !important;
    }

.live-indicator[b-cfk633p1i0] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #43e97b;
    margin-right: 8px;
    animation: pulse-b-cfk633p1i0 2s infinite;
    box-shadow: 0 0 0 0 rgba(67, 233, 123, 1);
    transform: scale(1);
}

@keyframes pulse-b-cfk633p1i0 {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

@keyframes shimmer-b-cfk633p1i0 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes fadeInUp-b-cfk633p1i0 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:root[b-cfk633p1i0] {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --info-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --dark-gradient: linear-gradient(135deg, #141e30 0%, #243b55 100%);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-premium: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.12), 0 5px 20px rgba(0, 0, 0, 0.06);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-card[b-cfk633p1i0] {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    transition: var(--transition-smooth);
    position: relative;
    border: 1px solid rgba(102, 126, 234, 0.1);
    padding-bottom: 2px;
}

    .modern-card:hover[b-cfk633p1i0] {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
    }

    .modern-card[b-cfk633p1i0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-gradient);
        z-index: 2;
    }

.modern-card-header[b-cfk633p1i0] {
    background: linear-gradient(to right, #f8fafc, #ffffff);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    padding: 1.5rem;
}

.filter-section[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

    .filter-section[b-cfk633p1i0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
        background-size: 200% 100%;
        animation: shimmer-b-cfk633p1i0 3s infinite linear;
    }

.filter-group[b-cfk633p1i0] {
    margin-bottom: 0.75rem;
}

.filter-label[b-cfk633p1i0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.btn-group-sm.w-100[b-cfk633p1i0] {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.15);
}

.btn-group-sm .btn[b-cfk633p1i0] {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: 0 !important;
}

    .btn-group-sm .btn[b-cfk633p1i0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .btn-group-sm .btn:hover[b-cfk633p1i0]::before {
        left: 100%;
    }

    .btn-group-sm .btn.btn-outline-primary[b-cfk633p1i0] {
        background: white;
        color: #4a5568;
        border-right: 1px solid rgba(102, 126, 234, 0.1) !important;
    }

        .btn-group-sm .btn.btn-outline-primary:hover[b-cfk633p1i0] {
            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
            color: #667eea;
            transform: translateY(-1px);
        }

    .btn-group-sm .btn.btn-primary[b-cfk633p1i0] {
        background: var(--primary-gradient);
        color: white;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        position: relative;
        z-index: 1;
    }

        .btn-group-sm .btn.btn-primary[b-cfk633p1i0]::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .btn-group-sm .btn.btn-primary:hover[b-cfk633p1i0]::after {
            opacity: 1;
        }

.form-select.form-select-sm[b-cfk633p1i0] {
    background: white url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2d3748;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.08);
    transition: var(--transition-smooth);
}

    .form-select.form-select-sm:focus[b-cfk633p1i0] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        background-color: white;
    }

.btn-outline-success[b-cfk633p1i0], .btn-outline-primary[b-cfk633p1i0] {
    border: 2px solid;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    background: transparent !important;
}

.btn-outline-success[b-cfk633p1i0] {
    border-color: #10b981;
    color: #10b981;
}

    .btn-outline-success:hover[b-cfk633p1i0] {
        background: linear-gradient(135deg, #10b98115 0%, #34d39915 100%);
        color: #10b981;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15);
    }

.btn-outline-primary:hover[b-cfk633p1i0] {
    border-color: #282460;
    background: #282460;
    color: #000000;
}

.eb-service-section .btn-outline-primary[b-cfk633p1i0],
.eb-meter-section .btn-outline-primary[b-cfk633p1i0] {
    border-color: #667eea;
    color: #667eea;
}

    .eb-service-section .btn-outline-primary:hover[b-cfk633p1i0],
    .eb-meter-section .btn-outline-primary:hover[b-cfk633p1i0] {
        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%) !important;
        color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
    }

.btn-outline-secondary[b-cfk633p1i0] {
    border: 2px solid #a0aec0;
    color: #4a5568;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.375rem 1rem;
    transition: var(--transition-smooth);
}

    .btn-outline-secondary:hover[b-cfk633p1i0] {
        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
        color: #2d3748;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.modern-datagrid[b-cfk633p1i0] {
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

    .modern-datagrid .rz-datatable-thead[b-cfk633p1i0] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }

        .modern-datagrid .rz-datatable-thead th[b-cfk633p1i0] {
            color: white !important;
            font-weight: 600 !important;
            font-size: 0.85rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            padding: 1rem !important;
            border: none !important;
        }

    .modern-datagrid .rz-datatable-tbody tr[b-cfk633p1i0] {
        transition: var(--transition-smooth);
        border-bottom: 1px solid rgba(102, 126, 234, 0.08);
    }

        .modern-datagrid .rz-datatable-tbody tr:hover[b-cfk633p1i0] {
            background: linear-gradient(135deg, #667eea08 0%, #764ba208 100%) !important;
            transform: scale(1.005);
        }

    .modern-datagrid .rz-datatable-tbody td[b-cfk633p1i0] {
        padding: 0.875rem 1rem !important;
        color: #2d3748 !important;
        font-weight: 500 !important;
        border: none !important;
        border-right: 1px solid rgba(102, 126, 234, 0.05) !important;
    }

    .modern-datagrid .rz-datatable-tbody tr:nth-child(even)[b-cfk633p1i0] {
        background: rgba(102, 126, 234, 0.02);
    }

.badge[b-cfk633p1i0] {
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 20px;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
}

.bg-success[b-cfk633p1i0] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: white;
}

.bg-danger[b-cfk633p1i0] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
    color: white;
}

.bg-info[b-cfk633p1i0] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    color: white;
}

.bg-warning[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: white;
}

.bg-light[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #2d3748;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.status-indicator[b-cfk633p1i0] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-active[b-cfk633p1i0] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.status-inactive[b-cfk633p1i0] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.pagination-controls[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.page-info[b-cfk633p1i0] {
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 500;
}

.page-buttons[b-cfk633p1i0] {
    display: flex;
    gap: 0.5rem;
}

.page-btn[b-cfk633p1i0] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    background: white;
    color: #4a5568;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    cursor: pointer;
}

    .page-btn:hover:not(:disabled)[b-cfk633p1i0] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        border-color: transparent;
    }

    .page-btn.active[b-cfk633p1i0] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        border-color: transparent;
    }

    .page-btn:disabled[b-cfk633p1i0] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.chart-icon-wrapper[b-cfk633p1i0] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

    .chart-icon-wrapper.bg-success[b-cfk633p1i0] {
        background: var(--success-gradient);
    }

    .chart-icon-wrapper.bg-primary[b-cfk633p1i0] {
        background: var(--primary-gradient);
    }

.text-muted[b-cfk633p1i0] {
    color: #718096 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.card-title[b-cfk633p1i0] {
    color: #2d3748;
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 20px;
}

.text-warning[b-cfk633p1i0] {
    color: #f59e0b !important;
    background: linear-gradient(135deg, #fbbf2415 0%, #f59e0b15 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.text-success[b-cfk633p1i0] {
    color: #10b981 !important;
    background: linear-gradient(135deg, #10b98115 0%, #34d39915 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.text-danger[b-cfk633p1i0] {
    color: #ef4444 !important;
    background: linear-gradient(135deg, #ef444415 0%, #f8717115 100%);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .filter-section[b-cfk633p1i0] {
        padding: 1rem;
    }

    .btn-group-sm .btn[b-cfk633p1i0] {
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }

    .pagination-controls[b-cfk633p1i0] {
        flex-direction: column;
        gap: 1rem;
    }

    .page-buttons[b-cfk633p1i0] {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@keyframes fadeIn-b-cfk633p1i0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.data-grid-container[b-cfk633p1i0] {
    animation: fadeIn-b-cfk633p1i0 0.5s ease-out;
}

[b-cfk633p1i0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-cfk633p1i0]::-webkit-scrollbar-track {
    background: rgba(102, 126, 234, 0.05);
    border-radius: 4px;
}

[b-cfk633p1i0]::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

    [b-cfk633p1i0]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }

/* ===== New table styles (from Attendance Overview) ===== */
.shift-summary-table th[b-cfk633p1i0] {
    background: linear-gradient(135deg, #667eea 0%, #ccd6fc 100%);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.shift-summary-table td[b-cfk633p1i0] {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.quick-stats[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.quick-stats-badge[b-cfk633p1i0] {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
}

.quick-stats-number[b-cfk633p1i0] {
    font-size: 1rem;
    font-weight: 700;
}
/* solar card */
.modern-card[b-cfk633p1i0] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

/* Bottom-right decorative icon */
.modern-card[b-cfk633p1i0] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.kpi-bg-icon[b-cfk633p1i0] {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 58px;
    opacity: 0.20;
    z-index: 0;
}

.modern-card > *:not(.kpi-bg-icon)[b-cfk633p1i0] {
    position: relative;
    z-index: 1;
}

.units-icon[b-cfk633p1i0] {
    color: #f5b942;
}

.co2-icon[b-cfk633p1i0] {
    color: #5b9bd5;
}

.coal-icon[b-cfk633p1i0] {
    color: #e5a83b;
}

.tree-icon[b-cfk633p1i0] {
    color: #6fbd83;
}

.power-badge[b-cfk633p1i0] {
    font-size: 1rem;
}

.eb-reading-info[b-cfk633p1i0] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
}

    .eb-reading-info small[b-cfk633p1i0] {
        color: #6c757d;
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .eb-reading-info strong[b-cfk633p1i0] {
        color: #374151;
        font-weight: 700;
        font-size: 0.95rem;
    }

.last-reading[b-cfk633p1i0] {
    color: #2563eb !important;
}

    .last-reading i[b-cfk633p1i0] {
        color: #2563eb;
        margin-right: 4px;
    }

.machine-filter-wrapper[b-cfk633p1i0] {
    position: relative;
    display: inline-block;
    margin-left: 2px;
}

.machine-filter-button[b-cfk633p1i0] {
    height: 26px;
    min-width: 78px;
    padding: 3px 9px;
    border: 1px solid #d9def0;
    border-radius: 999px;
    background: #f8f9fc;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .machine-filter-button:hover[b-cfk633p1i0] {
        background: #eef2ff;
        border-color: #a5b4fc;
        color: #4f46e5;
    }

    .machine-filter-button .fa-filter[b-cfk633p1i0] {
        font-size: 9px;
        color: #6366f1;
    }

.filter-chevron[b-cfk633p1i0] {
    font-size: 8px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.machine-filter-wrapper[b-cfk633p1i0] {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
}

.machine-filter-button[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 70px;
    height: 28px;
    padding: 4px 11px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.30);
    transition: all 0.2s ease;
}

    .machine-filter-button:hover[b-cfk633p1i0] {
        background: linear-gradient(135deg, #4f46e5, #6d28d9);
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(99, 102, 241, 0.40);
    }

    .machine-filter-button i[b-cfk633p1i0] {
        font-size: 9px;
    }

    .machine-filter-button .filter-chevron[b-cfk633p1i0] {
        margin-left: 2px;
        font-size: 8px;
    }

.machine-filter-menu[b-cfk633p1i0] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 145px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    z-index: 1050;
}

.machine-filter-option[b-cfk633p1i0] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .machine-filter-option:hover[b-cfk633p1i0] {
        background: #f3f4f6;
        color: #4f46e5;
    }

    .machine-filter-option.selected[b-cfk633p1i0] {
        background: #eef2ff;
        color: #4f46e5;
        font-weight: 600;
    }

    .machine-filter-option > i:first-child[b-cfk633p1i0] {
        width: 14px;
        text-align: center;
        font-size: 10px;
    }

    .machine-filter-option .fa-check[b-cfk633p1i0] {
        font-size: 9px;
        color: #4f46e5;
    }

.other-consumption-row[b-cfk633p1i0] {
    background: #f8fafc;
    border-top: 1px dashed #cbd5e1;
    border-bottom: 1px solid #e2e8f0;
}

    .other-consumption-row td[b-cfk633p1i0] {
        height: 42px;
        vertical-align: middle;
        font-size: 13px;
    }

/* BLUE LABELS */
.other-label[b-cfk633p1i0] {
    color: #4f46e5;
    font-size: 13px;
    font-weight: 700;
}

/* RED VALUES */
.other-value[b-cfk633p1i0] {
    color: #ef4444;
    font-size: 13px;
    font-weight: 700;
    margin-left: 10px;
}

.consumption-value[b-cfk633p1i0] {
    background: #e8f5e9;
    color: #15803d;
}

.cost-value[b-cfk633p1i0] {
    background: #fff1e8;
    color: #ea580c;
}
/* =========================================================
   SHIFT PRODUCT DETAILS - PREMIUM MODAL
   ========================================================= */

.shift-product-overlay[b-cfk633p1i0] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 55px 20px 20px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}


/* ================= MODAL ================= */

.shift-product-dialog[b-cfk633p1i0] {
    width: min(1150px, calc(100vw - 40px)) !important;
    max-width: 1150px !important;
    max-height: calc(100vh - 80px) !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 5px 15px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ================= HEADER ================= */

.shift-product-header[b-cfk633p1i0] {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient( 135deg, #667eea 0%, #764ba2 100% ) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    box-sizing: border-box !important;
}


/* ================= TITLE ================= */

.shift-product-title[b-cfk633p1i0] {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 15px !important;
    margin: 0 !important;
}


/* ================= CLOSE ================= */

.shift-product-close[b-cfk633p1i0] {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #dc2626 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

    .shift-product-close:hover[b-cfk633p1i0] {
        background: #fee2e2 !important;
        color: #b91c1c !important;
        transform: scale(1.08) !important;
    }


/* ================= BODY ================= */

.shift-product-body[b-cfk633p1i0] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}


/* ================= RADZEN GRID ================= */

.shift-product-grid[b-cfk633p1i0] {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}


    /* ================= ACTUAL TABLE ================= */

    .shift-product-grid .rz-grid-table[b-cfk633p1i0] {
        width: 100% !important;
        min-width: 1450px !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        margin: 0 !important;
    }


        /* ================= TABLE HEADER ================= */

        .shift-product-grid .rz-datatable-thead th[b-cfk633p1i0],
        .shift-product-grid .rz-grid-table thead th[b-cfk633p1i0] {
            background: #f1f5f9 !important;
            color: #334155 !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            padding: 10px 9px !important;
            height: 40px !important;
            white-space: nowrap !important;
            text-align: center !important;
            vertical-align: middle !important;
            border-top: 1px solid #e2e8f0 !important;
            border-bottom: 2px solid #cbd5e1 !important;
            border-right: 1px solid #e2e8f0 !important;
            box-sizing: border-box !important;
        }


        /* ================= TABLE BODY ================= */

        .shift-product-grid .rz-datatable-tbody td[b-cfk633p1i0],
        .shift-product-grid .rz-grid-table tbody td[b-cfk633p1i0] {
            color: #475569 !important;
            background: #ffffff !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            padding: 9px 9px !important;
            height: 38px !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
            border-bottom: 1px solid #e2e8f0 !important;
            border-right: 1px solid #f1f5f9 !important;
            box-sizing: border-box !important;
        }


    /* ================= ALTERNATE ROW ================= */

    .shift-product-grid
    .rz-datatable-tbody
    tr:nth-child(even)
    td[b-cfk633p1i0] {
        background: #f8fafc !important;
    }


    /* ================= HOVER ================= */

    .shift-product-grid
    .rz-datatable-tbody
    tr:hover
    td[b-cfk633p1i0] {
        background: #eef4ff !important;
    }


    /* ================= PRODUCT NAME ================= */

    .shift-product-grid .rz-grid-table th:nth-child(2)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(2)[b-cfk633p1i0] {
        width: 300px !important;
        min-width: 300px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }


    /* ================= NUMERIC COLUMNS ================= */

    .shift-product-grid .rz-grid-table td:nth-child(3)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(4)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(5)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(7)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(8)[b-cfk633p1i0],
    .shift-product-grid .rz-grid-table td:nth-child(9)[b-cfk633p1i0] {
        text-align: right !important;
    }


/* ================= SCROLLBAR ================= */

.shift-product-body[b-cfk633p1i0]::-webkit-scrollbar {
    width: 8px !important;
    height: 10px !important;
}

.shift-product-body[b-cfk633p1i0]::-webkit-scrollbar-track {
    background: #eef2f7 !important;
    border-radius: 6px !important;
}

.shift-product-body[b-cfk633p1i0]::-webkit-scrollbar-thumb {
    background: linear-gradient( 135deg, #667eea, #764ba2 ) !important;
    border-radius: 6px !important;
}

    .shift-product-body[b-cfk633p1i0]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 135deg, #5a67d8, #6b3fa0 ) !important;
    }


/* ================= FOOTER ================= */

.shift-product-footer[b-cfk633p1i0] {
    flex: 0 0 55px !important;
    height: 55px !important;
    min-height: 55px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}


/* ================= EXPORT ================= */

.shift-product-export[b-cfk633p1i0] {
    height: 34px !important;
    min-width: 78px !important;
    padding: 6px 16px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #29245d !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .shift-product-export:hover[b-cfk633p1i0] {
        background: #211c4f !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(41, 36, 93, 0.25) !important;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .shift-product-overlay[b-cfk633p1i0] {
        padding: 45px 8px 10px !important;
    }

    .shift-product-dialog[b-cfk633p1i0] {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 60px) !important;
    }

    .shift-product-header[b-cfk633p1i0] {
        height: 45px !important;
        min-height: 45px !important;
    }

    .shift-product-title[b-cfk633p1i0] {
        font-size: 12px !important;
    }

    .shift-product-body[b-cfk633p1i0] {
        padding: 8px !important;
    }

    .shift-product-grid .rz-grid-table[b-cfk633p1i0] {
        min-width: 1450px !important;
    }
}
/* =========================================================
   SHIFT PRODUCT DETAILS MODAL
   ========================================================= */

/* ---------- MODAL OVERLAY ---------- */

/*.shift-product-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 55px 20px 20px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}*/


/* ---------- MODAL BOX ---------- */
/*.shift-product-dialog {
    width: min(1150px, calc(100vw - 40px)) !important;
    max-width: 1150px !important;
    max-height: calc(100vh - 80px) !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 5px 15px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}*/


/* =========================================================
   MODAL HEADER
   ========================================================= */

/*.shift-product-header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient( 135deg, #667eea 0%, #764ba2 100% ) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    box-sizing: border-box !important;
}*/

/* ---------- TITLE ---------- */


/*.shift-product-title {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 15px !important;
    margin: 0 !important;
}*/


/* ---------- CLOSE BUTTON ---------- */

/*.shift-product-close {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #dc2626 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}


    .shift-product-close:hover {
        background: #fee2e2 !important;
        color: #b91c1c !important;
        transform: scale(1.08) !important;
    }*/



/* =========================================================
   MODAL BODY
   ========================================================= */

/*.shift-product-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;*/
/*
       IMPORTANT:
       The horizontal scrollbar belongs here.
       This prevents the table from expanding
       the modal/page.
    */
/*overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}*/


/* =========================================================
   TABLE / RADZEN GRID
   ========================================================= */

/*.shift-product-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
}*/


/* ---------- RADZEN GRID ROOT ---------- */

/*.shift-product-grid .rz-data-grid,
    .shift-product-grid .rz-datatable {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }*/


/* =========================================================
   TABLE ITSELF
   ========================================================= */

/*.shift-product-grid .rz-grid-table {*/
/*
       The table is intentionally wider than
       the modal so horizontal scrolling occurs.
    */
/*width: 100% !important;
        min-width: 1450px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        margin: 0 !important;
    }*/


/* =========================================================
   TABLE HEADER
   ========================================================= */

/*.shift-product-grid .rz-datatable-thead th,
        .shift-product-grid .rz-grid-table thead th {
            background: #f3f4f7 !important;
            color: #374151 !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            padding: 8px 7px !important;
            white-space: nowrap !important;
            text-align: center !important;
            vertical-align: middle !important;
            line-height: 1.2 !important;
            border: 1px solid #e5e7eb !important;
            box-sizing: border-box !important;
            height: 34px !important;
        }*/


/* =========================================================
   TABLE BODY
   ========================================================= */

/*.shift-product-grid .rz-datatable-tbody td,
        .shift-product-grid .rz-grid-table tbody td {
            color: #374151 !important;
            background: #ffffff !important;
            font-size: 11px !important;
            font-weight: 400 !important;
            padding: 7px 7px !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
            border: 1px solid #e5e7eb !important;
            box-sizing: border-box !important;
            height: 31px !important;
        }*/


/* ---------- ALTERNATE ROW ---------- */

/*.shift-product-grid
    .rz-datatable-tbody
    tr:nth-child(even)
    td {
        background: #f8fafc !important;
    }*/


/* ---------- HOVER ---------- */

/*.shift-product-grid
    .rz-datatable-tbody
    tr:hover
    td {
        background: #eef4ff !important;
    }*/


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

/* Product ID */
/*.shift-product-grid .rz-grid-table th:nth-child(1),
    .shift-product-grid .rz-grid-table td:nth-child(1) {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        text-align: center !important;
    }*/


/* Product NAME
   IMPORTANT:
   This prevents the product name from being hidden.
*/
/*.shift-product-grid .rz-grid-table th:nth-child(2),
    .shift-product-grid .rz-grid-table td:nth-child(2) {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }*/


/* Qty */
/*.shift-product-grid .rz-grid-table th:nth-child(3),
    .shift-product-grid .rz-grid-table td:nth-child(3) {
        width: 80px !important;
        min-width: 80px !important;
        text-align: right !important;
    }*/


/* Product Group */
/*.shift-product-grid .rz-grid-table th:nth-child(4),
    .shift-product-grid .rz-grid-table td:nth-child(4) {
        width: 110px !important;
        min-width: 110px !important;
        text-align: right !important;
    }*/


/* No. of Products */
/*.shift-product-grid .rz-grid-table th:nth-child(5),
    .shift-product-grid .rz-grid-table td:nth-child(5) {
        width: 120px !important;
        min-width: 120px !important;
        text-align: right !important;
    }*/


/* Unit */
/*.shift-product-grid .rz-grid-table th:nth-child(6),
    .shift-product-grid .rz-grid-table td:nth-child(6) {
        width: 75px !important;
        min-width: 75px !important;
        text-align: center !important;
    }*/


/* Total RM Consumed Weight */
/*.shift-product-grid .rz-grid-table th:nth-child(7),
    .shift-product-grid .rz-grid-table td:nth-child(7) {
        width: 175px !important;
        min-width: 175px !important;
        text-align: right !important;
    }*/


/* OK Weight */
/*.shift-product-grid .rz-grid-table th:nth-child(8),
    .shift-product-grid .rz-grid-table td:nth-child(8) {
        width: 100px !important;
        min-width: 100px !important;
        text-align: right !important;
    }*/


/* Scrap */
/*.shift-product-grid .rz-grid-table th:nth-child(9),
    .shift-product-grid .rz-grid-table td:nth-child(9) {
        width: 100px !important;
        min-width: 100px !important;
        text-align: right !important;
    }*/


/* Status */
/*.shift-product-grid .rz-grid-table th:nth-child(10),
    .shift-product-grid .rz-grid-table td:nth-child(10) {
        width: 110px !important;
        min-width: 110px !important;
        text-align: center !important;
    }*/


/* Operators */
/*.shift-product-grid .rz-grid-table th:nth-child(11),
    .shift-product-grid .rz-grid-table td:nth-child(11) {
        width: 110px !important;
        min-width: 110px !important;
        text-align: center !important;
    }*/


/* =========================================================
   PRODUCT NAME CELL
   ========================================================= */

/*.shift-product-grid .product-name,
    .shift-product-grid .product-name-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }*/


/* =========================================================
   MODAL TABLE SCROLLBAR
   ========================================================= */

/*.shift-product-body::-webkit-scrollbar {
    width: 7px !important;
    height: 9px !important;
}

.shift-product-body::-webkit-scrollbar-track {
    background: #eef1f7 !important;
    border-radius: 5px !important;
}

.shift-product-body::-webkit-scrollbar-thumb {
    background: linear-gradient( 135deg, #667eea 0%, #764ba2 100% ) !important;
    border-radius: 5px !important;
}

    .shift-product-body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 135deg, #764ba2 0%, #667eea 100% ) !important;
    }*/


/* =========================================================
   MODAL FOOTER
   ========================================================= */

/*.shift-product-footer {
    flex: 0 0 55px !important;
    height: 55px !important;
    min-height: 55px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}*/


/* =========================================================
   EXPORT BUTTON
   ========================================================= */

/*.shift-product-export {
    height: 32px !important;
    min-width: 70px !important;
    padding: 5px 14px !important;
    border: none !important;
    border-radius: 5px !important;
    background: #29245d !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

    .shift-product-export:hover {
        background: #211c4f !important;
    }*/


/* =========================================================
   IMPORTANT: PREVENT MODAL FROM AFFECTING PAGE WIDTH
   ========================================================= */

/*html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}*/


/*
   Do NOT put overflow:hidden on the main dashboard
   vertically. The dashboard must still scroll normally.
*/


/* =========================================================
   MOBILE
   ========================================================= */

/*@media (max-width: 768px) {

    .shift-product-overlay {
        padding: 20px 10px !important;
        align-items: flex-start !important;
    }

    .shift-product-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 40px) !important;
        border-radius: 7px !important;
    }

    .shift-product-header {
        height: 42px !important;
        min-height: 42px !important;
    }

    .shift-product-body {
        padding: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .shift-product-grid .rz-grid-table {
        min-width: 1450px !important;
    }

    .shift-product-title {
        font-size: 11px !important;
    }

    .shift-product-footer {
        height: 50px !important;
        min-height: 50px !important;
        padding: 8px !important;
    }
}*/


/* =========================================================
   VERY SMALL SCREEN
   ========================================================= */

@media (max-width: 480px) {

    .shift-product-overlay[b-cfk633p1i0] {
        padding: 10px 5px !important;
    }

    .shift-product-dialog[b-cfk633p1i0] {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
    }

    .shift-product-body[b-cfk633p1i0] {
        padding: 6px !important;
    }

    .shift-product-grid .rz-grid-table[b-cfk633p1i0] {
        min-width: 1450px !important;
    }
}
/* =========================================================
   SHIFT-WISE RAW MATERIAL CONSUMPTION HEADER
   ========================================================= */

.shift-rm-header[b-cfk633p1i0] {
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%) !important;
    border-bottom: 1px solid #d7e6f5 !important;
    padding: 12px 18px !important;
}


/* Header layout */

.shift-rm-title-wrapper[b-cfk633p1i0] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}


/* Icon */

.shift-rm-icon[b-cfk633p1i0] {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 ) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25) !important;
    flex-shrink: 0 !important;
}


/* Title content */

.shift-rm-title-content[b-cfk633p1i0] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}


/* Main heading */

.shift-rm-title[b-cfk633p1i0] {
    color: #123b69 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1px !important;
}


/* Small subtitle */

.shift-rm-subtitle[b-cfk633p1i0] {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}


/* Slight hover effect */

.shift-rm-header[b-cfk633p1i0] {
    transition: background 0.2s ease !important;
}

    .shift-rm-header:hover[b-cfk633p1i0] {
        background: linear-gradient( 135deg, #f3f8ff 0%, #e8f1ff 100% ) !important;
    }
/* =========================================================
   CONSUMPTION SUMMARY - 3 ROWS
   ========================================================= */

.quick-stats-container[b-cfk633p1i0] {
    width: 100%;
    padding: 6px 8px 8px 8px;
}


/* =========================================================
   COMMON ROW
   ========================================================= */

.quick-stats-row[b-cfk633p1i0] {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    flex-wrap: nowrap !important;
}

    .quick-stats-row:last-child[b-cfk633p1i0] {
        margin-bottom: 0 !important;
    }


/* =========================================================
   STAT CARD
   ========================================================= */

.quick-stat-item[b-cfk633p1i0] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

    .quick-stat-item:hover[b-cfk633p1i0] {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12) !important;
    }



/* =========================================================
   BADGES
   ========================================================= */

.stat-badge[b-cfk633p1i0] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 25px !important;
    padding: 5px 12px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}


/* =========================================================
   BADGE COLORS
   ========================================================= */

.badge-consumption[b-cfk633p1i0] {
    background: linear-gradient(135deg, #64748b, #475569) !important;
}

.badge-eb-other[b-cfk633p1i0] {
    background: linear-gradient(135deg, #fb923c, #ea580c) !important;
}

.badge-operators[b-cfk633p1i0] {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
}

.badge-labour[b-cfk633p1i0] {
    background: linear-gradient(135deg, #22d3ee, #0891b2) !important;
}

.badge-labour-cost[b-cfk633p1i0] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.badge-rm-consumption[b-cfk633p1i0] {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
}

.badge-total-wt[b-cfk633p1i0] {
    background: linear-gradient(135deg, #14b8a6, #0f766e) !important;
}

.badge-good-wt[b-cfk633p1i0] {
    background: linear-gradient(135deg, #34d399, #059669) !important;
}

.badge-scrap[b-cfk633p1i0] {
    background: linear-gradient(135deg, #fb7185, #ef4444) !important;
}

.badge-eb-units[b-cfk633p1i0] {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
}

.badge-eb-cost[b-cfk633p1i0] {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
}


/* =========================================================
   VALUES
   ========================================================= */

.quick-stat-item .stat-value[b-cfk633p1i0] {
    display: block !important;
    margin-top: 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
}

.quick-stat-item .stat-orange[b-cfk633p1i0] {
    color: #ea580c !important;
}


/* =========================================================
   ICON
   ========================================================= */

.stat-badge i[b-cfk633p1i0] {
    font-size: 10px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .quick-stats-row[b-cfk633p1i0] {
        gap: 8px !important;
    }

    .quick-stats-row-2[b-cfk633p1i0],
    .quick-stats-row-3[b-cfk633p1i0] {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .stat-badge[b-cfk633p1i0] {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }

    .quick-stat-item .stat-value[b-cfk633p1i0] {
        font-size: 13px !important;
    }
}

/* =========================================================
   BOTH ROWS - EXACTLY 5 CARDS
   ========================================================= */

.quick-stats-row-1[b-cfk633p1i0],
.quick-stats-row-2[b-cfk633p1i0] {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: nowrap !important;
}


    /* Each row = exactly 5 equal cards */

    .quick-stats-row-1 .quick-stat-item[b-cfk633p1i0],
    .quick-stats-row-2 .quick-stat-item[b-cfk633p1i0] {
        flex: 1 1 20% !important;
        max-width: 20% !important;
        min-width: 0 !important;
    }

.badge-manpower[b-cfk633p1i0] {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
}


/* =========================================================
   EB CARDS
   USE EXACT SAME SIZE / LAYOUT AS EXECUTIVE SUMMARY
   ========================================================= */

.eb-stat-card[b-cfk633p1i0] {
    background: #fff !important;
    color: #212529 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 1rem !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}


    /* Icon */
    .eb-stat-card .stat-icon[b-cfk633p1i0] {
        color: #4361ee !important;
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }


    /* Label */
    .eb-stat-card .stat-info h6[b-cfk633p1i0] {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        margin-bottom: 0.25rem !important;
    }


    /* Value */
    .eb-stat-card .stat-info h4[b-cfk633p1i0] {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #000 !important;
        margin-bottom: 0 !important;
    }


    /* Other Cost */
    .eb-stat-card .eb-orange-value[b-cfk633p1i0] {
        color: #ea580c !important;
    }


    /* Hover */
    .eb-stat-card:hover[b-cfk633p1i0] {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    }

.eb-card-column[b-cfk633p1i0] {
    width: 18% !important;
}

@media (max-width: 991px) {
    .eb-card-column[b-cfk633p1i0] {
        width: 30% !important;
    }
}

@media (max-width: 767px) {
    .eb-card-column[b-cfk633p1i0] {
        width: 48% !important;
    }
}
/* =========================================
   PROFESSIONAL SHIFT ACTION BUTTONS
   ========================================= */

.action-cell[b-cfk633p1i0] {
    width: 90px;
    min-width: 90px;
    white-space: nowrap;
}

.shift-action-buttons[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Common action button */
.shift-action-btn[b-cfk633p1i0] {
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .shift-action-btn i[b-cfk633p1i0] {
        font-size: 13px;
    }

/* PDF button */
.pdf-action-btn[b-cfk633p1i0] {
    background: #fff;
    border: 1px solid #ffb4b4;
    color: #dc3545;
}

    .pdf-action-btn:hover[b-cfk633p1i0] {
        background: #fff5f5;
        border-color: #dc3545;
        color: #c82333;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(220, 53, 69, 0.18);
    }

/* Excel button */
.excel-action-btn[b-cfk633p1i0] {
    background: #28b463;
    border: 1px solid #28b463;
    color: #fff;
}

    .excel-action-btn:hover[b-cfk633p1i0] {
        background: #219653;
        border-color: #219653;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(40, 180, 99, 0.25);
    }

/* Click effect */
.shift-action-btn:active[b-cfk633p1i0] {
    transform: scale(0.94);
}

/* Upcoming */
.action-cell .text-muted[b-cfk633p1i0] {
    font-size: 14px;
}

/* =========================================================
   EB MACHINE - FULL PAGE LOADING OVERLAY
   ========================================================= */

/*.eb-page-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}*/

/* Loader Card */

/*.eb-page-loader {
    width: 360px;
    max-width: 90%;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 30px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8edf3;
}*/

/* Spinner */

/*.eb-loader-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 5px solid #e8eef8;
    border-top-color: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ebLoaderSpin 0.9s linear infinite;
}

    .eb-loader-spinner i {
        font-size: 21px;
        color: #2196f3;
        animation: ebLoaderIconPulse 1.2s ease-in-out infinite;
    }*/

/* Title */

/*.eb-loader-title {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}*/

/* Subtitle */

/*.eb-loader-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 20px;
}*/

/* Progress */

/*.eb-loader-progress {
    width: 100%;
    height: 4px;
    background: #e9eef5;
    border-radius: 10px;
    overflow: hidden;
}

.eb-loader-progress-bar {
    height: 100%;
    width: 45%;
    background: linear-gradient( 90deg, #2196f3, #667eea, #2196f3 );
    border-radius: 10px;
    animation: ebLoaderProgress 1.4s ease-in-out infinite;
}*/

/* Animations */

/*@keyframes ebLoaderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ebLoaderIconPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ebLoaderProgress {
    0% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(80%);
    }

    100% {
        transform: translateX(230%);
    }
}*/
/* =========================================================
   EB PAGE - NORMAL FULL PAGE LOADER
   ========================================================= */

.eb-page-loading-overlay[b-cfk633p1i0] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
/* =========================================================
   SHIFT KPI CARDS
   ========================================================= */

.shift-kpi-section[b-cfk633p1i0] {
    width: calc(100% - 24px);
    margin: 18px 12px 24px 12px;
}

.shift-kpi-grid[b-cfk633p1i0] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}


/* =========================================================
   COMMON CARD
   ========================================================= */

.shift-kpi-card[b-cfk633p1i0] {
    position: relative;
    min-height: 166px;
    padding: 19px 21px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.07);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .shift-kpi-card:hover[b-cfk633p1i0] {
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08), 0 18px 35px rgba(15, 23, 42, .11);
    }


    /* TOP LINE */

    .shift-kpi-card[b-cfk633p1i0]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }


    /* LARGE BACKGROUND CIRCLE */

    .shift-kpi-card[b-cfk633p1i0]::after {
        content: "";
        position: absolute;
        width: 145px;
        height: 145px;
        right: -48px;
        bottom: -82px;
        border-radius: 50%;
        opacity: .75;
        pointer-events: none;
    }


/* =========================================================
   1 - MATERIAL
   SOFT SKY BLUE
   ========================================================= */

.rm-card[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ffffff 0%, #f5faff 48%, #e5f1ff 100% );
}

    .rm-card[b-cfk633p1i0]::before {
        background: linear-gradient( 90deg, #2563eb, #60a5fa );
    }

    .rm-card[b-cfk633p1i0]::after {
        background: #dbeafe;
    }

    .rm-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient( 145deg, #2563eb, #60a5fa );
    }


/* =========================================================
   2 - PRODUCTION
   SOFT MINT GREEN
   ========================================================= */

.weight-card[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ffffff 0%, #f2fcf8 48%, #ddf7ec 100% );
}

    .weight-card[b-cfk633p1i0]::before {
        background: linear-gradient( 90deg, #059669, #34d399 );
    }

    .weight-card[b-cfk633p1i0]::after {
        background: #c9f3df;
    }

    .weight-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient( 145deg, #059669, #34d399 );
    }


/* =========================================================
   3 - MANPOWER
   SOFT PEACH / AMBER
   ========================================================= */

/* =========================================================
   3 - LABOUR COST
   UNIQUE ROSE / RED
   ========================================================= */

.labour-card[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ffffff 0%, #fff5f7 48%, #ffe4e9 100% );
}

    .labour-card[b-cfk633p1i0]::before {
        background: linear-gradient( 90deg, #e11d48, #fb7185 );
    }

    .labour-card[b-cfk633p1i0]::after {
        background: #fecdd3;
    }

    .labour-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient( 145deg, #e11d48, #fb7185 );
    }

    /* Labour manpower badge - match Labour card */
    .labour-card .shift-kpi-mini-label[b-cfk633p1i0] {
        color: #be123c;
        background: #fff1f2;
        border: 1px solid #fecdd3;
    }

    .labour-card .manpower-count[b-cfk633p1i0] {
        background: linear-gradient( 135deg, #e11d48, #be123c );
        color: #ffffff;
        border: none;
        box-shadow: 0 2px 7px rgba(225, 29, 72, 0.30);
    }

/* =========================================================
   4 - PROCESSING
   SOFT LAVENDER
   ========================================================= */

.conversion-card[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ffffff 0%, #faf8ff 48%, #eee7ff 100% );
}

    .conversion-card[b-cfk633p1i0]::before {
        background: linear-gradient( 90deg, #7c3aed, #a78bfa );
    }

    .conversion-card[b-cfk633p1i0]::after {
        background: #e7ddff;
    }

    .conversion-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient( 145deg, #7c3aed, #a78bfa );
    }


/* =========================================================
   TOP
   ========================================================= */

.shift-kpi-top[b-cfk633p1i0] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}


/* =========================================================
   ICON
   ========================================================= */

.shift-kpi-icon[b-cfk633p1i0] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    font-size: 19px;
    box-shadow: 0 6px 13px rgba(15, 23, 42, .12), inset 0 1px 1px rgba(255,255,255,.45);
}


/* =========================================================
   CATEGORY LABEL
   NOW MUCH CLEARER
   ========================================================= */

.shift-kpi-mini-label[b-cfk633p1i0] {
    position: relative;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148,163,184,.18);
    color: #475569;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(15,23,42,.04);
}

.rm-card .shift-kpi-mini-label[b-cfk633p1i0] {
    color: #2563eb;
    background: #eff6ff;
}

.weight-card .shift-kpi-mini-label[b-cfk633p1i0] {
    color: #059669;
    background: #ecfdf5;
}

.labour-card .shift-kpi-mini-label[b-cfk633p1i0] {
    color: #c87500;
    background: #fff7e6;
}

.conversion-card .shift-kpi-mini-label[b-cfk633p1i0] {
    color: #7c3aed;
    background: #f5f3ff;
}


/* =========================================================
   CONTENT
   ========================================================= */

.shift-kpi-content[b-cfk633p1i0] {
    position: relative;
    z-index: 3;
}

.shift-kpi-label[b-cfk633p1i0] {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.shift-kpi-value[b-cfk633p1i0] {
    color: #0f172a;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -.6px;
    white-space: nowrap;
}

    .shift-kpi-value span[b-cfk633p1i0] {
        margin-left: 3px;
        color: #64748b;
        font-size: 13px;
        font-weight: 750;
    }


/* =========================================================
   KPI BOTTOM DESCRIPTION - CLEAR & VISIBLE
   ========================================================= */

.shift-kpi-bottom[b-cfk633p1i0] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15px;
    line-height: 1.2;
}

    .shift-kpi-bottom i[b-cfk633p1i0] {
        font-size: 11px;
        flex-shrink: 0;
    }

/* Individual card description colors */
.rm-card .shift-kpi-bottom[b-cfk633p1i0] {
    color: #2563eb;
}

    .rm-card .shift-kpi-bottom i[b-cfk633p1i0] {
        color: #2563eb;
    }

.weight-card .shift-kpi-bottom[b-cfk633p1i0] {
    color: #059669;
}

    .weight-card .shift-kpi-bottom i[b-cfk633p1i0] {
        color: #059669;
    }

.labour-card .shift-kpi-bottom[b-cfk633p1i0] {
    color: #e11d48;
}

    .labour-card .shift-kpi-bottom i[b-cfk633p1i0] {
        color: #e11d48;
    }

.conversion-card .shift-kpi-bottom[b-cfk633p1i0] {
    color: #7c3aed;
}

    .conversion-card .shift-kpi-bottom i[b-cfk633p1i0] {
        color: #7c3aed;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {

    .shift-kpi-grid[b-cfk633p1i0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .shift-kpi-grid[b-cfk633p1i0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .shift-kpi-section[b-cfk633p1i0] {
        width: calc(100% - 16px);
        margin-left: 8px;
        margin-right: 8px;
    }

    .shift-kpi-grid[b-cfk633p1i0] {
        grid-template-columns: 1fr;
    }
}

/*@media (max-width: 600px) {

    .shift-kpi-section {
        width: calc(100% - 16px);
        margin-left: 8px;
        margin-right: 8px;
    }

    .shift-kpi-grid {
        grid-template-columns: 1fr;
    }
*/
}
/* =========================================================
   PEAK + LIVE POWER - PREMIUM CONTRAST DESIGN
   ========================================================= */

/* ---------- PEAK ---------- */

/*.peak-power {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 165px;
    height: 40px;
    padding: 0 13px 0 6px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #fff7ed 0%, #ffedd5 45%, #fed7aa 100% );
    border: 2px solid #f97316;
    color: #c2410c;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.20), 0 0 0 3px rgba(249, 115, 22, 0.06);
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
}*/

/* Peak icon */
/*.peak-power i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: linear-gradient( 135deg, #f97316, #ea580c );
        color: #ffffff;
        font-size: 0.82rem;
        box-shadow: 0 3px 8px rgba(234, 88, 12, 0.35);
    }*/

/* Peak value */
/*.peak-power strong {
        margin-left: 2px;
        color: #9a3412;
        font-size: 0.90rem;
        font-weight: 900;
        padding-left: 9px;
        border-left: 1px solid rgba(194, 65, 12, 0.25);
    }*/

/* Peak hover */
/*.peak-power:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.28), 0 0 0 4px rgba(249, 115, 22, 0.08);
    }*/


/* =========================================================
   LIVE POWER
   ========================================================= */

/*.live-power-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 195px;
    height: 46px;
    padding: 0 17px 0 9px;
    border-radius: 25px;
    background: linear-gradient( 135deg, #10b981 0%, #059669 55%, #047857 100% );
    border: 2px solid #34d399;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35), 0 0 0 3px rgba(16, 185, 129, 0.08);
    transition: all 0.25s ease;
    white-space: nowrap;
}*/

/* Live dot */
/*.live-power-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 12px rgba(255, 255, 255, 0.95);
    animation: livePowerPulse 1.8s infinite ease-in-out;
}*/

/* LIVE text */
/*.live-power-badge::before {
    content: "⚡";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.30);
}*/

/* Live hover */
/*.live-power-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 25px rgba(16, 185, 129, 0.45), 0 0 0 4px rgba(16, 185, 129, 0.10);
}*/


/* ---------- LIVE ANIMATION ---------- */

/*@keyframes livePowerPulse {

    0% {
        transform: scale(0.9);
        opacity: 0.75;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 0 8px rgba(255,255,255,0.7);
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
        box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 0 15px rgba(255,255,255,1);
    }

    100% {
        transform: scale(0.9);
        opacity: 0.75;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 0 8px rgba(255,255,255,0.7);
    }
}*/


/* ---------- RESPONSIVE ---------- */

/*@media (max-width: 768px) {

    .peak-power,
    .live-power-badge {
        min-width: auto;
        height: 40px;
        font-size: 0.75rem;
        padding-right: 10px;
    }

        .peak-power i,
        .live-power-badge::before {
            width: 29px;
            height: 29px;
            font-size: 0.8rem;
        }

        .peak-power strong {
            font-size: 0.85rem;
        }

    .live-power-dot {
        width: 8px;
        height: 8px;
    }
}*/


/* =========================================================
   MANPOWER BADGE
   ========================================================= */

.manpower-label[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 3px 6px 3px 11px;
    border-radius: 16px;
    background: linear-gradient( 135deg, #fff7ed, #ffedd5 );
    border: 1px solid #f59e0b;
    color: #b45309;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.18);
}


/* 372 number */
.manpower-count[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: linear-gradient( 135deg, #f59e0b, #d97706 );
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.30);
}

/* =========================================================
   PEAK + LIVE POWER
   SAME SIZE / SAME SHAPE
   ========================================================= */

.peak-power[b-cfk633p1i0],
.live-power-badge[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 178px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.80rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.15px;
}


/* =========================================================
   PEAK = RED / ABSENT STYLE
   ========================================================= */

.peak-power[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ff6b5f 0%, #ef4444 50%, #dc2626 100% );
    border: 1px solid #ff8a80;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.30);
}


    /* Peak icon */
    .peak-power i[b-cfk633p1i0] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.20);
        color: #ffffff;
        font-size: 0.78rem;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }


    /* Peak label */
    .peak-power > span[b-cfk633p1i0] {
        display: inline-flex;
        align-items: center;
        height: 22px;
    }


    /* Peak value */
    .peak-power strong[b-cfk633p1i0] {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        padding-left: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 900;
    }


/* =========================================================
   LIVE = GREEN / PRESENT STYLE
   ========================================================= */

.live-power-badge[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #34d399 0%, #10b981 50%, #059669 100% );
    border: 1px solid #6ee7b7;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
}


    /* Live lightning */
    .live-power-badge[b-cfk633p1i0]::before {
        content: "⚡";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.20);
        color: #ffffff;
        font-size: 0.78rem;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }


/* Live dot */
.live-power-dot[b-cfk633p1i0] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 0 8px rgba(255, 255, 255, 0.9);
    animation: livePowerPulse-b-cfk633p1i0 1.8s infinite ease-in-out;
}


/* Live text */
.live-power-badge > span:not(.live-power-dot)[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
}


/* Live value */
.live-power-badge strong[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
}


/* =========================================================
   HOVER
   ========================================================= */

.peak-power:hover[b-cfk633p1i0] {
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(239, 68, 68, 0.38);
}

.live-power-badge:hover[b-cfk633p1i0] {
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(16, 185, 129, 0.38);
}


/* =========================================================
   LIVE PULSE
   ========================================================= */

@keyframes livePowerPulse-b-cfk633p1i0 {

    0% {
        transform: scale(0.90);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(0.90);
        opacity: 0.75;
    }
}

.stock-progress-card[b-cfk633p1i0] {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffe08a;
}

    .stock-progress-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
        box-shadow: 0 6px 15px rgba(245, 158, 11, 0.25);
    }

    .stock-progress-card .shift-kpi-mini-label[b-cfk633p1i0] {
        color: #d97706;
    }

    .stock-progress-card .shift-kpi-value[b-cfk633p1i0] {
        color: #b45309;
    }

    .stock-progress-card .shift-kpi-bottom[b-cfk633p1i0] {
        color: #d97706;
    }
/* =========================================================
   6 - AVERAGE CONVERSION
   SKY BLUE
   ========================================================= */

.average-conversion-card[b-cfk633p1i0] {
    background: linear-gradient( 135deg, #ffffff 0%, #f0f9ff 48%, #d9f2ff 100% );
}

    .average-conversion-card[b-cfk633p1i0]::before {
        background: linear-gradient( 90deg, #0284c7, #38bdf8 );
    }

    .average-conversion-card[b-cfk633p1i0]::after {
        background: #bae6fd;
    }

    .average-conversion-card .shift-kpi-icon[b-cfk633p1i0] {
        background: linear-gradient( 145deg, #0284c7, #38bdf8 );
    }

    .average-conversion-card .shift-kpi-mini-label[b-cfk633p1i0] {
        color: #0369a1;
        background: #e0f2fe;
    }

    .average-conversion-card .shift-kpi-value[b-cfk633p1i0] {
        color: #075985;
    }

    .average-conversion-card .shift-kpi-bottom[b-cfk633p1i0] {
        color: #0284c7;
    }

        .average-conversion-card .shift-kpi-bottom i[b-cfk633p1i0] {
            color: #0284c7;
        }

.machine-peak-badge[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.peak-in-range[b-cfk633p1i0] {
    color: #15803d;
    background-color: #dcfce7;
    border: 1px solid #86efac;
}

.peak-out-of-range[b-cfk633p1i0] {
    color: #dc2626;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
}

.eb-live-stat[b-cfk633p1i0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

    .eb-live-stat .eb-live-label[b-cfk633p1i0] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #64748b;
    }

    .eb-live-stat strong[b-cfk633p1i0] {
        font-size: 0.9rem;
        color: #334155;
    }

.eb-live-energy[b-cfk633p1i0] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

    .eb-live-energy .eb-live-label[b-cfk633p1i0],
    .eb-live-energy strong[b-cfk633p1i0] {
        color: #059669;
    }

.eb-live-leakage[b-cfk633p1i0] {
    background: #fff7ed;
    border-color: #fed7aa;
}

    .eb-live-leakage .eb-live-label[b-cfk633p1i0],
    .eb-live-leakage strong[b-cfk633p1i0] {
        color: #ea580c;
    }

/* Machine load becomes RED when Machine > EB Energy */
.eb-live-stat.eb-live-danger[b-cfk633p1i0] {
    background: #fef2f2;
    border-color: #fecaca;
}

    .eb-live-stat.eb-live-danger .eb-live-label[b-cfk633p1i0],
    .eb-live-stat.eb-live-danger strong[b-cfk633p1i0] {
        color: #dc2626;
    }

/* =========================================================
   EB MACHINE TABLE — COMPACT, MATCHED LIVE & PEAK BADGES
   Scoped to this table only
   ========================================================= */


/* EB MACHINE TABLE ONLY */
.shift-consumption-table .live-power-badge[b-cfk633p1i0],
.shift-consumption-table .machine-peak-badge[b-cfk633p1i0] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 7px !important;
    gap: 5px;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: none !important;
    transform: none !important;
}


/* LIVE badge — EB Machine table only */
.shift-consumption-table .live-power-badge[b-cfk633p1i0] {
    background: #e9fbf3 !important;
    border: 1px solid #a7e8cc !important;
    color: #087f5b !important;
    box-shadow: none !important;
}

    /* Remove lightning icon; keep dot */
    .shift-consumption-table .live-power-badge[b-cfk633p1i0]::before,
    .shift-consumption-table .live-power-badge > i[b-cfk633p1i0] {
        content: none !important;
        display: none !important;
    }
    .shift-consumption-table .live-power-badge .live-power-dot[b-cfk633p1i0] {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        flex: 0 0 6px !important;
        border-radius: 50% !important;
        background: #10b981 !important;
    }
    /* LIVE label */
    .shift-consumption-table .live-power-badge > span:not(.live-power-dot)[b-cfk633p1i0] {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: inherit !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    /* Value — no divider or extra margin */
    .shift-consumption-table .live-power-badge strong[b-cfk633p1i0] {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: inherit !important;
        font-family: inherit !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }
.shift-consumption-table .live-power-badge[b-cfk633p1i0],
.shift-consumption-table .machine-peak-badge[b-cfk633p1i0],
.shift-consumption-table .peak-power[b-cfk633p1i0] {
    margin-right: 6px !important;
}
/* /Components/Pages/DashboardPage/ExecutiveSummary_Attendance.razor.rz.scp.css */
.modal-title[b-ap7vgblpwf] {
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
        color: #000000f7;
    }

    .compact-kpi[b-ap7vgblpwf] {
        padding: 0.6rem; /* smaller padding */
        border-radius: 10px; /* softer corners */
        text-align: center;
        min-height: 100px; /* shorter card height */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .chart-icon-wrapper[b-ap7vgblpwf] {
        width: 36px; /* smaller icon circle */
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem; /* smaller icon size */
        margin-bottom: 0.4rem;
    }

    .card-title[b-ap7vgblpwf] {
        font-size: 0.85rem; /* smaller title */
        font-weight: 600;
        margin-bottom: 0.2rem;
    }

    .stat-value[b-ap7vgblpwf] {
        font-size: 1.1rem; /* compact value text */
        font-weight: 700;
        margin-bottom: 0.2rem;
    }

    .quick-stats-badge[b-ap7vgblpwf] {
        font-size: 0.7rem; /* slim badge */
        padding: 0.2rem 0.5rem;
        border-radius: 12px;
    }

    /* ===== ENTERPRISE MINIMALISTIC DESIGN SYSTEM ===== */
    .attendance-overview-module[b-ap7vgblpwf] {
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --border-radius: 0.5rem;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }

    body[b-ap7vgblpwf] {
        background: var(--gray-50);
        font-family: var(--font-sans);
        color: var(--gray-800);
        line-height: 1.5;
    }

    /* Modern Card */
    .modern-card[b-ap7vgblpwf] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease;
        overflow: hidden;
    }

        .modern-card:hover[b-ap7vgblpwf] {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

    /* Compact KPI Card */
    .compact-kpi[b-ap7vgblpwf] {
       
        text-align: center;
    }

    .chart-icon-wrapper[b-ap7vgblpwf] {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75rem;
        background: var(--gray-100);
        color: var(--primary);
    }

        .chart-icon-wrapper.bg-primary[b-ap7vgblpwf] {
            background: #e0e7ff;
            color: var(--primary);
        }

        .chart-icon-wrapper.bg-success[b-ap7vgblpwf] {
            background: #d1fae5;
            color: var(--success);
        }

        .chart-icon-wrapper.bg-warning[b-ap7vgblpwf] {
            background: #fef3c7;
            color: var(--warning);
        }

        .chart-icon-wrapper.bg-danger[b-ap7vgblpwf] {
            background: #fee2e2;
            color: var(--danger);
        }

    .compact-kpi .card-title[b-ap7vgblpwf] {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        margin-bottom: 0.5rem;
    }

    .gradient-text[b-ap7vgblpwf] {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0.25rem 0;
    }

    .quick-stats-badge[b-ap7vgblpwf] {
        display: inline-block;
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 500;
        background: var(--gray-100);
        color: var(--gray-600);
    }

        .quick-stats-badge.bg-success[b-ap7vgblpwf] {
            background: #d1fae5;
            color: #065f46;
        }

        .quick-stats-badge.bg-warning[b-ap7vgblpwf] {
            background: #fef3c7;
            color: #b45309;
        }

        .quick-stats-badge.bg-info[b-ap7vgblpwf] {
            background: #e0f2fe;
            color: #0369a1;
        }

        .quick-stats-badge.bg-danger[b-ap7vgblpwf] {
            background: #fee2e2;
            color: #b91c1c;
        }

    /* Filter Card */
    .filter-card[b-ap7vgblpwf] {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        margin-bottom: 1.5rem;
    }

        .filter-card .card-header[b-ap7vgblpwf] {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            padding: 0.75rem 1.25rem;
            font-weight: 500;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gray-600);
        }

        .filter-card .card-body[b-ap7vgblpwf] {
            padding: 1.25rem;
        }

    /* Form Controls */
    .form-label[b-ap7vgblpwf] {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        margin-bottom: 0.25rem;
        display: block;
    }

    .form-control[b-ap7vgblpwf], select[b-ap7vgblpwf], input[type="date"][b-ap7vgblpwf] {
        border: 1px solid var(--gray-300);
        border-radius: var(--border-radius);
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        transition: border-color 0.15s, box-shadow 0.15s;
        width: 100%;
        background: white;
    }

        .form-control:focus[b-ap7vgblpwf], select:focus[b-ap7vgblpwf], input:focus[b-ap7vgblpwf] {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

    /* Buttons */
    .btn[b-ap7vgblpwf] {
        font-size: 0.875rem;
        font-weight: 500;
        padding: 0.5rem 1rem;
        border-radius: var(--border-radius);
        transition: all 0.2s;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .btn-primary[b-ap7vgblpwf] {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
    }

        .btn-primary:hover[b-ap7vgblpwf] {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
        }

    .btn-outline[b-ap7vgblpwf] {
        background: white;
        border-color: var(--gray-300);
        color: var(--gray-700);
    }

        .btn-outline:hover[b-ap7vgblpwf] {
            background: var(--gray-50);
            border-color: var(--gray-400);
        }

    .btn-sm[b-ap7vgblpwf] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Table */
    .table[b-ap7vgblpwf] {
        width: 100%;
        border-collapse: collapse;
    }

        .table th[b-ap7vgblpwf] {
            background: var(--gray-50);
            color: var(--gray-600);
            font-weight: 500;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--gray-200);
            text-align: left;
        }

        .table td[b-ap7vgblpwf] {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--gray-200);
            font-size: 0.875rem;
            color: var(--gray-700);
            vertical-align: middle;
        }

        .table tr:hover td[b-ap7vgblpwf] {
            background: var(--gray-50);
        }

    /* Badges */
    .badge[b-ap7vgblpwf] {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.2rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 500;
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .badge-success[b-ap7vgblpwf] {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-warning[b-ap7vgblpwf] {
        background: #fef3c7;
        color: #b45309;
    }

    .badge-danger[b-ap7vgblpwf] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .badge-info[b-ap7vgblpwf] {
        background: #e0f2fe;
        color: #0369a1;
    }

    /* Progress bar */
    .progress[b-ap7vgblpwf] {
        height: 4px;
        background: var(--gray-200);
        border-radius: 9999px;
        overflow: hidden;
        width: 60px;
    }

    .progress-bar[b-ap7vgblpwf] {
        height: 100%;
        border-radius: 9999px;
    }

    .progress-bar-primary[b-ap7vgblpwf] {
        background: var(--primary);
    }

    .progress-bar-success[b-ap7vgblpwf] {
        background: var(--success);
    }

    .progress-bar-warning[b-ap7vgblpwf] {
        background: var(--warning);
    }

    .progress-bar-danger[b-ap7vgblpwf] {
        background: var(--danger);
    }

    /* Modal */
    .modal-backdrop[b-ap7vgblpwf] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }

    .modal[b-ap7vgblpwf] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
    }

    .modal-dialog[b-ap7vgblpwf] {
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-md);
        width: 90%;
        max-width: 1000px;
        margin: 1.75rem auto;
    }

    .modal-header[b-ap7vgblpwf] {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title[b-ap7vgblpwf] {
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
    }

    .modal-body[b-ap7vgblpwf] {
        padding: 1.5rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-footer[b-ap7vgblpwf] {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--gray-200);
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    /* Spinner */
    .spinner-border[b-ap7vgblpwf] {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 0.2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border-b-ap7vgblpwf 0.75s linear infinite;
    }

    @keyframes spinner-border-b-ap7vgblpwf {
        to {
            transform: rotate(360deg);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .compact-kpi[b-ap7vgblpwf] {
            padding: 1rem;
        }

        .gradient-text[b-ap7vgblpwf] {
            font-size: 1.25rem;
        }

        .table th[b-ap7vgblpwf], .table td[b-ap7vgblpwf] {
            padding: 0.5rem 0.75rem;
        }
    }

    .bg-danger[b-ap7vgblpwf] {
        --bs-bg-opacity: 1;
        background-color: rgb(228 215 216) !important;
    }

    .bg-success[b-ap7vgblpwf] {
        --bs-bg-opacity: 1;
        background-color: rgb(252 149 136 / 51%) !important;
    }

    .bg-primary[b-ap7vgblpwf] {
        --bs-bg-opacity: 1;
        background-color: rgb(255 214 172) !important;
    }

    .bg-warning[b-ap7vgblpwf] {
        --bs-bg-opacity: 1;
        background-color: rgb(255 193 7 / 38%) !important;
    }
/* /Components/Pages/DashboardPage/MachineDashboard.razor.rz.scp.css */
.header-right-section[b-ro22x42g62] {
    gap: 1.5rem; /* more spacing between blocks */
}

.weight-card[b-ro22x42g62] {
    width: 120px;
    height: 70px;
    padding: 8px 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-title[b-ro22x42g62] {
    font-size: 10px;
}

.metric-value[b-ro22x42g62] {
    font-size: 16px;
    font-weight: 700;
}

.metric-percentage[b-ro22x42g62] {
    font-size: 12px;
    padding: 2px 8px;
}

.metrics-grid[b-ro22x42g62] {
    width: 170px;
    margin: 0;
    padding: 0;
}

.metric-card[b-ro22x42g62] {
    width: 160px;
    height: 70px;
    margin: 0;
}

.period-switcher[b-ro22x42g62] {
    background: rgba(255,255,255,0.06);
    padding: 8px 12px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.date-filter-card[b-ro22x42g62] {
    min-width: 380px;
    justify-content: flex-start;
}

.range-badge[b-ro22x42g62] {
    font-size: 0.9rem;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #bae6fd;
}

.rz-datepicker > .rz-inputtext[b-ro22x42g62] {
    width: 105%;
    line-height: var(--rz-datepicker-line-height);
}

.text-muted[b-ro22x42g62] {
    --bs-text-opacity: 1;
    color: #000000 !important;
}

.bg-white[b-ro22x42g62] {
    --bs-bg-opacity: 1;
    background-color: #cccccc7a !important;
}

.date-filter-card[b-ro22x42g62] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

    .date-filter-card:hover[b-ro22x42g62] {
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

/* =========================================================
           ENTERPRISE HEADER DESIGN
        ========================================================= */

.enterprise-dashboard-header[b-ro22x42g62] {
    background: linear-gradient(135deg, #667eea 0%, #0b2b6e 50%, #667eea 100%);
    border-radius: 24px;
    padding: 28px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}

    .enterprise-dashboard-header[b-ro22x42g62]::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(59,130,246,0.18), transparent 70%);
    }

    .enterprise-dashboard-header[b-ro22x42g62]::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 240px;
        height: 240px;
        background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 70%);
    }

/* =========================================================
           TOP SECTION
        ========================================================= */

.header-top[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.header-title-section[b-ro22x42g62] {
    flex: 1;
}

.title-row[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dashboard-icon[b-ro22x42g62] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    font-size: 30px;
    box-shadow: 0 10px 20px rgba(37,99,235,0.35);
}

.dashboard-title[b-ro22x42g62] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.dashboard-subtitle[b-ro22x42g62] {
    color: rgba(255,255,255,0.70);
    font-size: 14px;
    letter-spacing: .4px;
}

/* =========================================================
           META INFO
        ========================================================= */

.header-meta[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.meta-item[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 13px;
}

.meta-divider[b-ro22x42g62] {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.15);
}

.live-pulse[b-ro22x42g62] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    position: relative;
}

    .live-pulse[b-ro22x42g62]::before {
        content: '';
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        background: rgba(34,197,94,0.4);
        animation: pulse-b-ro22x42g62 1.8s infinite;
    }

@keyframes pulse-b-ro22x42g62 {
    0% {
        transform: scale(.6);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* =========================================================
           BREADCRUMB
        ========================================================= */

.enterprise-breadcrumb[b-ro22x42g62] {
    margin-top: 18px;
}

    .enterprise-breadcrumb .breadcrumb[b-ro22x42g62] {
        background: rgba(255,255,255,0.04);
        padding: 10px 16px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
    }

    .enterprise-breadcrumb .breadcrumb-item[b-ro22x42g62],
    .enterprise-breadcrumb .breadcrumb-item a[b-ro22x42g62] {
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        font-size: 13px;
    }

        .enterprise-breadcrumb .breadcrumb-item.active[b-ro22x42g62] {
            color: white;
        }

/* =========================================================
           RIGHT SECTION
        ========================================================= */

.header-right-section[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
}

/* =========================================================
           PERIOD SWITCHER
        ========================================================= */

.period-switcher[b-ro22x42g62] {
    display: flex;
    background: rgba(255,255,255,0.06);
    padding: 6px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    gap: 6px;
}

.period-btn[b-ro22x42g62] {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.75);
    padding: 12px 18px;
    border-radius: 12px;
    transition: all .3s ease;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .period-btn:hover[b-ro22x42g62] {
        background: rgba(255,255,255,0.08);
        color: white;
    }

    .period-btn.active[b-ro22x42g62] {
        background: linear-gradient(135deg,#3b82f6,#2563eb);
        color: white;
        box-shadow: 0 6px 18px rgba(37,99,235,0.35);
    }

/* =========================================================
           BUTTONS
        ========================================================= */

.header-buttons[b-ro22x42g62] {
    display: flex;
    gap: 12px;
}

.btn-export[b-ro22x42g62],
.btn-premium-back[b-ro22x42g62] {
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 600;
    transition: .3s ease;
}

.btn-export[b-ro22x42g62] {
    background: rgba(255,255,255,0.08);
    color: white;
    width: 50px;
}

    .btn-export:hover[b-ro22x42g62] {
        background: rgba(255,255,255,0.16);
    }

.btn-premium-back[b-ro22x42g62] {
    background: linear-gradient(135deg,#0ea5e9,#2563eb);
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(37,99,235,0.3);
}

    .btn-premium-back:hover[b-ro22x42g62] {
        transform: translateY(-2px);
    }

/* =========================================================
           BOTTOM STATUS SECTION
        ========================================================= */

.header-bottom[b-ro22x42g62] {
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.machine-status-tabs[b-ro22x42g62] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 18px;
}

.machine-status-card[b-ro22x42g62] {
    border: none;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.05);
    transition: .35s ease;
    color: white;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.05);
}

    .machine-status-card:hover[b-ro22x42g62] {
        transform: translateY(-4px);
        background: rgba(255,255,255,0.08);
    }

    .machine-status-card.active[b-ro22x42g62] {
        border: 1px solid rgba(255,255,255,0.16);
        box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    }

.status-icon[b-ro22x42g62] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* STATUS COLORS */
.machine-status-card.all .status-icon[b-ro22x42g62] {
    background: rgba(59,130,246,0.18);
    color: #60a5fa;
}

.machine-status-card.operating .status-icon[b-ro22x42g62] {
    background: rgba(34,197,94,0.18);
    color: #4ade80;
}

.machine-status-card.idle .status-icon[b-ro22x42g62] {
    background: rgba(245,158,11,0.18);
    color: #fbbf24;
}

.machine-status-card.stopped .status-icon[b-ro22x42g62] {
    background: rgba(239,68,68,0.18);
    color: #f87171;
}

.status-content[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
}

.status-label[b-ro22x42g62] {
    font-size: 13px;
    color: rgba(255,255,255,0.70);
    margin-bottom: 4px;
}

.status-count[b-ro22x42g62] {
    font-size: 1.5rem;
    font-weight: 700;
}

/* =========================================================
           RESPONSIVE
        ========================================================= */

@media(max-width: 992px) {
    .header-top[b-ro22x42g62] {
        flex-direction: column;
    }

    .header-right-section[b-ro22x42g62] {
        width: 100%;
        align-items: stretch;
    }

    .period-switcher[b-ro22x42g62] {
        width: 100%;
        justify-content: space-between;
    }

    .period-btn[b-ro22x42g62] {
        flex: 1;
        justify-content: center;
    }

    .header-buttons[b-ro22x42g62] {
        width: 100%;
    }

    .btn-premium-back[b-ro22x42g62] {
        flex: 1;
        justify-content: center;
    }
}

.enterprise-header[b-ro22x42g62] {
    background: linear-gradient(90deg, #007bff, #00c6ff);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.header-title[b-ro22x42g62] {
    font-weight: 600;
    margin-bottom: 5px;
}

.header-subtitle[b-ro22x42g62] {
    opacity: 0.9;
}

.last-updated[b-ro22x42g62] {
    opacity: 0.85;
    color: #f1f1f1;
}

.live-indicator[b-ro22x42g62] {
    background: #28a745;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    animation: pulse-b-ro22x42g62 1.5s infinite;
}

@keyframes pulse-b-ro22x42g62 {x
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

.enterprise-breadcrumb[b-ro22x42g62] {
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 5px 10px;
}

    .enterprise-breadcrumb a[b-ro22x42g62] {
        color: #fff;
    }

.tab-btn[b-ro22x42g62] {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 500;
    margin: 0 5px;
    padding: 8px 16px;
    border-radius: 20px;
    transition: background 0.3s;
}

    .tab-btn.active[b-ro22x42g62], .tab-btn:hover[b-ro22x42g62] {
        background: rgba(255,255,255,0.25);
    }

.status-tabs[b-ro22x42g62] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.status-tab[b-ro22x42g62] {
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 500;
    color: #fff;
    transition: all 0.3s;
}

    .status-tab.all[b-ro22x42g62] {
        background: #6c757d;
    }

    .status-tab.operating[b-ro22x42g62] {
        background: #28a745;
    }

    .status-tab.idle[b-ro22x42g62] {
        background: #ffc107;
        color: #333;
    }

    .status-tab.stopped[b-ro22x42g62] {
        background: #dc3545;
    }

    .status-tab.active[b-ro22x42g62] {
        box-shadow: 0 0 10px rgba(255,255,255,0.6);
    }

    .status-tab:hover[b-ro22x42g62] {
        opacity: 0.85;
    }

.graphical-overview[b-ro22x42g62] {
    background: rgba(255,255,255,0.95);
    border-radius: 24px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.kpi-card[b-ro22x42g62] {
    background: white;
    border-radius: 20px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

    .kpi-card:hover[b-ro22x42g62] {
        transform: translateY(-4px);
    }

.kpi-icon[b-ro22x42g62] {
    font-size: 2rem;
    color: #4361ee;
    margin-bottom: 0.5rem;
}

.kpi-value[b-ro22x42g62] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a1a1a;
}

.kpi-label[b-ro22x42g62] {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
}

.trend[b-ro22x42g62] {
    font-size: 0.75rem;
    margin-top: 8px;
    font-weight: 600;
}

    .trend.positive[b-ro22x42g62] {
        color: #28a745;
    }

    .trend.negative[b-ro22x42g62] {
        color: #dc3545;
    }

.kpi-sub[b-ro22x42g62] {
    font-size: 0.7rem;
    color: #adb5bd;
    margin-top: 4px;
}

.chart-card[b-ro22x42g62] {
    background: white;
    border-radius: 20px;
    padding: 1.2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: 320px;
}

.chart-title[b-ro22x42g62] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #333;
}

.carousel-indicators button[b-ro22x42g62] {
    background-color: #4361ee !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 4px;
    margin: 0 6px !important;
}

.carousel-control-prev-icon[b-ro22x42g62],
.carousel-control-next-icon[b-ro22x42g62] {
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 20px;
    background-size: 50%;
}

.carousel-item[b-ro22x42g62] {
    transition: transform 0.6s ease-in-out;
}

.dashboard-header[b-ro22x42g62] {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(67, 97, 238, 0.25);
    animation: fadeInUp-b-ro22x42g62 0.6s ease-out;
}

    .dashboard-header h4[b-ro22x42g62] {
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .dashboard-header p[b-ro22x42g62] {
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 0;
    }

    .dashboard-header .breadcrumb[b-ro22x42g62] {
        background: transparent;
        padding: 0;
        margin-top: 0.5rem;
    }

        .dashboard-header .breadcrumb a[b-ro22x42g62] {
            color: rgba(255,255,255,0.85);
            text-decoration: none;
            font-weight: 500;
        }

        .dashboard-header .breadcrumb .active[b-ro22x42g62] {
            color: #fff;
            font-weight: 600;
        }

.header-actions[b-ro22x42g62] {
    display: flex;
    gap: 0.75rem;
}

    .header-actions .btn[b-ro22x42g62] {
        border-radius: 50px;
        font-weight: 600;
        padding: 0.5rem 1.25rem;
        transition: all 0.3s ease;
        color: #000;
        background-color: #fff;
        border: 2px solid transparent;
    }

        .header-actions .btn:hover[b-ro22x42g62] {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            color: #fff !important;
        }

.btn-primary-premium[b-ro22x42g62] {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    border: none;
    color: #000;
}

    .btn-primary-premium:hover[b-ro22x42g62] {
        background: linear-gradient(135deg, #7209b7 0%, #4361ee 100%);
        color: #fff !important;
    }

.live-indicator[b-ro22x42g62] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #43e97b;
    margin-right: 8px;
    animation: pulse-b-ro22x42g62 2s infinite;
}

@keyframes pulse-b-ro22x42g62 {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

@keyframes fadeInUp-b-ro22x42g62 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-ro22x42g62 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.cube-metrics-grid[b-ro22x42g62] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin: 0;
    padding-top: 20px; /* Add this */
    perspective: 1200px;
}

.individual-cube-container[b-ro22x42g62] {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: visible;
}

.individual-cube[b-ro22x42g62] {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(45deg);
}

.cube-face-individual[b-ro22x42g62] {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

    .cube-face-individual.front[b-ro22x42g62] {
        transform: translateZ(50px);
    }

    .cube-face-individual.back[b-ro22x42g62] {
        transform: translateZ(-50px) rotateY(180deg);
    }

    .cube-face-individual.right[b-ro22x42g62] {
        transform: translateX(50px) rotateY(90deg);
    }

    .cube-face-individual.left[b-ro22x42g62] {
        transform: translateX(-50px) rotateY(-90deg);
    }

    .cube-face-individual.top[b-ro22x42g62] {
        transform: translateY(-50px) rotateX(90deg);
    }

    .cube-face-individual.bottom[b-ro22x42g62] {
        transform: translateY(50px) rotateX(-90deg);
    }

    .cube-face-individual.front.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.12), rgba(40, 167, 69, 0.18));
        border-color: rgba(40, 167, 69, 0.3);
    }

    .cube-face-individual.right.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.15));
        border-color: rgba(40, 167, 69, 0.25);
    }

    .cube-face-individual.top.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.08), rgba(40, 167, 69, 0.12));
        border-color: rgba(40, 167, 69, 0.2);
    }

    .cube-face-individual.left.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.06), rgba(40, 167, 69, 0.1));
        border-color: rgba(40, 167, 69, 0.15);
    }

    .cube-face-individual.back.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.04), rgba(40, 167, 69, 0.08));
        border-color: rgba(40, 167, 69, 0.1);
    }

    .cube-face-individual.bottom.excellent[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.02), rgba(40, 167, 69, 0.06));
        border-color: rgba(40, 167, 69, 0.08);
    }

    .cube-face-individual.front.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.18));
        border-color: rgba(255, 193, 7, 0.3);
    }

    .cube-face-individual.right.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.15));
        border-color: rgba(255, 193, 7, 0.25);
    }

    .cube-face-individual.top.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.12));
        border-color: rgba(255, 193, 7, 0.2);
    }

    .cube-face-individual.left.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.06), rgba(255, 193, 7, 0.1));
        border-color: rgba(255, 193, 7, 0.15);
    }

    .cube-face-individual.back.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.04), rgba(255, 193, 7, 0.08));
        border-color: rgba(255, 193, 7, 0.1);
    }

    .cube-face-individual.bottom.warning[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.02), rgba(255, 193, 7, 0.06));
        border-color: rgba(255, 193, 7, 0.08);
    }

    .cube-face-individual.front.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.12), rgba(220, 53, 69, 0.18));
        border-color: rgba(220, 53, 69, 0.3);
    }

    .cube-face-individual.right.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.15));
        border-color: rgba(220, 53, 69, 0.25);
    }

    .cube-face-individual.top.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.08), rgba(220, 53, 69, 0.12));
        border-color: rgba(220, 53, 69, 0.2);
    }

    .cube-face-individual.left.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.06), rgba(220, 53, 69, 0.1));
        border-color: rgba(220, 53, 69, 0.15);
    }

    .cube-face-individual.back.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.04), rgba(220, 53, 69, 0.08));
        border-color: rgba(220, 53, 69, 0.1);
    }

    .cube-face-individual.bottom.danger[b-ro22x42g62] {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.02), rgba(220, 53, 69, 0.06));
        border-color: rgba(220, 53, 69, 0.08);
    }

@keyframes pulse-glow-excellent-b-ro22x42g62 {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(40, 167, 69, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(40, 167, 69, 0.8));
    }
}

@keyframes pulse-glow-warning-b-ro22x42g62 {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.8));
    }
}

@keyframes pulse-glow-danger-b-ro22x42g62 {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(220, 53, 69, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(220, 53, 69, 0.8));
    }
}

.cube-metric-value[b-ro22x42g62] {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(26, 26, 26, 0.95);
    line-height: 1;
    margin-bottom: 2px;
}

.cube-metric-label[b-ro22x42g62] {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(26, 26, 26, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
    line-height: 1.1;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(3px);
}

.compact-metrics-panel[b-ro22x42g62] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.metrics-grid[b-ro22x42g62] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    height: 100%;
    width: 100%;
    margin-top: 12px;
}

.cube-face-individual[b-ro22x42g62] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.individual-cube-container:hover .cube-metric-value[b-ro22x42g62] {
    transform: scale(1.05);
}

.metric-card[b-ro22x42g62] {
    background: rgba(248, 249, 250, 0.8);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    height: 76px;
}

.cube-performance-dot[b-ro22x42g62] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.metric-card:hover[b-ro22x42g62] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.metric-card[b-ro22x42g62]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--metric-color), transparent);
    border-radius: 8px 8px 0 0;
}

.metric-header[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.metric-title[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

    .metric-title i[b-ro22x42g62] {
        font-size: 0.7rem;
        width: 12px;
    }

.metric-percentage[b-ro22x42g62] {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    min-width: 40px;
    text-align: center;
}

    .metric-percentage.dimming[b-ro22x42g62] {
        animation: pulseGlow-b-ro22x42g62 2s ease-in-out;
    }

.metric-values[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-value[b-ro22x42g62] {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
    transition: all 0.4s ease;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

    .metric-value.dimming[b-ro22x42g62] {
        animation: dimEffect-b-ro22x42g62 2s ease-in-out;
    }

.metric-target[b-ro22x42g62] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 2px;
}

    .metric-target i[b-ro22x42g62] {
        font-size: 0.5rem;
        opacity: 0.7;
    }

.metric-progress[b-ro22x42g62] {
    margin-top: 4px;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.metric-progress-bar[b-ro22x42g62] {
    height: 100%;
    border-radius: 6px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

    .metric-progress-bar[b-ro22x42g62]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmer-b-ro22x42g62 2s infinite;
    }

.text-excellent[b-ro22x42g62] {
    color: black !important;
}

.text-warning[b-ro22x42g62] {
    color: black !important;
}

.text-danger[b-ro22x42g62] {
    color: black !important;
}

.bg-excellent[b-ro22x42g62] {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: black;
    border: 1px solid rgba(40, 167, 69, 0.3);
    --metric-color: #28a745;
}

.bg-warning[b-ro22x42g62] {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: black;
    border: 1px solid rgba(255, 193, 7, 0.3);
    --metric-color: #ffc107;
}

.bg-danger[b-ro22x42g62] {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: black;
    border: 1px solid rgba(220, 53, 69, 0.3);
    --metric-color: #dc3545;
}

.progress-excellent[b-ro22x42g62] {
    background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-warning[b-ro22x42g62] {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-danger[b-ro22x42g62] {
    background: linear-gradient(90deg, #dc3545, #e83e8c);
}

@keyframes dimEffect-b-ro22x42g62 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseGlow-b-ro22x42g62 {
    0% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 2px 15px currentColor;
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: scale(1);
    }
}

@keyframes shimmer-b-ro22x42g62 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {
    .cube-metrics-grid[b-ro22x42g62] {
        grid-template-columns: 1fr;
        gap: 20px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .compact-metrics-panel[b-ro22x42g62] {
        height: auto;
        min-height: 120px;
    }

    .metrics-grid[b-ro22x42g62] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.cube-performance-dot.excellent[b-ro22x42g62] {
    background: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.cube-performance-dot.warning[b-ro22x42g62] {
    background: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

.cube-performance-dot.danger[b-ro22x42g62] {
    background: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

.cube-metric-icon[b-ro22x42g62] {
    font-size: 1.3rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.cube-metric-value[b-ro22x42g62] {
    font-size: 1.4rem;
    font-weight: 800;
    color: rgba(26, 26, 26, 0.95);
    line-height: 1;
    margin-bottom: 4px;
}

.cube-metric-label[b-ro22x42g62] {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(26, 26, 26, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.6);
    padding: 4px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.production-table-container[b-ro22x42g62] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.production-table-header[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.production-table-title[b-ro22x42g62] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .production-table-title i[b-ro22x42g62] {
        color: #0d6efd;
    }

.production-table[b-ro22x42g62] {
    width: 100%;
    border-collapse: collapse;
    flex-grow: 1;
}

    .production-table th[b-ro22x42g62] {
        text-align: left;
        padding: 12px 15px;
        font-size: 0.85rem;
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
        background: rgba(248, 249, 250, 0.7);
    }

    .production-table td[b-ro22x42g62] {
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
    }

    .production-table tr[b-ro22x42g62] {
        transition: all 0.3s ease;
    }

        .production-table tr:hover[b-ro22x42g62] {
            background: rgba(13, 110, 253, 0.05);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

            .production-table tr:hover td[b-ro22x42g62] {
                background: transparent;
            }

.metric-label[b-ro22x42g62] {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .metric-label i[b-ro22x42g62] {
        width: 16px;
        text-align: center;
        font-size: 0.8rem;
    }

.metric-value[b-ro22x42g62] {
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.5s ease;
    position: relative;
}

    .metric-value.dimming[b-ro22x42g62] {
        animation: dimEffect-b-ro22x42g62 2s ease-in-out;
    }

.metric-percentage[b-ro22x42g62] {
    font-weight: 700;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.5s ease;
    min-width: 80px;
    display: inline-block;
}

    .metric-percentage.dimming[b-ro22x42g62] {
        animation: pulseGlow-b-ro22x42g62 2s ease-in-out;
    }

.progress-cell[b-ro22x42g62] {
    min-width: 120px;
}

.threshold-progress[b-ro22x42g62] {
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
}

.threshold-progress-bar[b-ro22x42g62] {
    height: 100%;
    border-radius: 10px;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

    .threshold-progress-bar[b-ro22x42g62]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        animation: shimmer-b-ro22x42g62 2s infinite;
    }

.text-excellent[b-ro22x42g62] {
    color: #28a745 !important;
}

.text-warning[b-ro22x42g62] {
    color: #ffc107 !important;
}

.text-danger[b-ro22x42g62] {
    color: #dc3545 !important;
}

.bg-excellent[b-ro22x42g62] {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: black;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.bg-warning[b-ro22x42g62] {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: black;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.bg-danger[b-ro22x42g62] {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: black;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.progress-excellent[b-ro22x42g62] {
    background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-warning[b-ro22x42g62] {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-danger[b-ro22x42g62] {
    background: linear-gradient(90deg, #dc3545, #e83e8c);
}

.machine-card-modern[b-ro22x42g62] {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 500px;
    padding: 15px;
}

    .machine-card-modern:hover[b-ro22x42g62] {
        transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
        box-shadow: 0 0 55px rgba(168, 85, 247, 0.35), inset 0 0 30px rgba(255, 255, 255, 0.2);
    }

@keyframes float-b-ro22x42g62 {
    0%, 100% {
        transform: rotateX(6deg) rotateY(-4deg) translateY(0);
    }

    50% {
        transform: rotateX(10deg) rotateY(6deg) translateY(-15px);
    }
}

@keyframes holo-b-ro22x42g62 {
    to {
        background-position: 400% 0;
    }
}

.machine-info[b-ro22x42g62] {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.machine-card-modern[b-ro22x42g62]::before {
    content: "";
    position: absolute;
    inset: -2px;
    filter: blur(20px);
    opacity: 0.35;
    z-index: -1;
    animation: holo-b-ro22x42g62 4s linear infinite;
    background-size: 400% 100%;
}

.machine-info[b-ro22x42g62]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0d6efd, #20c997, #fd7e14);
    border-radius: 18px 18px 0 0;
}

.machine-header[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.machine-title-section[b-ro22x42g62] {
    flex: 1;
    min-height: 90px; /* adjust 80-100px as needed */
}

.status-section[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.machine-name[b-ro22x42g62] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.status-badge[b-ro22x42g62] {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
    color: #fff;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #22c55e);
    background-size: 300% 100%;
    animation: holo-b-ro22x42g62 3s linear infinite;
}

.machine-description[b-ro22x42g62] {
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    margin: 0.4rem 0 0;
}

.status-section[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 180px;
    text-align: right;
}

.status-badge[b-ro22x42g62] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

    .status-badge.bg-success[b-ro22x42g62] {
        background: linear-gradient(135deg, #28a745, #20c997) !important;
        color: white;
    }

    .status-badge.bg-warning[b-ro22x42g62] {
        background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
        color: white;
    }

    .status-badge.bg-danger[b-ro22x42g62] {
        background: linear-gradient(135deg, #dc3545, #c82333) !important;
        color: white;
    }

    .status-badge.bg-secondary[b-ro22x42g62] {
        background: linear-gradient(135deg, #6c757d, #495057) !important;
        color: white;
    }

.last-update[b-ro22x42g62] {
    font-size: 0.8rem;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

    .last-update i[b-ro22x42g62] {
        font-size: 0.7rem;
        opacity: 0.8;
    }

.progress-section[b-ro22x42g62] {
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-top: 1rem;
}

.section-title[b-ro22x42g62] {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-grid[b-ro22x42g62] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.progress-item[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-header[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.progress-label[b-ro22x42g62] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-percentage[b-ro22x42g62] {
    font-size: 0.9rem;
    font-weight: 700;
}

.progress-bar-container[b-ro22x42g62] {
    height: 6px;
    background: #f1f3f4;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar[b-ro22x42g62] {
    height: 100%;
    border-radius: 6px;
    transition: all 0.6s ease;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #22c55e);
    background-size: 300% 100%;
    animation: holo-b-ro22x42g62 3s linear infinite;
}

    .progress-bar[b-ro22x42g62]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        animation: shimmer-b-ro22x42g62 2s infinite;
    }

.performance-indicators[b-ro22x42g62] {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.indicator[b-ro22x42g62] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

    .indicator i[b-ro22x42g62] {
        font-size: 0.7rem;
    }



.machine-gauges-compact .gauge-container-compact[b-ro22x42g62] {
    justify-self: end; /* Push speedometer to the right */
}

.gauge-container-compact[b-ro22x42g62] {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gauge-title-compact[b-ro22x42g62] {
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    z-index: 100;
}

/* ---------- FIX: precise needle pivot ---------- */
.speed-gauge-wrapper[b-ro22x42g62] {
    width: 180px;
    height: 180px;
    position: relative;
    margin: 0 auto;
    top: 0; /* Change from 12px to 0 */
    overflow: visible;
}

    .speed-gauge-wrapper.excellent[b-ro22x42g62] {
        filter: drop-shadow(0 0 15px rgba(40, 167, 69, 0.6));
    }

    .speed-gauge-wrapper.good[b-ro22x42g62] {
        filter: drop-shadow(0 0 15px rgba(23, 162, 184, 0.6));
    }

    .speed-gauge-wrapper.warning[b-ro22x42g62] {
        filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.6));
    }

    .speed-gauge-wrapper.danger[b-ro22x42g62] {
        filter: drop-shadow(0 0 15px rgba(220, 53, 69, 0.6));
    }

@keyframes pulse-glow-excellent-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(40, 167, 69, 0.8), 0 0 35px rgba(40, 167, 69, 0.6);
    }
}

@keyframes pulse-glow-good-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(23, 162, 184, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(23, 162, 184, 0.8), 0 0 35px rgba(23, 162, 184, 0.6);
    }
}

@keyframes pulse-glow-warning-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 193, 7, 0.8), 0 0 35px rgba(255, 193, 7, 0.6);
    }
}

@keyframes pulse-glow-danger-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(220, 53, 69, 0.8), 0 0 35px rgba(220, 53, 69, 0.6);
    }
}

@keyframes needle-pulse-excellent-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 12px rgba(40, 167, 69, 0.7);
    }

    50% {
        box-shadow: 0 0 20px rgba(40, 167, 69, 1), 0 0 30px rgba(40, 167, 69, 0.8);
    }
}

@keyframes needle-pulse-good-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(23, 162, 184, 0.6);
    }

    50% {
        box-shadow: 0 0 18px rgba(23, 162, 184, 0.9), 0 0 25px rgba(23, 162, 184, 0.7);
    }
}

@keyframes needle-pulse-warning-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
    }

    50% {
        box-shadow: 0 0 18px rgba(255, 193, 7, 0.9), 0 0 25px rgba(255, 193, 7, 0.7);
    }
}

@keyframes needle-pulse-danger-b-ro22x42g62 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.7);
    }

    50% {
        box-shadow: 0 0 20px rgba(220, 53, 69, 1), 0 0 30px rgba(220, 53, 69, 0.8);
    }
}

.performance-level[b-ro22x42g62] {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    transition: all 0.5s ease;
}

    .performance-level.excellent[b-ro22x42g62] {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
    }

    .performance-level.good[b-ro22x42g62] {
        background: rgba(23, 162, 184, 0.2);
        color: #17a2b8;
    }

    .performance-level.warning[b-ro22x42g62] {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
    }

    .performance-level.danger[b-ro22x42g62] {
        background: rgba(220, 53, 69, 0.2);
        color: #dc3545;
    }

.speed-gauge-wrapper:hover[b-ro22x42g62] {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.gauge.production-excellent .slice[b-ro22x42g62],
.gauge.production-excellent .subslice[b-ro22x42g62] {
    background: #28a745 !important;
    transition: background 0.8s ease;
}

.gauge.production-good .slice[b-ro22x42g62],
.gauge.production-good .subslice[b-ro22x42g62] {
    background: #17a2b8 !important;
    transition: background 0.8s ease;
}

.gauge.production-warning .slice[b-ro22x42g62],
.gauge.production-warning .subslice[b-ro22x42g62] {
    background: #ffc107 !important;
    transition: background 0.8s ease;
}

.gauge.production-danger .slice[b-ro22x42g62],
.gauge.production-danger .subslice[b-ro22x42g62] {
    background: #dc3545 !important;
    transition: background 0.8s ease;
}

.gauge.efficiency-excellent .slice[b-ro22x42g62],
.gauge.efficiency-excellent .subslice[b-ro22x42g62] {
    background: #28a745 !important;
    transition: background 0.8s ease;
}

.gauge.efficiency-good .slice[b-ro22x42g62],
.gauge.efficiency-good .subslice[b-ro22x42g62] {
    background: #17a2b8 !important;
    transition: background 0.8s ease;
}

.gauge.efficiency-warning .slice[b-ro22x42g62],
.gauge.efficiency-warning .subslice[b-ro22x42g62] {
    background: #ffc107 !important;
    transition: background 0.8s ease;
}

.gauge.efficiency-danger .slice[b-ro22x42g62],
.gauge.efficiency-danger .subslice[b-ro22x42g62] {
    background: #dc3545 !important;
    transition: background 0.8s ease;
}

.sui[b-ro22x42g62], .suiCircle[b-ro22x42g62] {
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.8s ease, background 0.5s ease;
}

.speed-gauge[b-ro22x42g62] {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    bottom: 0;
    margin: auto;
    background-position: center;
    background-image: url(https://img.freepik.com/premium-vector/white-abstract-background-design_665257-26.jpg?w=2000);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    z-index: 15;
    overflow: hidden;
    transform: scale(1.2);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.gauge[b-ro22x42g62] {
    width: 176px;
    height: 176px;
    border: 1px #fff solid;
    position: absolute;
    margin: 1px 2px 2px 1px;
    border-radius: 50%;
    border-bottom-color: transparent;
    transition: all 1s ease-in-out;
}

.gauge-circle-1[b-ro22x42g62] {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 50%;
    z-index: 20;
    transition: all .5s ease;
}

/* Green */
.gauge.production-excellent .gauge-circle-1[b-ro22x42g62] {
    background: #28a745;
    box-shadow: 0 0 15px #28a745;
}

.gauge.production-excellent .glass-value-speed[b-ro22x42g62] {
    color: #fff;
}

.gauge.production-excellent .sui[b-ro22x42g62],
.gauge.production-excellent .suiCircle[b-ro22x42g62] {
    background: #28a745;
}

/* Blue */
.gauge.production-good .gauge-circle-1[b-ro22x42g62] {
    background: #17a2b8;
    box-shadow: 0 0 15px #17a2b8;
}

.gauge.production-good .glass-value-speed[b-ro22x42g62] {
    color: #fff;
}

.gauge.production-good .sui[b-ro22x42g62],
.gauge.production-good .suiCircle[b-ro22x42g62] {
    background: #17a2b8;
}

/* Yellow */
.gauge.production-warning .gauge-circle-1[b-ro22x42g62] {
    background: #ffc107;
    box-shadow: 0 0 15px #ffc107;
}

.gauge.production-warning .glass-value-speed[b-ro22x42g62] {
    color: #000;
}

.gauge.production-warning .sui[b-ro22x42g62],
.gauge.production-warning .suiCircle[b-ro22x42g62] {
    background: #ffc107;
}

/* Red */
.gauge.production-danger .gauge-circle-1[b-ro22x42g62] {
    background: #dc3545;
    box-shadow: 0 0 15px #dc3545;
}

.gauge.production-danger .glass-value-speed[b-ro22x42g62] {
    color: #fff;
}

.gauge.production-danger .sui[b-ro22x42g62],
.gauge.production-danger .suiCircle[b-ro22x42g62] {
    background: #dc3545;
}

.suiCircle[b-ro22x42g62] {
    width: 16px;
    height: 16px;
    background: #a01d26;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 30;
}

.gauge .slice[b-ro22x42g62] {
    width: 7px;
    height: 2px;
    background: #fff;
    position: absolute;
}

    .gauge .slice:nth-child(1)[b-ro22x42g62] {
        left: 12px;
        top: 74%;
        margin-top: -2px;
        -webkit-transform: rotate(150deg);
        background: #35BE1A;
    }

    .gauge .slice:nth-child(2)[b-ro22x42g62] {
        left: 2px;
        top: 50%;
        margin-top: 0px;
        -webkit-transform: rotate(179deg);
        background: #35BE1A;
    }

    .gauge .slice:nth-child(3)[b-ro22x42g62] {
        left: 12px;
        top: 26%;
        margin-top: 0px;
        -webkit-transform: rotate(212deg);
        background: #17e7e7;
    }

    .gauge .slice:nth-child(4)[b-ro22x42g62] {
        left: 42px;
        top: 8%;
        margin-top: 0px;
        -webkit-transform: rotate(241deg);
        background: #17e7e7;
    }

    .gauge .slice:nth-child(5)[b-ro22x42g62] {
        left: 82px;
        top: 2%;
        margin-top: 0px;
        -webkit-transform: rotate(90deg);
        background: #17e7e7;
    }

    .gauge .slice:nth-child(6)[b-ro22x42g62] {
        left: 122px;
        top: 8%;
        margin-top: 0px;
        -webkit-transform: rotate(121deg);
        background: #e1c554;
    }

    .gauge .slice:nth-child(7)[b-ro22x42g62] {
        left: 152px;
        top: 26%;
        margin-top: 0px;
        -webkit-transform: rotate(150deg);
        background: #e1c554;
    }

    .gauge .slice:nth-child(8)[b-ro22x42g62] {
        left: 162px;
        top: 50%;
        margin-top: 0px;
        -webkit-transform: rotate(179deg);
        background: #AD191B;
    }

    .gauge .slice:nth-child(9)[b-ro22x42g62] {
        left: 152px;
        top: 74%;
        margin-top: -2px;
        -webkit-transform: rotate(210deg);
        background: #AD191B;
    }

.gauge .subslice[b-ro22x42g62] {
    position: absolute;
    width: 4px;
    height: 2px;
    background: #fff;
}

    .gauge .subslice:nth-child(10)[b-ro22x42g62] {
        left: 4px;
        top: 62%;
        margin-top: -1px;
        -webkit-transform: rotate(168deg);
        background: #35BE1A;
    }

    .gauge .subslice:nth-child(11)[b-ro22x42g62] {
        left: 5px;
        top: 37%;
        margin-top: 1px;
        -webkit-transform: rotate(20deg);
        background: #35BE1A;
    }

    .gauge .subslice:nth-child(12)[b-ro22x42g62] {
        left: 28px;
        top: 15%;
        margin-top: 1px;
        -webkit-transform: rotate(223deg);
        background: #28b5df;
    }

    .gauge .subslice:nth-child(13)[b-ro22x42g62] {
        left: 64px;
        top: 3%;
        margin-top: -1px;
        -webkit-transform: rotate(71deg);
        background: #28b5df;
    }

    .gauge .subslice:nth-child(14)[b-ro22x42g62] {
        left: 108px;
        top: 3%;
        margin-top: -1px;
        -webkit-transform: rotate(103deg);
        background: #28b5df;
    }

    .gauge .subslice:nth-child(15)[b-ro22x42g62] {
        left: 144px;
        top: 15%;
        margin-top: 1px;
        -webkit-transform: rotate(134deg);
        background: #e1c554;
    }

    .gauge .subslice:nth-child(16)[b-ro22x42g62] {
        left: 166px;
        top: 37%;
        margin-top: 1px;
        -webkit-transform: rotate(168deg);
        background: #AD191B;
    }

    .gauge .subslice:nth-child(17)[b-ro22x42g62] {
        left: 166px;
        top: 62%;
        margin-top: 1px;
        -webkit-transform: rotate(198deg);
        background: #AD191B;
    }

.gauge .rpm[b-ro22x42g62] {
    font-family: 'Shrikhand', cursive;
    font-size: 0.9em;
    line-height: 12px;
    text-align: center;
    vertical-align: middle;
    display: block;
    width: 10px;
    height: 10px;
    background: transparent;
    color: #070606;
    position: absolute;
}

    .gauge .rpm:nth-child(18)[b-ro22x42g62] {
        left: 22px;
        top: 69%;
        margin-top: -1px;
    }

    .gauge .rpm:nth-child(19)[b-ro22x42g62] {
        left: 14px;
        top: 49%;
        margin-top: -3px;
    }

    .gauge .rpm:nth-child(20)[b-ro22x42g62] {
        left: 22px;
        top: 28%;
        margin-top: -1px;
    }

    .gauge .rpm:nth-child(21)[b-ro22x42g62] {
        left: 48px;
        top: 13%;
        margin-top: -2px;
    }

    .gauge .rpm:nth-child(22)[b-ro22x42g62] {
        left: 82px;
        top: 7%;
        margin-top: -3px;
    }

    .gauge .rpm:nth-child(23)[b-ro22x42g62] {
        left: 116px;
        top: 12%;
        margin-top: 0px;
    }

    .gauge .rpm:nth-child(24)[b-ro22x42g62] {
        left: 142px;
        top: 28%;
        margin-top: -1px;
    }

    .gauge .rpm:nth-child(25)[b-ro22x42g62] {
        left: 150px;
        top: 49%;
        margin-top: -1px;
        color: #AD191B;
    }

    .gauge .rpm:nth-child(26)[b-ro22x42g62] {
        left: 142px;
        top: 69%;
        margin-top: -1px;
        color: #AD191B;
    }

/* New fixed needle style */
.sui[b-ro22x42g62] {
    position: absolute;
    left: 50%;
    top: 24px;
    width: 3px;
    height: 66px;
    background: linear-gradient(to top, #7a0d14, #d62828);
    border: none;
    border-radius: 3px;
    transform: translateX(-50%) rotate(-120deg);
    transform-origin: bottom center;
    z-index: 10;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 4px rgba(0,0,0,.25);
}

.glass-center-speed[b-ro22x42g62] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 21;
}

.glass-value-speed[b-ro22x42g62] {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    top: 0;
    color: #222;
}

.gauge[b-ro22x42g62] {
    position: relative;
}

/* .glass-value-speed {
            font-size: 2rem; /* increase from 1.2rem */
font-weight: 900; /* more bold */
color: #111;
text-shadow: 0 0 8px rgba(255,255,255,.9);
line-height: 1;
transition: all .5s ease-in-out;[b-ro22x42g62]
}

*/

.glass-unit-speed[b-ro22x42g62] {
    display: none;
}



.glass-unit-speed[b-ro22x42g62] {
    font-size: 0.6rem;
    color: #333;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: -2px;
}

@media (max-width: 768px) {




    .cube-metrics-grid[b-ro22x42g62] {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 25px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    .machine-metrics-grid[b-ro22x42g62] {
        grid-template-columns: 1fr;
    }

    .status-section[b-ro22x42g62] {
        min-width: auto;
    }
}

.performance-indicator[b-ro22x42g62] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    background: #f8f9fa;
}

.text-excellent[b-ro22x42g62] {
    color: #28a745 !important;
}

.text-good[b-ro22x42g62] {
    color: #17a2b8 !important;
}

.text-warning[b-ro22x42g62] {
    color: #ffc107 !important;
}

.text-danger[b-ro22x42g62] {
    color: #dc3545 !important;
}

@keyframes threshold-alert-b-ro22x42g62 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.threshold-alert[b-ro22x42g62] {
    animation: threshold-alert-b-ro22x42g62 1s ease-in-out 3;
}

.bg-excellent[b-ro22x42g62] {
    background-color: #28a745 !important;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.4);
}

.bg-good[b-ro22x42g62] {
    background-color: #17a2b8 !important;
    box-shadow: 0 0 12px rgba(23, 162, 184, 0.4);
}

.bg-warning[b-ro22x42g62] {
    background-color: #ffc107 !important;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.4);
}

.bg-danger[b-ro22x42g62] {
    background-color: #dc3545 !important;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.4);
}

.tab-container[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3b72c0;
    padding: 12px 35px;
    border-radius: 50px;
    color: white;
    margin: 30px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tabs[b-ro22x42g62] {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 5px;
    backdrop-filter: blur(10px);
}

.tab-btn[b-ro22x42g62] {
    background: transparent;
    border: none;
    color: white;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.5px;
}

    .tab-btn.active[b-ro22x42g62] {
        background: rgba(28, 38, 69, 0.8);
        box-shadow: 0 0 20px rgba(28, 38, 69, 0.4);
    }

    .tab-btn:hover[b-ro22x42g62] {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

.status-tabs[b-ro22x42g62] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 25px 0;
}

.status-tab[b-ro22x42g62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
    padding: 18px 28px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25);
}

    .status-tab.all[b-ro22x42g62] {
        background: linear-gradient(145deg, #444, #222);
    }

    .status-tab.operating[b-ro22x42g62] {
        background: linear-gradient(145deg, #2ecc71, #1e8e47);
    }

    .status-tab.idle[b-ro22x42g62] {
        background: linear-gradient(145deg, #3498db, #217dbb);
    }

    .status-tab.stopped[b-ro22x42g62] {
        background: linear-gradient(145deg, #e74c3c, #b33025);
    }

.machine-detail-panel[b-ro22x42g62] {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    border-left: 4px solid #0d6efd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.detail-grid[b-ro22x42g62] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.detail-item[b-ro22x42g62] {
    background: white;
    padding: 16px;
    border-radius: 10px;
    border-left: 4px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}

    .detail-item:hover[b-ro22x42g62] {
        transform: translateY(-2px);
    }

.detail-label[b-ro22x42g62] {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.detail-value[b-ro22x42g62] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

.machines-scroll-container[b-ro22x42g62] {
    max-height: 800px;
    overflow-y: auto;
    padding-right: 12px;
    padding-top: 12px;
}

    .machines-scroll-container[b-ro22x42g62]::-webkit-scrollbar {
        width: 8px;
    }

    .machines-scroll-container[b-ro22x42g62]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.3);
        border-radius: 10px;
    }

@media (max-width: 768px) {
    .machine-card-modern[b-ro22x42g62] {
        min-height: 520px;
        padding: 20px;
    }


    .machine-gauges-compact[b-ro22x42g62] {
        display: grid;
        grid-template-columns: 120px 120px 220px;
        align-items: center;
        justify-content: center;
        column-gap: 20px;
        width: 100%;
    }

    .machine-header[b-ro22x42g62] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .status-section[b-ro22x42g62] {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .machine-metrics-grid[b-ro22x42g62] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .machine-card-modern[b-ro22x42g62] {
        min-height: 500px;
    }



    .machine-metrics-grid[b-ro22x42g62] {
        grid-template-columns: 1fr;
    }

    .status-section[b-ro22x42g62] {
        min-width: auto;
    }
}

.machine-header[b-ro22x42g62] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}



.header-weight-card[b-ro22x42g62] {
    width: 270px;
}

.status-section[b-ro22x42g62] {
    text-align: right;
    min-width: 150px;
}

.peak-text[b-ro22x42g62] {
    font-size: 12px !important;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.machine-metrics-row[b-ro22x42g62] {
    display: grid;
    grid-template-columns: 110px 220px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 15px 0;
}

.cube-column[b-ro22x42g62],
.weight-column[b-ro22x42g62],
.gauge-column[b-ro22x42g62] {
    display: flex;
    justify-content: center;
    align-items: center;
}



.weight-box-wrapper[b-ro22x42g62] {
    width: 150px;
    display: flex;
    justify-content: center;
}

.weight-card[b-ro22x42g62] {
    width: 150px;
    height: 85px;
}

.weight-placeholder[b-ro22x42g62] {
    width: 150px;
    height: 85px;
}

.gauge-column[b-ro22x42g62] {
    width: 220px;
}

.gauge-container-compact[b-ro22x42g62] {
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.today-weight-inline[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
}

    .today-weight-inline i[b-ro22x42g62] {
        color: #0d6efd;
    }

    .today-weight-inline .label[b-ro22x42g62] {
        color: #6c757d;
        font-weight: 600;
    }

    .today-weight-inline .value[b-ro22x42g62] {
        color: #0d6efd;
        font-size: 18px;
        font-weight: 700;
    }

.machine-header[b-ro22x42g62] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.machine-weight[b-ro22x42g62] {
    min-width: 150px;
    text-align: right;
}

.weight-label[b-ro22x42g62] {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.weight-value[b-ro22x42g62] {
    font-size: 28px; /* much bigger */
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.peak-weight[b-ro22x42g62] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #fb0f26;
    line-height: 1.3;
    margin-top: 3px;
}

    .peak-weight i[b-ro22x42g62] {
        font-size: 0.92rem;
        color: #ff7a00;
    }


/* Auxiliary Layout */
.cube-metrics-grid.auxiliary-layout[b-ro22x42g62] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    min-height: 260px;
}

    .cube-metrics-grid.auxiliary-layout .cube-column[b-ro22x42g62] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        flex: 1;
    }

    .cube-metrics-grid.auxiliary-layout .individual-cube-container[b-ro22x42g62] {
        transform: scale(1.6);
        transform-origin: center;
        margin: 0 auto !important;
    }

    .cube-metrics-grid.auxiliary-layout .individual-cube[b-ro22x42g62] {
        margin: auto;
    }
/* =========================================================
   PREMIUM PERFORMANCE DASHBOARD LOADER
   ========================================================= */

.premium-loader-overlay[b-ro22x42g62] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Keep dashboard visible behind loader */
    background: rgba(245, 248, 255, 0.58);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    animation: premiumOverlayIn-b-ro22x42g62 0.35s ease-out;
}


/* =========================================================
   MAIN LOADER
   ========================================================= */

.premium-loader[b-ro22x42g62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 300px;
    text-align: center;
    animation: premiumLoaderIn-b-ro22x42g62 0.45s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   3D ORB
   ========================================================= */

.premium-loader-orb[b-ro22x42g62] {
    position: relative;
    width: 92px;
    height: 92px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}


/* Soft ambient glow */

.orb-glow[b-ro22x42g62] {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(37, 99, 235, 0.24) 0%, rgba(59, 130, 246, 0.10) 45%, transparent 72% );
    filter: blur(8px);
    animation: orbGlow-b-ro22x42g62 2.2s ease-in-out infinite;
}


/* =========================================================
   RINGS
   ========================================================= */

.orb-ring[b-ro22x42g62] {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
}


/* Outer ring */

.orb-ring-outer[b-ro22x42g62] {
    width: 88px;
    height: 88px;
    border-width: 3px;
    border-top-color: #2563eb;
    border-right-color: rgba(37, 99, 235, 0.25);
    filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.55)) drop-shadow(0 0 12px rgba(37, 99, 235, 0.18));
    animation: orbRotate-b-ro22x42g62 1.35s linear infinite;
}


/* Middle ring */

.orb-ring-middle[b-ro22x42g62] {
    width: 70px;
    height: 70px;
    border-width: 2px;
    border-bottom-color: #60a5fa;
    border-left-color: rgba(96, 165, 250, 0.2);
    opacity: 0.9;
    animation: orbRotateReverse-b-ro22x42g62 1.9s linear infinite;
}


/* Inner ring */

.orb-ring-inner[b-ro22x42g62] {
    width: 54px;
    height: 54px;
    border-width: 1px;
    border-top-color: rgba(37, 99, 235, 0.75);
    border-right-color: rgba(96, 165, 250, 0.45);
    opacity: 0.8;
    animation: orbRotate-b-ro22x42g62 2.4s linear infinite;
}


/* =========================================================
   ROTATING LIGHT
   ========================================================= */

.orb-light[b-ro22x42g62] {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 1px;
    left: 50%;
    margin-left: -4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 14px #60a5fa, 0 0 24px rgba(37, 99, 235, 0.8);
    animation: orbLightRotate-b-ro22x42g62 1.35s linear infinite;
}


/* =========================================================
   CENTER CORE
   ========================================================= */

.orb-core[b-ro22x42g62] {
    position: relative;
    z-index: 5;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 30%, #ffffff 0%, #eff6ff 35%, #dbeafe 100% );
    border: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.95), inset 0 -3px 7px rgba(37,99,235,0.10), 0 4px 12px rgba(37,99,235,0.16);
    animation: corePulse-b-ro22x42g62 2s ease-in-out infinite;
}


    .orb-core i[b-ro22x42g62] {
        font-size: 16px;
        color: #2563eb;
        filter: drop-shadow(0 0 4px rgba(37,99,235,0.3));
        animation: iconPulse-b-ro22x42g62 2s ease-in-out infinite;
    }


/* =========================================================
   TEXT
   ========================================================= */

.premium-loader-title[b-ro22x42g62] {
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.25px;
}


.premium-loader-message[b-ro22x42g62] {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15px;
}


/* =========================================================
   DOTS
   ========================================================= */

.premium-loader-dots[b-ro22x42g62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 13px;
}


    .premium-loader-dots span[b-ro22x42g62] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #2563eb;
        animation: loaderDot-b-ro22x42g62 1.3s ease-in-out infinite;
    }


        .premium-loader-dots span:nth-child(2)[b-ro22x42g62] {
            animation-delay: 0.15s;
        }


        .premium-loader-dots span:nth-child(3)[b-ro22x42g62] {
            animation-delay: 0.3s;
        }


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes orbRotate-b-ro22x42g62 {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbRotateReverse-b-ro22x42g62 {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes orbLightRotate-b-ro22x42g62 {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbGlow-b-ro22x42g62 {

    0%, 100% {
        transform: scale(0.92);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.95;
    }
}


@keyframes corePulse-b-ro22x42g62 {

    0%, 100% {
        transform: scale(0.96);
    }

    50% {
        transform: scale(1.04);
    }
}


@keyframes iconPulse-b-ro22x42g62 {

    0%, 100% {
        opacity: 0.75;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}


@keyframes loaderDot-b-ro22x42g62 {

    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.75);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes premiumOverlayIn-b-ro22x42g62 {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes premiumLoaderIn-b-ro22x42g62 {

    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .premium-loader-orb[b-ro22x42g62] {
        width: 82px;
        height: 82px;
    }

    .orb-ring-outer[b-ro22x42g62] {
        width: 78px;
        height: 78px;
    }

    .orb-ring-middle[b-ro22x42g62] {
        width: 62px;
        height: 62px;
    }

    .orb-ring-inner[b-ro22x42g62] {
        width: 48px;
        height: 48px;
    }

    .premium-loader-title[b-ro22x42g62] {
        font-size: 16px;
    }

    .premium-loader-message[b-ro22x42g62] {
        font-size: 11px;
    }
}
/* =========================================================
   AUXILIARY MACHINE - CENTER CUBE
   ========================================================= */

.cube-metrics-grid.auxiliary-layout[b-ro22x42g62] {
    width: 100% !important;
    min-height: 260px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}


    /* Center the cube column */

    .cube-metrics-grid.auxiliary-layout .cube-column[b-ro22x42g62] {
        width: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* Cube itself */

    .cube-metrics-grid.auxiliary-layout .individual-cube-container[b-ro22x42g62] {
        width: 100px;
        height: 100px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        transform: scale(1.35);
        transform-origin: center center;
    }


    /* Keep cube centered */

    .cube-metrics-grid.auxiliary-layout .individual-cube[b-ro22x42g62] {
        margin: 0 !important;
    }


    /* Hide gauge completely for auxiliary */

    .cube-metrics-grid.auxiliary-layout .gauge-column[b-ro22x42g62] {
        display: none !important;
    }
/* /Components/Pages/ErrorHandlingPage/NotFoundPage.razor.rz.scp.css */
.error-page[b-2y0v7ktqno] {
    color: #1f1f1f;
}
    .error-page .error-wrapper[b-2y0v7ktqno] {
        height: auto;
        width: 100%;
    }
        .error-page .error-wrapper .error-box[b-2y0v7ktqno] {
            max-width: 480px;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            padding: 1.875rem 0;
        }
            .error-page .error-wrapper .error-box h1[b-2y0v7ktqno] {
                color: #282460;
                font-size: 10em;
            }
            .error-page .error-wrapper .error-box h3[b-2y0v7ktqno] {
                font-size: 26px;
            }
            .error-page .error-wrapper .error-box .btn[b-2y0v7ktqno] {
                border-radius: 50px;
                font-size: 18px;
                font-weight: 600;
                min-width: 200px;
                padding: 10px 20px;
            }
/* /Components/Pages/HRMPage/EmployeePage/EmployeeRelievingLetter.razor.rz.scp.css */

/* ================= HEADER ================= */

.company-section[b-0lyks789d9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.company-name[b-0lyks789d9] {
    font-size: 14px;
    font-weight: bold;
    color: green;
    margin-bottom: 3px;
}

.company-address[b-0lyks789d9],
.company-mobile[b-0lyks789d9],
.company-gst[b-0lyks789d9] {
    font-size: 12px;
    margin: 0;
}

/* 🔥 FIX: keep URL in one line */
.company-url[b-0lyks789d9] {
    font-size: 12px;
    white-space: nowrap;
}

    .company-url a[b-0lyks789d9] {
        text-decoration: none;
        color: #000;
        color: cornflowerblue;
    }

.logo-section img[b-0lyks789d9] {
    max-height: 140px;
    max-width: 150px;
    object-fit: contain;
}

.offer-text[b-0lyks789d9] {
    display: block;
    width: fit-content;
    margin: 0 auto; /* centers horizontally */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
/*    color: green;*/
/*    border-bottom: 2px solid green;*/
/*    padding-bottom: 4px;*/
}
.content-dark[b-0lyks789d9] {
    font-size: 12px;
    font-weight: bold;
}
.letter-content[b-0lyks789d9] {
    margin-top: 20px;
    padding: 0 30px;
    font-size: 12px;
}

    .letter-content p[b-0lyks789d9] {
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 1.6;
        text-align: left;
    }
table[b-0lyks789d9] {
    width: 100%;
    border-collapse: collapse;
}
thead th[b-0lyks789d9] {
    border: 1px solid #000;
    padding: 6px;
    font-size: 14px;
    font-weight: bold;
}

tbody td[b-0lyks789d9] {
    border: 1px solid #000;
    padding: 6px;
    text-align: left;
    font-size: 15px;
}
.formal-call[b-0lyks789d9] {
    font-size:12px;
    margin-top:50
}
.user-details[b-0lyks789d9]{
    font-size:16px;
}

.declare-footer[b-0lyks789d9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.footer-row[b-0lyks789d9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left align all items */
    gap: 5px;
    font-size: 12px;
}

.md-sign img[b-0lyks789d9] {
    width: 90px;
    height: auto;
    display: block;
}
.email-link[b-0lyks789d9] {
    color: #0d6efd; /* Bootstrap blue */
    text-decoration: none;
    font-weight: 500;
    color:cornflowerblue;
}

    .email-link:hover[b-0lyks789d9] {
        text-decoration: underline;
    }
.verification span[b-0lyks789d9]{
    font-size:12px;
}
.declare-content p[b-0lyks789d9]{
    font-size:12px;
}
/* /Components/Pages/HRMPage/PayslipPage/EmployeeOfferLetter.razor.rz.scp.css */

/* ================= PRINT STYLES ================= */
@media print {

    @page {
        size: A4;
        margin: 12mm; /* slightly tighter for better fit */
    }

    html[b-jhx9ew14d9], body[b-jhx9ew14d9] {
        width: 100%;
        height: 100%;
        font-size: 8px;
        font-family: Arial, sans-serif;
    }

    /* Remove UI elements */
    button[b-jhx9ew14d9],
    .btn[b-jhx9ew14d9],
    .page-header[b-jhx9ew14d9],
    .breadcrumb[b-jhx9ew14d9] {
        display: none !important;
    }

    /* Remove card styling */
    .card[b-jhx9ew14d9] {
        border: none !important;
        box-shadow: none !important;
    }

    /* Main printable area */
    .print-area[b-jhx9ew14d9] {
        width: 100%;
        margin: 0;
        padding: 10px;
        font-size: 7px;
    }

    /* ================= HEADER ================= */

    .company-section[b-jhx9ew14d9] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .company-name[b-jhx9ew14d9] {
        font-size: 18px;
        font-weight: bold;
        color: green;
        margin-bottom: 3px;
    }

    .company-address[b-jhx9ew14d9],
    .company-mobile[b-jhx9ew14d9],
    .company-gst[b-jhx9ew14d9] {
        font-size: 10px;
        margin: 0;
    }

    /* 🔥 FIX: keep URL in one line */
    .company-url[b-jhx9ew14d9] {
        font-size: 8px;
        white-space: nowrap;
    }

        .company-url a[b-jhx9ew14d9] {
            text-decoration: none;
            color: #000;
        }

    .logo-section img[b-jhx9ew14d9] {
        max-height: 140px;
        max-width: 150px;
        object-fit: contain;
    }
    .md-sign[b-jhx9ew14d9] {
        max-height: 80px;
        max-width: 90px;
        object-fit: contain;
    }
    /* ================= TITLE ================= */

    /*.offer-text {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: green;*/
        /*        text-decoration: underline;
        text-underline-offset: 10px;*/
        /*display: inline-block;
        border-bottom: 2px solid green;*/ /* underline */
        /*padding-bottom: 4px;
    }*/
    .offer-text[b-jhx9ew14d9] {
        display: block;
        width: fit-content;
        margin: 0 auto; /* centers horizontally */
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: green;
        border-bottom: 2px solid green;
        padding-bottom: 4px;
    }
    /* ================= EMPLOYEE DETAILS ================= */

    .user-details[b-jhx9ew14d9] {
        width: 100%;
        text-align: right; /* 🔥 RIGHT ALIGN */
        margin-bottom: 10px;
/*        font-size: 4px;*/
        font-weight: bold;
    }
/*
        .user-details dl {
            margin: 0;
        }5t[.l;--]*/

        .user-details dl[b-jhx9ew14d9] {
            margin: 0;
        }

        .user-details dd[b-jhx9ew14d9] {
            margin: 0;
        }

    /* ================= LETTER CONTENT ================= */

    .letter-content[b-jhx9ew14d9] {
        margin-top: 10px;
    }

    .print-mode .letter-content p[b-jhx9ew14d9] {
        font-size: 12px !important;
    }

    .content-dark[b-jhx9ew14d9] {
        font-weight: bold;
    }

    /* ================= LIST ================= */

    .offer-list[b-jhx9ew14d9] {
        padding-left: 20px;
        margin: 10px 0;
    }

        .offer-list li[b-jhx9ew14d9] {
            font-size: 13px;
            margin-bottom: 6px;
            line-height: 1.5;
            padding: 10px 10px;
            break-inside: avoid;
            page-break-inside: avoid;
            overflow: visible;
        }

    /* ================= CLOSING ================= */

    .closing-section[b-jhx9ew14d9] {
        margin-top: 20px;
    }

        .closing-section p[b-jhx9ew14d9] {
            font-size: 10px;
            margin: 3px 0;
        }

    /* ================= PAGE BREAK ================= */

    .page-break[b-jhx9ew14d9] {
        page-break-before: always;
    }

    /* ================= ANNEXURE ================= */

    .annexure[b-jhx9ew14d9] {
        font-size: 11px;
        margin-top: 10px;
    }

    .annexure-title[b-jhx9ew14d9] {
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 8px;
    }

    .details-row[b-jhx9ew14d9] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .left-details[b-jhx9ew14d9],
    .right-details[b-jhx9ew14d9] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .label[b-jhx9ew14d9] {
        font-weight: bold;
        font-size: 10px;
    }

    .value[b-jhx9ew14d9] {
        font-size: 12px;
    }

    /* ================= TABLE ================= */

    table[b-jhx9ew14d9] {
        width: 100%;
        border-collapse: collapse;
        margin-top: 3px;
    }

    th[b-jhx9ew14d9], td[b-jhx9ew14d9] {
        border: 1px solid #000;
        padding: 4px;
        font-size: 2px;
    }

    th[b-jhx9ew14d9] {
        font-weight: bold;
        padding: 6px;
    }

    /* Prevent breaking */
    table[b-jhx9ew14d9], tr[b-jhx9ew14d9], td[b-jhx9ew14d9] {
        page-break-inside: avoid;

    }

    /* ================= DECLARATION ================= */

    .declaration-details[b-jhx9ew14d9] {
        font-size: 9px;
    }

    .declaration-title[b-jhx9ew14d9] {
        text-align: center;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .declar-content[b-jhx9ew14d9] {
        text-align: justify;
        font-size: 9px;
    }

    .footer-row[b-jhx9ew14d9] {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        font-size: 9px;
    }

    /* ================= FOOTER ================= */

    .page-footer[b-jhx9ew14d9] {
        position: fixed;
        bottom: 10mm;
        left: 12mm;
        width: calc(100% - 24mm);
        height: 20px;
    }

    .footer-shape[b-jhx9ew14d9] {
        height: 100%;
        width: 75%;
        background: green;
        clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
    }
    .print-mode[b-jhx9ew14d9] {
        font-size: 10px !important;
    }
        .print-mode .print-area[b-jhx9ew14d9] {
            width: 794px; /* A4 width in px */
        }
}

/* ================= NORMAL STYLES ================= */

.company-section[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.details-section[b-jhx9ew14d9] {
    flex: 1;
}

.company-name[b-jhx9ew14d9] {
    font-weight: 900;
    margin-bottom: 4px;
    font-size: 18px;
    color: green;
}

.company-address[b-jhx9ew14d9],
.company-mobile[b-jhx9ew14d9] {
    margin: 0;
    font-size: 16px;
    width: 400px;
}

.logo-section[b-jhx9ew14d9] {
    text-align: right;
}

    .logo-section img[b-jhx9ew14d9] {
        max-height: 140px;
        max-width: 150px;
        object-fit: contain;
    }

.company-url a[b-jhx9ew14d9] {
    text-decoration: none;
    font-weight: 500;
    color: #0d6efd;
    margin: 0 4px;
}

    .company-url a:hover[b-jhx9ew14d9] {
        text-decoration: underline;
    }
.md-sign[b-jhx9ew14d9] {
    max-height: 80px;
    max-width: 90px;
    object-fit: contain;
}

/*.offer-text {
    color: green;
    font-size: 28px;
    text-decoration: underline;
    font-weight: 600;
    text-underline-offset: 4px;
    display: block;
    text-align: center;
}*/

.offer-text[b-jhx9ew14d9] {
    display: block;
    width: fit-content;
    margin: 0 auto; /* centers horizontally */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: green;
    border-bottom: 2px solid green;
    padding-bottom: 4px;
}

.user-details[b-jhx9ew14d9] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: left;
    font-size: 14px;
    font-weight: 900;
}

.content-dark[b-jhx9ew14d9] {
    font-size: 12px;
    font-weight: bold;
}

.letter-content[b-jhx9ew14d9] {
    margin-top: 20px;
    padding: 0 30px;
}

    .letter-content p[b-jhx9ew14d9] {
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 1.6;
        text-align: left;
    }

.offer-list[b-jhx9ew14d9] {
    padding-left: 45px;
    margin: 20px 0;
    list-style-type: decimal;
}

    .offer-list li[b-jhx9ew14d9] {
        margin-bottom: 12px;
        padding-left: 6px;
        line-height: 1.7;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
    }

        .offer-list li[b-jhx9ew14d9]::marker {
            color: green;
            font-weight: bold;
        }

.closing-section[b-jhx9ew14d9] {
    margin-top: 40px;
    padding: 0 30px;
    text-align: left;
}

    .closing-section p[b-jhx9ew14d9] {
        margin: 4px 0;
        font-size: 18px;
    }

.annexure[b-jhx9ew14d9] {
    font-family: Arial, sans-serif;
    padding: 20px 30px;
}

.annexure-title[b-jhx9ew14d9] {
    text-align: left;
    text-decoration: underline;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 20px;
}

.details-row[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.left-details[b-jhx9ew14d9],
.right-details[b-jhx9ew14d9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: underline;
}

.row-item[b-jhx9ew14d9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label[b-jhx9ew14d9] {
    font-size: 14px;
    font-weight: 500;
}

.value[b-jhx9ew14d9] {
    font-size: 14px;
    font-weight: 400;
}

.compensation-head[b-jhx9ew14d9] {
    margin-top: 15px;
    margin-bottom: 10px;
    text-decoration: underline;
    font-weight: 500;
}

table[b-jhx9ew14d9] {
    width: 100%;
    border-collapse: collapse;
}

thead th[b-jhx9ew14d9] {
    border: 1px solid #000;
    padding: 6px;
    font-size: 14px;
    font-weight: bold;
}

tbody td[b-jhx9ew14d9] {
    border: 1px solid #000;
    padding: 6px;
    text-align: left;
    font-size: 10px;
}

.declaration-details[b-jhx9ew14d9] {
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.declaration-title[b-jhx9ew14d9] {
    text-align: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.declar-content[b-jhx9ew14d9] {
    flex: 1;
    font-size: 18px;
    text-align: justify;
    overflow-wrap: break-word;
}

.declare-footer[b-jhx9ew14d9] {
    margin-top: 150px;
}

.footer-row[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.company-section[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.details-section[b-jhx9ew14d9] {
    flex: 1;
}

.company-name[b-jhx9ew14d9] {
    font-weight: 900;
    margin-bottom: 4px;
    font-size: 18px;
    color: green;
}

.company-address[b-jhx9ew14d9],
.company-mobile[b-jhx9ew14d9] {
    margin: 0;
    font-size: 14px;
    width: 400px;
}

.logo-section[b-jhx9ew14d9] {
    text-align: right;
}

    .logo-section img[b-jhx9ew14d9] {
        max-height: 140px;
        max-width: 150px;
        object-fit: contain;
    }
.company-url a[b-jhx9ew14d9] {
    text-decoration: none;
    font-weight: 500;
    color: #0d6efd;
    margin: 0 4px;
}

    .company-url a:hover[b-jhx9ew14d9] {
        text-decoration: underline;
    }
/*.offer-text {
    color: green;
    text-align: center;
    font-size: 20px;*/
    /*    text-decoration: underline;*/
    /*font-weight: 600;*/
    /*    text-underline-offset: 10px;*/
    /*display: inline-block;
    border-bottom: 2px solid green;*/ /* underline */
    /*padding-bottom: 4px;
}*/
.offer-text[b-jhx9ew14d9] {
    display: block;
    width: fit-content;
    margin: 0 auto; /* centers horizontally */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: green;
    border-bottom: 2px solid green;
    padding-bottom: 4px;
}
.user-details[b-jhx9ew14d9] {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    text-align: left; 
    font-size:14px;
    font-weight:900;
}
.content-dark[b-jhx9ew14d9]{
    font-size:12px;
    font-weight:bold;
}

.letter-content[b-jhx9ew14d9] {
    margin-top: 20px;
    padding: 0 30px;
}

.letter-content p[b-jhx9ew14d9] {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

.offer-list[b-jhx9ew14d9] {
    padding-left: 45px;
    margin: 20px 0;
    list-style-type: decimal;
}

    .offer-list li[b-jhx9ew14d9] {
        margin-bottom: 12px;
        padding-left: 6px;
        line-height: 1.7;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
    }

        .offer-list li[b-jhx9ew14d9]::marker {
            color: green;
            font-weight: bold;
        }
.closing-section[b-jhx9ew14d9] {
    margin-top: 40px;
    padding: 0 30px; 
    text-align: left;
}

    .closing-section p[b-jhx9ew14d9] {
        margin: 4px 0;
        font-size: 18px;
    }

.annexure[b-jhx9ew14d9] {
    font-family: Arial, sans-serif;
    padding:20px 30px;
}

.annexure-title[b-jhx9ew14d9] {
    text-align: left;
    text-decoration: underline;
    font-weight: 700;
    margin-bottom: 10px;
    font-size:20px;
}
.details-row[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.left-details[b-jhx9ew14d9],
.right-details[b-jhx9ew14d9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: underline;
}

.row-item[b-jhx9ew14d9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label[b-jhx9ew14d9] {
    font-size: 14px;
    font-weight: 500;
   ;
}

.value[b-jhx9ew14d9] {
    font-size: 14px;
    font-weight: 200;
}


.compensation-head[b-jhx9ew14d9] {
    margin-top: 15px;
    margin-bottom: 10px;
    text-decoration: underline;
    font-weight: 500;
}

table[b-jhx9ew14d9] {
    width: 100%;
    border-collapse: collapse;
}

thead th[b-jhx9ew14d9] {
    border: 1px solid #000;
    padding: 6px;
/*    text-align: center;*/
    font-size:14px;
    font-weight: bold;
}

tbody td[b-jhx9ew14d9] {
    border: 1px solid #000;
    padding: 6px;
    text-align: left;
    font-size:10px;
    margin-left:2px;
}
.declaration-details[b-jhx9ew14d9] {
    padding: 12px;
    /*min-height: 280px;*/ /* controls overall box height */
    display: flex;
    flex-direction: column;
}

.declaration-title[b-jhx9ew14d9] {
    text-align:center;
    font-weight: bold;
    margin-bottom: 8px;
}

.declar-content[b-jhx9ew14d9] {
    flex: 1; /* keeps content inside */
    font-size: 14px;
    text-align: justify;
    overflow-wrap: break-word; /* prevents overflow */
}

.declare-footer[b-jhx9ew14d9] {
    margin-top: 150px; 
}

.footer-row[b-jhx9ew14d9] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.footer-shape[b-jhx9ew14d9] {
    height: 100%;
    width: 75%;
    background: green;
    clip-path: polygon( 0 0, 92% 0, 100% 100%, 0 100% );
}
/* /Components/Pages/HRMPage/PayslipPage/EmployeeSalaryAdd.razor.rz.scp.css */
/* Remove focus outline for Radzen radio buttons only on this page */
.radzen-radiobutton:focus[b-dhmhf1d4bl] {
    outline: none !important;
    box-shadow: none !important;
}

.radzen-radiobutton-list:focus-within[b-dhmhf1d4bl] {
    outline: none !important;
    box-shadow: none !important;
}

.ribbon-badge[b-dhmhf1d4bl] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.badge-DT[b-dhmhf1d4bl] {
    background: linear-gradient(135deg, #FF3131, #155724);
    color: #fff;
}

.badge-AT[b-dhmhf1d4bl] {
    background: linear-gradient(135deg, #28a745, #155724);
    color: #fff;
}

.rz-numeric-button[b-dhmhf1d4bl] {
    display: none !important;
}
/* /Components/Pages/HRMPage/PayslipPage/EmployeeTamilOfferLetter.razor.rz.scp.css */
/* ================= PRINT STYLES ================= */
@media print {

    @page {
        size: A4;
        margin: 12mm; /* slightly tighter for better fit */
    }

    html[b-rco2fxg1o1], body[b-rco2fxg1o1] {
        width: 100%;
        height: 100%;
        font-size: 8px;
        font-family: Arial, sans-serif;
    }

    /* Remove UI elements */
    button[b-rco2fxg1o1],
    .btn[b-rco2fxg1o1],
    .page-header[b-rco2fxg1o1],
    .breadcrumb[b-rco2fxg1o1] {
        display: none !important;
    }

    /* Remove card styling */
    .card[b-rco2fxg1o1] {
        border: none !important;
        box-shadow: none !important;
    }

    /* Main printable area */
    .print-area[b-rco2fxg1o1] {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 8px;
    }
    /* ================= HEADER ================= */

    .company-section[b-rco2fxg1o1] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .company-name[b-rco2fxg1o1] {
        font-size: 18px;
        font-weight: bold;
        color: green;
        margin-bottom: 3px;
    }

    .company-address[b-rco2fxg1o1],
    .company-mobile[b-rco2fxg1o1],
    .company-gst[b-rco2fxg1o1] {
        font-size: 10px;
        margin: 0;
    }

    /* 🔥 FIX: keep URL in one line */
    .company-url[b-rco2fxg1o1] {
        font-size: 8px;
        white-space: nowrap;
    }

        .company-url a[b-rco2fxg1o1] {
            text-decoration: none;
            color: #000;
        }

    .logo-section img[b-rco2fxg1o1] {
        max-height: 140px;
        max-width: 150px;
        object-fit: contain;
    }
    .letter-content[b-rco2fxg1o1] {
        font-size: 12px;
    }
    .main-header[b-rco2fxg1o1] {
        padding-left: 20px;
        font-weight: 600;
    }

    .sub-header[b-rco2fxg1o1] {
        padding-left: 30px;
        display: inline-block;
        font-weight: 600;
    }
    .sub-content[b-rco2fxg1o1] {
        display: block;
        margin-left: 40px; /* 👈 controls spacing from sub-header */
    }
    .underline-space[b-rco2fxg1o1] {
        font-weight: bold;
        text-underline-offset: 6px; /* increase space */
    }
    .detail-content[b-rco2fxg1o1],
    .salary-details[b-rco2fxg1o1],
    .salary-deductions[b-rco2fxg1o1],
    .benefits[b-rco2fxg1o1] {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    hr[b-rco2fxg1o1] {
        border: none;
        border-top: 2px solid black; /* increase thickness */
    }

    .page-break[b-rco2fxg1o1] {
        page-break-before: always;
        break-before: page;
    }

  /*    .footer {
        margin-top: 50px;
    }*/
    .closing-section[b-rco2fxg1o1] {
        margin-top: 40px;
        padding: 0 30px;
        text-align: left;
    }

        .closing-section p[b-rco2fxg1o1] {
            margin: 4px 0;
            font-size: 18px;
        }
    .md-sign[b-rco2fxg1o1] {
        max-height: 80px;
        max-width: 90px;
        object-fit: contain;
    }
    .footer[b-rco2fxg1o1] {
        width: 100%;
    }

    .footer-left[b-rco2fxg1o1] {
        float: left;
        width: 45%;
    }

    .footer-right[b-rco2fxg1o1] {
        float: right;
        width: 45%;
        text-align: right;
    }
}
/* ================= PAGE BREAK ================= */

.page-break[b-rco2fxg1o1] {
    page-break-before: always;
}

/* ================= ANNEXURE ================= */

.annexure[b-rco2fxg1o1] {
    font-size: 11px;
    margin-top: 10px;
}

.annexure-title[b-rco2fxg1o1] {
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 8px;
}

.details-row[b-rco2fxg1o1] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
/*.right-details {
    margin-left: 1rem;*/ /* optional spacing between multiple right-details blocks */
/*}*/
.left-details[b-rco2fxg1o1],
.right-details[b-rco2fxg1o1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label[b-rco2fxg1o1] {
    font-weight: bold;
    font-size: 12px;
}

.value[b-rco2fxg1o1] {
    font-size: 12px;
}

/* ================= TABLE ================= */

table[b-rco2fxg1o1] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
}

th[b-rco2fxg1o1], td[b-rco2fxg1o1] {
    border: 1px solid #000;
    padding: 4px;
    font-size:11px;
}

th[b-rco2fxg1o1] {
    font-weight: bold;
}

/* Prevent breaking */
table[b-rco2fxg1o1], tr[b-rco2fxg1o1], td[b-rco2fxg1o1] {
    page-break-inside: avoid;
}

/* ================= DECLARATION ================= */

.declaration-details[b-rco2fxg1o1] {
    font-size: 9px;
}

.declaration-title[b-rco2fxg1o1] {
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.declar-content[b-rco2fxg1o1] {
    text-align: justify;
    font-size: 9px;
}

.footer-row[b-rco2fxg1o1] {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 9px;
}
/* ================= HEADER ================= */

.company-section[b-rco2fxg1o1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.company-name[b-rco2fxg1o1] {
    font-size: 18px;
    font-weight: bold;
    color: green;
    margin-bottom: 3px;
}

.company-address[b-rco2fxg1o1],
.company-mobile[b-rco2fxg1o1],
.company-gst[b-rco2fxg1o1] {
    font-size: 10px;
    margin: 0;
}

/* 🔥 FIX: keep URL in one line */
.company-url[b-rco2fxg1o1] {
    font-size: 8px;
    white-space: nowrap;
}

    .company-url a[b-rco2fxg1o1] {
        text-decoration: none;
        color: #000;
    }

.logo-section img[b-rco2fxg1o1] {
    max-height: 140px;
    max-width: 150px;
    object-fit: contain;
}

.offer-text[b-rco2fxg1o1] {
    display: block;
    width: fit-content;
    margin: 0 auto; /* centers horizontally */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: green;
    border-bottom: 2px solid green;
    padding-bottom: 4px;
}

.letter-content[b-rco2fxg1o1] {
    font-size: 13px;
    line-height: 1.6;
}

    .letter-content h4[b-rco2fxg1o1] {
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 600;
    }

    .letter-content ul[b-rco2fxg1o1],
    .letter-content ol[b-rco2fxg1o1] {
        margin-left: 18px;
        margin-bottom: 10px;
    }

    .letter-content li[b-rco2fxg1o1] {
        margin-bottom: 20px;
    }
    .letter-content ol[b-rco2fxg1o1] {
        list-style-type: decimal;
        padding-left: 40px;
    }

    /* Unordered list → • dots */
    .letter-content ul[b-rco2fxg1o1] {
        list-style-type: disc;
        padding-left: 40px;
    }

    /* Ensure numbers/dots are visible */
    .letter-content li[b-rco2fxg1o1] {
        display: list-item;
    }
.underline-space[b-rco2fxg1o1] {
    font-weight:bold;
    text-underline-offset: 4px; /* increase space */
}
.main-header[b-rco2fxg1o1] {
    padding-left: 20px;
    font-weight: 600;
}

.sub-header[b-rco2fxg1o1] {
    padding-left: 30px;
    display: inline-block;
    font-weight: 600;
}
.sub-content[b-rco2fxg1o1] {
    display: block;
    margin-left: 40px;   /* 👈 controls spacing from sub-header */
}
/* Better spacing */
.salary-details[b-rco2fxg1o1],
.salary-deductions[b-rco2fxg1o1],
.detail-content[b-rco2fxg1o1],
.benefits[b-rco2fxg1o1] {
    margin-top: 20px;
}
.closing-section[b-rco2fxg1o1] {
    margin-top: 40px;
    padding: 0 30px;
    text-align: left;
}

    .closing-section p[b-rco2fxg1o1] {
        margin: 4px 0;
        font-size: 18px;
    }

.md-sign[b-rco2fxg1o1] {
    max-height: 80px;
    max-width: 90px;
    object-fit: contain;
}
/*hr {
    border: none;
    border-top: 0px solid black;*/ /* increase thickness */
/*}*/
.page-break[b-rco2fxg1o1] {
    page-break-before: always;
}

/* Footer alignment */
.footer[b-rco2fxg1o1] {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.footer-left[b-rco2fxg1o1],
.footer-right[b-rco2fxg1o1] {
    width: 45%;
}
/* /Components/Pages/HRMPage/PayslipPage/PaySlipApprovalPage.razor.rz.scp.css */
@media print {

    body *[b-3di2glb49s] {
        visibility: hidden;
    }

    #printSection[b-3di2glb49s], #printSection *[b-3di2glb49s] {
        visibility: visible;
    }

    #printSection[b-3di2glb49s] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .btn[b-3di2glb49s],
    .no-print[b-3di2glb49s] {
        display: none !important;
    }
}

/*.payslip {
    width: 100% !important;
    margin: auto !important;
    padding: 20px !important;
    font-family: Arial, sans-serif;
}*/
.payslip[b-3di2glb49s] {
    width: 100%;
/*    max-width: 800px;*/
    margin: 0 auto;
    padding: 20px 40px; /* ← right + left padding */
    box-sizing: border-box;
}
.payslip-header[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.company-section[b-3di2glb49s] {
    display: flex;
    gap: 3px;
}

.company-logo[b-3di2glb49s] {
    width: 110px;
    height: auto;
}

.company-details[b-3di2glb49s] {
    display: flex;
    flex-direction: column;
    font-size:70px;
    color:black;
}

.company-name[b-3di2glb49s] {
    font-size: 20px;
    font-weight: bold;
}

.company-address[b-3di2glb49s] {
    font-size: 15px;
    margin-top: 3px;
    color: #444;
}

.payslip-title[b-3di2glb49s] {
    text-align: right;
}

    .payslip-title .title[b-3di2glb49s] {
        font-size: 15px;
        font-weight: 200;
    }

    .payslip-title .month[b-3di2glb49s] {
        font-size: 18px;
        margin-top: 2px;
        font-weight: bold;
    }

hr[b-3di2glb49s] {
    margin: 20px 0;
}

.employee-summary-container[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
}

.employee-summary[b-3di2glb49s] {
    width: 60%;
}

.summary-title[b-3di2glb49s] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.summary-row[b-3di2glb49s] {
    display: flex;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 8px;
}

    .summary-row span:first-child[b-3di2glb49s] {
        width: 130px;
        font-weight: 600;
        font-size:16px;
    }

.salary-card[b-3di2glb49s] {
    width: 315px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Green vertical line */
.salary-green-line[b-3di2glb49s] {
    position: absolute;
    left: 0;
    /* top: 0; */
    height: 70%; /* full height of the top section */
    width: 4px; /* thickness of the line */
    background-color: #2ecc71; /* green */
    border-radius: 2px;
}

/* Card content */
.salary-card-content[b-3di2glb49s] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Top section */
.salary-card-top[b-3di2glb49s] {
    /* background: #eafaf1;
            padding: 16px 18px; */
    position: relative;
    padding-left: 12px;
    text-align: right;
    background: #eafaf1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.salary-amount[b-3di2glb49s] {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: start;
}

.salary-label[b-3di2glb49s] {
    font-size: 15px;
    color: #666;
    text-align: start;
}

/* Bottom section */
.salary-card-bottom[b-3di2glb49s] {
    color: #000;
    padding: 17px 18px;
}

.day-row[b-3di2glb49s] {
    display: flex;
    /* justify-content: space-between; */
    font-size: 14px;
    margin-bottom: 8px;
    gap: 20px;
}

    .day-row span:first-child[b-3di2glb49s] {
        color: #ccc;
    }

.salary-separator[b-3di2glb49s] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: -1px 26px; /* space above and below */
}

.column-separator[b-3di2glb49s] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: 6px 0; /* space above and below */
}

.employee-salary-summary-container[b-3di2glb49s] {
    border-top: 6px solid lightgray;
    border-left: 6px solid lightgray;
    border-right: 6px solid lightgray;
    padding: 25px 25px 10px; /* ⬅ reduced bottom padding */
    border-radius: 8px 8px 0 0;
    background: #fff;
}
/* Designation */
.employee-designation[b-3di2glb49s] {
    margin-bottom: 35px;
    font-size: 23px;
    color: #333;
}

    .employee-designation .label[b-3di2glb49s] {
        font-weight: 600;
    }

    .employee-designation .colon[b-3di2glb49s] {
        margin: 0 6px;
    }

    .employee-designation .value[b-3di2glb49s] {
        font-weight: 500;
    }

/* Grid */
.salary-grid[b-3di2glb49s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Flex container for section title and Amount header */
.section-header[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.section-title[b-3di2glb49s] {
    font-weight: 600;
    margin: 0;
}

.amount-header[b-3di2glb49s] {
    font-weight: 600;
}

.section-divider[b-3di2glb49s] {
    border-bottom: 1px dotted #999;
    margin-bottom: 12px;
}


.amount[b-3di2glb49s] {
    font-weight: 500;
    align-items: flex-end; /* ⬅ bottom align amount text */
    font-size: 16px;
    color: black;
}

/* Footer */
.salary-footer[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* ⬅ bottom align text */
    margin: 8px -25px 0; /* ⬅ cancel container padding */
    padding: 10px 25px; /* ⬅ internal spacing */
    border-top: 2px solid #ccc;
    font-weight: 600;
    background-color: #f5f5f5; /* ⬅ full-width background */
}

.footer-item[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* ⭐ BEST for text of different sizes */
    width: 48%;
}

.employee-salary-summary-container[b-3di2glb49s] {
    position: relative;
}

    .employee-salary-summary-container[b-3di2glb49s]::before,
    .employee-salary-summary-container[b-3di2glb49s]::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 35px; /* ⬅ length of the corner line */
        height: 6px; /* ⬅ thickness */
        background: lightgray;
    }

    .employee-salary-summary-container[b-3di2glb49s]::before {
        left: 0;
        border-bottom-left-radius: 6px;
    }

    .employee-salary-summary-container[b-3di2glb49s]::after {
        right: 0;
        border-bottom-right-radius: 6px;
    }

.net-pay-card[b-3di2glb49s] {
    background: #FAF9F6;
    color: black;
    padding: 14px 20px;
    border-radius: 8px;
    margin-top: 16px;
    box-sizing: border-box;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}



/* LEFT COLUMN */
.net-pay-left[b-3di2glb49s] {
    display: flex;
    flex-direction: column; /* ⬅ stack title + text */
    gap: 4px;
}

/* Title */
.net-pay-title[b-3di2glb49s] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Description */
.net-pay-desc[b-3di2glb49s] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

/* RIGHT AMOUNT */
.net-pay-content[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* ⭐ makes right section full height */
}

.net-pay-right[b-3di2glb49s] {
    background: #eafaf1;
    color: #000;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
    text-align: right;
    border-radius: 0 6px 6px 0;
    /* Pull out of card padding */
    margin: -14px -20px -14px 0;
}

.amount-words[b-3di2glb49s] {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
}

    /* RIGHT alignment */
    .amount-words.right-align[b-3di2glb49s] {
        text-align: right;
    }

    .amount-words .label[b-3di2glb49s] {
        font-weight: 600;
    }

    .amount-words .value[b-3di2glb49s] {
        font-weight: 500;
    }

.grid-row[b-3di2glb49s] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Right-align amount column */
.amount[b-3di2glb49s],
.amount-header[b-3di2glb49s] {
    text-align: right;
    min-width: 120px; /* keeps column perfectly aligned */
}

/* Existing styles stay */
.section-title[b-3di2glb49s] {
    font-weight: 600;
    margin: 0;
}

.salary-row[b-3di2glb49s] {
    padding: 6px 0;
}
@media print {

    @page {
        size: A4;
        margin: 10mm;
    }

    html[b-3di2glb49s], body[b-3di2glb49s] {
        width: 210mm;
        height: auto;
    }

    .payslip[b-3di2glb49s] {
        width: 100%;
        page-break-inside: avoid;
    }
}

/*.payslip {
    width: 100% !important;
    margin: auto !important;
    padding: 20px !important;
    font-family: Arial, sans-serif;
}*/
.payslip[b-3di2glb49s] {
    width: 100%;
    /*    max-width: 800px;*/
    margin: 0 auto;
    padding: 20px 40px; /* ← right + left padding */
    box-sizing: border-box;
}

.payslip-header[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.company-section[b-3di2glb49s] {
    display: flex;
    gap: 3px;
}

.company-logo[b-3di2glb49s] {
    width: 110px;
    height: auto;
}

.company-details[b-3di2glb49s] {
    display: flex;
    flex-direction: column;
    font-size: 60px;
    color: black;
}

.company-name[b-3di2glb49s] {
    font-size: 15px;
    font-weight: bold;
}

.company-address[b-3di2glb49s] {
    font-size: 10px;
    margin-top: 3px;
    color: #444;
}

.payslip-title[b-3di2glb49s] {
    text-align: right;
}

    .payslip-title .title[b-3di2glb49s] {
        font-size: 13px;
        font-weight: 200;
    }

    .payslip-title .month[b-3di2glb49s] {
        font-size: 15px;
        margin-top: 2px;
        font-weight: bold;
    }

hr[b-3di2glb49s] {
    margin: 20px 0;
}

.employee-summary-container[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
}

.employee-summary[b-3di2glb49s] {
    width: 60%;
}

.summary-title[b-3di2glb49s] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.summary-row[b-3di2glb49s] {
    display: flex;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}

    .summary-row span:first-child[b-3di2glb49s] {
        width: 130px;
        font-weight: 600;
        font-size: 13px;
    }

.salary-card[b-3di2glb49s] {
    width: 315px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Green vertical line */
.salary-green-line[b-3di2glb49s] {
    position: absolute;
    left: 0;
    /* top: 0; */
    height: 70%; /* full height of the top section */
    width: 4px; /* thickness of the line */
    background-color: #2ecc71; /* green */
    border-radius: 2px;
}

/* Card content */
.salary-card-content[b-3di2glb49s] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Top section */
.salary-card-top[b-3di2glb49s] {
    /* background: #eafaf1;
            padding: 16px 18px; */
    position: relative;
    padding-left: 12px;
    text-align: right;
    background: #eafaf1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.salary-amount[b-3di2glb49s] {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: start;
}

.salary-label[b-3di2glb49s] {
    font-size: 15px;
    color: #666;
    text-align: start;
}

/* Bottom section */
.salary-card-bottom[b-3di2glb49s] {
    color: #000;
    padding: 17px 18px;
}

.day-row[b-3di2glb49s] {
    display: flex;
    /* justify-content: space-between; */
    font-size: 14px;
    margin-bottom: 8px;
    gap: 20px;
}

    .day-row span:first-child[b-3di2glb49s] {
        color: #ccc;
    }

.salary-separator[b-3di2glb49s] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: -1px 26px; /* space above and below */
}

.column-separator[b-3di2glb49s] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: 6px 0; /* space above and below */
}

.employee-salary-summary-container[b-3di2glb49s] {
    border-top: 6px solid lightgray;
    border-left: 6px solid lightgray;
    border-right: 6px solid lightgray;
    padding: 25px 25px 10px; /* ⬅ reduced bottom padding */
    border-radius: 8px 8px 0 0;
    background: #fff;
}
/* Designation */
.employee-designation[b-3di2glb49s] {
    margin-bottom: 20px;
    font-size: 23px;
    color: #333;
}

    .employee-designation .label[b-3di2glb49s] {
        font-weight: 600;
        font-size: 13px;
    }

    .employee-designation .colon[b-3di2glb49s] {
        margin: 0 6px;
    }

    .employee-designation .value[b-3di2glb49s] {
        font-weight: 500;
        font-size: 13px;
    }

/* Grid */
.salary-grid[b-3di2glb49s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Flex container for section title and Amount header */
.section-header[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.section-title[b-3di2glb49s] {
    font-weight: 600;
    margin: 0;
    font-size: 13px;
}

.amount-header[b-3di2glb49s] {
    font-weight: 600;
}

.section-divider[b-3di2glb49s] {
    border-bottom: 1px dotted #999;
    margin-bottom: 12px;
}


.amount[b-3di2glb49s] {
    font-weight: 500;
    align-items: flex-end; /* ⬅ bottom align amount text */
    font-size: 13px;
    color: black;
}

/* Footer */
.salary-footer[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* ⬅ bottom align text */
    margin: 8px -25px 0; /* ⬅ cancel container padding */
    padding: 10px 25px; /* ⬅ internal spacing */
    border-top: 2px solid #ccc;
    font-weight: 600;
    background-color: #f5f5f5; /* ⬅ full-width background */
}

.footer-item[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* ⭐ BEST for text of different sizes */
    width: 48%;
}

.employee-salary-summary-container[b-3di2glb49s] {
    position: relative;
}

    .employee-salary-summary-container[b-3di2glb49s]::before,
    .employee-salary-summary-container[b-3di2glb49s]::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 35px; /* ⬅ length of the corner line */
        height: 6px; /* ⬅ thickness */
        background: lightgray;
    }

    .employee-salary-summary-container[b-3di2glb49s]::before {
        left: 0;
        border-bottom-left-radius: 6px;
    }

    .employee-salary-summary-container[b-3di2glb49s]::after {
        right: 0;
        border-bottom-right-radius: 6px;
    }

.net-pay-card[b-3di2glb49s] {
    background: #FAF9F6;
    color: black;
    padding: 14px 20px;
    border-radius: 8px;
    margin-top: 16px;
    box-sizing: border-box;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}



/* LEFT COLUMN */
.net-pay-left[b-3di2glb49s] {
    display: flex;
    flex-direction: column; /* ⬅ stack title + text */
    gap: 4px;
}

/* Title */
.net-pay-title[b-3di2glb49s] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Description */
.net-pay-desc[b-3di2glb49s] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

/* RIGHT AMOUNT */
.net-pay-content[b-3di2glb49s] {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* ⭐ makes right section full height */
}

.net-pay-right[b-3di2glb49s] {
    background: #eafaf1;
    color: #000;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
    text-align: right;
    border-radius: 0 6px 6px 0;
    /* Pull out of card padding */
    margin: -14px -20px -14px 0;
}

.amount-words[b-3di2glb49s] {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
}

    /* RIGHT alignment */
    .amount-words.right-align[b-3di2glb49s] {
        text-align: right;
    }

    .amount-words .label[b-3di2glb49s] {
        font-weight: 600;
    }

    .amount-words .value[b-3di2glb49s] {
        font-weight: 500;
    }

.grid-row[b-3di2glb49s] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Right-align amount column */
.amount[b-3di2glb49s],
.amount-header[b-3di2glb49s] {
    text-align: right;
    min-width: 120px; /* keeps column perfectly aligned */
}

/* Existing styles stay */
.section-title[b-3di2glb49s] {
    font-weight: 600;
    margin: 0;
}

.salary-row[b-3di2glb49s] {
    padding: 6px 0;
}

    .salary-row title-common[b-3di2glb49s] {
        font-size: 13px;
    }
/* /Components/Pages/HRMPage/PayslipPage/PaySlipPage.razor.rz.scp.css */
@media print {

    @page {
        size: A4;
        margin: 8mm;
    }

    html[b-9bcfwvlhyr], body[b-9bcfwvlhyr] {
        width: 220mm;
        height: auto;
    }

    .payslip[b-9bcfwvlhyr] {
        width: 100%;
        page-break-inside: avoid;
    }
}

/*.payslip {
    width: 100% !important;
    margin: auto !important;
    padding: 20px !important;
    font-family: Arial, sans-serif;
}*/
.payslip[b-9bcfwvlhyr] {
    width: 100%;
/*    max-width: 800px;*/
    margin: 0 auto;
    padding: 20px 40px; /* ← right + left padding */
    box-sizing: border-box;
}
.payslip-header[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.company-section[b-9bcfwvlhyr] {
    display: flex;
    gap: 3px;
}

.company-logo[b-9bcfwvlhyr] {
    width: 110px;
    height: auto;
}

.company-details[b-9bcfwvlhyr] {
    display: flex;
    flex-direction: column;
    font-size:60px;
    color:black;
}

.company-name[b-9bcfwvlhyr] {
    font-size: 15px;
    font-weight: bold;
}

.company-address[b-9bcfwvlhyr] {
    font-size: 10px;
    margin-top: 3px;
    color: #444;
}

.payslip-title[b-9bcfwvlhyr] {
    text-align: right;
}

    .payslip-title .title[b-9bcfwvlhyr] {
        font-size: 13px;
        font-weight: 200;
    }

    .payslip-title .month[b-9bcfwvlhyr] {
        font-size: 15px;
        margin-top: 2px;
        font-weight: bold;
    }

hr[b-9bcfwvlhyr] {
    margin: 20px 0;
}

.employee-summary-container[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
}

.employee-summary[b-9bcfwvlhyr] {
    width: 60%;
}

.summary-title[b-9bcfwvlhyr] {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.summary-row[b-9bcfwvlhyr] {
    display: flex;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}

    .summary-row span:first-child[b-9bcfwvlhyr] {
        width: 130px;
        font-weight: 600;
        font-size:13px;
    }

.salary-card[b-9bcfwvlhyr] {
    width: 315px;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Green vertical line */
.salary-green-line[b-9bcfwvlhyr] {
    position: absolute;
    left: 0;
    /* top: 0; */
    height: 70%; /* full height of the top section */
    width: 4px; /* thickness of the line */
    background-color: #2ecc71; /* green */
    border-radius: 2px;
}

/* Card content */
.salary-card-content[b-9bcfwvlhyr] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Top section */
.salary-card-top[b-9bcfwvlhyr] {
    /* background: #eafaf1;
            padding: 16px 18px; */
    position: relative;
    padding-left: 12px;
    text-align: right;
    background: #eafaf1;
    padding-top: 20px;
    padding-bottom: 20px;
}

.salary-amount[b-9bcfwvlhyr] {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: start;
}

.salary-label[b-9bcfwvlhyr] {
    font-size: 15px;
    color: #666;
    text-align: start;
}

/* Bottom section */
.salary-card-bottom[b-9bcfwvlhyr] {
    color: #000;
    padding: 17px 18px;
}

.day-row[b-9bcfwvlhyr] {
    display: flex;
    /* justify-content: space-between; */
    font-size: 14px;
    margin-bottom: 8px;
    gap: 20px;
}

    .day-row span:first-child[b-9bcfwvlhyr] {
        color: #ccc;
    }

.salary-separator[b-9bcfwvlhyr] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: -1px 26px; /* space above and below */
}

.column-separator[b-9bcfwvlhyr] {
    border-bottom: 3px dotted #ccc; /* dotted line */
    margin: 6px 0; /* space above and below */
}

.employee-salary-summary-container[b-9bcfwvlhyr] {
    border-top: 6px solid lightgray;
    border-left: 6px solid lightgray;
    border-right: 6px solid lightgray;
    padding: 25px 25px 10px; /* ⬅ reduced bottom padding */
    border-radius: 8px 8px 0 0;
    background: #fff;
}
/* Designation */
.employee-designation[b-9bcfwvlhyr] {
    margin-bottom: 20px;
    font-size: 23px;
    color: #333;
}

    .employee-designation .label[b-9bcfwvlhyr] {
        font-weight: 600;
        font-size:13px;
    }

    .employee-designation .colon[b-9bcfwvlhyr] {
        margin: 0 6px;
    }

    .employee-designation .value[b-9bcfwvlhyr] {
        font-weight: 500;
        font-size:13px;
    }

/* Grid */
.salary-grid[b-9bcfwvlhyr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Flex container for section title and Amount header */
.section-header[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.section-title[b-9bcfwvlhyr] {
    font-weight: 600;
    margin: 0;
    font-size:13px;
}

.amount-header[b-9bcfwvlhyr] {
    font-weight: 600;
}

.section-divider[b-9bcfwvlhyr] {
    border-bottom: 1px dotted #999;
    margin-bottom: 12px;
}


.amount[b-9bcfwvlhyr] {
    font-weight: 500;
    align-items: flex-end; /* ⬅ bottom align amount text */
    font-size: 13px;
    color: black;
}

/* Footer */
.salary-footer[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* ⬅ bottom align text */
    margin: 8px -25px 0; /* ⬅ cancel container padding */
    padding: 10px 25px; /* ⬅ internal spacing */
    border-top: 2px solid #ccc;
    font-weight: 600;
    background-color: #f5f5f5; /* ⬅ full-width background */
}

.footer-item[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* ⭐ BEST for text of different sizes */
    width: 48%;
}
.footer-gross-item[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* ⭐ BEST for text of different sizes */
    width: 118%;
}
.employee-salary-summary-container[b-9bcfwvlhyr] {
    position: relative;
}

    .employee-salary-summary-container[b-9bcfwvlhyr]::before,
    .employee-salary-summary-container[b-9bcfwvlhyr]::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 35px; /* ⬅ length of the corner line */
        height: 6px; /* ⬅ thickness */
        background: lightgray;
    }

    .employee-salary-summary-container[b-9bcfwvlhyr]::before {
        left: 0;
        border-bottom-left-radius: 6px;
    }

    .employee-salary-summary-container[b-9bcfwvlhyr]::after {
        right: 0;
        border-bottom-right-radius: 6px;
    }

.net-pay-card[b-9bcfwvlhyr] {
    background: #FAF9F6;
    color: black;
    padding: 14px 20px;
    border-radius: 8px;
    margin-top: 16px;
    box-sizing: border-box;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
}



/* LEFT COLUMN */
.net-pay-left[b-9bcfwvlhyr] {
    display: flex;
    flex-direction: column; /* ⬅ stack title + text */
    gap: 4px;
}

/* Title */
.net-pay-title[b-9bcfwvlhyr] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Description */
.net-pay-desc[b-9bcfwvlhyr] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

/* RIGHT AMOUNT */
.net-pay-content[b-9bcfwvlhyr] {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* ⭐ makes right section full height */
}

.net-pay-right[b-9bcfwvlhyr] {
    background: #eafaf1;
    color: #000;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
    text-align: right;
    border-radius: 0 6px 6px 0;
    /* Pull out of card padding */
    margin: -14px -20px -14px 0;
}

.amount-words[b-9bcfwvlhyr] {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
}

    /* RIGHT alignment */
    .amount-words.right-align[b-9bcfwvlhyr] {
        text-align: right;
    }

    .amount-words .label[b-9bcfwvlhyr] {
        font-weight: 600;
    }

    .amount-words .value[b-9bcfwvlhyr] {
        font-weight: 500;
    }

.grid-row[b-9bcfwvlhyr] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Right-align amount column */
.amount[b-9bcfwvlhyr],
.amount-header[b-9bcfwvlhyr] {
    text-align: right;
    min-width: 120px; /* keeps column perfectly aligned */
}

/* Existing styles stay */
.section-title[b-9bcfwvlhyr] {
    font-weight: 600;
    margin: 0;
}

.salary-row[b-9bcfwvlhyr] {
    padding: 6px 0;
}
    .salary-row title-common[b-9bcfwvlhyr] {
        font-size: 13px;
    }
/* /Components/Pages/InventoryPage/ProductPage/BarcodeList.razor.rz.scp.css */
#barcode_text[b-pt5fd0sncs]
{
    text-align:center;
}
/* /Components/Pages/InventoryPage/SalesDeliveryChallanPage/SalesDeliveryChallanView.razor.rz.scp.css */


/* Print / PDF */
@media print {
    @page {
        size: A4;
        margin-top: 15mm;
        margin-bottom: 15mm;
        margin-left: 10mm;
        margin-right: 10mm;
    }

    body[b-sjdqqh48d6] {
        margin: 0 !important;
        padding: 0 !important;
    }

    .invoice-box[b-sjdqqh48d6] {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .top td[b-sjdqqh48d6] {
        padding-top: 2px !important;
    }

    img[b-sjdqqh48d6] {
        margin-top: 0 !important;
        padding-top: 0 !important;
        max-width: 120px !important;
    }
    .table-content[b-sjdqqh48d6] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
    }

    .tabel-list[b-sjdqqh48d6] {
        width: 100% !important;
        border-collapse: collapse;
    }

        .tabel-list thead[b-sjdqqh48d6] {
            display: table-header-group;
        }

        .tabel-list tbody[b-sjdqqh48d6] {
            display: table-row-group;
        }

        .tabel-list tr[b-sjdqqh48d6] {
            page-break-inside: avoid;
        }

        .tabel-list th[b-sjdqqh48d6],
        .tabel-list td[b-sjdqqh48d6] {
            border: 1px solid #000 !important;
            white-space: normal !important;
            font-size: 8px;
        }

    .label[b-sjdqqh48d6] {
        font-size: 10px;
        min-width: 180px;
    }

    .value[b-sjdqqh48d6] {
        font-size: 10px;
    }
    .tabel-list tr[b-sjdqqh48d6] {
        page-break-inside: avoid;
    }

    .table-content[b-sjdqqh48d6] {
        padding-bottom: 20px;
    }
}

.table-content[b-sjdqqh48d6] {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #dcdcdc;
}

.tabel-list[b-sjdqqh48d6] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    /* Table Header */
    .tabel-list th[b-sjdqqh48d6] {
        border: 1px solid #dcdcdc;
        padding: 8px;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        background-color: #f3f2f7;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* Table Data */
    .tabel-list td[b-sjdqqh48d6] {
        border: 1px solid #dcdcdc;
        padding: 8px;
        text-align: left;
        font-size: 14px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Odd Rows */
    .tabel-list tbody tr:nth-child(odd) td[b-sjdqqh48d6] {
        background-color: #ddd;
    }

    /* Even Rows */
    .tabel-list tbody tr:nth-child(even) td[b-sjdqqh48d6] {
        background-color: #fff;
    }

/* Highlight */
.highlight-red[b-sjdqqh48d6] {
    background-color: red !important;
    color:black;
    font-weight: 400;
}

/* Right Side Details */
.row-line[b-sjdqqh48d6] {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.label[b-sjdqqh48d6] {
    width: 45%;
    color: #000;
    white-space: nowrap;
}

.value[b-sjdqqh48d6] {
    width: 55%;
    color: #000;
    white-space: nowrap;
}
/* /Components/Pages/MarketingPage/ExecutiveSummary.razor.rz.scp.css */
.marketing-summary-container .notification-container[b-c1cv0ar7no] {
    position: fixed;
    top: 6rem;
    right: 1rem;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
}

.marketing-summary-container .custom-notification[b-c1cv0ar7no] {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    animation: slideIn 0.3s ease-out;
    margin-bottom: 1rem;
}

.marketing-summary-container .notification-success[b-c1cv0ar7no] {
    background: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
}

.marketing-summary-container .notification-warning[b-c1cv0ar7no] {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
}

.marketing-summary-container .notification-error[b-c1cv0ar7no] {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
    color: #721c24;
}

.marketing-summary-container .notification-content[b-c1cv0ar7no] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-grow: 1;
}

    .marketing-summary-container .notification-content i[b-c1cv0ar7no] {
        font-size: 1.5rem;
        margin-top: 0.2rem;
    }

.marketing-summary-container .custom-notification .btn-close[b-c1cv0ar7no] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    opacity: 0.7;
    padding: 0.5rem;
    align-self: flex-start;
}

@@keyframes slideIn {
    from[b-c1cv0ar7no] {
        transform: translateX(100%);
        opacity: 0;
    }

    to[b-c1cv0ar7no] {
        transform: translateX(0);
        opacity: 1;
    }
}

.marketing-summary-container .rounded-pill[b-c1cv0ar7no] {
    border-radius: 50rem !important;
    font-size: 1rem;
}

.marketing-summary-container .text-muted[b-c1cv0ar7no] {
    --bs-text-opacity: 1;
    color: #050607 !important;
    font-size: 0.9rem;
}

/* Enhanced Executive Tracking Styles */
.marketing-summary-container .executive-tracking-container[b-c1cv0ar7no] {
    background: #f8f9fa;
    min-height: 100vh;
}

.marketing-summary-container .glassmorphism-card[b-c1cv0ar7no] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Header Styles */
.marketing-summary-container .page-header[b-c1cv0ar7no] {
    margin-bottom: 1.5rem;
}

.marketing-summary-container .page-header-title h4[b-c1cv0ar7no] {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.marketing-summary-container .breadcrumb[b-c1cv0ar7no] {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

    .marketing-summary-container .breadcrumb a[b-c1cv0ar7no] {
        color: #6c757d;
        text-decoration: none;
    }

.marketing-summary-container .header-actions[b-c1cv0ar7no] {
    display: flex;
    gap: 0.5rem;
}

/* Enhanced Input Styles */
.marketing-summary-container .futuristic-input[b-c1cv0ar7no] {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .marketing-summary-container .futuristic-input .input-group-text[b-c1cv0ar7no] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 0.875rem 1rem;
    }

    .marketing-summary-container .futuristic-input .form-control[b-c1cv0ar7no] {
        border: 1px solid #e2e8f0;
        border-left: none;
        padding: 0.875rem 1rem;
        background: #ffffff;
        transition: all 0.3s ease;
    }

        .marketing-summary-container .futuristic-input .form-control:focus[b-c1cv0ar7no] {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

.marketing-summary-container .futuristic-datepicker[b-c1cv0ar7no] {
    border-radius: 10px !important;
    overflow: hidden;
}

/* Gradient Buttons */
.marketing-summary-container .gradient-btn[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .marketing-summary-container .gradient-btn:hover[b-c1cv0ar7no] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
    }

/* Quick Stats */
.marketing-summary-container .quick-stats[b-c1cv0ar7no] {
    border-top: 1px solid #e9ecef;
}

.marketing-summary-container .stat-item[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .marketing-summary-container .stat-item:hover[b-c1cv0ar7no] {
        background: #e9ecef;
        transform: translateY(-2px);
    }

.marketing-summary-container .stat-icon[b-c1cv0ar7no] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #ffffff00 100%);
    color: white;
    font-size: 1.2rem;
}

.marketing-summary-container .stat-info[b-c1cv0ar7no] {
    flex: 1;
}

    .marketing-summary-container .stat-info span[b-c1cv0ar7no] {
        display: block;
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .marketing-summary-container .stat-info strong[b-c1cv0ar7no] {
        font-size: 1.25rem;
        color: #2c3e50;
        font-weight: 700;
    }

/* Statistics Grid */
.marketing-summary-container .stats-grid[b-c1cv0ar7no] {
    margin: 1.5rem 0;
}

.marketing-summary-container .stat-card[b-c1cv0ar7no] {
    border-radius: 12px;
    padding: 1.5rem;
    color: white;
    height: 100%;
    transition: all 0.3s ease;
}

    .marketing-summary-container .stat-card:hover[b-c1cv0ar7no] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

.marketing-summary-container .primary-gradient[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.marketing-summary-container .success-gradient[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.marketing-summary-container .warning-gradient[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.marketing-summary-container .info-gradient[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.marketing-summary-container .stat-content[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
}

.marketing-summary-container .stat-icon[b-c1cv0ar7no] {
    font-size: 2.5rem;
    margin-right: 1rem;
    opacity: 0.9;
}

.marketing-summary-container .stat-info h6[b-c1cv0ar7no] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    opacity: 0.9;
}

.marketing-summary-container .stat-info h3[b-c1cv0ar7no] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
}

.marketing-summary-container .stat-trend[b-c1cv0ar7no] {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Report Header */
.marketing-summary-container .report-header[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

/* Executive Profile */
.marketing-summary-container .executive-profile[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.marketing-summary-container .profile-icon[b-c1cv0ar7no] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.marketing-summary-container .profile-info h4[b-c1cv0ar7no] {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-weight: 700;
}

.marketing-summary-container .department-pill[b-c1cv0ar7no] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.marketing-summary-container .department-icon[b-c1cv0ar7no] {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

.marketing-summary-container .tracking-meta[b-c1cv0ar7no] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.marketing-summary-container .meta-item[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

    .marketing-summary-container .meta-item:hover[b-c1cv0ar7no] {
        background: #e9ecef;
        transform: translateX(5px);
    }

    .marketing-summary-container .meta-item i[b-c1cv0ar7no] {
        font-size: 1.5rem;
        width: 40px;
        text-align: center;
    }

    .marketing-summary-container .meta-item label[b-c1cv0ar7no] {
        display: block;
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .marketing-summary-container .meta-item span[b-c1cv0ar7no] {
        display: block;
        font-size: 1rem;
        color: #2c3e50;
        font-weight: 600;
    }

/* Location Grid */
.marketing-summary-container .location-grid-header[b-c1cv0ar7no] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.marketing-summary-container .tracking-grid[b-c1cv0ar7no] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

    .marketing-summary-container .tracking-grid .rz-datatable[b-c1cv0ar7no] {
        border: none;
    }

    .marketing-summary-container .tracking-grid .rz-datatable-thead > tr[b-c1cv0ar7no] {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        border-bottom: 2px solid #dee2e6;
    }

    .marketing-summary-container .tracking-grid .rz-datatable-thead th[b-c1cv0ar7no] {
        padding: 1rem 0.75rem;
        font-weight: 600;
        color: white;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        border: none;
    }

    .marketing-summary-container .tracking-grid .rz-datatable-tbody > tr[b-c1cv0ar7no] {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f1f3f4;
    }

        .marketing-summary-container .tracking-grid .rz-datatable-tbody > tr:hover[b-c1cv0ar7no] {
            background-color: #f8f9fa;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        }

    .marketing-summary-container .tracking-grid .rz-datatable-tbody td[b-c1cv0ar7no] {
        padding: 1.25rem 0.75rem;
        border: none;
        vertical-align: middle;
    }

/* Location Badges */
.marketing-summary-container .location-badge[b-c1cv0ar7no] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.marketing-summary-container .badge-success[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    color: white;
}

.marketing-summary-container .badge-warning[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    color: #2d3748;
}

/* Location Markers */
.marketing-summary-container .location-marker[b-c1cv0ar7no] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.marketing-summary-container .marker-success[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
}

.marketing-summary-container .marker-warning[b-c1cv0ar7no] {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.marketing-summary-container .location-details[b-c1cv0ar7no] {
    flex: 1;
}

.marketing-summary-container .gps-time[b-c1cv0ar7no], .marketing-summary-container .coordinates-display[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    color: #6c757d;
}

.marketing-summary-container .coordinates-code[b-c1cv0ar7no] {
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #495057;
}

/* Location Cards */
.marketing-summary-container .location-card-content[b-c1cv0ar7no] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.marketing-summary-container .location-header[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.marketing-summary-container .location-icon[b-c1cv0ar7no] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

    .marketing-summary-container .location-icon.success[b-c1cv0ar7no] {
        background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    }

    .marketing-summary-container .location-icon.warning[b-c1cv0ar7no] {
        background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    }

.marketing-summary-container .location-title h5[b-c1cv0ar7no] {
    margin: 0 0 0.25rem 0;
    color: #2c3e50;
    font-weight: 700;
}

.marketing-summary-container .location-time[b-c1cv0ar7no] {
    color: #6c757d;
    font-size: 0.875rem;
}

.marketing-summary-container .location-coordinates[b-c1cv0ar7no] {
    flex: 1;
}

.marketing-summary-container .coordinate-item[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

    .marketing-summary-container .coordinate-item:hover[b-c1cv0ar7no] {
        background: #e9ecef;
        transform: translateX(5px);
    }

    .marketing-summary-container .coordinate-item i[b-c1cv0ar7no] {
        color: #667eea;
        width: 20px;
    }

    .marketing-summary-container .coordinate-item span[b-c1cv0ar7no] {
        font-family: 'JetBrains Mono', 'Fira Code', monospace;
        font-size: 0.9rem;
        color: #495057;
    }

.marketing-summary-container .location-actions[b-c1cv0ar7no] {
    margin-top: auto;
}

/* Loading and Error States */
.marketing-summary-container .loading-container[b-c1cv0ar7no] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.marketing-summary-container .loading-spinner[b-c1cv0ar7no] {
    text-align: center;
}

    .marketing-summary-container .loading-spinner p[b-c1cv0ar7no] {
        margin-top: 1rem;
        color: #6c757d;
        font-weight: 500;
    }

.marketing-summary-container .alert[b-c1cv0ar7no] {
    border: none;
    border-radius: 8px;
    border-left: 4px solid #dc3545;
}

.marketing-summary-container .empty-state[b-c1cv0ar7no] {
    padding: 3rem 1rem;
}

.marketing-summary-container .empty-content i[b-c1cv0ar7no] {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.marketing-summary-container .rz-button.rz-secondary.rz-shade-default[b-c1cv0ar7no] {
    background-color: #625e7aab;
}

.marketing-summary-container .suggestions[b-c1cv0ar7no] {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.marketing-summary-container .suggestion-item[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: #495057;
}

/* Radzen Dropdown Styling */
.marketing-summary-container .professional-select .rz-dropdown[b-c1cv0ar7no] {
    width: 100%;
    border-radius: 0.375rem;
}

.marketing-summary-container .professional-select .rz-dropdown-trigger[b-c1cv0ar7no] {
    border: 1px solid #d1d5db;
    border-left: none;
}

.marketing-summary-container .rz-dropdown-empty[b-c1cv0ar7no] {
    padding: 0.5rem;
    color: #6b7280;
    text-align: center;
}

.marketing-summary-container .spinning[b-c1cv0ar7no] {
    animation: spin 1s linear infinite;
}

@@keyframes spin {
    from[b-c1cv0ar7no] {
        transform: rotate(0deg);
    }

    to[b-c1cv0ar7no] {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@@media (max-width: 768px) {
    .marketing-summary-container .executive-profile[b-c1cv0ar7no] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .marketing-summary-container .tracking-meta[b-c1cv0ar7no] {
        margin-top: 1rem;
    }

    .marketing-summary-container .stat-content[b-c1cv0ar7no] {
        flex-direction: column;
        text-align: center;
    }

    .marketing-summary-container .stat-icon[b-c1cv0ar7no] {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .marketing-summary-container .location-header[b-c1cv0ar7no] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .marketing-summary-container .suggestions .row[b-c1cv0ar7no] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Animation for cards */
.marketing-summary-container .pulse-hover[b-c1cv0ar7no] {
    transition: transform 0.3s ease;
}

    .marketing-summary-container .pulse-hover:hover[b-c1cv0ar7no] {
        transform: scale(1.02);
        box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15);
    }

.marketing-summary-container .rounded-3[b-c1cv0ar7no] {
    border-radius: 0.5rem !important;
}

.marketing-summary-container .stat-info span[b-c1cv0ar7no] {
    display: block;
    font-size: 0.9rem;
    color: #040404f7;
    margin-bottom: 0.25rem;
}

.marketing-summary-container .location-badge[b-c1cv0ar7no] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    min-width: 95px;
}

/* FIRST */
.marketing-summary-container .location-first[b-c1cv0ar7no] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

/* MIDDLE */
.marketing-summary-container .location-middle[b-c1cv0ar7no] {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

/* LAST */
.marketing-summary-container .location-last[b-c1cv0ar7no] {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid #fdba74;
}

/* Map markers */
.marketing-summary-container .marker-first[b-c1cv0ar7no] {
    background: #dcfce7;
    color: #15803d;
}

.marketing-summary-container .marker-middle[b-c1cv0ar7no] {
    background: #dbeafe;
    color: #2563eb;
}

.marketing-summary-container .marker-last[b-c1cv0ar7no] {
    background: #ffedd5;
    color: #ea580c;
}

/* Grid */
.marketing-summary-container .tracking-grid[b-c1cv0ar7no] {
    width: 100%;
}

    .marketing-summary-container .tracking-grid .rz-datatable-data td[b-c1cv0ar7no],
    .marketing-summary-container .tracking-grid .rz-grid-table td[b-c1cv0ar7no] {
        vertical-align: middle;
        padding: 12px;
    }

    .marketing-summary-container .tracking-grid .rz-column-title[b-c1cv0ar7no] {
        font-weight: 600;
    }

.marketing-summary-container .coordinates-code[b-c1cv0ar7no] {
    font-size: 12px;
    white-space: nowrap;
}

.marketing-summary-container .image-popup-overlay[b-c1cv0ar7no] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.marketing-summary-container .image-popup[b-c1cv0ar7no] {
    background: #fff;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 10px;
    overflow: hidden;
}

.marketing-summary-container .image-popup-header[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.marketing-summary-container .image-popup-close[b-c1cv0ar7no] {
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.marketing-summary-container .image-popup-body[b-c1cv0ar7no] {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

.marketing-summary-container .image-card[b-c1cv0ar7no] {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px;
    background: #f8f8f8;
}

.marketing-summary-container .location-image[b-c1cv0ar7no] {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

    .marketing-summary-container .location-image:hover[b-c1cv0ar7no] {
        opacity: 0.85;
    }

@@media (max-width: 700px) {
    .marketing-summary-container .image-popup-body[b-c1cv0ar7no] {
        grid-template-columns: 1fr;
    }
}

.marketing-summary-container .location-summary[b-c1cv0ar7no] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.marketing-summary-container .location-mini[b-c1cv0ar7no] {
    padding: 12px 15px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.marketing-summary-container .location-mini-header[b-c1cv0ar7no] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.marketing-summary-container .location-mini-icon[b-c1cv0ar7no] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

    .marketing-summary-container .location-mini-icon.start[b-c1cv0ar7no] {
        background: #20b878;
    }

    .marketing-summary-container .location-mini-icon.end[b-c1cv0ar7no] {
        background: #ffae19;
    }

.marketing-summary-container .location-mini-title[b-c1cv0ar7no] {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.marketing-summary-container .location-mini-time[b-c1cv0ar7no] {
    font-size: 11px;
    color: #888;
}

.marketing-summary-container .location-name[b-c1cv0ar7no] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    /* Prevent very long address from making the card huge */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marketing-summary-container .location-coordinates[b-c1cv0ar7no] {
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
}

    .marketing-summary-container .location-coordinates span[b-c1cv0ar7no] {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .marketing-summary-container .location-coordinates .rz-icon[b-c1cv0ar7no] {
        font-size: 15px;
        color: #668cff;
    }

.marketing-summary-container .location-map-btn[b-c1cv0ar7no] {
    width: 100%;
    border-radius: 5px !important;
    font-size: 12px !important;
}

.marketing-summary-container .voice-popup[b-c1cv0ar7no] {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    overflow: hidden;
}

.marketing-summary-container .voice-popup-body[b-c1cv0ar7no] {
    padding: 25px;
}



/* =========================================================
       Executive Summary - uses the same visual language as
       TrackExcecutive.razor.  Keep selectors page-specific so
       this page cannot override other application pages.
       ========================================================= */
.marketing-summary-container[b-c1cv0ar7no] {
    background: #f8f9fa;
    min-height: 100vh;
}

    .marketing-summary-container .kpi-card[b-c1cv0ar7no] {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 1rem;
        height: 100%;
        transition: all 0.25s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,.05);
        position: relative;
        overflow: hidden;
    }

        .marketing-summary-container .kpi-card:hover[b-c1cv0ar7no] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,.08);
        }

    .marketing-summary-container .kpi-content[b-c1cv0ar7no] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .marketing-summary-container .kpi-icon[b-c1cv0ar7no] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #fff;
    }

    .marketing-summary-container .kpi-metrics[b-c1cv0ar7no] {
        flex: 1;
        min-width: 0;
    }

    .marketing-summary-container .kpi-value[b-c1cv0ar7no] {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        color: #2c3e50;
        margin: 0;
    }

    .marketing-summary-container .kpi-label[b-c1cv0ar7no] {
        display: block;
        font-size: .85rem;
        color: #6c757d;
        margin-top: .25rem;
    }

    .marketing-summary-container .card-marketing .kpi-icon[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#667eea,#764ba2);
    }

    .marketing-summary-container .card-active .kpi-icon[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#28a745,#218838);
    }

    .marketing-summary-container .card-distance .kpi-icon[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#f6ad55,#ed6c02);
    }

    .marketing-summary-container .card-expenses .kpi-icon[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#9c27b0,#7b1fa2);
    }

    .marketing-summary-container .card-docs .kpi-icon[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#00acc1,#00838f);
    }

    .marketing-summary-container .kpi-grid[b-c1cv0ar7no] {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 1rem;
    }

    .marketing-summary-container .top-performer[b-c1cv0ar7no] {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        padding: 1rem;
        transition: all .25s ease;
    }

        .marketing-summary-container .top-performer:hover[b-c1cv0ar7no] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,.08);
        }

    .marketing-summary-container .performer-rank[b-c1cv0ar7no] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #667eea;
        color: #fff;
        font-weight: 700;
    }

    .marketing-summary-container .performer-info[b-c1cv0ar7no] {
        flex: 1;
    }

    .marketing-summary-container .performer-name[b-c1cv0ar7no] {
        font-weight: 600;
        color: #2c3e50;
    }

    .marketing-summary-container .performer-metrics[b-c1cv0ar7no] {
        color: #6c757d;
        font-size: .85rem;
    }

    .marketing-summary-container .marketing-grid[b-c1cv0ar7no] {
        width: 100%;
        overflow-x: auto;
    }

        .marketing-summary-container .marketing-grid table[b-c1cv0ar7no] {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .marketing-summary-container .marketing-grid th[b-c1cv0ar7no] {
            background: #f8f9fa;
            color: #495057;
            font-weight: 600;
            border-bottom: 1px solid #dee2e6;
        }

        .marketing-summary-container .marketing-grid td[b-c1cv0ar7no],
        .marketing-summary-container .marketing-grid th[b-c1cv0ar7no] {
            padding: .75rem;
            vertical-align: middle;
        }

    .marketing-summary-container .department-pill[b-c1cv0ar7no],
    .marketing-summary-container .distance-indicator[b-c1cv0ar7no],
    .marketing-summary-container .amount-indicator[b-c1cv0ar7no],
    .marketing-summary-container .performance-indicator[b-c1cv0ar7no] {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .3rem .65rem;
        border-radius: 50rem;
        font-size: .8rem;
        font-weight: 600;
    }

    .marketing-summary-container .department-pill[b-c1cv0ar7no] {
        background: #eef2ff;
        color: #4c51bf;
    }

    .marketing-summary-container .distance-indicator[b-c1cv0ar7no] {
        background: #fff4e5;
        color: #c05621;
    }

    .marketing-summary-container .amount-indicator[b-c1cv0ar7no] {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .marketing-summary-container .performance-indicator[b-c1cv0ar7no] {
        background: #e3f2fd;
        color: #1565c0;
    }

    .marketing-summary-container .filter-card[b-c1cv0ar7no] {
        background: rgba(255,255,255,.95);
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,.08);
    }

    .marketing-summary-container .filter-header[b-c1cv0ar7no] {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e9ecef;
    }

    .marketing-summary-container .filter-header-title[b-c1cv0ar7no] {
        color: #2c3e50;
        font-weight: 600;
    }

    .marketing-summary-container .filter-body[b-c1cv0ar7no] {
        padding: 1.25rem;
    }

    .marketing-summary-container .filter-label[b-c1cv0ar7no] {
        display: block;
        font-size: .8rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: .35rem;
    }

    .marketing-summary-container .filter-divider[b-c1cv0ar7no] {
        border-top: 1px solid #e9ecef;
        margin: 1rem 0 .5rem;
    }

    .marketing-summary-container .filter-btn-primary[b-c1cv0ar7no] {
        background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
        border: none;
        color: #fff;
        font-weight: 600;
    }

    .marketing-summary-container .filter-btn-secondary[b-c1cv0ar7no] {
        background: #fff;
        border: 1px solid #dee2e6;
        color: #495057;
    }

    .marketing-summary-container .preset-btn[b-c1cv0ar7no] {
        border-radius: 50rem;
    }

@media (max-width: 768px) {
    .marketing-summary-container .kpi-grid[b-c1cv0ar7no] {
        grid-template-columns: 1fr;
    }

    .marketing-summary-container .kpi-content[b-c1cv0ar7no] {
        padding: .25rem;
    }

    .marketing-summary-container .filter-body[b-c1cv0ar7no] {
        padding: 1rem;
    }

    .marketing-summary-container .filter-btn-primary[b-c1cv0ar7no],
    .marketing-summary-container .filter-btn-secondary[b-c1cv0ar7no] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/MasterSettingPage/ProductionDashboard.razor.rz.scp.css */

/* Enhanced Attendance Overview Styling */
.production-overview-module[b-e30ajqcy66] {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --warning-gradient: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    --info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Modern Card Enhancements */
.production-overview-module .modern-card[b-e30ajqcy66] {
    border: none;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

    .production-overview-module .modern-card:hover[b-e30ajqcy66] {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }

.production-overview-module .modern-card-header[b-e30ajqcy66] {
    background: var(--primary-gradient);
    color: white;
    border-bottom: none;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

    .production-overview-module .modern-card-header[b-e30ajqcy66]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    }

.production-overview-module .chart-icon-wrapper[b-e30ajqcy66] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 5px;
}

    .production-overview-module .chart-icon-wrapper i[b-e30ajqcy66] {
        padding: 2px;
    }
/* Quick Stats Enhancement */
.production-overview-module .card.bg-light[b-e30ajqcy66] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

    .production-overview-module .card.bg-light .badge[b-e30ajqcy66] {
        padding: 0.6rem 1.2rem;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }

        .production-overview-module .card.bg-light .badge:hover[b-e30ajqcy66] {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        .production-overview-module .card.bg-light .badge.bg-primary[b-e30ajqcy66] {
            background: var(--primary-gradient) !important;
            border-color: rgba(102, 126, 234, 0.3);
        }

        .production-overview-module .card.bg-light .badge.bg-success[b-e30ajqcy66] {
            background: var(--success-gradient) !important;
            border-color: rgba(17, 153, 142, 0.3);
        }

        .production-overview-module .card.bg-light .badge.bg-danger[b-e30ajqcy66] {
            background: var(--danger-gradient) !important;
            border-color: rgba(255, 107, 107, 0.3);
        }

        .production-overview-module .card.bg-light .badge.bg-warning[b-e30ajqcy66] {
            background: var(--warning-gradient) !important;
            border-color: rgba(255, 154, 158, 0.3);
            color: #333;
        }

        .production-overview-module .card.bg-light .badge.bg-info[b-e30ajqcy66] {
            background: var(--info-gradient) !important;
            border-color: rgba(79, 172, 254, 0.3);
        }

.production-overview-module .card .card-header[b-e30ajqcy66], .production-overview-module .card .card-body[b-e30ajqcy66] {
    padding: 5px;
}

.production-overview-module quick-stats-bar[b-e30ajqcy66] {
    padding: 10px;
}
/* Button Enhancements */
.production-overview-module .btn-outline-success[b-e30ajqcy66] {
    border: 2px solid #28a745;
    color: #28a745;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: transparent;
}

    .production-overview-module .btn-outline-success:hover[b-e30ajqcy66] {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3);
    }

.production-overview-module .btn-outline-primary[b-e30ajqcy66] {
    border: 2px solid #007bff;
    color: #007bff;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: transparent;
}

    .production-overview-module .btn-outline-primary:hover[b-e30ajqcy66] {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    }

/* Enhanced Modal Styling */
.production-overview-module .modal-content[b-e30ajqcy66] {
    border: none;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =========================
           Production Dashboard - AD Look (except grid)
           ========================= */

/* ----- Global Styles ----- */
body[b-e30ajqcy66], .production-dashboard-container[b-e30ajqcy66] {
    background-color: #F5F5F5; /* AD background */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

h5[b-e30ajqcy66], h6[b-e30ajqcy66] {
    color: #0D47A1; /* AD heading color */
}

/* ----- Cards ----- */
.modern-card[b-e30ajqcy66] {
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .modern-card:hover[b-e30ajqcy66] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

.modern-card-header[b-e30ajqcy66] {
    background-color: #2196F3; /* AD blue header */
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 0.75rem 1rem;
}

/* ----- Buttons ----- */
.btn-primary[b-e30ajqcy66], .btn-outline-primary[b-e30ajqcy66], .btn-success[b-e30ajqcy66], .btn-outline-success[b-e30ajqcy66] {
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.btn-primary[b-e30ajqcy66] {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

    .btn-primary:hover[b-e30ajqcy66] {
        background-color: #1976D2;
        border-color: #1976D2;
    }

.btn-outline-primary[b-e30ajqcy66] {
    color: #2196F3;
    border-color: #2196F3;
    background-color: transparent;
}

    .btn-outline-primary:hover[b-e30ajqcy66] {
        background-color: #2196F3;
        color: #fff;
    }

/* ----- Pills / Quick Stats ----- */
.stat-pill[b-e30ajqcy66] {
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pill-good[b-e30ajqcy66] {
    background-color: #2196F3;
    color: #fff;
}

.pill-scrap[b-e30ajqcy66] {
    background-color: #F44336;
    color: #fff;
}

.pill-recovery[b-e30ajqcy66] {
    background-color: #FF9800;
    color: #fff;
}

.pill-total[b-e30ajqcy66] {
    background-color: #9C27B0;
    color: #fff;
}

.pill-bestshift[b-e30ajqcy66] {
    background-color: #4CAF50;
    color: #fff;
}

/* ----- Filters / Inputs ----- */
.filter-card[b-e30ajqcy66] {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.filter-header[b-e30ajqcy66] {
    border-bottom: 1px solid #BBDEFB;
    padding-bottom: 6px;
    margin-bottom: 6px;
    font-weight: 600;
    color: #0D47A1;
}

input[b-e30ajqcy66], select[b-e30ajqcy66], .form-select[b-e30ajqcy66], .RadzenDropDown[b-e30ajqcy66], .RadzenDatePicker[b-e30ajqcy66] {
    border-radius: 6px;
    border: 1px solid #90CAF9;
    padding: 4px 10px;
    font-size: 0.875rem;
}

    input:focus[b-e30ajqcy66], select:focus[b-e30ajqcy66], .form-select:focus[b-e30ajqcy66] {
        outline: none;
        border-color: #2196F3;
        box-shadow: 0 0 6px rgba(33, 150, 243, 0.3);
    }

/* ----- Notifications ----- */
/*     .custom-notification {
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .notification-success {
            background-color: #C8E6C9;
            color: #2E7D32;
        }

        .notification-error {
            background-color: #FFCDD2;
            color: #C62828;
        }

        .notification-warning {
            background-color: #FFE0B2;
            color: #EF6C00;
        } */

/* ----- Modals ----- */
.modal-content[b-e30ajqcy66] {
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}

.modal-header[b-e30ajqcy66] {
    background-color: #2196F3;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-footer[b-e30ajqcy66] {
    background-color: #f5f5f5;
}

    .modal-footer .btn-primary[b-e30ajqcy66] {
        background-color: #2196F3;
        border-color: #2196F3;
    }

        .modal-footer .btn-primary:hover[b-e30ajqcy66] {
            background-color: #1976D2;
            border-color: #1976D2;
        }

    .modal-footer .btn-secondary[b-e30ajqcy66] {
        background-color: #E0E0E0;
        border-color: #BDBDBD;
        color: #333;
    }

        .modal-footer .btn-secondary:hover[b-e30ajqcy66] {
            background-color: #C8E6C9;
            border-color: #A5D6A7;
        }

/* ----- Loading Spinner ----- */
.loading-container[b-e30ajqcy66] {
    background-color: rgba(245, 245, 245, 0.7);
}

.loading-spinner .spinner[b-e30ajqcy66] {
    border: 5px solid #BBDEFB;
    border-top: 5px solid #2196F3;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .stat-pill[b-e30ajqcy66] {
        font-size: 0.8rem;
        padding: 4px 10px;
    }

    .filter-card[b-e30ajqcy66] {
        padding: 0.5rem;
    }

    .modern-card-header[b-e30ajqcy66] {
        padding: 0.5rem;
    }

    .modal-dialog[b-e30ajqcy66] {
        max-width: 95%;
    }

    .modal-header .modal-title[b-e30ajqcy66] {
        font-size: 1rem;
    }

    .modal-footer[b-e30ajqcy66] {
        flex-direction: column;
        align-items: stretch;
    }

        .modal-footer .btn[b-e30ajqcy66] {
            width: 100%;
        }
}

/* =========================
           Preserve PD Grid Styles
           ========================= */
.wrap-grid .rz-datatable-header th[b-e30ajqcy66] {
    background-color: #E8F5E9;
    color: #2E7D32;
    font-weight: 600;
    text-align: center;
}

.wrap-grid .rz-datatable-data tr:nth-child(even)[b-e30ajqcy66] {
    background-color: #F4F9F4;
}

.wrap-grid .rz-datatable-data td[b-e30ajqcy66] {
    padding: 8px 12px;
    font-size: 0.875rem;
}


/* Allow header text wrapping */
.rz-datatable-thead th[b-e30ajqcy66],
.rz-grid-table thead th[b-e30ajqcy66],
.rz-datatable thead th[b-e30ajqcy66],
.rz-grid-table th .rz-column-title[b-e30ajqcy66],
.rz-column-title[b-e30ajqcy66] {
    white-space: normal !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    text-overflow: unset !important;
    overflow: visible !important;
}

/* Allow header cell height to grow */
.rz-datatable-thead th[b-e30ajqcy66],
.rz-grid-table thead th[b-e30ajqcy66] {
    height: auto !important;
    vertical-align: middle !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* IMPORTANT: remove fixed table layout */
.wrap-grid table[b-e30ajqcy66] {
    table-layout: auto !important;
}

.text-muted[b-e30ajqcy66], .white[b-e30ajqcy66] {
    color: white;
}

.black[b-e30ajqcy66] {
    color: black;
}

th[b-e30ajqcy66] {
    white-space: normal !important;
}
/* =========================================================
   PRODUCTION DASHBOARD FILTER
   ONE ROW - NO COLLAPSE
   ========================================================= */

/*.production-filter-box {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px;
}*/


    /* =========================================================
   MAIN FILTER ROW
   ========================================================= */

    /*.production-filter-box .production-filter-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        min-width: 100% !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }*/


    /* =========================================================
   EACH FILTER
   ========================================================= */

    /*.production-filter-box .production-filter {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }*/


    /* =========================================================
   BRANCH
   ========================================================= */

    /*.production-filter-box .branch-filter {
        width: 220px !important;
        min-width: 220px !important;
    }

    .production-filter-box .branch-control {
        display: flex !important;
        align-items: center !important;
        width: 145px !important;
        min-width: 145px !important;
        margin-left: 6px !important;
    }

        .production-filter-box .branch-control .input-group-text {
            flex: 0 0 auto !important;
        }

        .production-filter-box .branch-control select {
            width: 110px !important;
            min-width: 110px !important;
            height: 32px !important;
        }*/


    /* =========================================================
   DATE RANGE
   ========================================================= */

    /*.production-filter-box .date-filter {
        width: 370px !important;
        min-width: 370px !important;
    }

    .production-filter-box .date-control {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin-left: 6px !important;
        width: 275px !important;
        min-width: 275px !important;
    }

        .production-filter-box .date-control .rz-datepicker {
            display: inline-flex !important;
            width: 120px !important;
            min-width: 120px !important;
            max-width: 120px !important;
            flex: 0 0 120px !important;
        }

            .production-filter-box .date-control .rz-datepicker input {
                width: 100% !important;
                min-width: 0 !important;
            }

    .production-filter-box .date-to {
        display: inline-block !important;
        width: 28px !important;
        min-width: 28px !important;
        text-align: center !important;
    }*/


    /* =========================================================
   SHIFT
   ========================================================= */

    /*.production-filter-box .shift-filter {
        width: 205px !important;
        min-width: 205px !important;
    }

        .production-filter-box .shift-filter .rz-dropdown {
            width: 140px !important;
            min-width: 140px !important;
            margin-left: 6px !important;
        }*/


    /* =========================================================
   SEARCH
   ========================================================= */

    /*.production-filter-box .search-filter {
        width: 100px !important;
        min-width: 100px !important;
    }

        .production-filter-box .search-filter .rz-button {
            width: 100px !important;
            min-width: 100px !important;
            height: 36px !important;
        }*/


    /* =========================================================
   LABEL
   ========================================================= */

    /*.production-filter-box .filter-label {
        white-space: nowrap !important;
        margin: 0 !important;
        font-size: 12px !important;
    }*/


    /* =========================================================
   ICON
   ========================================================= */

    /*.production-filter-box .production-filter > i {
        width: 15px !important;
        min-width: 15px !important;
        margin-right: 5px !important;
        text-align: center !important;
    }*/


    /* =========================================================
   SECOND ROW
   ========================================================= */

    /*.production-filter-box > .row {
        margin-top: 8px !important;
    }*/


/* =========================================================
   DO NOT COLLAPSE AT SMALL SCREEN
   ========================================================= */

/*@media (max-width: 1200px) {

    .production-filter-box {
        overflow-x: auto !important;
    }

        .production-filter-box .production-filter-row {
            width: max-content !important;
            min-width: max-content !important;
        }
}*/



/* =========================================================
   PRODUCTION DASHBOARD FILTER
   EXACTLY 2 ROWS
   ========================================================= */

.production-filter-box[b-e30ajqcy66] {
    width: 100%;
    padding: 4px 2px 2px 2px;
    overflow: visible !important;
}


    /* =========================================================
   FIRST ROW
   Branch | Date Range | Shift | Search
   ========================================================= */

    .production-filter-box .production-filter-row[b-e30ajqcy66] {
        display: grid !important;
        /* Bigger controls */
        grid-template-columns: 285px 420px 260px 110px !important;
        column-gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }


    /* =========================================================
   EACH FILTER
   ========================================================= */

    .production-filter-box .production-filter[b-e30ajqcy66] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }


        /* =========================================================
   FILTER ICON
   ========================================================= */

        .production-filter-box .production-filter > i[b-e30ajqcy66] {
            flex: 0 0 auto !important;
            width: 16px !important;
            min-width: 16px !important;
            margin-right: 6px !important;
            font-size: 13px !important;
            text-align: center !important;
            color: #0066cc !important;
        }


    /* =========================================================
   FILTER LABEL
   ========================================================= */

    .production-filter-box .filter-label[b-e30ajqcy66] {
        flex: 0 0 auto !important;
        margin: 0 8px 0 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }


    /* =========================================================
   BRANCH
   ========================================================= */

    .production-filter-box .branch-filter[b-e30ajqcy66] {
        width: 100% !important;
        min-width: 0 !important;
    }


    .production-filter-box .branch-control[b-e30ajqcy66] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 175px !important;
        min-width: 175px !important;
        flex: 0 0 175px !important;
        margin: 0 !important;
    }


        /* Filter icon box */

        .production-filter-box .branch-control .input-group-text[b-e30ajqcy66] {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 34px !important;
            min-width: 34px !important;
            height: 36px !important;
            padding: 0 !important;
            border: 1px solid #80bfff !important;
            border-right: 0 !important;
            background: #ffffff !important;
            color: #0066cc !important;
            border-radius: 7px 0 0 7px !important;
        }


        /* Branch select */

        .production-filter-box .branch-control select[b-e30ajqcy66] {
            width: 141px !important;
            min-width: 141px !important;
            height: 36px !important;
            padding: 5px 10px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: #1f2937 !important;
            background-color: #ffffff !important;
            border: 1px solid #80bfff !important;
            border-radius: 0 7px 7px 0 !important;
            box-shadow: none !important;
        }


    /* =========================================================
   DATE RANGE
   ========================================================= */

    .production-filter-box .date-filter[b-e30ajqcy66] {
        width: 100% !important;
        min-width: 0 !important;
    }


    .production-filter-box .date-control[b-e30ajqcy66] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 305px !important;
        min-width: 305px !important;
        flex: 0 0 305px !important;
        white-space: nowrap !important;
    }


        /* Date picker wrapper */

        .production-filter-box .date-control .rz-datepicker[b-e30ajqcy66] {
            display: inline-flex !important;
            align-items: center !important;
            width: 138px !important;
            min-width: 138px !important;
            max-width: 138px !important;
            flex: 0 0 138px !important;
        }


            /* Date picker input */

            .production-filter-box .date-control .rz-datepicker input[b-e30ajqcy66] {
                width: 138px !important;
                min-width: 138px !important;
                max-width: 138px !important;
                height: 36px !important;
                padding: 5px 9px !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                color: #1f2937 !important;
                background: #ffffff !important;
                border: 1px solid #80bfff !important;
                border-radius: 7px !important;
                box-shadow: none !important;
            }


                /* Date picker focus */

                .production-filter-box .date-control .rz-datepicker input:focus[b-e30ajqcy66] {
                    outline: none !important;
                    border-color: #007bff !important;
                    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15) !important;
                }


    /* TO */

    .production-filter-box .date-to[b-e30ajqcy66] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 29px !important;
        min-width: 29px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #374151 !important;
        text-align: center !important;
    }


    /* =========================================================
   SHIFT
   ========================================================= */

    .production-filter-box .shift-filter[b-e30ajqcy66] {
        width: 100% !important;
        min-width: 0 !important;
    }


        .production-filter-box .shift-filter .rz-dropdown[b-e30ajqcy66] {
            width: 165px !important;
            min-width: 165px !important;
            max-width: 165px !important;
            height: 36px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            border: 1px solid #80bfff !important;
            border-radius: 7px !important;
            background: #ffffff !important;
            color: #1f2937 !important;
        }


        /* Radzen dropdown input */

        .production-filter-box .shift-filter .rz-dropdown-label[b-e30ajqcy66] {
            font-size: 13px !important;
            font-weight: 600 !important;
        }


    /* =========================================================
   SEARCH
   ========================================================= */

    .production-filter-box .search-filter[b-e30ajqcy66] {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: 110px !important;
        min-width: 110px !important;
        margin: 0 !important;
    }


        .production-filter-box .search-filter .rz-button[b-e30ajqcy66] {
            width: 110px !important;
            min-width: 110px !important;
            height: 38px !important;
            border-radius: 7px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
        }


    /* =========================================================
   SECOND ROW
   All Branches | Date | Today | Yesterday | ...
   ========================================================= */

    .production-filter-box > .row.mt-2[b-e30ajqcy66] {
        display: block !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }


        .production-filter-box > .row.mt-2 > .col-12[b-e30ajqcy66] {
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }


        /* Main second-row container */

        .production-filter-box > .row.mt-2 .d-flex[b-e30ajqcy66] {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
            min-height: 36px !important;
            gap: 10px !important;
        }


        /* =========================================================
   LEFT STATUS AREA
   ========================================================= */

        .production-filter-box > .row.mt-2 .text-muted[b-e30ajqcy66] {
            display: flex !important;
            align-items: center !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            min-height: 36px !important;
        }


        /* =========================================================
   STATUS BADGES
   ========================================================= */

        .production-filter-box > .row.mt-2 .badge[b-e30ajqcy66] {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 32px !important;
            padding: 7px 13px !important;
            margin-right: 7px !important;
            border-radius: 7px !important;
            font-size: 12px !important;
            font-weight: 800 !important;
            letter-spacing: 0.15px !important;
            white-space: nowrap !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
        }


            /* All Branches */

            .production-filter-box > .row.mt-2 .badge.bg-secondary[b-e30ajqcy66] {
                background: #34495e !important;
                color: #ffffff !important;
                border: 1px solid #2c3e50 !important;
            }


            /* Selected branch */

            .production-filter-box > .row.mt-2 .badge.bg-info[b-e30ajqcy66] {
                background: #0984e3 !important;
                color: #ffffff !important;
                border: 1px solid #0876c9 !important;
            }


            /* Date badge */

            .production-filter-box > .row.mt-2 .badge.bg-warning[b-e30ajqcy66] {
                background: #f39c12 !important;
                color: #ffffff !important;
                border: 1px solid #e67e22 !important;
            }


        /* =========================================================
   QUICK DATE BUTTON AREA
   ========================================================= */

        .production-filter-box > .row.mt-2 .text-end[b-e30ajqcy66] {
            flex: 0 0 auto !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
        }


        .production-filter-box > .row.mt-2 .btn-group[b-e30ajqcy66] {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
            gap: 6px !important;
        }


            /* Every quick button */

            .production-filter-box > .row.mt-2 .btn-group .btn[b-e30ajqcy66] {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 72px !important;
                height: 32px !important;
                padding: 5px 12px !important;
                border-radius: 6px !important;
                font-size: 12px !important;
                font-weight: 800 !important;
                line-height: 1 !important;
                white-space: nowrap !important;
                background: #ffffff !important;
                color: #334155 !important;
                border: 1px solid #94a3b8 !important;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
                transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
            }


                /* Hover */

                .production-filter-box > .row.mt-2 .btn-group .btn:hover[b-e30ajqcy66] {
                    background: #2563eb !important;
                    color: #ffffff !important;
                    border-color: #2563eb !important;
                    transform: translateY(-1px) !important;
                    box-shadow: 0 4px 9px rgba(37, 99, 235, 0.25) !important;
                }


                /* Click */

                .production-filter-box > .row.mt-2 .btn-group .btn:active[b-e30ajqcy66] {
                    transform: translateY(0) !important;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
                }


                /* =========================================================
   DIFFERENT COLORS FOR QUICK DATE BUTTONS
   ========================================================= */

                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(1)[b-e30ajqcy66] {
                    border-color: #16a085 !important;
                    color: #117864 !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(1):hover[b-e30ajqcy66] {
                        background: #16a085 !important;
                        color: #ffffff !important;
                    }


                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(2)[b-e30ajqcy66] {
                    border-color: #3498db !important;
                    color: #2471a3 !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(2):hover[b-e30ajqcy66] {
                        background: #3498db !important;
                        color: #ffffff !important;
                    }


                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(3)[b-e30ajqcy66] {
                    border-color: #8e44ad !important;
                    color: #71368a !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(3):hover[b-e30ajqcy66] {
                        background: #8e44ad !important;
                        color: #ffffff !important;
                    }


                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(4)[b-e30ajqcy66] {
                    border-color: #e67e22 !important;
                    color: #ca6f1e !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(4):hover[b-e30ajqcy66] {
                        background: #e67e22 !important;
                        color: #ffffff !important;
                    }


                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(5)[b-e30ajqcy66] {
                    border-color: #2980b9 !important;
                    color: #21618c !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(5):hover[b-e30ajqcy66] {
                        background: #2980b9 !important;
                        color: #ffffff !important;
                    }


                .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(6)[b-e30ajqcy66] {
                    border-color: #c0392b !important;
                    color: #922b21 !important;
                }

                    .production-filter-box > .row.mt-2 .btn-group .btn:nth-child(6):hover[b-e30ajqcy66] {
                        background: #c0392b !important;
                        color: #ffffff !important;
                    }


        /* =========================================================
   IMPORTANT
   NEVER CREATE A THIRD ROW
   ========================================================= */

        .production-filter-box[b-e30ajqcy66],
        .production-filter-box .production-filter-row[b-e30ajqcy66],
        .production-filter-box .production-filter[b-e30ajqcy66],
        .production-filter-box > .row.mt-2[b-e30ajqcy66],
        .production-filter-box > .row.mt-2 .d-flex[b-e30ajqcy66],
        .production-filter-box > .row.mt-2 .btn-group[b-e30ajqcy66] {
            overflow: visible !important;
        }


/* =========================================================
   DESKTOP WIDTH PROTECTION
   ========================================================= */

@media (min-width: 1200px) {

    .production-filter-box .production-filter-row[b-e30ajqcy66] {
        grid-template-columns: 285px 420px 260px 110px !important;
    }
}


/* =========================================================
   SMALLER SCREEN
   Keep 2 rows, allow horizontal scrolling
   ========================================================= */

@media (max-width: 1199px) {

    .production-filter-box[b-e30ajqcy66] {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 4px !important;
    }

        .production-filter-box .production-filter-row[b-e30ajqcy66] {
            grid-template-columns: 285px 420px 260px 110px !important;
            width: max-content !important;
            min-width: max-content !important;
        }

        .production-filter-box > .row.mt-2[b-e30ajqcy66] {
            width: max-content !important;
            min-width: 100% !important;
        }

            .production-filter-box > .row.mt-2 .d-flex[b-e30ajqcy66] {
                width: max-content !important;
                min-width: 100% !important;
            }
}