/* _content/CSF.Software.ProductionDashboard/Components/Layout/MainLayout.razor.rz.scp.css */
/* Top bar */
.top-bar[b-6yd06jsvnz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background-color: #f7f7f7; /*#0a1f2e; #0d3d4f;*/
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 1100;
    border-bottom: 1px solid rgba(0, 188, 212, 0.2);
    gap: 0.6rem;
}

.top-bar-title[b-6yd06jsvnz] {
    font-size: clamp(0.68rem, 1vw, 0.93rem); /*0.93rem*/
    font-weight: 600;
    color: #e0f4f4;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.top-bar-spacer[b-6yd06jsvnz] {
    flex: 1;
}

.top-bar-right[b-6yd06jsvnz] {
    display: flex;
    align-items: center;
    gap: 0.5rem; /*0.5rem*/
    position: fixed;
    right: 0.75rem/*0.25rem*/; /*0.25rem*/
}

/* Hamburger button */
.hamburger-btn[b-6yd06jsvnz] {
    background: none;
    border: none;
    color: #e0f4f4;
    font-size: 1.45rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

    .hamburger-btn:hover[b-6yd06jsvnz] {
        background: rgba(255,255,255,0.1);
    }

/* Logo slot */
.top-bar-logo[b-6yd06jsvnz] {
    height: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Dark/Light toggle button */
.theme-btn[b-6yd06jsvnz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(0,188,212,0.3);
    border-radius: 20px;
    padding: 0.28rem 0.8rem;
    color: #e0f4f4;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

    .theme-btn:hover[b-6yd06jsvnz] {
        background: rgba(255,255,255,0.15);
    }

/* User button */
.user-btn-wrap[b-6yd06jsvnz] {
    position: relative;
}

.user-btn[b-6yd06jsvnz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(0,188,212,0.3);
    border-radius: 20px;
    padding: 0.28rem 0.75rem 0.28rem 0.35rem;
    color: #e0f4f4;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

    .user-btn:hover[b-6yd06jsvnz] {
        background: rgba(255,255,255,0.15);
    }

.user-avatar-sm[b-6yd06jsvnz] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00bcd4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: #0a1f2e;
    flex-shrink: 0;
}

/* User dropdown */
.user-dropdown[b-6yd06jsvnz] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #0a1f2e;
    border: 1px solid rgba(0,188,212,0.25);
    border-radius: 10px;
    min-width: 100%; /*175px*/
    width: max-content;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    z-index: 200;
    overflow: hidden;
}

    .user-dropdown.open[b-6yd06jsvnz] {
        display: block;
    }

.dd-item[b-6yd06jsvnz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    color: #e0f4f4;
    font-size: clamp(0.75rem, 1vw, 0.82rem); /*0.82rem*/
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

    .dd-item:hover[b-6yd06jsvnz] {
        background: rgba(255,255,255,0.08);
    }

.dd-sep[b-6yd06jsvnz] {
    height: 1px;
    background: rgba(0,188,212,0.15);
    margin: 0.2rem 0;
}

.dd-item.danger[b-6yd06jsvnz] {
    color: #ef9a9a;
}

/* Nav links inside sidebar */
.side-nav[b-6yd06jsvnz] {
    padding: 0.5rem 0;
}

.nav-item[b-6yd06jsvnz] {
    padding: 0 0.5rem 0.1rem;
}

.nav-link[b-6yd06jsvnz] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #8baab8;
    background: none;
    border: none;
    border-radius: 7px;
    height: 2.7rem;
    width: 100%;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

    .nav-link:hover[b-6yd06jsvnz] {
        background: rgba(255,255,255,0.07);
        color: #ffffff;
    }

    .nav-link.active[b-6yd06jsvnz] {
        background: #112840;
        color: #ffffff;
        font-weight: 500;
    }
        /* Cyan left border on active item */
        .nav-link.active[b-6yd06jsvnz]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 55%;
            background: #00bcd4;
            border-radius: 0 3px 3px 0;
        }

.nav-chevron[b-6yd06jsvnz] {
    margin-left: auto;
    font-size: 0.72rem;
    transition: transform 0.25s;
    opacity: 0.6;
}

    .nav-chevron.open[b-6yd06jsvnz] {
        transform: rotate(180deg);
    }

.sub-nav[b-6yd06jsvnz] {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .sub-nav.open[b-6yd06jsvnz] {
        max-height: 300px;
    }

    .sub-nav .nav-item[b-6yd06jsvnz] {
        padding: 0 0.5rem 0;
    }

    .sub-nav .nav-link[b-6yd06jsvnz] {
        height: 2.3rem;
        font-size: 0.82rem;
        padding-left: 2.4rem;
        opacity: 0.85;
    }

/* Main Content */
.main-content[b-6yd06jsvnz] {
    margin-top: 3.5rem;
    margin-left: 210px;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    padding: 1.5rem;
    transition: margin-left 0.3s ease, background-color 0.3s, color 0.3s;
}

    .main-content.expanded[b-6yd06jsvnz] {
        margin-left: 0;
    }

/* Light Mode */
.main-content[b-6yd06jsvnz] {
    background-color: #e8f6f8;
    color: #0a1f2e;
}

    /* Dark Mode */
    .main-content.dark[b-6yd06jsvnz] {
        background-color: #081820;
        color: #d0eaee;
    }

/* Cards inside content area */
.content-card[b-6yd06jsvnz] {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    transition: background-color 0.3s;
}

.main-content.dark .content-card[b-6yd06jsvnz] {
    background-color: #0d2535;
    border-color: rgba(0,188,212,0.12);
    box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* Error bar */
#blazor-error-ui[b-6yd06jsvnz] {
    background: lightyellow;
    bottom: 0;
    left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss[b-6yd06jsvnz] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Scrollbar */
[b-6yd06jsvnz]::-webkit-scrollbar {
    width: 10px;
}

[b-6yd06jsvnz]::-webkit-scrollbar-track {
    background: transparent;
}

[b-6yd06jsvnz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.25);
    border-radius: 3px;
}


body.dark .main-content[b-6yd06jsvnz] {
    background-color: #081820;
    color: #d0eaee;
}
/* _content/CSF.Software.ProductionDashboard/Components/Layout/NavMenu.razor.rz.scp.css */
.side-nav[b-r8ahb8xfmt] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.nav-item[b-r8ahb8xfmt] {
    font-size: 0.875rem;
    padding-bottom: 0.25rem; /*0.1rem   0.25rem*/
    padding-right: 0;
}

    .nav-item[b-r8ahb8xfmt]  .nav-link {
        color: #8baab8;
        background: none;
        border: none;
        border-radius: 7px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        padding: 0 0.75rem;
        gap: 0.55rem; /*0.65rem*/
        text-decoration: none;
        width: 100%;
        transition: background 0.2s, color 0.2s;
        cursor: pointer;
        position: relative;
        margin-left: 0.5rem;
    }

        .nav-item[b-r8ahb8xfmt]  .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

    .nav-item[b-r8ahb8xfmt]  a.active {
        background: #5e7e85; /*#112840*/
        color: #ffffff;
        font-weight: 500;
        margin-left: 0.5rem; /*0*/
        width: 100%;
    }

        .nav-item[b-r8ahb8xfmt]  a.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 55%;
            background: none; /*#00bcd4*/
            border-radius: 0 3px 3px 0;
        }

.nav-chevron[b-r8ahb8xfmt] {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.6;
    width: auto;
    height: auto;
    background: none;
    margin-right: 0;
}

.sub-nav.open[b-r8ahb8xfmt] {
    max-height: 300px;
    padding-top: 0.25rem;
    margin-bottom: -.25rem; /*-0.25rem*/ /*   -.55rem;*/
}

/* Sub-nav items (collapsible children) */
.sub-nav .nav-item[b-r8ahb8xfmt]  .nav-link {
    height: 2.3rem;
    font-size: 0.82rem;
    opacity: 0.85;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




/*.sub-nav .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 1;
    margin: 600px 0;*/ /*6px*/
/*}*/

/*.sub-nav .nav-link {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.5;*/ /*1.5*/
/*}*/

/*.sub-nav .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 1;
    margin: 4px 0;
}*/

/*.sub-nav .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 8px 0;
    padding-top: 5.55px;
}*/


.sub-nav .dropdown-divider[b-r8ahb8xfmt] {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 6px 8px 6px 4px;
    opacity: 1;
    padding-top: 4.5px; /*6.5px*/
}

.sub-nav .nav-item[b-r8ahb8xfmt] {
    margin: 0;
    padding: 0;
}

.sub-nav .nav-link[b-r8ahb8xfmt] {
    padding-top: 4px;
    padding-bottom: 4px;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Account/Login.razor.rz.scp.css */
/* Fullscreen centered container */
.login-container[b-5p688q5y4e] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

/* Box containing both panels */
.login-box[b-5p688q5y4e] {
    display: flex;
    width: 190%;
    max-width: 900px; 
    min-height: 500px;
    height: auto;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
}

/* Left Side (Login Form) */
.login-form-area[b-5p688q5y4e] {
    width: 60%;
    background-color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border-radius: 12px 0 0 12px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
}

.form-wrapper[b-5p688q5y4e] {
    width: 100%;
    max-width: 400px;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}

.form-control[b-5p688q5y4e] {
    font-size: inherit;
}

/* Right Side */
.login-right-side[b-5p688q5y4e] {
    width: 40%;
    flex-shrink: 0;
    min-width: 200px;
    background: linear-gradient(135deg, #004a5c, #005969, #007c91, #00a3b5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    text-align: center;
    padding: 2rem;
}

    .login-right-side img[b-5p688q5y4e] {
        max-width: 60%;
        height: auto;
    }

.welcome-message[b-5p688q5y4e] {
    position: absolute;
    top: 3.5rem; /*2.5rem*/
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    white-space: nowrap;
}

    .welcome-message h2[b-5p688q5y4e] {
        margin-bottom: 0;
        line-height: 1.1;
        font-weight: 650; /*800*/
        font-size: clamp(1.2rem, 3vw, 2rem); 
        letter-spacing: .08em;
    }

    .welcome-message p[b-5p688q5y4e] {
        margin-bottom: 0;
        margin-top: 0;
        line-height: 1; /*1.2*/
        text-transform: uppercase;
        font-size: clamp(0.6rem, 1vw, 0.7rem); 
        letter-spacing: 0.08em;
        opacity: 0.85;
    }

.content-wrapper[b-5p688q5y4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-top: 3rem;
    padding-top: 1rem;
}

    .content-wrapper h6[b-5p688q5y4e] {
        font-family: Arial, sans-serif;
        color: white;
        text-align: center;
        font-weight: lighter;
        margin: 0;
        margin-top: 3rem; /*0.5rem*/
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Account/Profile.razor.rz.scp.css */
.profile-page[b-44h5ny38bm] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .profile-page[b-44h5ny38bm] {
    background: #081820;
    min-height: 100vh;
}

/* Breadcrumb */
.page-breadcrumb[b-44h5ny38bm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.main-content.dark .page-breadcrumb[b-44h5ny38bm] {
    color: #4a8a9a;
}

/* Page Header */
.page-title[b-44h5ny38bm] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-44h5ny38bm] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .page-title[b-44h5ny38bm] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .page-subtitle[b-44h5ny38bm] {
    color: #7ab8c8;
}

/* Layout */
.profile-layout[b-44h5ny38bm] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.profile-card[b-44h5ny38bm] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    padding: 1.5rem;
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s;
}

    .profile-card[b-44h5ny38bm]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
        margin: -1.5rem -1.5rem 1.5rem;
    }


.main-content.dark .profile-card[b-44h5ny38bm] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,188,212,0.08);
}

/* Main panel */
.profile-main[b-44h5ny38bm] {
    flex: 1;
}

/* Sidebar */
.profile-sidebar[b-44h5ny38bm] {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

/* Avatar */
.profile-avatar-wrap[b-44h5ny38bm] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto;
    flex-shrink: 0;
}

.profile-avatar[b-44h5ny38bm] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007c91, #00bcd4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

/* Sidebar info */
.profile-sidebar-name[b-44h5ny38bm] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0a2535;
    transition: color 0.3s;
}

.profile-sidebar-pos[b-44h5ny38bm] {
    font-size: 0.75rem;
    color: #5a8090;
}

.main-content.dark .profile-sidebar-name[b-44h5ny38bm] {
    color: #e4f6fa;
}

.main-content.dark .profile-sidebar-pos[b-44h5ny38bm] {
    color: #7ab8c8;
}

.profile-badge[b-44h5ny38bm] {
    display: inline-block;
    background: #e0f4f4;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
}

.main-content.dark .profile-badge[b-44h5ny38bm] {
    background: rgba(0,188,212,0.15);
    color: #00bcd4;
}

/* Fields */
.profile-section-title[b-44h5ny38bm] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.profile-grid-2[b-44h5ny38bm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.profile-grid-3[b-44h5ny38bm] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.profile-field-label[b-44h5ny38bm] {
    font-size: 0.68rem;
    color: #9bb8c2;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.profile-field-value[b-44h5ny38bm] {
    font-size: 0.85rem;
    color: #0a2535;
    font-weight: 500;
}

.main-content.dark .profile-field-value[b-44h5ny38bm] {
    color: #e4f6fa;
}

.main-content.dark .profile-field-label[b-44h5ny38bm] {
    color: #4a8a9a;
}

.profile-divider[b-44h5ny38bm] {
    height: 1px;
    background: #d0e8ed;
    margin: 1rem 0;
    transition: background 0.3s;
}

.main-content.dark .profile-divider[b-44h5ny38bm] {
    background: rgba(0,188,212,0.2);
}

/* Input */
.profile-input[b-44h5ny38bm] {
    width: 100%;
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    outline: none;
    background: #ffffff;
    color: #0a1e28;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.3s;
}

    .profile-input:focus[b-44h5ny38bm] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

.main-content.dark .profile-input[b-44h5ny38bm] {
    background: #163040;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

/* Error */
.profile-error[b-44h5ny38bm] {
    font-size: 0.75rem;
    color: #e53935;
    margin-bottom: 0.25rem; /*0.75rem*/
}

/* Save button */
.profile-btn-save[b-44h5ny38bm] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, transform 0.15s;
}

    .profile-btn-save:hover[b-44h5ny38bm] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

    .profile-btn-save:disabled[b-44h5ny38bm] {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Account/Register.razor.rz.scp.css */
/* Page Wrapper */
.register-page[b-2plovow76z] {
    padding: 0.15rem 0.2rem 3rem;
}

/* Breadcrumb */
.breadcrumb-row[b-2plovow76z] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-2plovow76z] {
        color: #333;
        font-weight: 500;
    }

/* Page Title */
.page-title[b-2plovow76z] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-2plovow76z] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    max-width: 500px;
}

/* Sections */
.form-section[b-2plovow76z] {
    margin-bottom: 2rem;
}

.section-label[b-2plovow76z] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

/* Rows */
/* Each row = label on the left, input on the right */
.form-row[b-2plovow76z] {
    display: flex;
    align-items: center;
    padding: 0.9rem 0;
    border-bottom: 1px solid #efefef;
    gap: 2rem;
}

    .form-row:last-child[b-2plovow76z] {
        border-bottom: none;
    }

.row-label[b-2plovow76z] {
    flex: 0 0 250px; /* fixed width left column 0 0 150px*/
}

.row-label-title[b-2plovow76z] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}

.row-label-hint[b-2plovow76z] {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 1px;
}

.row-input[b-2plovow76z] {
    flex: 1;
}

/* Input with icon prefix */
.input-group .input-group-text[b-2plovow76z] {
    background: #f8f9fa;
    border-color: #ced4da;
    border-right: none;
    color: #888;
    font-size: 0.9rem;
}

.field-input-group[b-2plovow76z] {
    border-left: none;
    border-radius: 0 6px 6px 0;
}

    .field-input-group:focus[b-2plovow76z] {
        border-color: #007c91;
        box-shadow: none;
    }

.input-group:focus-within .input-group-text[b-2plovow76z] {
    border-color: #007c91;
}

/* Select */
.field-select[b-2plovow76z] {
    width: 350px; /*100%*/
    max-width: 350px; /*205px*/
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    font-size: 0.9rem;
    color: #333;
    background-color: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath fill='%23aaa' d='M0 0l6 7 6-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

    .field-select:focus[b-2plovow76z] {
        border-color: #007c91;
        box-shadow: 0 0 0 3px rgba(0, 124, 145, 0.12);
    }

/* Helper text */
.field-hint[b-2plovow76z] {
    font-size: 0.78rem;
    color: #aaa;
    display: block;
    margin-top: 0.2rem;
}

/* Profile Photo */
.photo-upload-btn[b-2plovow76z] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.photo-avatar[b-2plovow76z] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ab8c0;
    font-size: 1.3rem;
    flex-shrink: 0;
    border: 2px dashed #b0d8de;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}

    .photo-avatar img[b-2plovow76z] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.photo-upload-btn:hover .photo-avatar[b-2plovow76z] {
    border-color: #007c91;
    background: #d0ecf0;
}

.photo-upload-label[b-2plovow76z] {
    font-size: 0.85rem;
    color: #999;
    transition: color 0.2s;
}

.photo-upload-btn:hover .photo-upload-label[b-2plovow76z] {
    color: #007c91;
}

/* Role Buttons */
.role-group[b-2plovow76z] {
    display: flex;
    gap: 0.5rem;
    width: 20rem;
}

.role-btn[b-2plovow76z] {
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    border: 1.5px solid #ced4da;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .role-btn:hover[b-2plovow76z] {
        border-color: #007c91;
        color: #007c91;
    }

    .role-btn.active[b-2plovow76z] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }

/* Account Active Toggle */
.toggle-wrap[b-2plovow76z] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.toggle-switch[b-2plovow76z] {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle-switch input[b-2plovow76z] {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.toggle-track[b-2plovow76z] {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle-switch input:checked + .toggle-track[b-2plovow76z] {
    background: #007c91;
}

.toggle-track[b-2plovow76z]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-track[b-2plovow76z]::after {
    transform: translateX(18px);
}

.toggle-label[b-2plovow76z] {
    font-size: 0.85rem;
    color: #666;
}

/* Footer Buttons */
.form-footer[b-2plovow76z] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid none/*#e0e0e0*/;
    margin-top: 0.5rem;
    width: 100%;
}

.btn-register[b-2plovow76z] {
    background: #1a5fa8;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 2rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .btn-register:hover[b-2plovow76z] {
        background: #154d8c;
    }

    .btn-register:disabled[b-2plovow76z] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.btn-cancel[b-2plovow76z] {
    background: none;
    border: none;
    color: #888;
    font-size: 0.92rem;
    cursor: pointer;
    padding: 0.65rem 0.5rem;
    transition: color 0.2s;
}

    .btn-cancel:hover[b-2plovow76z] {
        color: #333;
    }

/* Content - Dark Mode */
.main-content.dark .breadcrumb-row[b-2plovow76z] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-2plovow76z] {
        color: #b0d0d8;
    }

.main-content.dark .page-title[b-2plovow76z] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-2plovow76z] {
    color: #6a9aaa;
}

.main-content.dark .section-label[b-2plovow76z] {
    color: #5a8a9a;
    border-bottom-color: rgba(255,255,255,0.07);
}

.main-content.dark .form-row[b-2plovow76z] {
    border-bottom-color: rgba(255,255,255,0.06);
}

.main-content.dark .row-label-title[b-2plovow76z] {
    color: #c8e4ea;
}

.main-content.dark .row-label-hint[b-2plovow76z] {
    color: #5a8a9a;
}

.main-content.dark .field-hint[b-2plovow76z] {
    color: #5a8a9a;
}

.main-content.dark .field-input[b-2plovow76z],
.main-content.dark .field-select[b-2plovow76z] {
    background-color: #0a1f2e;
    border-color: rgba(0, 188, 212, 0.2);
    color: #e0f4f4;
}

    .main-content.dark .field-input[b-2plovow76z]::placeholder {
        color: #3a6a7a;
    }

    .main-content.dark .field-input:focus[b-2plovow76z],
    .main-content.dark .field-select:focus[b-2plovow76z] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.12);
    }

.main-content.dark .input-group .input-group-text[b-2plovow76z] {
    background: #0a1f2e;
    border-color: rgba(0, 188, 212, 0.2);
    color: #5a9aaa;
}

.main-content.dark .input-group:focus-within .input-group-text[b-2plovow76z] {
    border-color: #00bcd4;
}

.main-content.dark .photo-avatar[b-2plovow76z] {
    background: #0a2535;
    border-color: rgba(0,188,212,0.3);
    color: #00bcd4;
}

.main-content.dark .photo-upload-label[b-2plovow76z] {
    color: #5a8a9a;
}

.main-content.dark .photo-upload-btn:hover .photo-upload-label[b-2plovow76z] {
    color: #00bcd4;
}

.main-content.dark .role-btn[b-2plovow76z] {
    border-color: rgba(0,188,212,0.25);
    color: #7aadad;
}

    .main-content.dark .role-btn:hover[b-2plovow76z] {
        border-color: #00bcd4;
        color: #00bcd4;
    }

    .main-content.dark .role-btn.active[b-2plovow76z] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }

.main-content.dark .toggle-track[b-2plovow76z] {
    background: #1a3f4f;
}

.main-content.dark .toggle-switch input:checked + .toggle-track[b-2plovow76z] {
    background: #007c91;
}

.main-content.dark .toggle-label[b-2plovow76z] {
    color: #7aadad;
}

.main-content.dark .form-footer[b-2plovow76z] {
    border-top-color: rgba(255,255,255,0.07);
}

.main-content.dark .btn-cancel[b-2plovow76z] {
    color: #5a8a9a;
}

    .main-content.dark .btn-cancel:hover[b-2plovow76z] {
        color: #c8e4ea;
    }

.main-content.dark .col-divider[b-2plovow76z] {
    background: rgba(255, 255, 255, 0.07);
}

.register-col[b-2plovow76z] {
    max-width: 500px; /*500px*/
    margin-right: 150px;
}

/* Two Column Grid */
.register-grid[b-2plovow76z] {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | divider | right */
    gap: 0 2rem;
    align-items: start;
}

/* Vertical divider line between the two columns */
.col-divider[b-2plovow76z] {
    width: 1px;
    background: #e0e0e0;
    align-self: stretch;
    margin-top: 2rem;
}

/* Footer spans the full width below both columns */
.form-footer[b-2plovow76z] {
    grid-column: 1 / -1; 
}

@media (max-width: 768px) {
    .register-grid[b-2plovow76z] {
        grid-template-columns: 1fr;
    }

    .col-divider[b-2plovow76z] {
        width: 100%;
        height: 1px;
        margin: 0.5rem 0;
    }

    /*.register-page {*/
        /*padding: 1rem 0.75rem 2rem;*/
        /*padding: 0.15rem 0 2rem 0;
        margin: 1rem auto;
    }*/

    .page-title[b-2plovow76z] {
        font-size: 1.5rem;
    }

    .form-row[b-2plovow76z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .row-label[b-2plovow76z] {
        flex: none;
        width: 100%;
    }

    .row-input[b-2plovow76z] {
        width: 100%;
    }
}

/* Slide in animation */
@keyframes snackbar-in-b-2plovow76z {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Admin/BillingGoals.razor.rz.scp.css */
/* Page */
.employeeDirectory-page[b-rpwregl74e] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .employeeDirectory-page[b-rpwregl74e] {
    background: #081820;
    min-height: 100vh;
}

/* Breadcrumb */
.page-breadcrumb[b-rpwregl74e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-link[b-rpwregl74e] {
    color: #888;
    cursor: pointer;
}

    .crumb-link:hover[b-rpwregl74e] {
        color: #00bcd4;
    }

.crumb-sep[b-rpwregl74e] {
    opacity: 0.4;
}

.crumb-active[b-rpwregl74e] {
    color: #333;
    font-weight: 500;
}

.main-content.dark .page-breadcrumb[b-rpwregl74e] {
    color: #4a8a9a;
}

.main-content.dark .crumb-link[b-rpwregl74e] {
    color: #7ab8c8;
}

.main-content.dark .crumb-active[b-rpwregl74e] {
    color: #00bcd4;
}

/* Page Header */
.page-title[b-rpwregl74e] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-rpwregl74e] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .page-title[b-rpwregl74e] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .page-subtitle[b-rpwregl74e] {
    color: #7ab8c8;
}

/* Tabs */
.page-tabs[b-rpwregl74e] {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #d0e8ed;
    padding-bottom: 0;
}

.page-tab[b-rpwregl74e] {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5a8090;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s, border-color 0.2s;
}

    .page-tab:hover[b-rpwregl74e] {
        color: #007c91;
    }

    .page-tab.active[b-rpwregl74e] {
        color: #007c91;
        border-bottom-color: #007c91;
    }

.main-content.dark .page-tabs[b-rpwregl74e] {
    border-color: rgba(0, 188, 212, 0.2);
}

.main-content.dark .page-tab[b-rpwregl74e] {
    color: #4a8a9a;
}

    .main-content.dark .page-tab:hover[b-rpwregl74e] {
        color: #00bcd4;
    }

    .main-content.dark .page-tab.active[b-rpwregl74e] {
        color: #00bcd4;
        border-bottom-color: #00bcd4;
    }

/* Status Badge */
.status-badge[b-rpwregl74e] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
}

    .status-badge.active[b-rpwregl74e] {
        background: #e0f7f0;
        color: #00796b;
    }

    .status-badge.archived[b-rpwregl74e] {
        background: #f0f0f0;
        color: #888;
    }

    .status-badge.created[b-rpwregl74e] {
        background: #e0f7f0;
        color: #00796b;
    }

    .status-badge.updated[b-rpwregl74e] {
        background: #fff8e1;
        color: #b07800;
    }

    .status-badge.deleted[b-rpwregl74e] {
        background: #fdecea;
        color: #c0392b;
    }

.main-content.dark .status-badge.active[b-rpwregl74e] {
    background: rgba(0,188,150,0.15);
    color: #00e5b0;
}

.main-content.dark .status-badge.archived[b-rpwregl74e] {
    background: rgba(255,255,255,0.06);
    color: #7ab8c8;
}

.main-content.dark .status-badge.created[b-rpwregl74e] {
    background: rgba(0,188,150,0.15);
    color: #00e5b0;
}

.main-content.dark .status-badge.updated[b-rpwregl74e] {
    background: rgba(240,165,0,0.15);
    color: #ffc107;
}

.main-content.dark .status-badge.deleted[b-rpwregl74e] {
    background: rgba(231,76,60,0.15);
    color: #ff6b6b;
}


/* Goals Tabs */
.goals-tabs-row[b-rpwregl74e] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}

.goals-tab[b-rpwregl74e] {
    background: #ffffff;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.35rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5a8090;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}

    .goals-tab:hover[b-rpwregl74e] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.05);
    }

    .goals-tab.active[b-rpwregl74e] {
        background: #007c91;
        border-color: #007c91;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0,124,145,0.3);
    }

.main-content.dark .goals-tab[b-rpwregl74e] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .goals-tab:hover[b-rpwregl74e] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .goals-tab.active[b-rpwregl74e] {
        background: #007c91;
        border-color: #007c91;
        color: #ffffff;
    }

/* Log expand */
.btn-expand[b-rpwregl74e] {
    background: transparent;
    border: 1.5px solid #d0e8ed;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5a8090;
    font-size: 0.72rem;
    transition: all 0.15s;
}

    .btn-expand:hover[b-rpwregl74e] {
        border-color: #00bcd4;
        color: #00bcd4;
    }

    .btn-expand.open[b-rpwregl74e] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }

.log-expand-row td[b-rpwregl74e] {
    background: #f4fafc;
    padding: 10px 16px 14px !important;
}

.log-monthly-header[b-rpwregl74e] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5a8090;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-monthly-grid[b-rpwregl74e] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.log-month-cell[b-rpwregl74e] {
    background: #ffffff;
    border: 1px solid #d0e8ed;
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 110px;
}

.log-month-name[b-rpwregl74e] {
    font-size: 0.68rem;
    color: #5a8090;
    font-weight: 600;
    margin-bottom: 2px;
}

.log-month-val[b-rpwregl74e] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #007c91;
}

.main-content.dark .log-expand-row td[b-rpwregl74e] {
    background: #163040;
}

.main-content.dark .log-month-cell[b-rpwregl74e] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .log-month-name[b-rpwregl74e] {
    color: #7ab8c8;
}

.main-content.dark .log-month-val[b-rpwregl74e] {
    color: #00bcd4;
}

.status-badge.locked-status[b-rpwregl74e] {
    background: #fdecea;
    color: #c0392b;
}

.main-content.dark .status-badge.locked-status[b-rpwregl74e] {
    background: rgba(231,76,60,0.15);
    color: #ff6b6b;
}

.btn-edit:disabled[b-rpwregl74e],
.btn-delete:disabled[b-rpwregl74e] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Card */
.ua-card[b-rpwregl74e] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .ua-card[b-rpwregl74e]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
    }

.main-content.dark .ua-card[b-rpwregl74e] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,188,212,0.15), inset 0 1px 0 rgba(0,188,212,0.08);
}

/* Card Top */
.ua-card-top[b-rpwregl74e] {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transition: border-color 0.3s;
}

.ua-card-title[b-rpwregl74e] {
    font-size: 1rem;
    font-weight: 800;
    color: #0a1e28;
    transition: color 0.3s;
}

.ua-card-desc[b-rpwregl74e] {
    font-size: 0.72rem;
    color: #5a8090;
    margin-top: 0.15rem;
    transition: color 0.3s;
}

.ua-count-badge[b-rpwregl74e] {
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content.dark .ua-card-top[b-rpwregl74e] {
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-card-title[b-rpwregl74e] {
    color: #e4f6fa;
}

.main-content.dark .ua-card-desc[b-rpwregl74e] {
    color: #7ab8c8;
}

.main-content.dark .ua-count-badge[b-rpwregl74e] {
    box-shadow: 0 0 10px rgba(0,124,145,0.4);
}

/* Table */
.ua-table-wrap[b-rpwregl74e] {
    overflow-x: auto;
}

.ua-table[b-rpwregl74e] {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

thead tr[b-rpwregl74e] {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

thead th[b-rpwregl74e] {
    padding: 0;
    font-size: 0.67rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    position: relative;
}

.th-center[b-rpwregl74e] {
    text-align: center;
    width: 48px;
}

.th-filterable[b-rpwregl74e] {
    cursor: pointer;
}

.main-content.dark thead tr[b-rpwregl74e] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark thead th[b-rpwregl74e] {
    color: #00d4e8;
}

/* th inner */
.th-inner[b-rpwregl74e] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1.2rem;
    user-select: none;
    justify-content: center;
}

.th-filterable:hover .th-inner[b-rpwregl74e] {
    color: #00e5ff;
}

.th-arrow[b-rpwregl74e] {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.th-inner.open .th-arrow[b-rpwregl74e] {
    opacity: 1;
    transform: rotate(180deg);
    color: #00bcd4;
}

.th-inner.filtered .th-arrow[b-rpwregl74e] {
    opacity: 1;
    color: #00bcd4;
}

/* Table Rows */
tbody tr[b-rpwregl74e] {
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.15s, border-color 0.3s;
    height: 3.5rem;
}

    tbody tr:hover[b-rpwregl74e] {
        background: rgba(0,124,145,0.04);
    }

    tbody tr:last-child[b-rpwregl74e] {
        border-bottom: none;
    }

tbody td[b-rpwregl74e] {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #0a1e28;
    vertical-align: middle;
    text-align: center;
    transition: color 0.3s;
}

    tbody td:nth-child(8)[b-rpwregl74e] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.main-content.dark tbody tr[b-rpwregl74e] {
    border-color: rgba(0,188,212,0.1);
}

    .main-content.dark tbody tr:hover[b-rpwregl74e] {
        background: rgba(0,188,212,0.06);
    }

.main-content.dark tbody td[b-rpwregl74e] {
    color: #e4f6fa;
}

.td-num[b-rpwregl74e] {
    text-align: center;
    color: #9bb8c2;
    font-size: 0.72rem;
    font-weight: 600;
}

.td-year[b-rpwregl74e] {
    font-weight: 700;
    color: #007c91;
    text-align: center;
}

.td-dept[b-rpwregl74e] {
    color: #007c91;
    font-weight: 600;
}

.td-total[b-rpwregl74e] {
    font-weight: 800;
    text-align: center;
    color: #0a2535;
}

.td-center[b-rpwregl74e] {
    text-align: center;
}

.main-content.dark .td-num[b-rpwregl74e] {
    color: #4a8a9a;
}

.main-content.dark .td-year[b-rpwregl74e] {
    color: #00bcd4;
}

.main-content.dark .td-dept[b-rpwregl74e] {
    color: #00bcd4;
}

.main-content.dark .td-total[b-rpwregl74e] {
    color: #e4f6fa;
}

/* Action Buttons */
.action-btns[b-rpwregl74e] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Add Button */
.btn-add[b-rpwregl74e] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .btn-add:hover[b-rpwregl74e] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* Edit Button */
.btn-edit[b-rpwregl74e] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}

    .btn-edit:hover[b-rpwregl74e] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* Delete Button */
.btn-delete[b-rpwregl74e] {
    background: transparent;
    color: #e74c3c;
    border: 1.5px solid #e74c3c;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-delete:hover[b-rpwregl74e] {
        background: #e74c3c;
        color: #fff;
        transform: translateY(-1px);
    }

.main-content.dark .btn-delete[b-rpwregl74e] {
    color: #ff6b6b;
    border-color: #ff6b6b;
}

    .main-content.dark .btn-delete:hover[b-rpwregl74e] {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
    }

/* Empty Row */
.ua-empty[b-rpwregl74e] {
    text-align: center;
    padding: 2.5rem !important;
    color: #9bb8c2;
    font-size: 0.82rem;
}

.main-content.dark .ua-empty[b-rpwregl74e] {
    color: #4a8a9a;
}

/* Footer */
.ua-footer[b-rpwregl74e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.5rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    transition: background 0.3s, border-color 0.3s;
}

.ua-footer-info[b-rpwregl74e] {
    font-size: 0.72rem;
    color: #9bb8c2;
    font-weight: 600;
}

.main-content.dark .ua-footer[b-rpwregl74e] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-footer-info[b-rpwregl74e] {
    color: #4a8a9a;
}

/* Pagination */
.ua-pagination[b-rpwregl74e] {
    display: flex;
    gap: 0.3rem;
}

.pg-btn[b-rpwregl74e] {
    width: 30px;
    height: 30px;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    background: #ffffff;
    color: #5a8090;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
}

.pg-ellipsis[b-rpwregl74e] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: 13px;
    color: var(--text3, #94a3b8);
    user-select: none;
}

.pg-btn:hover:not(:disabled)[b-rpwregl74e] {
    border-color: #00bcd4;
    color: #00bcd4;
    background: rgba(0,188,212,0.07);
}

.pg-btn.active[b-rpwregl74e] {
    background: #007c91;
    border-color: #007c91;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,124,145,0.3);
}

.pg-btn:disabled[b-rpwregl74e] {
    opacity: 0.3;
    cursor: not-allowed;
}

.main-content.dark .pg-btn[b-rpwregl74e] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .pg-btn:hover:not(:disabled)[b-rpwregl74e] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .pg-btn.active[b-rpwregl74e] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Admin/EmployeeDirectory.razor.rz.scp.css */
/* Page */
.employeeDirectory-page[b-6iak8sctjk] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .employeeDirectory-page[b-6iak8sctjk] {
    background: #081820;
    min-height: 100vh;
}

/* Breadcrumb */
.page-breadcrumb[b-6iak8sctjk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-link[b-6iak8sctjk] {
    color: #888;
    cursor: pointer;
}

    .crumb-link:hover[b-6iak8sctjk] {
        color: #00bcd4;
    }

.crumb-sep[b-6iak8sctjk] {
    opacity: 0.4;
}

.crumb-active[b-6iak8sctjk] {
    color: #333;
    font-weight: 500;
}

.main-content.dark .page-breadcrumb[b-6iak8sctjk] {
    color: #4a8a9a;
}

.main-content.dark .crumb-link[b-6iak8sctjk] {
    color: #7ab8c8;
}

.main-content.dark .crumb-active[b-6iak8sctjk] {
    color: #00bcd4;
}

/* Page Header */
.page-title[b-6iak8sctjk] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-6iak8sctjk] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .page-title[b-6iak8sctjk] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .page-subtitle[b-6iak8sctjk] {
    color: #7ab8c8;
}

/* Toggle */
.td-toggle[b-6iak8sctjk] {
    width: 40px;
    text-align: center;
    padding: 0 !important;
}

.btn-toggle[b-6iak8sctjk] {
    background: transparent;
    border: 1.5px solid #d0e8ed;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007c91;
    font-size: 0.7rem;
    transition: all 0.2s;
}

    .btn-toggle:hover[b-6iak8sctjk] {
        background: rgba(0, 188, 212, 0.1);
        border-color: #00bcd4;
        color: #00bcd4;
    }

    .btn-toggle.open[b-6iak8sctjk] {
        background: rgba(0, 124, 145, 0.1);
        border-color: #007c91;
        color: #007c91;
    }

.main-content.dark .btn-toggle[b-6iak8sctjk] {
    border-color: rgba(0, 188, 212, 0.25);
    color: #00bcd4;
}

    .main-content.dark .btn-toggle:hover[b-6iak8sctjk],
    .main-content.dark .btn-toggle.open[b-6iak8sctjk] {
        background: rgba(0, 188, 212, 0.12);
        border-color: #00bcd4;
        color: #00e5ff;
    }

/* Year Group Row */
.tr-year-group[b-6iak8sctjk] {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed !important;
}

    .tr-year-group td[b-6iak8sctjk] {
        font-weight: 700;
    }

    .tr-year-group:hover[b-6iak8sctjk] {
        background: #eaf5f7 !important;
    }

.td-sum[b-6iak8sctjk] {
    color: #0a2535 !important;
    font-weight: 700 !important;
}

.main-content.dark .tr-year-group[b-6iak8sctjk] {
    background: #163040;
    border-color: rgba(0, 188, 212, 0.25) !important;
}

    .main-content.dark .tr-year-group:hover[b-6iak8sctjk] {
        background: #1a3a48 !important;
    }

.main-content.dark .td-sum[b-6iak8sctjk] {
    color: #e4f6fa !important;
}

/* Month Rows */
.tr-month-row[b-6iak8sctjk] {
    background: #ffffff;
    border-bottom: 1px dashed #d0e8ed !important;
}

    .tr-month-row:last-child[b-6iak8sctjk] {
        border-bottom: 1.5px solid #d0e8ed !important;
    }

    .tr-month-row:hover[b-6iak8sctjk] {
        background: rgba(0, 124, 145, 0.03) !important;
    }

.td-month-name[b-6iak8sctjk] {
    text-align: left !important;
    padding-left: 1.2rem !important;
}

.month-indent[b-6iak8sctjk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #5a8090;
    padding-left: 0.5rem;
    border-left: 2px solid #00bcd4;
}

.main-content.dark .tr-month-row[b-6iak8sctjk] {
    background: #1a3a48;
    border-color: rgba(0, 188, 212, 0.12) !important;
}

    .main-content.dark .tr-month-row:last-child[b-6iak8sctjk] {
        border-color: rgba(0, 188, 212, 0.25) !important;
    }

    .main-content.dark .tr-month-row:hover[b-6iak8sctjk] {
        background: rgba(0, 188, 212, 0.04) !important;
    }

.main-content.dark .month-indent[b-6iak8sctjk] {
    color: #7ab8c8;
    border-color: #00bcd4;
}

/* Month Name */
.td-month-name[b-6iak8sctjk] {
    text-align: center !important;
    padding-left: 0 !important;
}

.month-indent[b-6iak8sctjk] {
    justify-content: center;
}

/* Tabs */
.ua-tabs[b-6iak8sctjk] {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #d0e8ed;
    padding-bottom: 0;
}

.ua-tab[b-6iak8sctjk] {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5a8090;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s, border-color 0.2s;
}

    .ua-tab:hover[b-6iak8sctjk] {
        color: #007c91;
    }

    .ua-tab.active[b-6iak8sctjk] {
        color: #007c91;
        border-bottom-color: #007c91;
    }

.main-content.dark .ua-tabs[b-6iak8sctjk] {
    border-color: rgba(0, 188, 212, 0.2);
}

.main-content.dark .ua-tab[b-6iak8sctjk] {
    color: #4a8a9a;
}

    .main-content.dark .ua-tab:hover[b-6iak8sctjk] {
        color: #00bcd4;
    }

    .main-content.dark .ua-tab.active[b-6iak8sctjk] {
        color: #00bcd4;
        border-bottom-color: #00bcd4;
    }

/* Log Action Badges */
.log-badge[b-6iak8sctjk] {
    display: inline-block;
    padding: 0.18rem 0.65rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.log-add[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.12);
    color: #00a550;
}

.log-edit[b-6iak8sctjk] {
    background: rgba(0, 124, 145, 0.12);
    color: #007c91;
}

.log-delete[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
}

.main-content.dark .log-add[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.15);
    color: #00d468;
}

.main-content.dark .log-edit[b-6iak8sctjk] {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
}

.main-content.dark .log-delete[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
}

/* Log Month Label */
.log-month-label[b-6iak8sctjk] {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #5a8090;
    background: #eaf5f7;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
}

.main-content.dark .log-month-label[b-6iak8sctjk] {
    background: rgba(0, 188, 212, 0.1);
    color: #7ab8c8;
}

/* Log Timestamp */
.log-timestamp[b-6iak8sctjk] {
    font-size: 0.75rem;
    color: #5a8090;
    white-space: nowrap;
}

.main-content.dark .log-timestamp[b-6iak8sctjk] {
    color: #7ab8c8;
}

/* Log Changes */
.log-diff[b-6iak8sctjk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    flex-wrap: wrap;
    justify-content: center;
}

.log-old[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.08);
    color: #c0392b;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: monospace;
}

.log-new[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.08);
    color: #00894a;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: monospace;
}

.main-content.dark .log-old[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
}

.main-content.dark .log-new[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.15);
    color: #00d468;
}

/* Log Tags */
.log-tags-wrap[b-6iak8sctjk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.log-tag-row[b-6iak8sctjk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f4fafc;
    border: 1px solid #d0e8ed;
    border-radius: 20px;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

.log-tag-label[b-6iak8sctjk] {
    font-weight: 700;
    color: #007c91;
}

.log-tag-old[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: line-through;
}

.log-tag-new[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.1);
    color: #00894a;
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    font-weight: 600;
}

.log-tag-arrow[b-6iak8sctjk] {
    font-size: 0.6rem;
    color: #9bb8c2;
}

.main-content.dark .log-tag-row[b-6iak8sctjk] {
    background: #163040;
    border-color: rgba(0, 188, 212, 0.2);
}

.main-content.dark .log-tag-label[b-6iak8sctjk] {
    color: #00bcd4;
}

.main-content.dark .log-tag-old[b-6iak8sctjk] {
    background: rgba(231, 76, 60, 0.15);
    color: #ff6b6b;
}

.main-content.dark .log-tag-new[b-6iak8sctjk] {
    background: rgba(0, 188, 100, 0.15);
    color: #00d468;
}

/* Card */
.ua-card[b-6iak8sctjk] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .ua-card[b-6iak8sctjk]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
    }

.main-content.dark .ua-card[b-6iak8sctjk] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,188,212,0.15), inset 0 1px 0 rgba(0,188,212,0.08);
}

/* Card Top */
.ua-card-top[b-6iak8sctjk] {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transition: border-color 0.3s;
}

.ua-card-title[b-6iak8sctjk] {
    font-size: 1rem;
    font-weight: 800;
    color: #0a1e28;
    transition: color 0.3s;
}

.ua-card-desc[b-6iak8sctjk] {
    font-size: 0.72rem;
    color: #5a8090;
    margin-top: 0.15rem;
    transition: color 0.3s;
}

.ua-count-badge[b-6iak8sctjk] {
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content.dark .ua-card-top[b-6iak8sctjk] {
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-card-title[b-6iak8sctjk] {
    color: #e4f6fa;
}

.main-content.dark .ua-card-desc[b-6iak8sctjk] {
    color: #7ab8c8;
}

.main-content.dark .ua-count-badge[b-6iak8sctjk] {
    box-shadow: 0 0 10px rgba(0,124,145,0.4);
}

/* Table */
.ua-table-wrap[b-6iak8sctjk] {
    overflow-x: auto;
}

.ua-table[b-6iak8sctjk] {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

thead tr[b-6iak8sctjk] {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

thead th[b-6iak8sctjk] {
    padding: 0;
    font-size: 0.67rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    position: relative;
}

.th-center[b-6iak8sctjk] {
    text-align: center;
    width: 48px;
}

.th-filterable[b-6iak8sctjk] {
    cursor: pointer;
}

.main-content.dark thead tr[b-6iak8sctjk] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark thead th[b-6iak8sctjk] {
    color: #00d4e8;
}

/* th inner */
.th-inner[b-6iak8sctjk] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1.2rem;
    user-select: none;
    justify-content: center;
}

.th-filterable:hover .th-inner[b-6iak8sctjk] {
    color: #00e5ff;
}

.th-arrow[b-6iak8sctjk] {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.th-inner.open .th-arrow[b-6iak8sctjk] {
    opacity: 1;
    transform: rotate(180deg);
    color: #00bcd4;
}

.th-inner.filtered .th-arrow[b-6iak8sctjk] {
    opacity: 1;
    color: #00bcd4;
}

/* Table Rows */
tbody tr[b-6iak8sctjk] {
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.15s, border-color 0.3s;
    height: 3.5rem;
}

    tbody tr:hover[b-6iak8sctjk] {
        background: rgba(0,124,145,0.04);
    }

    tbody tr:last-child[b-6iak8sctjk] {
        border-bottom: none;
    }

tbody td[b-6iak8sctjk] {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #0a1e28;
    vertical-align: middle;
    text-align: center;
    transition: color 0.3s;
}

    tbody td:nth-child(8)[b-6iak8sctjk] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.main-content.dark tbody tr[b-6iak8sctjk] {
    border-color: rgba(0,188,212,0.1);
}

    .main-content.dark tbody tr:hover[b-6iak8sctjk] {
        background: rgba(0,188,212,0.06);
    }

.main-content.dark tbody td[b-6iak8sctjk] {
    color: #e4f6fa;
}

.td-num[b-6iak8sctjk] {
    text-align: center;
    color: #9bb8c2;
    font-size: 0.72rem;
    font-weight: 600;
}

.td-year[b-6iak8sctjk] {
    font-weight: 700;
    color: #007c91;
    text-align: center;
}

.td-dept[b-6iak8sctjk] {
    color: #007c91;
    font-weight: 600;
}

.td-total[b-6iak8sctjk] {
    font-weight: 800;
    text-align: center;
    color: #0a2535;
}

.td-center[b-6iak8sctjk] {
    text-align: center;
}

.main-content.dark .td-num[b-6iak8sctjk] {
    color: #4a8a9a;
}

.main-content.dark .td-year[b-6iak8sctjk] {
    color: #00bcd4;
}

.main-content.dark .td-dept[b-6iak8sctjk] {
    color: #00bcd4;
}

.main-content.dark .td-total[b-6iak8sctjk] {
    color: #e4f6fa;
}

/* Action Buttons */
.action-btns[b-6iak8sctjk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Add Button */
.btn-add[b-6iak8sctjk] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .btn-add:hover[b-6iak8sctjk] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* Edit Button */
.btn-edit[b-6iak8sctjk] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}

    .btn-edit:hover[b-6iak8sctjk] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* Delete Button */
.btn-delete[b-6iak8sctjk] {
    background: transparent;
    color: #e74c3c;
    border: 1.5px solid #e74c3c;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-delete:hover[b-6iak8sctjk] {
        background: #e74c3c;
        color: #fff;
        transform: translateY(-1px);
    }

.main-content.dark .btn-delete[b-6iak8sctjk] {
    color: #ff6b6b;
    border-color: #ff6b6b;
}

    .main-content.dark .btn-delete:hover[b-6iak8sctjk] {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
    }

/* Empty Row */
.ua-empty[b-6iak8sctjk] {
    text-align: center;
    padding: 2.5rem !important;
    color: #9bb8c2;
    font-size: 0.82rem;
}

.main-content.dark .ua-empty[b-6iak8sctjk] {
    color: #4a8a9a;
}

/* Footer */
.ua-footer[b-6iak8sctjk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.5rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    transition: background 0.3s, border-color 0.3s;
}

.ua-footer-info[b-6iak8sctjk] {
    font-size: 0.72rem;
    color: #9bb8c2;
    font-weight: 600;
}

.main-content.dark .ua-footer[b-6iak8sctjk] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-footer-info[b-6iak8sctjk] {
    color: #4a8a9a;
}

/* Pagination */
.ua-pagination[b-6iak8sctjk] {
    display: flex;
    gap: 0.3rem;
}

.pg-btn[b-6iak8sctjk] {
    width: 30px;
    height: 30px;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    background: #ffffff;
    color: #5a8090;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
}

.pg-ellipsis[b-6iak8sctjk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: 13px;
    color: var(--text3, #94a3b8);
    user-select: none;
}

.pg-btn:hover:not(:disabled)[b-6iak8sctjk] {
    border-color: #00bcd4;
    color: #00bcd4;
    background: rgba(0,188,212,0.07);
}

.pg-btn.active[b-6iak8sctjk] {
    background: #007c91;
    border-color: #007c91;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,124,145,0.3);
}

.pg-btn:disabled[b-6iak8sctjk] {
    opacity: 0.3;
    cursor: not-allowed;
}

.main-content.dark .pg-btn[b-6iak8sctjk] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .pg-btn:hover:not(:disabled)[b-6iak8sctjk] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .pg-btn.active[b-6iak8sctjk] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }


/* Employee Sub-Row */
.tr-employee-row[b-6iak8sctjk] {
    background: #f0f9fb;
    border-bottom: 1.5px solid #d0e8ed !important;
}

    .tr-employee-row td[b-6iak8sctjk] {
        padding: 1rem 1.5rem !important;
    }

.main-content.dark .tr-employee-row[b-6iak8sctjk] {
    background: #112838;
    border-color: rgba(0, 188, 212, 0.2) !important;
}

/* Employee Dept Wrap */
.emp-dept-wrap[b-6iak8sctjk] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

/* Employee Dept Group */
.emp-dept-group[b-6iak8sctjk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 160px;
}

/* Department Label */
.emp-dept-label[b-6iak8sctjk] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #007c91;
    border-bottom: 1.5px solid #d0e8ed;
    padding-bottom: 0.25rem;
}

.main-content.dark .emp-dept-label[b-6iak8sctjk] {
    color: #00bcd4;
    border-color: rgba(0, 188, 212, 0.25);
}

/* Employee Names Container */
.emp-names[b-6iak8sctjk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Employee Name Tag */
.emp-name-tag[b-6iak8sctjk] {
    background: #eaf5f7;
    color: #0a2535;
    border: 1px solid #d0e8ed;
    border-radius: 20px;
    padding: 0.18rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.main-content.dark .emp-name-tag[b-6iak8sctjk] {
    background: #163040;
    color: #e4f6fa;
    border-color: rgba(0, 188, 212, 0.2);
}

/* Empty State */
.emp-empty[b-6iak8sctjk] {
    font-size: 0.78rem;
    color: #9bb8c2;
    font-style: italic;
}

.main-content.dark .emp-empty[b-6iak8sctjk] {
    color: #4a8a9a;
}

/* Employee Cell — column-aligned */
.td-emp-cell[b-6iak8sctjk] {
    vertical-align: top !important;
    padding: 0.75rem 1.2rem !important;
    text-align: center !important;
}


    .td-emp-cell .emp-name-tag[b-6iak8sctjk] {
        display: block;
        margin-bottom: 0.3rem;
        text-align: center;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Admin/ProjectDirectory.razor.rz.scp.css */
/* Page */
/*.projectDirectory-page {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .projectDirectory-page {
    background: #081820;
    min-height: 100vh;
}*/

/* Breadcrumb */
/*.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-link {
    color: #888;
    cursor: pointer;
}

    .crumb-link:hover {
        color: #00bcd4;
    }

.crumb-sep {
    opacity: 0.4;
}

.crumb-active {
    color: #333;
    font-weight: 500;
}

.main-content.dark .page-breadcrumb {
    color: #4a8a9a;
}

.main-content.dark .crumb-link {
    color: #7ab8c8;
}

.main-content.dark .crumb-active {
    color: #00bcd4;
}*/

/* Page Header */
/*.page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .page-title {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .page-subtitle {
    color: #7ab8c8;
}*/

/* Card */
/*.ua-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .ua-card::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
    }

.main-content.dark .ua-card {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,188,212,0.15), inset 0 1px 0 rgba(0,188,212,0.08);
}*/

/* Card Top */
/*.ua-card-top {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transition: border-color 0.3s;
}

.ua-count-badge {
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content.dark .ua-card-top {
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-count-badge {
    box-shadow: 0 0 10px rgba(0,124,145,0.4);
}*/

/* Toolbar */
/*.ua-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: #f4fafc;
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

.main-content.dark .ua-toolbar {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.ua-search-box {
    position: relative;
}

.ua-search-input {
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 0.8rem;
    outline: none;
    background: #ffffff;
    color: #0a1e28;
    width: 260px;
    transition: border-color 0.2s, background 0.3s, color 0.3s;
    font-family: inherit;
}

    .ua-search-input:focus {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

    .ua-search-input::placeholder {
        color: #9bb8c2;
    }

.ua-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9bb8c2;
    font-size: 0.75rem;
    pointer-events: none;
}

.main-content.dark .ua-search-input {
    background: #1a3a48;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .ua-search-input::placeholder {
        color: #4a8a9a;
    }*/

/* Table */
/*.ua-table-wrap {
    overflow-x: auto;
}

.ua-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

thead tr {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

thead th {
    padding: 0;
    font-size: 0.67rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    position: relative;
}

.th-center {
    text-align: center;
    width: 48px;
}

.th-filterable {
    cursor: pointer;
}

.main-content.dark thead tr {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark thead th {
    color: #00d4e8;
}*/

/* th inner */
/*.th-inner {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1.2rem;
    user-select: none;
    justify-content: center;
}

.th-filterable:hover .th-inner {
    color: #00e5ff;
}

.th-arrow {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.th-inner.open .th-arrow {
    opacity: 1;
    transform: rotate(180deg);
    color: #00bcd4;
}

.th-inner.filtered .th-arrow {
    opacity: 1;
    color: #00bcd4;
}

.filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00bcd4;
    box-shadow: 0 0 5px #00bcd4;
    flex-shrink: 0;
}*/

/* Column Filter Dropdown */
/*.th-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 500;
    padding: 0.5rem 0;
    transition: background 0.3s;
}

.main-content.dark .th-dropdown {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dd-search {
    margin: 0 0.5rem 0.4rem;
    border: 1px solid #d0e8ed;
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-family: inherit;
    outline: none;
    background: #f4fafc;
    color: #0a1e28;
    width: calc(100% - 1rem);
}

    .dd-search::placeholder {
        color: #9bb8c2;
    }

.main-content.dark .dd-search {
    background: #163040;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .dd-search::placeholder {
        color: #4a8a9a;
    }

.dd-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    color: #0a1e28;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.12s;
}

    .dd-item:hover {
        background: rgba(0,124,145,0.07);
    }

    .dd-item input[type=checkbox] {
        accent-color: #007c91;
        cursor: pointer;
    }

    .dd-item label {
        cursor: pointer;
        flex: 1;
    }

.main-content.dark .dd-item {
    color: #e4f6fa;
}

    .main-content.dark .dd-item:hover {
        background: rgba(0,188,212,0.08);
    }

.dd-divider {
    height: 1px;
    background: #d0e8ed;
    margin: 0.3rem 0;
}

.main-content.dark .dd-divider {
    background: rgba(0,188,212,0.2);
}

.dd-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.2rem;
}

.dd-btn {
    flex: 1;
    padding: 0.3rem;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.dd-clear {
    background: #f4fafc;
    color: #5a8090;
    border: 1px solid #d0e8ed !important;
}

    .dd-clear:hover {
        background: #d0e8ed;
    }

.dd-apply {
    background: #007c91;
    color: #fff;
}

    .dd-apply:hover {
        background: #006070;
    }

.main-content.dark .dd-clear {
    background: #163040;
    color: #7ab8c8;
    border-color: rgba(0,188,212,0.2) !important;
}

    .main-content.dark .dd-clear:hover {
        background: rgba(0,188,212,0.1);
    }*/

/* Table Rows */
/*tbody tr {
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.15s, border-color 0.3s;
    height: 3.5rem;
}

    tbody tr:hover {
        background: rgba(0,124,145,0.04);
    }

    tbody tr:last-child {
        border-bottom: none;
    }

tbody td {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #0a1e28;
    vertical-align: middle;
    text-align: center;
    transition: color 0.3s;
}

    tbody td:nth-child(8) {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.main-content.dark tbody tr {
    border-color: rgba(0,188,212,0.1);
}

    .main-content.dark tbody tr:hover {
        background: rgba(0,188,212,0.06);
    }

.main-content.dark tbody td {
    color: #e4f6fa;
}

.td-num {
    text-align: center;
    color: #9bb8c2;
    font-size: 0.72rem;
    font-weight: 600;
}

.td-name {
    font-weight: 700;
}

.td-dept {
    color: #007c91;
    font-weight: 600;
}

.td-pos {
    font-size: 0.8rem;
    color: #5a8090;
}

.td-email {
    font-size: 0.78rem;
    color: #5a8090;
}

.td-center {
    text-align: center;
}

.main-content.dark .td-num {
    color: #4a8a9a;
}

.main-content.dark .td-dept {
    color: #00bcd4;
}

.main-content.dark .td-pos {
    color: #7ab8c8;
}

.main-content.dark .td-email {
    color: #7ab8c8;
}*/

/* Edit Button */
/*.btn-edit {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    min-width: 77px;*/ /*70px*/
    /*transition: opacity 0.2s, transform 0.15s;
}

    .btn-edit:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }*/

/* Empty Row*/
/*.ua-empty {
    text-align: center;
    padding: 2.5rem !important;
    color: #9bb8c2;
    font-size: 0.82rem;
}

.main-content.dark .ua-empty {
    color: #4a8a9a;
}*/

/* Footer */
/*.ua-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.5rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    transition: background 0.3s, border-color 0.3s;
}

.ua-footer-info {
    font-size: 0.72rem;
    color: #9bb8c2;
    font-weight: 600;
}

.main-content.dark .ua-footer {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-footer-info {
    color: #4a8a9a;
}*/

/* Pagination */
/*.ua-pagination {
    display: flex;
    gap: 0.3rem;
}

.pg-btn {
    width: 30px;
    height: 30px;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    background: #ffffff;
    color: #5a8090;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
}

.pg-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: 13px;
    color: var(--text3, #94a3b8);
    user-select: none;
}

    .pg-btn:hover:not(:disabled) {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.07);
    }

    .pg-btn.active {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0,124,145,0.3);
    }

    .pg-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

.main-content.dark .pg-btn {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .pg-btn:hover:not(:disabled) {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .pg-btn.active {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }*/

/* Top Actions */
/*.pd-top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.btn-add-job {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s, transform 0.15s;
}

    .btn-add-job:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

.main-content.dark .btn-add-job {
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.3);
}*/





/* ── Page ── */
.projectDirectory-page[b-c6jub801h6] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .projectDirectory-page[b-c6jub801h6] {
    background: #081820;
    min-height: 100vh;
}

/* ── Breadcrumb ── */
.page-breadcrumb[b-c6jub801h6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-c6jub801h6] {
    color: #333;
    font-weight: 500;
}

.main-content.dark .page-breadcrumb[b-c6jub801h6] {
    color: #4a8a9a;
}

.main-content.dark .crumb-active[b-c6jub801h6] {
    color: #00bcd4;
}

/* ── Page Header ── */
.page-title[b-c6jub801h6] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-c6jub801h6] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .page-title[b-c6jub801h6] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .page-subtitle[b-c6jub801h6] {
    color: #7ab8c8;
}

/* ── Card ── */
.ua-card[b-c6jub801h6] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .ua-card[b-c6jub801h6]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
    }

.main-content.dark .ua-card[b-c6jub801h6] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,188,212,0.15), inset 0 1px 0 rgba(0,188,212,0.08);
}

/* ── Card Top ── */
.ua-card-top[b-c6jub801h6] {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.3s;
}

.ua-count-badge[b-c6jub801h6] {
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content.dark .ua-card-top[b-c6jub801h6] {
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-count-badge[b-c6jub801h6] {
    box-shadow: 0 0 10px rgba(0,124,145,0.4);
}

/* ── Add Job Button ── */
.btn-add-job[b-c6jub801h6] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.4rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s, transform 0.15s;
}

    .btn-add-job:hover[b-c6jub801h6] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

.main-content.dark .btn-add-job[b-c6jub801h6] {
    box-shadow: 0 0 12px rgba(0,188,212,0.3);
}

/* ── Toolbar ── */
.ua-toolbar[b-c6jub801h6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: #f4fafc;
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

.main-content.dark .ua-toolbar[b-c6jub801h6] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.ua-search-box[b-c6jub801h6] {
    position: relative;
}

.ua-search-input[b-c6jub801h6] {
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 0.8rem;
    outline: none;
    background: #ffffff;
    color: #0a1e28;
    width: 260px;
    transition: border-color 0.2s, background 0.3s, color 0.3s;
    font-family: inherit;
}

    .ua-search-input:focus[b-c6jub801h6] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

    .ua-search-input[b-c6jub801h6]::placeholder {
        color: #9bb8c2;
    }

.ua-search-icon[b-c6jub801h6] {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9bb8c2;
    font-size: 0.75rem;
    pointer-events: none;
}

.main-content.dark .ua-search-input[b-c6jub801h6] {
    background: #1a3a48;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .ua-search-input[b-c6jub801h6]::placeholder {
        color: #4a8a9a;
    }

/* ── Table ── */
.ua-table-wrap[b-c6jub801h6] {
    overflow-x: auto;
}

.ua-table[b-c6jub801h6] {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

thead tr[b-c6jub801h6] {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

thead th[b-c6jub801h6] {
    padding: 0;
    font-size: 0.67rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    position: relative;
}

.th-center[b-c6jub801h6] {
    text-align: center;
    width: 48px;
}

.th-filterable[b-c6jub801h6] {
    cursor: pointer;
}

.main-content.dark thead tr[b-c6jub801h6] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark thead th[b-c6jub801h6] {
    color: #00d4e8;
}

/* ── th inner ── */
.th-inner[b-c6jub801h6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1.2rem;
    user-select: none;
    justify-content: center;
}

.th-filterable:hover .th-inner[b-c6jub801h6] {
    color: #00e5ff;
}

.th-arrow[b-c6jub801h6] {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.th-inner.open .th-arrow[b-c6jub801h6] {
    opacity: 1;
    transform: rotate(180deg);
    color: #00bcd4;
}

.th-inner.filtered .th-arrow[b-c6jub801h6] {
    opacity: 1;
    color: #00bcd4;
}

.filter-dot[b-c6jub801h6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00bcd4;
    box-shadow: 0 0 5px #00bcd4;
    flex-shrink: 0;
}

/* ── Column Filter Dropdown ── */
/*.th-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 500;
    padding: 0.5rem 0;
    transition: background 0.3s;
}*/
.th-dropdown[b-c6jub801h6] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 500;
    padding: 0.5rem 0;
    transition: background 0.3s;
    max-height: 280px;
    overflow-y: auto;
}

.main-content.dark .th-dropdown[b-c6jub801h6] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dd-search[b-c6jub801h6] {
    margin: 0 0.5rem 0.4rem;
    border: 1px solid #d0e8ed;
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-family: inherit;
    outline: none;
    background: #f4fafc;
    color: #0a1e28;
    width: calc(100% - 1rem);
}

    .dd-search[b-c6jub801h6]::placeholder {
        color: #9bb8c2;
    }

.main-content.dark .dd-search[b-c6jub801h6] {
    background: #163040;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .dd-search[b-c6jub801h6]::placeholder {
        color: #4a8a9a;
    }

.dd-item[b-c6jub801h6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    color: #0a1e28;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.12s;
}

    .dd-item:hover[b-c6jub801h6] {
        background: rgba(0,124,145,0.07);
    }

    .dd-item input[type=checkbox][b-c6jub801h6] {
        accent-color: #007c91;
        cursor: pointer;
    }

    .dd-item label[b-c6jub801h6] {
        cursor: pointer;
        flex: 1;
    }

.main-content.dark .dd-item[b-c6jub801h6] {
    color: #e4f6fa;
}

    .main-content.dark .dd-item:hover[b-c6jub801h6] {
        background: rgba(0,188,212,0.08);
    }

.dd-divider[b-c6jub801h6] {
    height: 1px;
    background: #d0e8ed;
    margin: 0.3rem 0;
}

.main-content.dark .dd-divider[b-c6jub801h6] {
    background: rgba(0,188,212,0.2);
}

.dd-actions[b-c6jub801h6] {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.2rem;
}

.dd-btn[b-c6jub801h6] {
    flex: 1;
    padding: 0.3rem;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.dd-clear[b-c6jub801h6] {
    background: #f4fafc;
    color: #5a8090;
    border: 1px solid #d0e8ed !important;
}

    .dd-clear:hover[b-c6jub801h6] {
        background: #d0e8ed;
    }

.dd-apply[b-c6jub801h6] {
    background: #007c91;
    color: #fff;
}

    .dd-apply:hover[b-c6jub801h6] {
        background: #006070;
    }

.main-content.dark .dd-clear[b-c6jub801h6] {
    background: #163040;
    color: #7ab8c8;
    border-color: rgba(0,188,212,0.2) !important;
}

    .main-content.dark .dd-clear:hover[b-c6jub801h6] {
        background: rgba(0,188,212,0.1);
    }

/* ── Table Rows ── */
tbody tr[b-c6jub801h6] {
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.15s, border-color 0.3s;
    height: 3.5rem;
}

    tbody tr:hover[b-c6jub801h6] {
        background: rgba(0,124,145,0.04);
    }

    tbody tr:last-child[b-c6jub801h6] {
        border-bottom: none;
    }

tbody td[b-c6jub801h6] {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #0a1e28;
    vertical-align: middle;
    text-align: center;
    transition: color 0.3s;
}

.main-content.dark tbody tr[b-c6jub801h6] {
    border-color: rgba(0,188,212,0.1);
}

    .main-content.dark tbody tr:hover[b-c6jub801h6] {
        background: rgba(0,188,212,0.06);
    }

.main-content.dark tbody td[b-c6jub801h6] {
    color: #e4f6fa;
}

.td-num[b-c6jub801h6] {
    text-align: center;
    color: #9bb8c2;
    font-size: 0.72rem;
    font-weight: 600;
}

.td-name[b-c6jub801h6] {
    font-weight: 700;
}

.td-dept[b-c6jub801h6] {
    color: #007c91;
    font-weight: 600;
}

.td-pos[b-c6jub801h6] {
    font-size: 0.8rem;
    color: #5a8090;
}

.td-email[b-c6jub801h6] {
    font-size: 0.78rem;
    color: #5a8090;
}

.td-center[b-c6jub801h6] {
    text-align: center;
}

.main-content.dark .td-num[b-c6jub801h6] {
    color: #4a8a9a;
}

.main-content.dark .td-dept[b-c6jub801h6] {
    color: #00bcd4;
}

.main-content.dark .td-pos[b-c6jub801h6] {
    color: #7ab8c8;
}

.main-content.dark .td-email[b-c6jub801h6] {
    color: #7ab8c8;
}

/* ── Edit Button ── */
.btn-edit[b-c6jub801h6] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    min-width: 77px;
    transition: opacity 0.2s, transform 0.15s;
}

    .btn-edit:hover[b-c6jub801h6] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* ── Empty Row ── */
.ua-empty[b-c6jub801h6] {
    text-align: center;
    padding: 2.5rem !important;
    color: #9bb8c2;
    font-size: 0.82rem;
}

.main-content.dark .ua-empty[b-c6jub801h6] {
    color: #4a8a9a;
}

/* ── Footer ── */
.ua-footer[b-c6jub801h6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.5rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    transition: background 0.3s, border-color 0.3s;
}

.ua-footer-info[b-c6jub801h6] {
    font-size: 0.72rem;
    color: #9bb8c2;
    font-weight: 600;
}

.main-content.dark .ua-footer[b-c6jub801h6] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-footer-info[b-c6jub801h6] {
    color: #4a8a9a;
}

/* ── Pagination ── */
.ua-pagination[b-c6jub801h6] {
    display: flex;
    gap: 0.3rem;
}

.pg-btn[b-c6jub801h6] {
    width: 30px;
    height: 30px;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    background: #ffffff;
    color: #5a8090;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
}

.pg-ellipsis[b-c6jub801h6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: 13px;
    color: var(--text3, #94a3b8);
    user-select: none;
}

.pg-btn:hover:not(:disabled)[b-c6jub801h6] {
    border-color: #00bcd4;
    color: #00bcd4;
    background: rgba(0,188,212,0.07);
}

.pg-btn.active[b-c6jub801h6] {
    background: #007c91;
    border-color: #007c91;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,124,145,0.3);
}

.pg-btn:disabled[b-c6jub801h6] {
    opacity: 0.3;
    cursor: not-allowed;
}

.main-content.dark .pg-btn[b-c6jub801h6] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .pg-btn:hover:not(:disabled)[b-c6jub801h6] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .pg-btn.active[b-c6jub801h6] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* Page */
.ua-page[b-jrueul0jef] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100%;
    transition: background 0.3s;
}

.main-content.dark .ua-page[b-jrueul0jef] {
    background: #081820;
    min-height: 100vh;
}

/* Breadcrumb */
.ua-breadcrumb[b-jrueul0jef] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-link[b-jrueul0jef] {
    color: #888;
    cursor: pointer;
}

    .crumb-link:hover[b-jrueul0jef] {
        color: #00bcd4;
    }

.crumb-sep[b-jrueul0jef] {
    opacity: 0.4;
}

.crumb-active[b-jrueul0jef] {
    color: #333;
    font-weight: 500;
}

.main-content.dark .ua-breadcrumb[b-jrueul0jef] {
    color: #4a8a9a;
}

.main-content.dark .crumb-link[b-jrueul0jef] {
    color: #7ab8c8;
}

.main-content.dark .crumb-active[b-jrueul0jef] {
    color: #00bcd4;
}

/* Page Header */
.ua-title[b-jrueul0jef] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.ua-subtitle[b-jrueul0jef] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

.main-content.dark .ua-title[b-jrueul0jef] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

.main-content.dark .ua-subtitle[b-jrueul0jef] {
    color: #7ab8c8;
}

/* Active Filter Chip */
.active-filters[b-jrueul0jef] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    min-height: 24px;
}

.filter-chip[b-jrueul0jef] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
}

    .filter-chip:hover[b-jrueul0jef] {
        background: #005a6a;
    }

/* Card */
.ua-card[b-jrueul0jef] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 8px 32px rgba(0,124,145,0.14);
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

    .ua-card[b-jrueul0jef]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91 0%, #00bcd4 50%, #00e5ff 100%);
    }

.main-content.dark .ua-card[b-jrueul0jef] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,188,212,0.15), inset 0 1px 0 rgba(0,188,212,0.08);
}

/* Card Top */
.ua-card-top[b-jrueul0jef] {
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    transition: border-color 0.3s;
}

.ua-card-title[b-jrueul0jef] {
    font-size: 1rem;
    font-weight: 800;
    color: #0a1e28;
    transition: color 0.3s;
}

.ua-card-desc[b-jrueul0jef] {
    font-size: 0.72rem;
    color: #5a8090;
    margin-top: 0.15rem;
    transition: color 0.3s;
}

.ua-count-badge[b-jrueul0jef] {
    background: #007c91;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.main-content.dark .ua-card-top[b-jrueul0jef] {
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-card-title[b-jrueul0jef] {
    color: #e4f6fa;
}

.main-content.dark .ua-card-desc[b-jrueul0jef] {
    color: #7ab8c8;
}

.main-content.dark .ua-count-badge[b-jrueul0jef] {
    box-shadow: 0 0 10px rgba(0,124,145,0.4);
}

/* Toolbar */
.ua-toolbar[b-jrueul0jef] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: #f4fafc;
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

.main-content.dark .ua-toolbar[b-jrueul0jef] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.ua-search-box[b-jrueul0jef] {
    position: relative;
}

.ua-search-input[b-jrueul0jef] {
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 0.8rem;
    outline: none;
    background: #ffffff;
    color: #0a1e28;
    width: 260px;
    transition: border-color 0.2s, background 0.3s, color 0.3s;
    font-family: inherit;
}

    .ua-search-input:focus[b-jrueul0jef] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

    .ua-search-input[b-jrueul0jef]::placeholder {
        color: #9bb8c2;
    }

.ua-search-icon[b-jrueul0jef] {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9bb8c2;
    font-size: 0.75rem;
    pointer-events: none;
}

.main-content.dark .ua-search-input[b-jrueul0jef] {
    background: #1a3a48;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .ua-search-input[b-jrueul0jef]::placeholder {
        color: #4a8a9a;
    }

/* Table */
.ua-table-wrap[b-jrueul0jef] {
    overflow-x: auto;
}

.ua-table[b-jrueul0jef] {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

thead tr[b-jrueul0jef] {
    background: #f4fafc;
    border-bottom: 1.5px solid #d0e8ed;
    transition: background 0.3s, border-color 0.3s;
}

thead th[b-jrueul0jef] {
    padding: 0;
    font-size: 0.67rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    white-space: nowrap;
    position: relative;
}

.th-center[b-jrueul0jef] {
    text-align: center;
    width: 48px;
}

.th-filterable[b-jrueul0jef] {
    cursor: pointer;
}

.main-content.dark thead tr[b-jrueul0jef] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark thead th[b-jrueul0jef] {
    color: #00d4e8;
}

/* th inner */
.th-inner[b-jrueul0jef] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 1.2rem;
    user-select: none;
    justify-content: center;
}

.th-filterable:hover .th-inner[b-jrueul0jef] {
    color: #00e5ff;
}

.th-arrow[b-jrueul0jef] {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s;
}

.th-inner.open .th-arrow[b-jrueul0jef] {
    opacity: 1;
    transform: rotate(180deg);
    color: #00bcd4;
}

.th-inner.filtered .th-arrow[b-jrueul0jef] {
    opacity: 1;
    color: #00bcd4;
}

.filter-dot[b-jrueul0jef] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00bcd4;
    box-shadow: 0 0 5px #00bcd4;
    flex-shrink: 0;
}

/* Column Filter Dropdown */
.th-dropdown[b-jrueul0jef] {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1.5px solid #d0e8ed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 500;
    padding: 0.5rem 0;
    transition: background 0.3s;
}

.main-content.dark .th-dropdown[b-jrueul0jef] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dd-search[b-jrueul0jef] {
    margin: 0 0.5rem 0.4rem;
    border: 1px solid #d0e8ed;
    border-radius: 7px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-family: inherit;
    outline: none;
    background: #f4fafc;
    color: #0a1e28;
    width: calc(100% - 1rem);
}

    .dd-search[b-jrueul0jef]::placeholder {
        color: #9bb8c2;
    }

.main-content.dark .dd-search[b-jrueul0jef] {
    background: #163040;
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

    .main-content.dark .dd-search[b-jrueul0jef]::placeholder {
        color: #4a8a9a;
    }

.dd-item[b-jrueul0jef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    color: #0a1e28;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.12s;
}

    .dd-item:hover[b-jrueul0jef] {
        background: rgba(0,124,145,0.07);
    }

    .dd-item input[type=checkbox][b-jrueul0jef] {
        accent-color: #007c91;
        cursor: pointer;
    }

    .dd-item label[b-jrueul0jef] {
        cursor: pointer;
        flex: 1;
    }

.main-content.dark .dd-item[b-jrueul0jef] {
    color: #e4f6fa;
}

    .main-content.dark .dd-item:hover[b-jrueul0jef] {
        background: rgba(0,188,212,0.08);
    }

.dd-divider[b-jrueul0jef] {
    height: 1px;
    background: #d0e8ed;
    margin: 0.3rem 0;
}

.main-content.dark .dd-divider[b-jrueul0jef] {
    background: rgba(0,188,212,0.2);
}

.dd-actions[b-jrueul0jef] {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.2rem;
}

.dd-btn[b-jrueul0jef] {
    flex: 1;
    padding: 0.3rem;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}

.dd-clear[b-jrueul0jef] {
    background: #f4fafc;
    color: #5a8090;
    border: 1px solid #d0e8ed !important;
}

    .dd-clear:hover[b-jrueul0jef] {
        background: #d0e8ed;
    }

.dd-apply[b-jrueul0jef] {
    background: #007c91;
    color: #fff;
}

    .dd-apply:hover[b-jrueul0jef] {
        background: #006070;
    }

.main-content.dark .dd-clear[b-jrueul0jef] {
    background: #163040;
    color: #7ab8c8;
    border-color: rgba(0,188,212,0.2) !important;
}

    .main-content.dark .dd-clear:hover[b-jrueul0jef] {
        background: rgba(0,188,212,0.1);
    }

/* Table Rows */
tbody tr[b-jrueul0jef] {
    border-bottom: 1px solid #d0e8ed;
    transition: background 0.15s, border-color 0.3s;
    height: 3.5rem;
}

    tbody tr:hover[b-jrueul0jef] {
        background: rgba(0,124,145,0.04);
    }

    tbody tr:last-child[b-jrueul0jef] {
        border-bottom: none;
    }

tbody td[b-jrueul0jef] {
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #0a1e28;
    vertical-align: middle;
    text-align: center;
    transition: color 0.3s;
}

    tbody td:nth-child(8)[b-jrueul0jef] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

.main-content.dark tbody tr[b-jrueul0jef] {
    border-color: rgba(0,188,212,0.1);
}

    .main-content.dark tbody tr:hover[b-jrueul0jef] {
        background: rgba(0,188,212,0.06);
    }

.main-content.dark tbody td[b-jrueul0jef] {
    color: #e4f6fa;
}

.td-num[b-jrueul0jef] {
    text-align: center;
    color: #9bb8c2;
    font-size: 0.72rem;
    font-weight: 600;
}

.td-name[b-jrueul0jef] {
    font-weight: 700;
}

.td-dept[b-jrueul0jef] {
    color: #007c91;
    font-weight: 600;
}

.td-pos[b-jrueul0jef] {
    font-size: 0.8rem;
    color: #5a8090;
}

.td-email[b-jrueul0jef] {
    font-size: 0.78rem;
    color: #5a8090;
}

.td-center[b-jrueul0jef] {
    text-align: center;
}

.main-content.dark .td-num[b-jrueul0jef] {
    color: #4a8a9a;
}

.main-content.dark .td-dept[b-jrueul0jef] {
    color: #00bcd4;
}

.main-content.dark .td-pos[b-jrueul0jef] {
    color: #7ab8c8;
}

.main-content.dark .td-email[b-jrueul0jef] {
    color: #7ab8c8;
}

/* Status Badges */
.badge-active[b-jrueul0jef] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0,180,100,0.1);
    color: #00875a;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(0,180,100,0.2);
    white-space: nowrap;
}

.badge-inactive[b-jrueul0jef] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(144,164,174,0.1);
    color: #78909c;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(144,164,174,0.2);
    white-space: nowrap;
}

.bdot[b-jrueul0jef] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00b464;
    animation: bdot-pulse-b-jrueul0jef 2s infinite;
    display: inline-block;
    flex-shrink: 0;
}

.badge-inactive .bdot[b-jrueul0jef] {
    background: #90a4ae;
    animation: none;
}

@keyframes bdot-pulse-b-jrueul0jef {
    0%,100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.main-content.dark .badge-active[b-jrueul0jef] {
    background: rgba(0,230,118,0.1);
    color: #00e676;
    border-color: rgba(0,230,118,0.2);
}

    .main-content.dark .badge-active .bdot[b-jrueul0jef] {
        background: #00e676;
        box-shadow: 0 0 5px #00e676;
    }

.main-content.dark .badge-inactive[b-jrueul0jef] {
    background: rgba(255,255,255,0.05);
    color: #546e7a;
    border-color: rgba(255,255,255,0.08);
}

/* Edit Button */
.btn-edit[b-jrueul0jef] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    min-width: 77px; /*70px*/
    transition: opacity 0.2s, transform 0.15s;
}

    .btn-edit:hover[b-jrueul0jef] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

.btn-status[b-jrueul0jef] {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.03em;
    min-width: 77px;
    transition: opacity 0.2s, transform 0.15s;
}

    .btn-status:hover[b-jrueul0jef] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

/* Empty Row*/
.ua-empty[b-jrueul0jef] {
    text-align: center;
    padding: 2.5rem !important;
    color: #9bb8c2;
    font-size: 0.82rem;
}

.main-content.dark .ua-empty[b-jrueul0jef] {
    color: #4a8a9a;
}

/* Footer */
.ua-footer[b-jrueul0jef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.5rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    transition: background 0.3s, border-color 0.3s;
}

.ua-footer-info[b-jrueul0jef] {
    font-size: 0.72rem;
    color: #9bb8c2;
    font-weight: 600;
}

.main-content.dark .ua-footer[b-jrueul0jef] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

.main-content.dark .ua-footer-info[b-jrueul0jef] {
    color: #4a8a9a;
}

/* Pagination */
.ua-pagination[b-jrueul0jef] {
    display: flex;
    gap: 0.3rem;
}

.pg-btn[b-jrueul0jef] {
    width: 30px;
    height: 30px;
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    background: #ffffff;
    color: #5a8090;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
}

    .pg-btn:hover:not(:disabled)[b-jrueul0jef] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.07);
    }

    .pg-btn.active[b-jrueul0jef] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0,124,145,0.3);
    }

    .pg-btn:disabled[b-jrueul0jef] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.main-content.dark .pg-btn[b-jrueul0jef] {
    background: #1a3a48;
    border-color: rgba(0,188,212,0.2);
    color: #7ab8c8;
}

    .main-content.dark .pg-btn:hover:not(:disabled)[b-jrueul0jef] {
        border-color: #00bcd4;
        color: #00bcd4;
        background: rgba(0,188,212,0.08);
    }

    .main-content.dark .pg-btn.active[b-jrueul0jef] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/LineChart.razor.rz.scp.css */
.linechart-wrap[b-ys6y2rm5sa] {
    position: relative;
    width: 100%;
    padding-top: 0.5rem;
}

.linechart-empty[b-ys6y2rm5sa] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9bb8c2;
    font-size: 0.85rem;
    font-weight: 600;
}

.linechart-filters[b-ys6y2rm5sa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: 0.5rem;
    margin-bottom: 0.35rem;
}

    .linechart-filters .btn-light[b-ys6y2rm5sa] {
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.3rem 0.65rem;
        border-radius: 8px;
        background: #fff;
        border: 1.5px solid #d0e8ed;
        color: #007c91;
        font-family: inherit;
    }

        .linechart-filters .btn-light:hover[b-ys6y2rm5sa] {
            background: rgba(0,124,145,0.08);
        }

    .linechart-filters .form-select[b-ys6y2rm5sa] {
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.3rem 1.6rem 0.3rem 0.55rem;
        border-radius: 8px;
        border: 1.5px solid #d0e8ed;
        color: #0a2535;
        width: 120px;
    }

    .linechart-filters .text-muted[b-ys6y2rm5sa] {
        font-size: 0.68rem;
        font-weight: 700;
        color: #5a8090;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .linechart-filters .btn-outline-secondary[b-ys6y2rm5sa] {
        font-size: 0.68rem;
        font-weight: 700;
        padding: 0.28rem 0.6rem;
        border-radius: 8px;
        border: 1.5px solid #d0e8ed;
        color: #5a8090;
        font-family: inherit;
    }

        .linechart-filters .btn-outline-secondary:hover[b-ys6y2rm5sa] {
            background: rgba(0,124,145,0.08);
            color: #007c91;
        }

.linechart-team-dropdown[b-ys6y2rm5sa] {
    background-color: #fff;
    border-color: #d0e8ed !important;
}

    .linechart-team-dropdown .small[b-ys6y2rm5sa] {
        font-size: 0.72rem;
        font-weight: 600;
        color: #0a2535;
    }

/* Dark mode */
body.dark .linechart-filters .btn-light[b-ys6y2rm5sa] {
    background-color: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .linechart-filters .btn-light:hover[b-ys6y2rm5sa] {
        background-color: rgba(0,188,212,0.12);
    }

body.dark .linechart-filters .form-select[b-ys6y2rm5sa] {
    background-color: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #c8eef5;
}

    body.dark .linechart-filters .form-select option[b-ys6y2rm5sa] {
        background-color: #112233;
        color: #c8eef5;
    }

body.dark .linechart-filters .text-muted[b-ys6y2rm5sa] {
    color: #4a9aaa !important;
}

body.dark .linechart-filters .btn-outline-secondary[b-ys6y2rm5sa] {
    border-color: rgba(0,188,212,0.2);
    color: #4a9aaa;
}

    body.dark .linechart-filters .btn-outline-secondary:hover[b-ys6y2rm5sa] {
        background: rgba(0,188,212,0.08);
        color: #00bcd4;
    }

body.dark .linechart-team-dropdown[b-ys6y2rm5sa] {
    background-color: #112233 !important;
    border-color: rgba(0,188,212,0.2) !important;
}

    body.dark .linechart-team-dropdown .small[b-ys6y2rm5sa] {
        color: #c8eef5;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/Manager/Analytics.razor.rz.scp.css */
/* Page Wrap */
.page-wrap[b-mcrke2txkv] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-mcrke2txkv] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-mcrke2txkv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-mcrke2txkv] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-mcrke2txkv] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-mcrke2txkv] {
    color: #00bcd4;
}

/* Title & Subtitle */
.page-title[b-mcrke2txkv] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-mcrke2txkv] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-mcrke2txkv] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-mcrke2txkv] {
    color: #7ab8c8;
}

/* Filter Card */
.filter-card[b-mcrke2txkv] {
    border: 1px solid #d8eef2;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

body.dark .filter-card[b-mcrke2txkv] {
    border-color: #1a4a5a;
}

.filter-row[b-mcrke2txkv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    flex-wrap: wrap;
}

.filter-row-top[b-mcrke2txkv] {
    background: #fff;
    border-bottom: 1px solid #d8eef2;
}

body.dark .filter-row-top[b-mcrke2txkv] {
    background: #0d2b38;
    border-bottom-color: #1a4a5a;
}

.filter-row-bottom[b-mcrke2txkv] {
    background: #f5fbfc;
}

body.dark .filter-row-bottom[b-mcrke2txkv] {
    background: #081f2a;
}

.filter-label[b-mcrke2txkv] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.06em;
    margin-right: 0.2rem;
}

.filter-input[b-mcrke2txkv] {
    border: 1px solid #c8dfe6;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    color: #0a2535;
    background: #f5fbfc;
    width: 64px;
    outline: none;
    transition: border-color 0.2s;
}

    .filter-input:focus[b-mcrke2txkv] {
        border-color: #00bcd4;
    }

body.dark .filter-input[b-mcrke2txkv] {
    background: #112a35;
    color: #c8eaf0;
    border-color: #1e4a5a;
}

.filter-input.select-input[b-mcrke2txkv] {
    width: auto;
    min-width: 100px;
}

.range-sep[b-mcrke2txkv] {
    font-size: 0.78rem;
    color: #aaa;
}

.filter-spacer[b-mcrke2txkv] {
    flex: 1;
}

.filter-vsep[b-mcrke2txkv] {
    width: 1px;
    height: 20px;
    background: #d8eef2;
    flex-shrink: 0;
}

body.dark .filter-vsep[b-mcrke2txkv] {
    background: #1a4a5a;
}

/* Section checkboxes */
.filter-check-label[b-mcrke2txkv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-mcrke2txkv] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-mcrke2txkv] {
    color: #7ab8c8;
}

/* Filter Tab Capsule */
.filter-tab-capsule[b-mcrke2txkv] {
    display: inline-flex;
    background: #e8f4f6;
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

body.dark .filter-tab-capsule[b-mcrke2txkv] {
    background: #0a2535;
}

.filter-tab[b-mcrke2txkv] {
    border: none;
    background: transparent;
    border-radius: 16px;
    padding: 0.2rem 0.85rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #7a9faa;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.02em;
}

    .filter-tab:hover[b-mcrke2txkv] {
        color: #0097a7;
    }

    .filter-tab.active[b-mcrke2txkv] {
        background: #fff;
        color: #0097a7;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

body.dark .filter-tab[b-mcrke2txkv] {
    color: #4a8a9a;
}

    body.dark .filter-tab:hover[b-mcrke2txkv] {
        color: #00bcd4;
    }

    body.dark .filter-tab.active[b-mcrke2txkv] {
        background: #0d2b38;
        color: #00bcd4;
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

/* Year Error Popover */
.year-range-wrap[b-mcrke2txkv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .year-range-wrap.has-error .filter-input[b-mcrke2txkv] {
        border-color: #ef4444 !important;
    }

.year-error-popover[b-mcrke2txkv] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff5f5;
    color: #c0392b;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #fca5a5;
}

    /* Arrow — border layer (::before) + fill layer (::after) */
    .year-error-popover.arrow-from[b-mcrke2txkv]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 24px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fca5a5;
    }

    .year-error-popover.arrow-from[b-mcrke2txkv]::after {
        content: '';
        position: absolute;
        top: -4px;
        left: 25px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff5f5;
    }

    .year-error-popover.arrow-to[b-mcrke2txkv]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 95px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fca5a5;
    }

    .year-error-popover.arrow-to[b-mcrke2txkv]::after {
        content: '';
        position: absolute;
        top: -4px;
        left: 96px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff5f5;
    }

body.dark .year-error-popover[b-mcrke2txkv] {
    background: #2d1515;
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

    body.dark .year-error-popover.arrow-from[b-mcrke2txkv]::before {
        border-bottom-color: rgba(239,68,68,0.35);
    }

    body.dark .year-error-popover.arrow-from[b-mcrke2txkv]::after {
        border-bottom-color: #2d1515;
    }

    body.dark .year-error-popover.arrow-to[b-mcrke2txkv]::before {
        border-bottom-color: rgba(239,68,68,0.35);
    }

    body.dark .year-error-popover.arrow-to[b-mcrke2txkv]::after {
        border-bottom-color: #2d1515;
    }

/* Empty State */
.section-empty-state[b-mcrke2txkv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4rem 1rem;
}

    .section-empty-state i[b-mcrke2txkv] {
        font-size: 2rem;
        color: #c8dfe6;
    }

.section-empty-title[b-mcrke2txkv] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #7a9faa;
}

.section-empty-sub[b-mcrke2txkv] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .section-empty-state i[b-mcrke2txkv] {
    color: #1a4a5a;
}

body.dark .section-empty-title[b-mcrke2txkv] {
    color: #4a8a9a;
}

/* Disabled month filters */
.filter-label-disabled[b-mcrke2txkv] {
    opacity: 0.35;
    transition: opacity 0.2s;
}

.range-sep-disabled[b-mcrke2txkv] {
    opacity: 0.35;
    transition: opacity 0.2s;
}

.filter-input:disabled[b-mcrke2txkv],
select.filter-input:disabled[b-mcrke2txkv] {
    opacity: 0.35;
    cursor: not-allowed;
    background: #f0f4f5;
    color: #9ab5bc;
    border-color: #cde0e5;
    pointer-events: none;
}

body.dark .filter-input:disabled[b-mcrke2txkv],
body.dark select.filter-input:disabled[b-mcrke2txkv] {
    background: #0a1f28;
    color: #3a6070;
    border-color: #1a3a48;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/Manager/DetailingMiscellaneous/DetailingMiscellaneous.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-ym04v6prvq] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-ym04v6prvq] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-ym04v6prvq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-ym04v6prvq] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-ym04v6prvq] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-ym04v6prvq] {
    color: #00bcd4;
}

/* Title and SubTitle */
.page-title[b-ym04v6prvq] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-ym04v6prvq] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-ym04v6prvq] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-ym04v6prvq] {
    color: #7ab8c8;
}

/* Toolbar */
.toolbar-row[b-ym04v6prvq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-left[b-ym04v6prvq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.year-stepper[b-ym04v6prvq] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1.5px solid #c5dde4;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,124,145,0.08);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ys-btn[b-ym04v6prvq] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #007c91;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ys-btn:hover[b-ym04v6prvq] {
        background: rgba(0,124,145,0.08);
    }

.ys-val[b-ym04v6prvq] {
    padding: 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0a2535;
    border-left: 1px solid #d0e8ed;
    border-right: 1px solid #d0e8ed;
    min-width: 58px;
    text-align: center;
    line-height: 34px;
}

body.dark .year-stepper[b-ym04v6prvq] {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
}

body.dark .ys-btn[b-ym04v6prvq] {
    color: rgba(255,255,255,0.8);
}

    body.dark .ys-btn:hover[b-ym04v6prvq] {
        background: rgba(255,255,255,0.1);
    }

body.dark .ys-val[b-ym04v6prvq] {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

/* Main Tab */
.main-tabs-row[b-ym04v6prvq] {
    display: flex;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
    background: rgba(0,124,145,0.06);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    transition: background 0.3s, border-color 0.3s;
}

.main-tab[b-ym04v6prvq] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .main-tab:hover[b-ym04v6prvq] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .main-tab.active[b-ym04v6prvq] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .main-tabs-row[b-ym04v6prvq] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .main-tab[b-ym04v6prvq] {
    color: rgba(255,255,255,0.45);
}

    body.dark .main-tab:hover[b-ym04v6prvq] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .main-tab.active[b-ym04v6prvq] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    }

/* Sub-Tab */
.sub-tabs-row[b-ym04v6prvq] {
    display: inline-flex;
    gap: 2px;
    background: rgba(0,124,145,0.07);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 1rem;
    transition: background 0.3s;
}

.sub-tab[b-ym04v6prvq] {
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .sub-tab.active[b-ym04v6prvq] {
        background: #007c91;
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,124,145,0.25);
    }

body.dark .sub-tabs-row[b-ym04v6prvq] {
    background: rgba(0,0,0,0.2);
}

body.dark .sub-tab[b-ym04v6prvq] {
    color: rgba(255,255,255,0.45);
}

    body.dark .sub-tab.active[b-ym04v6prvq] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

/* Quarter */
.quarters[b-ym04v6prvq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qrow[b-ym04v6prvq] {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

.qlabel[b-ym04v6prvq] {
    width: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    padding: 0.4rem 0.3rem;
    gap: 0.2rem;
}

.q1[b-ym04v6prvq] {
    background: linear-gradient(160deg, #005f70, #007c91);
}

.q2[b-ym04v6prvq] {
    background: linear-gradient(160deg, #006d7e, #0097a7);
}

.q3[b-ym04v6prvq] {
    background: linear-gradient(160deg, #007a8e, #00acc1);
}

.q4[b-ym04v6prvq] {
    background: linear-gradient(160deg, #0088a0, #00bcd4);
}

.qcards[b-ym04v6prvq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
    flex: 1;
    min-width: 0;
}

body.dark .qlabel[b-ym04v6prvq] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Month Card */
.mcard[b-ym04v6prvq] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 1px 6px rgba(0,124,145,0.05);
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 0.65rem;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    min-width: 0;
}

    .mcard:hover[b-ym04v6prvq] {
        box-shadow: 0 4px 16px rgba(0,124,145,0.12);
        border-color: #a0cfd8;
    }

.mc-pie-wrap svg[b-ym04v6prvq],
.mc-svg-wrap svg[b-ym04v6prvq] {
    max-width: 100%;
    height: auto;
    display: block;
}

.mc-header[b-ym04v6prvq] {
    margin-bottom: 0.5rem;
}

.mc-mon[b-ym04v6prvq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a4a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-tot[b-ym04v6prvq] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-body[b-ym04v6prvq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    overflow: visible;
    width: 100%;
}

.mc-pie-wrap[b-ym04v6prvq] {
    overflow: visible;
}

body.dark .mcard[b-ym04v6prvq] {
    background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.22) 0%, transparent 70%), #112233;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,188,212,0.14);
}

    body.dark .mcard:hover[b-ym04v6prvq] {
        background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.30) 0%, transparent 70%), #112233;
        border-color: rgba(0,188,212,0.35);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.2);
    }

body.dark .mc-mon[b-ym04v6prvq] {
    color: #c8eef5;
}

body.dark .mc-tot[b-ym04v6prvq] {
    color: #00e5ff;
    text-shadow: 0 0 16px rgba(0,229,255,0.5);
}

/* Raw Card */
.raw-card[b-ym04v6prvq] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .raw-card[b-ym04v6prvq]::before {
        content: '';
        display: block;
        height: 3px;
        flex-shrink: 0;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

.raw-card-header[b-ym04v6prvq] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-card-title[b-ym04v6prvq] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.raw-card-meta[b-ym04v6prvq] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .raw-card[b-ym04v6prvq] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.1);
}

body.dark .raw-card-header[b-ym04v6prvq] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .raw-card-title[b-ym04v6prvq] {
    color: #00bcd4;
}

body.dark .raw-card-meta[b-ym04v6prvq] {
    color: #4a9aaa;
}

/* Line Chart */
.linechart-label-toggle[b-ym04v6prvq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: all 0.15s;
}

    .linechart-label-toggle:hover[b-ym04v6prvq] {
        color: #007c91;
        background: rgba(0, 124, 145, 0.08);
    }

    .linechart-label-toggle input[type="checkbox"][b-ym04v6prvq] {
        accent-color: #007c91;
        width: 13px;
        height: 13px;
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

:global(body.dark) .linechart-label-toggle[b-ym04v6prvq] {
    color: rgba(255, 255, 255, 0.45);
}

    :global(body.dark) .linechart-label-toggle:hover[b-ym04v6prvq] {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
    }

    :global(body.dark) .linechart-label-toggle input[type="checkbox"][b-ym04v6prvq] {
        accent-color: #00bcd4;
    }

/* Responsive */
@media (max-width: 1100px) {
    .qcards[b-ym04v6prvq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .page-wrap[b-ym04v6prvq] {
        padding: 0.15rem 0.1rem 3rem;
    }

    .qrow[b-ym04v6prvq] {
        flex-direction: column;
        gap: 8px;
    }

    .qlabel[b-ym04v6prvq] {
        width: 100%;
        min-height: unset;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .qcards[b-ym04v6prvq] {
        grid-template-columns: 1fr;
    }

    .toolbar-row[b-ym04v6prvq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-title[b-ym04v6prvq] {
        font-size: 1.5rem;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/Manager/DetailingStructural/DetailingStructural.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-7pffz1chiw] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-7pffz1chiw] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-7pffz1chiw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-7pffz1chiw] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-7pffz1chiw] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-7pffz1chiw] {
    color: #00bcd4;
}

/* Title and SubTitle */
.page-title[b-7pffz1chiw] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-7pffz1chiw] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-7pffz1chiw] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-7pffz1chiw] {
    color: #7ab8c8;
}

/* Toolbar */
.toolbar-row[b-7pffz1chiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-left[b-7pffz1chiw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.year-stepper[b-7pffz1chiw] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1.5px solid #c5dde4;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,124,145,0.08);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ys-btn[b-7pffz1chiw] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #007c91;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ys-btn:hover[b-7pffz1chiw] {
        background: rgba(0,124,145,0.08);
    }

.ys-val[b-7pffz1chiw] {
    padding: 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0a2535;
    border-left: 1px solid #d0e8ed;
    border-right: 1px solid #d0e8ed;
    min-width: 58px;
    text-align: center;
    line-height: 34px;
}

body.dark .year-stepper[b-7pffz1chiw] {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
}

body.dark .ys-btn[b-7pffz1chiw] {
    color: rgba(255,255,255,0.8);
}

    body.dark .ys-btn:hover[b-7pffz1chiw] {
        background: rgba(255,255,255,0.1);
    }

body.dark .ys-val[b-7pffz1chiw] {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

/* Main Tab */
.main-tabs-row[b-7pffz1chiw] {
    display: flex;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
    background: rgba(0,124,145,0.06);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    transition: background 0.3s, border-color 0.3s;
}

.main-tab[b-7pffz1chiw] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .main-tab:hover[b-7pffz1chiw] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .main-tab.active[b-7pffz1chiw] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .main-tabs-row[b-7pffz1chiw] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .main-tab[b-7pffz1chiw] {
    color: rgba(255,255,255,0.45);
}

    body.dark .main-tab:hover[b-7pffz1chiw] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .main-tab.active[b-7pffz1chiw] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    }

/* Sub-Tab */
.sub-tabs-row[b-7pffz1chiw] {
    display: inline-flex;
    gap: 2px;
    background: rgba(0,124,145,0.07);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 1rem;
    transition: background 0.3s;
}

.sub-tab[b-7pffz1chiw] {
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .sub-tab.active[b-7pffz1chiw] {
        background: #007c91;
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,124,145,0.25);
    }

body.dark .sub-tabs-row[b-7pffz1chiw] {
    background: rgba(0,0,0,0.2);
}

body.dark .sub-tab[b-7pffz1chiw] {
    color: rgba(255,255,255,0.45);
}

    body.dark .sub-tab.active[b-7pffz1chiw] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

/* Quarter */
.quarters[b-7pffz1chiw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qrow[b-7pffz1chiw] {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

.qlabel[b-7pffz1chiw] {
    width: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    padding: 0.4rem 0.3rem;
    gap: 0.2rem;
}

.q1[b-7pffz1chiw] {
    background: linear-gradient(160deg, #005f70, #007c91);
}

.q2[b-7pffz1chiw] {
    background: linear-gradient(160deg, #006d7e, #0097a7);
}

.q3[b-7pffz1chiw] {
    background: linear-gradient(160deg, #007a8e, #00acc1);
}

.q4[b-7pffz1chiw] {
    background: linear-gradient(160deg, #0088a0, #00bcd4);
}

.qcards[b-7pffz1chiw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
    flex: 1;
    min-width: 0;
}

body.dark .qlabel[b-7pffz1chiw] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Month Card */
.mcard[b-7pffz1chiw] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 1px 6px rgba(0,124,145,0.05);
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 0.65rem;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    min-width: 0;
}

    .mcard:hover[b-7pffz1chiw] {
        box-shadow: 0 4px 16px rgba(0,124,145,0.12);
        border-color: #a0cfd8;
    }

.mc-pie-wrap svg[b-7pffz1chiw],
.mc-svg-wrap svg[b-7pffz1chiw] {
    max-width: 100%;
    height: auto;
    display: block;
}

.mc-header[b-7pffz1chiw] {
    margin-bottom: 0.5rem;
}

.mc-mon[b-7pffz1chiw] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a4a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-tot[b-7pffz1chiw] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-body[b-7pffz1chiw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    overflow: visible;
    width: 100%;
}

.mc-pie-wrap[b-7pffz1chiw] {
    overflow: visible;
}

body.dark .mcard[b-7pffz1chiw] {
    background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.22) 0%, transparent 70%), #112233;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,188,212,0.14);
}

    body.dark .mcard:hover[b-7pffz1chiw] {
        background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.30) 0%, transparent 70%), #112233;
        border-color: rgba(0,188,212,0.35);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.2);
    }

body.dark .mc-mon[b-7pffz1chiw] {
    color: #c8eef5;
}

body.dark .mc-tot[b-7pffz1chiw] {
    color: #00e5ff;
    text-shadow: 0 0 16px rgba(0,229,255,0.5);
}

/* Raw Card */
.raw-card[b-7pffz1chiw] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .raw-card[b-7pffz1chiw]::before {
        content: '';
        display: block;
        height: 3px;
        flex-shrink: 0;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

.raw-card-header[b-7pffz1chiw] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-card-title[b-7pffz1chiw] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.raw-card-meta[b-7pffz1chiw] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .raw-card[b-7pffz1chiw] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.1);
}

body.dark .raw-card-header[b-7pffz1chiw] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .raw-card-title[b-7pffz1chiw] {
    color: #00bcd4;
}

body.dark .raw-card-meta[b-7pffz1chiw] {
    color: #4a9aaa;
}

/* Line Chart */
.linechart-label-toggle[b-7pffz1chiw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: all 0.15s;
}

    .linechart-label-toggle:hover[b-7pffz1chiw] {
        color: #007c91;
        background: rgba(0, 124, 145, 0.08);
    }

    .linechart-label-toggle input[type="checkbox"][b-7pffz1chiw] {
        accent-color: #007c91;
        width: 13px;
        height: 13px;
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

:global(body.dark) .linechart-label-toggle[b-7pffz1chiw] {
    color: rgba(255, 255, 255, 0.45);
}

    :global(body.dark) .linechart-label-toggle:hover[b-7pffz1chiw] {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
    }

    :global(body.dark) .linechart-label-toggle input[type="checkbox"][b-7pffz1chiw] {
        accent-color: #00bcd4;
    }

/* Responsive */
@media (max-width: 1100px) {
    .qcards[b-7pffz1chiw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .page-wrap[b-7pffz1chiw] {
        padding: 0.15rem 0.1rem 3rem;
    }

    .qrow[b-7pffz1chiw] {
        flex-direction: column;
        gap: 8px;
    }

    .qlabel[b-7pffz1chiw] {
        width: 100%;
        min-height: unset;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .qcards[b-7pffz1chiw] {
        grid-template-columns: 1fr;
    }

    .toolbar-row[b-7pffz1chiw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-title[b-7pffz1chiw] {
        font-size: 1.5rem;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/TopManagement/Analytics.razor.rz.scp.css */
/* Page Wrap */
.page-wrap[b-3ze9afdg4c] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-3ze9afdg4c] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-3ze9afdg4c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-3ze9afdg4c] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-3ze9afdg4c] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-3ze9afdg4c] {
    color: #00bcd4;
}

/* Title & Subtitle */
.page-title[b-3ze9afdg4c] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-3ze9afdg4c] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-3ze9afdg4c] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-3ze9afdg4c] {
    color: #7ab8c8;
}

/* Filter Card */
.filter-card[b-3ze9afdg4c] {
    border: 1px solid #d8eef2;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

body.dark .filter-card[b-3ze9afdg4c] {
    border-color: #1a4a5a;
}

.filter-row[b-3ze9afdg4c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    flex-wrap: wrap;
}

.filter-row-top[b-3ze9afdg4c] {
    background: #fff;
    border-bottom: 1px solid #d8eef2;
}

body.dark .filter-row-top[b-3ze9afdg4c] {
    background: #0d2b38;
    border-bottom-color: #1a4a5a;
}

.filter-row-bottom[b-3ze9afdg4c] {
    background: #f5fbfc;
}

body.dark .filter-row-bottom[b-3ze9afdg4c] {
    background: #081f2a;
}

.filter-label[b-3ze9afdg4c] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.06em;
    margin-right: 0.2rem;
}

.filter-input[b-3ze9afdg4c] {
    border: 1px solid #c8dfe6;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    color: #0a2535;
    background: #f5fbfc;
    width: 64px;
    outline: none;
    transition: border-color 0.2s;
}

    .filter-input:focus[b-3ze9afdg4c] {
        border-color: #00bcd4;
    }

body.dark .filter-input[b-3ze9afdg4c] {
    background: #112a35;
    color: #c8eaf0;
    border-color: #1e4a5a;
}

.filter-input.select-input[b-3ze9afdg4c] {
    width: auto;
    min-width: 100px;
}

.range-sep[b-3ze9afdg4c] {
    font-size: 0.78rem;
    color: #aaa;
}

.filter-spacer[b-3ze9afdg4c] {
    flex: 1;
}

.filter-vsep[b-3ze9afdg4c] {
    width: 1px;
    height: 20px;
    background: #d8eef2;
    flex-shrink: 0;
}

body.dark .filter-vsep[b-3ze9afdg4c] {
    background: #1a4a5a;
}

/* Section checkboxes */
.filter-check-label[b-3ze9afdg4c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-3ze9afdg4c] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-3ze9afdg4c] {
    color: #7ab8c8;
}

/* Filter Tab Capsule */
.filter-tab-capsule[b-3ze9afdg4c] {
    display: inline-flex;
    background: #e8f4f6;
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

body.dark .filter-tab-capsule[b-3ze9afdg4c] {
    background: #0a2535;
}

.filter-tab[b-3ze9afdg4c] {
    border: none;
    background: transparent;
    border-radius: 16px;
    padding: 0.2rem 0.85rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #7a9faa;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.02em;
}

    .filter-tab:hover[b-3ze9afdg4c] {
        color: #0097a7;
    }

    .filter-tab.active[b-3ze9afdg4c] {
        background: #fff;
        color: #0097a7;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

body.dark .filter-tab[b-3ze9afdg4c] {
    color: #4a8a9a;
}

    body.dark .filter-tab:hover[b-3ze9afdg4c] {
        color: #00bcd4;
    }

    body.dark .filter-tab.active[b-3ze9afdg4c] {
        background: #0d2b38;
        color: #00bcd4;
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

/* Year Error Popover */
.year-range-wrap[b-3ze9afdg4c] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .year-range-wrap.has-error .filter-input[b-3ze9afdg4c] {
        border-color: #ef4444 !important;
    }

.year-error-popover[b-3ze9afdg4c] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff5f5;
    color: #c0392b;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #fca5a5;
}

    /* Arrow — border layer (::before) + fill layer (::after) */
    .year-error-popover.arrow-from[b-3ze9afdg4c]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 24px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fca5a5;
    }

    .year-error-popover.arrow-from[b-3ze9afdg4c]::after {
        content: '';
        position: absolute;
        top: -4px;
        left: 25px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff5f5;
    }

    .year-error-popover.arrow-to[b-3ze9afdg4c]::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 95px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fca5a5;
    }

    .year-error-popover.arrow-to[b-3ze9afdg4c]::after {
        content: '';
        position: absolute;
        top: -4px;
        left: 96px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff5f5;
    }

body.dark .year-error-popover[b-3ze9afdg4c] {
    background: #2d1515;
    color: #fca5a5;
    border-color: rgba(239,68,68,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

    body.dark .year-error-popover.arrow-from[b-3ze9afdg4c]::before {
        border-bottom-color: rgba(239,68,68,0.35);
    }

    body.dark .year-error-popover.arrow-from[b-3ze9afdg4c]::after {
        border-bottom-color: #2d1515;
    }

    body.dark .year-error-popover.arrow-to[b-3ze9afdg4c]::before {
        border-bottom-color: rgba(239,68,68,0.35);
    }

    body.dark .year-error-popover.arrow-to[b-3ze9afdg4c]::after {
        border-bottom-color: #2d1515;
    }

/* Empty State */
.section-empty-state[b-3ze9afdg4c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4rem 1rem;
}

    .section-empty-state i[b-3ze9afdg4c] {
        font-size: 2rem;
        color: #c8dfe6;
    }

.section-empty-title[b-3ze9afdg4c] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #7a9faa;
}

.section-empty-sub[b-3ze9afdg4c] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .section-empty-state i[b-3ze9afdg4c] {
    color: #1a4a5a;
}

body.dark .section-empty-title[b-3ze9afdg4c] {
    color: #4a8a9a;
}

/* Disabled month filters */
.filter-label-disabled[b-3ze9afdg4c] {
    opacity: 0.35;
    transition: opacity 0.2s;
}

.range-sep-disabled[b-3ze9afdg4c] {
    opacity: 0.35;
    transition: opacity 0.2s;
}

.filter-input:disabled[b-3ze9afdg4c],
select.filter-input:disabled[b-3ze9afdg4c] {
    opacity: 0.35;
    cursor: not-allowed;
    background: #f0f4f5;
    color: #9ab5bc;
    border-color: #cde0e5;
    pointer-events: none;
}

body.dark .filter-input:disabled[b-3ze9afdg4c],
body.dark select.filter-input:disabled[b-3ze9afdg4c] {
    background: #0a1f28;
    color: #3a6070;
    border-color: #1a3a48;
}

.year-shift-btn[b-3ze9afdg4c] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #c8dfe6;
    background: #fff;
    color: #007c91;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

    .year-shift-btn:hover[b-3ze9afdg4c] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

body.dark .year-shift-btn[b-3ze9afdg4c] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .year-shift-btn:hover[b-3ze9afdg4c] {
        background: rgba(0,188,212,0.12);
        border-color: #00bcd4;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/TopManagement/DetailingMiscellaneous/DetailingMiscellaneous.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-ngznbapshb] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-ngznbapshb] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-ngznbapshb] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-ngznbapshb] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-ngznbapshb] {
    color: #00bcd4;
}

/* Title and SubTitle */
.page-title[b-ngznbapshb] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-ngznbapshb] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-ngznbapshb] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-ngznbapshb] {
    color: #7ab8c8;
}

/* Toolbar */
.toolbar-row[b-ngznbapshb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-left[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.year-stepper[b-ngznbapshb] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1.5px solid #c5dde4;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,124,145,0.08);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ys-btn[b-ngznbapshb] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #007c91;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ys-btn:hover[b-ngznbapshb] {
        background: rgba(0,124,145,0.08);
    }

.ys-val[b-ngznbapshb] {
    padding: 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0a2535;
    border-left: 1px solid #d0e8ed;
    border-right: 1px solid #d0e8ed;
    min-width: 58px;
    text-align: center;
    line-height: 34px;
}

.total-chip[b-ngznbapshb] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    background: rgba(0,124,145,0.08);
    border: 1px solid rgba(0,124,145,0.2);
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

body.dark .year-stepper[b-ngznbapshb] {
    background: rgba(255,255,255,0.10);
    /*backdrop-filter: blur(10px);*/
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
}

body.dark .ys-btn[b-ngznbapshb] {
    color: rgba(255,255,255,0.8);
}

    body.dark .ys-btn:hover[b-ngznbapshb] {
        background: rgba(255,255,255,0.1);
    }

body.dark .ys-val[b-ngznbapshb] {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

body.dark .total-chip[b-ngznbapshb] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
    box-shadow: none;
}

/* Main Tab */
.main-tabs-row[b-ngznbapshb] {
    display: flex;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
    background: rgba(0,124,145,0.06);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    transition: background 0.3s, border-color 0.3s;
}

.main-tab[b-ngznbapshb] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .main-tab:hover[b-ngznbapshb] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .main-tab.active[b-ngznbapshb] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .main-tabs-row[b-ngznbapshb] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .main-tab[b-ngznbapshb] {
    color: rgba(255,255,255,0.45);
}

    body.dark .main-tab:hover[b-ngznbapshb] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .main-tab.active[b-ngznbapshb] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    }

/* Sub-Tab */
.sub-tabs-row[b-ngznbapshb] {
    display: inline-flex;
    gap: 2px;
    background: rgba(0,124,145,0.07);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 1rem;
    transition: background 0.3s;
}

.sub-tab[b-ngznbapshb] {
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .sub-tab.active[b-ngznbapshb] {
        background: #007c91;
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,124,145,0.25);
    }

body.dark .sub-tabs-row[b-ngznbapshb] {
    background: rgba(0,0,0,0.2);
}

body.dark .sub-tab[b-ngznbapshb] {
    color: rgba(255,255,255,0.45);
}

    body.dark .sub-tab.active[b-ngznbapshb] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

/* Quarter */
.quarters[b-ngznbapshb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qrow[b-ngznbapshb] {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

.qlabel[b-ngznbapshb] {
    width: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    padding: 0.4rem 0.3rem;
    gap: 0.2rem;
}

.q1[b-ngznbapshb] {
    background: linear-gradient(160deg, #005f70, #007c91);
}

.q2[b-ngznbapshb] {
    background: linear-gradient(160deg, #006d7e, #0097a7);
}

.q3[b-ngznbapshb] {
    background: linear-gradient(160deg, #007a8e, #00acc1);
}

.q4[b-ngznbapshb] {
    background: linear-gradient(160deg, #0088a0, #00bcd4);
}

.qamt[b-ngznbapshb] {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
}

.qcards[b-ngznbapshb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
    flex: 1;
    min-width: 0;
}

body.dark .qlabel[b-ngznbapshb] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Month Card */
.mcard[b-ngznbapshb] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 1px 6px rgba(0,124,145,0.05);
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 0.65rem;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    min-width: 0;
}

    .mcard:hover[b-ngznbapshb] {
        box-shadow: 0 4px 16px rgba(0,124,145,0.12);
        border-color: #a0cfd8;
    }

.mc-pie-wrap svg[b-ngznbapshb],
.mc-svg-wrap svg[b-ngznbapshb] {
    max-width: 100%;
    height: auto;
    display: block;
}

.mc-header[b-ngznbapshb] {
    margin-bottom: 0.5rem;
}

.mc-mon[b-ngznbapshb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a4a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-tot[b-ngznbapshb] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-body[b-ngznbapshb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    overflow: visible;
    width: 100%;
}

.mc-pie-wrap[b-ngznbapshb] {
    overflow: visible;
}

body.dark .mcard[b-ngznbapshb] {
    background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.22) 0%, transparent 70%), #112233;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,188,212,0.14);
}

    body.dark .mcard:hover[b-ngznbapshb] {
        background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.30) 0%, transparent 70%), #112233;
        border-color: rgba(0,188,212,0.35);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.2);
    }

body.dark .mc-mon[b-ngznbapshb] {
    color: #c8eef5;
}

body.dark .mc-tot[b-ngznbapshb] {
    color: #00e5ff;
    text-shadow: 0 0 16px rgba(0,229,255,0.5);
}

/* Raw */
.btn-back[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0,124,145,0.1);
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 10px;
    padding: 0.42rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .btn-back:hover[b-ngznbapshb] {
        background: rgba(0,124,145,0.18);
    }

.btn-export[b-ngznbapshb] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    border: none;
    border-radius: 10px;
    padding: 0.42rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

/* Month Tab */
.month-tabs[b-ngznbapshb] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 0;
}

.month-tab[b-ngznbapshb] {
    padding: 0.3rem 0.75rem;
    border-radius: 9px 9px 0 0;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #d0e8ed;
    border-bottom: none;
    background: #f0f8fa;
    color: #5a8090;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
}

    .month-tab:hover:not(.active)[b-ngznbapshb] {
        color: #007c91;
        border-color: rgba(0,124,145,0.3);
    }

    .month-tab.active[b-ngznbapshb] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        border-color: #d0e8ed;
        position: relative;
        z-index: 2;
    }

body.dark .month-tab[b-ngznbapshb] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
    color: #4a9aaa;
}

    body.dark .month-tab.active[b-ngznbapshb] {
        background: rgba(0,188,212,0.12);
        color: #00e5ff;
        border-color: rgba(0,188,212,0.25);
    }

    body.dark .month-tab:hover:not(.active)[b-ngznbapshb] {
        color: #00bcd4;
        border-color: rgba(0,188,212,0.25);
    }

/* Raw Card */
.raw-card[b-ngznbapshb] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .raw-card[b-ngznbapshb]::before {
        content: '';
        display: block;
        height: 3px;
        flex-shrink: 0;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

.raw-card-header[b-ngznbapshb] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-card-title[b-ngznbapshb] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.raw-card-meta[b-ngznbapshb] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.badge-tm[b-ngznbapshb] {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
    border: 1px solid rgba(0,188,212,0.25);
}

.raw-toolbar[b-ngznbapshb] {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    background: #f9fcfd;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-wrap[b-ngznbapshb] {
    position: relative;
}

.search-input[b-ngznbapshb] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.3rem 0.65rem 0.3rem 1.8rem;
    font-size: 0.72rem;
    outline: none;
    background: #fff;
    color: #0a2535;
    width: 240px;
    font-family: inherit;
}

    .search-input:focus[b-ngznbapshb] {
        border-color: #00bcd4;
    }

.search-ico[b-ngznbapshb] {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9bb8c2;
    font-size: 0.68rem;
    pointer-events: none;
}

.raw-card-body[b-ngznbapshb] {
    flex: 1;
    overflow: auto;
}

body.dark .raw-card[b-ngznbapshb] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.1);
}

body.dark .raw-card-header[b-ngznbapshb] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .raw-card-title[b-ngznbapshb] {
    color: #00bcd4;
}

body.dark .raw-card-meta[b-ngznbapshb] {
    color: #4a9aaa;
}

body.dark .raw-toolbar[b-ngznbapshb] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .search-input[b-ngznbapshb] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .search-input[b-ngznbapshb]::placeholder {
        color: rgba(255,255,255,0.35);
    }

    body.dark .search-input:focus[b-ngznbapshb] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

/* Detail Table */
.detail-table[b-ngznbapshb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 600px;
}

    .detail-table th[b-ngznbapshb] {
        padding: 0.42rem 0.75rem;
        text-align: left;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .detail-table td[b-ngznbapshb] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

    .detail-table tr:last-child td[b-ngznbapshb] {
        border-bottom: none;
    }

    .detail-table tr:hover td[b-ngznbapshb] {
        background: rgba(0,124,145,0.03);
    }

.td-amt[b-ngznbapshb] {
    font-weight: 700;
}

body.dark .detail-table th[b-ngznbapshb] {
    background: rgba(0,188,212,0.08);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .detail-table td[b-ngznbapshb] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .detail-table tr:hover td[b-ngznbapshb] {
    background: rgba(0,188,212,0.05);
}

.detail-table2[b-ngznbapshb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 600px;
    table-layout: fixed;
}

    .detail-table2 th[b-ngznbapshb] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .detail-table2 td[b-ngznbapshb] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
    }

    .detail-table2 tr:last-child td[b-ngznbapshb] {
        border-bottom: none;
    }

    .detail-table2 tr:hover td[b-ngznbapshb] {
        background: rgba(0,124,145,0.03);
    }

    .detail-table2 td.td-wrap[b-ngznbapshb] {
        white-space: normal;
        word-break: break-word;
    }

.td-amt[b-ngznbapshb] {
    font-weight: 700;
}

body.dark .detail-table2 th[b-ngznbapshb] {
    background: rgba(0,188,212,0.08);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .detail-table2 td[b-ngznbapshb] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .detail-table2 tr:hover td[b-ngznbapshb] {
    background: rgba(0,188,212,0.05);
}

/* Efficiency view select */
.eff-view-wrap[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.eff-view-label[b-ngznbapshb] {
    font-size: 0.62rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eff-view-select[b-ngznbapshb] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.3rem 1.8rem 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23007c91' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s;
}

    .eff-view-select:focus[b-ngznbapshb] {
        border-color: #00bcd4;
    }

body.dark .eff-view-label[b-ngznbapshb] {
    color: #4a9aaa;
}

body.dark .eff-view-select[b-ngznbapshb] {
    background-color: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300bcd4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}


.raw-card-footer[b-ngznbapshb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-pg-btns[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.raw-pg-btn[b-ngznbapshb] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .raw-pg-btn:hover:not(:disabled)[b-ngznbapshb] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .raw-pg-btn:disabled[b-ngznbapshb] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .raw-card-footer[b-ngznbapshb] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .raw-pg-btn[b-ngznbapshb] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .raw-pg-btn:hover:not(:disabled)[b-ngznbapshb] {
        background: rgba(0,188,212,0.12);
        border-color: #00bcd4;
    }

.detail-table th[b-ngznbapshb],
.detail-table td[b-ngznbapshb] {
    text-align: center;
}

.tc[b-ngznbapshb] {
    text-align: center !important;
}

.tl[b-ngznbapshb] {
    text-align: left !important;
}

.tr[b-ngznbapshb] {
    text-align: right !important;
}

/* Line Chart */
.linechart-label-toggle[b-ngznbapshb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: all 0.15s;
}

    .linechart-label-toggle:hover[b-ngznbapshb] {
        color: #007c91;
        background: rgba(0, 124, 145, 0.08);
    }

    .linechart-label-toggle input[type="checkbox"][b-ngznbapshb] {
        accent-color: #007c91;
        width: 13px;
        height: 13px;
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

:global(body.dark) .linechart-label-toggle[b-ngznbapshb] {
    color: rgba(255, 255, 255, 0.45);
}

    :global(body.dark) .linechart-label-toggle:hover[b-ngznbapshb] {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
    }

    :global(body.dark) .linechart-label-toggle input[type="checkbox"][b-ngznbapshb] {
        accent-color: #00bcd4;
    }

/* Responsive */
@media (max-width: 1100px) {
    .qcards[b-ngznbapshb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .page-wrap[b-ngznbapshb] {
        padding: 0.15rem 0.1rem 3rem;
    }

    .qrow[b-ngznbapshb] {
        flex-direction: column;
        gap: 8px;
    }

    .qlabel[b-ngznbapshb] {
        width: 100%;
        min-height: unset;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .qamt[b-ngznbapshb] {
        font-size: 0.68rem;
        color: rgba(255,255,255,0.85);
    }

    .qcards[b-ngznbapshb] {
        grid-template-columns: 1fr;
    }

    .toolbar-row[b-ngznbapshb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-title[b-ngznbapshb] {
        font-size: 1.5rem;
    }

    .month-tabs[b-ngznbapshb] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .month-tab[b-ngznbapshb] {
        flex-shrink: 0;
    }

    .search-input[b-ngznbapshb] {
        width: 100%;
    }

    .raw-toolbar[b-ngznbapshb] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap[b-ngznbapshb] {
        width: 100%;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Billing/TopManagement/DetailingStructural/DetailingStructural.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-e4w2rlar97] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
    min-height: 100vh;
    transition: background 0.3s;
}

body.dark .page-wrap[b-e4w2rlar97] {
    background: #081820;
}

/* Breadcrumb */
.page-breadcrumb[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.crumb-active[b-e4w2rlar97] {
    color: #333;
    font-weight: 500;
}

body.dark .page-breadcrumb[b-e4w2rlar97] {
    color: #4a8a9a;
}

body.dark .crumb-active[b-e4w2rlar97] {
    color: #00bcd4;
}

/* Title and SubTitle */
.page-title[b-e4w2rlar97] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.page-subtitle[b-e4w2rlar97] {
    font-size: 0.85rem;
    color: #5a8090;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-width: 500px;
}

body.dark .page-wrap .page-title[b-e4w2rlar97] {
    color: #e4f6fa;
    text-shadow: 0 0 40px rgba(0,188,212,0.2);
}

body.dark .page-wrap .page-subtitle[b-e4w2rlar97] {
    color: #7ab8c8;
}

/* Toolbar */
.toolbar-row[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-left[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.year-stepper[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    border: 1.5px solid #c5dde4;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,124,145,0.08);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ys-btn[b-e4w2rlar97] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #007c91;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ys-btn:hover[b-e4w2rlar97] {
        background: rgba(0,124,145,0.08);
    }

.ys-val[b-e4w2rlar97] {
    padding: 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0a2535;
    border-left: 1px solid #d0e8ed;
    border-right: 1px solid #d0e8ed;
    min-width: 58px;
    text-align: center;
    line-height: 34px;
}

.total-chip[b-e4w2rlar97] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    background: rgba(0,124,145,0.08);
    border: 1px solid rgba(0,124,145,0.2);
    border-radius: 20px;
    padding: 0.25rem 0.85rem;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

body.dark .year-stepper[b-e4w2rlar97] {
    background: rgba(255,255,255,0.10);
    /*backdrop-filter: blur(10px);*/
    border-color: rgba(255,255,255,0.2);
    box-shadow: none;
}

body.dark .ys-btn[b-e4w2rlar97] {
    color: rgba(255,255,255,0.8);
}

    body.dark .ys-btn:hover[b-e4w2rlar97] {
        background: rgba(255,255,255,0.1);
    }

body.dark .ys-val[b-e4w2rlar97] {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
}

body.dark .total-chip[b-e4w2rlar97] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
    box-shadow: none;
}

/* Main Tab */
.main-tabs-row[b-e4w2rlar97] {
    display: flex;
    gap: 0;
    border-bottom: none;
    margin-bottom: 0;
    background: rgba(0,124,145,0.06);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    transition: background 0.3s, border-color 0.3s;
}

.main-tab[b-e4w2rlar97] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .main-tab:hover[b-e4w2rlar97] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .main-tab.active[b-e4w2rlar97] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .main-tabs-row[b-e4w2rlar97] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .main-tab[b-e4w2rlar97] {
    color: rgba(255,255,255,0.45);
}

    body.dark .main-tab:hover[b-e4w2rlar97] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .main-tab.active[b-e4w2rlar97] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    }

/* Sub-Tab */
.sub-tabs-row[b-e4w2rlar97] {
    display: inline-flex;
    gap: 2px;
    background: rgba(0,124,145,0.07);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 1rem;
    transition: background 0.3s;
}

.sub-tab[b-e4w2rlar97] {
    padding: 0.35rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .sub-tab.active[b-e4w2rlar97] {
        background: #007c91;
        color: #fff;
        box-shadow: 0 1px 6px rgba(0,124,145,0.25);
    }

body.dark .sub-tabs-row[b-e4w2rlar97] {
    background: rgba(0,0,0,0.2);
}

body.dark .sub-tab[b-e4w2rlar97] {
    color: rgba(255,255,255,0.45);
}

    body.dark .sub-tab.active[b-e4w2rlar97] {
        background: rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

/* Quarter */
.quarters[b-e4w2rlar97] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.qrow[b-e4w2rlar97] {
    display: flex;
    gap: 0.65rem;
    align-items: stretch;
}

.qlabel[b-e4w2rlar97] {
    width: 54px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    padding: 0.4rem 0.3rem;
    gap: 0.2rem;
}

.q1[b-e4w2rlar97] {
    background: linear-gradient(160deg, #005f70, #007c91);
}

.q2[b-e4w2rlar97] {
    background: linear-gradient(160deg, #006d7e, #0097a7);
}

.q3[b-e4w2rlar97] {
    background: linear-gradient(160deg, #007a8e, #00acc1);
}

.q4[b-e4w2rlar97] {
    background: linear-gradient(160deg, #0088a0, #00bcd4);
}

.qamt[b-e4w2rlar97] {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
}

.qcards[b-e4w2rlar97] {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
    flex: 1;
    min-width: 0;
}

body.dark .qlabel[b-e4w2rlar97] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Month Card */
.mcard[b-e4w2rlar97] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 1px 6px rgba(0,124,145,0.05);
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem 0.65rem;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    min-width: 0;
}

    .mcard:hover[b-e4w2rlar97] {
        box-shadow: 0 4px 16px rgba(0,124,145,0.12);
        border-color: #a0cfd8;
    }

.mc-pie-wrap svg[b-e4w2rlar97],
.mc-svg-wrap svg[b-e4w2rlar97] {
    max-width: 100%;
    height: auto;
    display: block;
}

.mc-header[b-e4w2rlar97] {
    margin-bottom: 0.5rem;
}

.mc-mon[b-e4w2rlar97] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a4a5a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-tot[b-e4w2rlar97] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-body[b-e4w2rlar97] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    overflow: visible;
    width: 100%;
}

.mc-pie-wrap[b-e4w2rlar97] {
    overflow: visible;
}

body.dark .mcard[b-e4w2rlar97] {
    background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.22) 0%, transparent 70%), #112233;
    border-color: rgba(0,188,212,0.2);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,188,212,0.14);
}

    body.dark .mcard:hover[b-e4w2rlar97] {
        background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,188,212,0.30) 0%, transparent 70%), #112233;
        border-color: rgba(0,188,212,0.35);
        box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.2);
    }

body.dark .mc-mon[b-e4w2rlar97] {
    color: #c8eef5;
}

body.dark .mc-tot[b-e4w2rlar97] {
    color: #00e5ff;
    text-shadow: 0 0 16px rgba(0,229,255,0.5);
}

/* Raw */
.btn-back[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0,124,145,0.1);
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 10px;
    padding: 0.42rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .btn-back:hover[b-e4w2rlar97] {
        background: rgba(0,124,145,0.18);
    }

.btn-export[b-e4w2rlar97] {
    background: linear-gradient(135deg, #007c91, #00bcd4);
    border: none;
    border-radius: 10px;
    padding: 0.42rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}

/* Month Tab */
.month-tabs[b-e4w2rlar97] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 0;
}

.month-tab[b-e4w2rlar97] {
    padding: 0.3rem 0.75rem;
    border-radius: 9px 9px 0 0;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #d0e8ed;
    border-bottom: none;
    background: #f0f8fa;
    color: #5a8090;
    font-family: inherit;
    transition: all 0.12s;
    white-space: nowrap;
}

    .month-tab:hover:not(.active)[b-e4w2rlar97] {
        color: #007c91;
        border-color: rgba(0,124,145,0.3);
    }

    .month-tab.active[b-e4w2rlar97] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        border-color: #d0e8ed;
        position: relative;
        z-index: 2;
    }

body.dark .month-tab[b-e4w2rlar97] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
    color: #4a9aaa;
}

    body.dark .month-tab.active[b-e4w2rlar97] {
        background: rgba(0,188,212,0.12);
        color: #00e5ff;
        border-color: rgba(0,188,212,0.25);
    }

    body.dark .month-tab:hover:not(.active)[b-e4w2rlar97] {
        color: #00bcd4;
        border-color: rgba(0,188,212,0.25);
    }

/* Raw Card */
.raw-card[b-e4w2rlar97] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

    .raw-card[b-e4w2rlar97]::before {
        content: '';
        display: block;
        height: 3px;
        flex-shrink: 0;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

.raw-card-header[b-e4w2rlar97] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-card-title[b-e4w2rlar97] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.raw-card-meta[b-e4w2rlar97] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.badge-tm[b-e4w2rlar97] {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
    border: 1px solid rgba(0,188,212,0.25);
}

.raw-toolbar[b-e4w2rlar97] {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    background: #f9fcfd;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.search-wrap[b-e4w2rlar97] {
    position: relative;
}

.search-input[b-e4w2rlar97] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.3rem 0.65rem 0.3rem 1.8rem;
    font-size: 0.72rem;
    outline: none;
    background: #fff;
    color: #0a2535;
    width: 240px;
    font-family: inherit;
}

    .search-input:focus[b-e4w2rlar97] {
        border-color: #00bcd4;
    }

.search-ico[b-e4w2rlar97] {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9bb8c2;
    font-size: 0.68rem;
    pointer-events: none;
}

.raw-card-body[b-e4w2rlar97] {
    flex: 1;
    overflow: auto;
}

body.dark .raw-card[b-e4w2rlar97] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,188,212,0.1);
}

body.dark .raw-card-header[b-e4w2rlar97] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .raw-card-title[b-e4w2rlar97] {
    color: #00bcd4;
}

body.dark .raw-card-meta[b-e4w2rlar97] {
    color: #4a9aaa;
}

body.dark .raw-toolbar[b-e4w2rlar97] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .search-input[b-e4w2rlar97] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .search-input[b-e4w2rlar97]::placeholder {
        color: rgba(255,255,255,0.35);
    }

    body.dark .search-input:focus[b-e4w2rlar97] {
        border-color: #00bcd4;
        box-shadow: 0 0 0 3px rgba(0,188,212,0.1);
    }

/* Detail Table */
.detail-table[b-e4w2rlar97] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 600px;
}

    .detail-table th[b-e4w2rlar97] {
        padding: 0.42rem 0.75rem;
        text-align: left;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .detail-table td[b-e4w2rlar97] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

    .detail-table tr:last-child td[b-e4w2rlar97] {
        border-bottom: none;
    }

    .detail-table tr:hover td[b-e4w2rlar97] {
        background: rgba(0,124,145,0.03);
    }

.td-amt[b-e4w2rlar97] {
    font-weight: 700;
}

body.dark .detail-table th[b-e4w2rlar97] {
    background: rgba(0,188,212,0.08);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .detail-table td[b-e4w2rlar97] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .detail-table tr:hover td[b-e4w2rlar97] {
    background: rgba(0,188,212,0.05);
}

.detail-table2[b-e4w2rlar97] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 600px;
    table-layout: fixed;
}

    .detail-table2 th[b-e4w2rlar97] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .detail-table2 td[b-e4w2rlar97] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
    }

    .detail-table2 tr:last-child td[b-e4w2rlar97] {
        border-bottom: none;
    }

    .detail-table2 tr:hover td[b-e4w2rlar97] {
        background: rgba(0,124,145,0.03);
    }

    .detail-table2 td.td-wrap[b-e4w2rlar97] {
        white-space: normal;
        word-break: break-word;
    }

.td-amt[b-e4w2rlar97] {
    font-weight: 700;
}

body.dark .detail-table2 th[b-e4w2rlar97] {
    background: rgba(0,188,212,0.08);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .detail-table2 td[b-e4w2rlar97] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .detail-table2 tr:hover td[b-e4w2rlar97] {
    background: rgba(0,188,212,0.05);
}

/* Efficiency view select */
.eff-view-wrap[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.eff-view-label[b-e4w2rlar97] {
    font-size: 0.62rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eff-view-select[b-e4w2rlar97] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.3rem 1.8rem 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23007c91' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s;
}

    .eff-view-select:focus[b-e4w2rlar97] {
        border-color: #00bcd4;
    }

body.dark .eff-view-label[b-e4w2rlar97] {
    color: #4a9aaa;
}

body.dark .eff-view-select[b-e4w2rlar97] {
    background-color: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300bcd4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}


.raw-card-footer[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: #f4fafc;
    flex-shrink: 0;
}

.raw-pg-btns[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.raw-pg-btn[b-e4w2rlar97] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .raw-pg-btn:hover:not(:disabled)[b-e4w2rlar97] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .raw-pg-btn:disabled[b-e4w2rlar97] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .raw-card-footer[b-e4w2rlar97] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .raw-pg-btn[b-e4w2rlar97] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .raw-pg-btn:hover:not(:disabled)[b-e4w2rlar97] {
        background: rgba(0,188,212,0.12);
        border-color: #00bcd4;
    }

.detail-table th[b-e4w2rlar97],
.detail-table td[b-e4w2rlar97] {
    text-align: center;
}

.tc[b-e4w2rlar97] {
    text-align: center !important;
}

.tl[b-e4w2rlar97] {
    text-align: left !important;
}

.tr[b-e4w2rlar97] {
    text-align: right !important;
}

/* Line Chart */
.linechart-label-toggle[b-e4w2rlar97] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: all 0.15s;
}

    .linechart-label-toggle:hover[b-e4w2rlar97] {
        color: #007c91;
        background: rgba(0, 124, 145, 0.08);
    }

    .linechart-label-toggle input[type="checkbox"][b-e4w2rlar97] {
        accent-color: #007c91;
        width: 13px;
        height: 13px;
        cursor: pointer;
        margin: 0;
        flex-shrink: 0;
    }

:global(body.dark) .linechart-label-toggle[b-e4w2rlar97] {
    color: rgba(255, 255, 255, 0.45);
}

    :global(body.dark) .linechart-label-toggle:hover[b-e4w2rlar97] {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.08);
    }

    :global(body.dark) .linechart-label-toggle input[type="checkbox"][b-e4w2rlar97] {
        accent-color: #00bcd4;
    }

/* Responsive */
@media (max-width: 1100px) {
    .qcards[b-e4w2rlar97] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .page-wrap[b-e4w2rlar97] {
        padding: 0.15rem 0.1rem 3rem;
    }

    .qrow[b-e4w2rlar97] {
        flex-direction: column;
        gap: 8px;
    }

    .qlabel[b-e4w2rlar97] {
        width: 100%;
        min-height: unset;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .qamt[b-e4w2rlar97] {
        font-size: 0.68rem;
        color: rgba(255,255,255,0.85);
    }

    .qcards[b-e4w2rlar97] {
        grid-template-columns: 1fr;
    }

    .toolbar-row[b-e4w2rlar97] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-title[b-e4w2rlar97] {
        font-size: 1.5rem;
    }

    .month-tabs[b-e4w2rlar97] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .month-tab[b-e4w2rlar97] {
        flex-shrink: 0;
    }

    .search-input[b-e4w2rlar97] {
        width: 100%;
    }

    .raw-toolbar[b-e4w2rlar97] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap[b-e4w2rlar97] {
        width: 100%;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Dashboard/MiscManager.razor.rz.scp.css */
/* Page Wrapper */
.home-page[b-9qy92x2nq6] {
    padding: 0.15rem 0.2rem 3rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Breadcrumb */
.breadcrumb-row[b-9qy92x2nq6] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
}

    .breadcrumb-row span[b-9qy92x2nq6] {
        color: #333;
        font-weight: 500;
    }

/* Hero */
.hero-row[b-9qy92x2nq6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.page-title[b-9qy92x2nq6] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
}

.hero-right[b-9qy92x2nq6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.year-filter[b-9qy92x2nq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .year-filter label[b-9qy92x2nq6] {
        font-size: 0.78rem;
        color: #666;
        font-weight: 500;
    }

    .year-filter select[b-9qy92x2nq6] {
        border: 1px solid #b0d8de;
        border-radius: 20px;
        padding: 0.25rem 0.8rem;
        font-size: 0.82rem;
        color: #0a2535;
        background: #fff;
        cursor: pointer;
        outline: none;
    }

.last-updated[b-9qy92x2nq6] {
    font-size: 0.72rem;
    color: #aaa;
}

    .last-updated span[b-9qy92x2nq6] {
        color: #007c91;
        font-weight: 500;
    }

/* Date Divider */
.date-divider-row[b-9qy92x2nq6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.6rem 0 1.4rem;
}

.date-text[b-9qy92x2nq6] {
    font-size: 0.82rem;
    color: #666;
    white-space: nowrap;
}

.divider-line[b-9qy92x2nq6] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #b0d8de 0%, transparent 100%);
}

/* Year Filter */
.year-nav-stack[b-9qy92x2nq6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.year-nav-up[b-9qy92x2nq6],
.year-nav-down[b-9qy92x2nq6] {
    background: none;
    border: 1px solid #b0d8de;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: #007c91;
    padding: 0;
    line-height: 0;
    transition: background 0.15s, color 0.15s;
}

.year-nav-up[b-9qy92x2nq6] {
    transform: rotate(90deg);
    padding-bottom: 2px;
}

.year-nav-down[b-9qy92x2nq6] {
    transform: rotate(-270deg);
    padding-bottom: 2px;
    padding-left: 2px;
}

    .year-nav-up:hover:not(:disabled)[b-9qy92x2nq6],
    .year-nav-down:hover:not(:disabled)[b-9qy92x2nq6] {
        background: #007c91;
        color: #fff;
    }

    .year-nav-up:disabled[b-9qy92x2nq6],
    .year-nav-down:disabled[b-9qy92x2nq6] {
        opacity: 0.25;
        cursor: not-allowed;
    }

/* Section Header */
.section-header[b-9qy92x2nq6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.section-header-title[b-9qy92x2nq6] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-divider[b-9qy92x2nq6] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,124,145,0.3) 0%, transparent 100%);
}

/* Grids */
.charts-2[b-9qy92x2nq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.charts-3[b-9qy92x2nq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Chart Cards */
.chart-header[b-9qy92x2nq6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

    .chart-header > div:first-child[b-9qy92x2nq6] {
        display: flex;
        flex-direction: column;
    }

.chart-card[b-9qy92x2nq6] {
    background: #fff;
    border-radius: 14px;
    padding: 1.2rem 1.4rem; /* 1.4rem 1.6rem;*/
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    min-width: 0;
}

.chart-title[b-9qy92x2nq6] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0a2535;
    margin-bottom: 0.25rem;
}

.chart-subtitle[b-9qy92x2nq6] {
    font-size: 0.72rem;
    color: #aaa;
}

.chart-placeholder[b-9qy92x2nq6] {
    height: 200px;
    background: linear-gradient(135deg, #e8f6f8 0%, #d0ecf0 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ab8c0;
    font-size: 0.82rem;
    border: 1px dashed #b0d8de;
}

.chart-card-wide[b-9qy92x2nq6] {
    flex: 2;
    min-width: 200px;
}

.chart-card-narrow[b-9qy92x2nq6] {
    flex: 1;
    width: 15px;
    min-width: 200px;
}

.chart-card-fixed[b-9qy92x2nq6] {
    flex: none;
}

.chart-card:not(.chart-card-wide)[b-9qy92x2nq6] {
    overflow: hidden;
}

.chart-card canvas[b-9qy92x2nq6] {
    max-width: 100%;
    display: block;
}

.charts-2 > .chart-card:not(.chart-card-wide)[b-9qy92x2nq6],
.charts-3 > .chart-card:not(.chart-card-wide)[b-9qy92x2nq6] {
    min-width: 0;
    flex: 1;
    max-width: 100%;
}

.charts-2 > .chart-card-wide[b-9qy92x2nq6],
.charts-3 > .chart-card-wide[b-9qy92x2nq6] {
    min-width: 0;
    max-width: 100%;
}

.charts-2 > .chart-card:not(.chart-card-wide)[b-9qy92x2nq6] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Legend */
.chart-legend[b-9qy92x2nq6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
    justify-content: center;
}

.legend-item[b-9qy92x2nq6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: #666;
}

.legend-dot[b-9qy92x2nq6] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Pie Chart */
.pie-wrap[b-9qy92x2nq6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5rem 0;
}

/* Bar Filter */
.bar-filter-row[b-9qy92x2nq6] {
    display: flex;
    align-items: center;
    gap: 6px; /*8px*/
    margin-bottom: 14px;
    flex-wrap: wrap;
    flex-shrink: 1;
}

.bar-filter-label[b-9qy92x2nq6] {
    font-size: 0.72rem;
    color: #666;
    font-weight: 500;
}

.bar-filter-sep[b-9qy92x2nq6] {
    font-size: 0.72rem;
    color: #aaa;
}

.bar-filter-select[b-9qy92x2nq6] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 0.68rem;
    color: #0a2535;
    background: #fff;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    max-width: 90px;
}

    .bar-filter-select:focus[b-9qy92x2nq6] {
        border-color: #00bcd4;
    }

.bar-filter-btn[b-9qy92x2nq6] {
    padding: 4px 14px;
    border-radius: 8px;
    background: #007c91;
    color: #fff;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

    .bar-filter-btn:hover[b-9qy92x2nq6] {
        background: #005f70;
    }

/* Bar Chart */
.bar-loading[b-9qy92x2nq6] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #aaa;
}

/* Dark Mode */
.main-content.dark .bar-filter-select[b-9qy92x2nq6] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

.main-content.dark .bar-filter-label[b-9qy92x2nq6],
.main-content.dark .bar-filter-sep[b-9qy92x2nq6] {
    color: #7ab8c8;
}

.main-content.dark .bar-grid-line[b-9qy92x2nq6] {
    background: rgba(0,188,212,0.08);
}

.main-content.dark .bar-chart-inner[b-9qy92x2nq6] {
    border-color: rgba(0,188,212,0.15);
}

.main-content.dark .bar-month-label[b-9qy92x2nq6],
.main-content.dark .bar-y-axis[b-9qy92x2nq6] {
    color: #4a9aaa;
}

/* Responsive */
@media (max-width: 1100px) {
    .cards-4[b-9qy92x2nq6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-2[b-9qy92x2nq6] {
        grid-template-columns: 1fr;
    }

    .charts-3[b-9qy92x2nq6] {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .cards-3[b-9qy92x2nq6] {
        grid-template-columns: 1fr;
    }

    .cards-2[b-9qy92x2nq6] {
        grid-template-columns: 1fr;
    }

    .card-core-value[b-9qy92x2nq6] {
        font-size: 1.6rem;
    }

    .card-perf-value[b-9qy92x2nq6] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .chart-header[b-9qy92x2nq6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .charts-2[b-9qy92x2nq6],
    .charts-3[b-9qy92x2nq6] {
        flex-direction: column;
    }

        .charts-2 > .chart-card[b-9qy92x2nq6],
        .charts-3 > .chart-card[b-9qy92x2nq6] {
            width: 100%;
            flex: none;
        }

    .chart-card-wide[b-9qy92x2nq6] {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cards-4[b-9qy92x2nq6] {
        grid-template-columns: 1fr;
    }

    .card-core-value[b-9qy92x2nq6] {
        font-size: 1.4rem;
    }

    .hero-row[b-9qy92x2nq6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-right[b-9qy92x2nq6] {
        align-items: flex-start;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Dashboard/StructManager.razor.rz.scp.css */
/* Page Wrapper */
.home-page[b-a2f16d7vu4] {
    padding: 0.15rem 0.2rem 3rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Breadcrumb */
.breadcrumb-row[b-a2f16d7vu4] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
}

    .breadcrumb-row span[b-a2f16d7vu4] {
        color: #333;
        font-weight: 500;
    }

/* Hero */
.hero-row[b-a2f16d7vu4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.page-title[b-a2f16d7vu4] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
}

.hero-right[b-a2f16d7vu4] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.year-filter[b-a2f16d7vu4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .year-filter label[b-a2f16d7vu4] {
        font-size: 0.78rem;
        color: #666;
        font-weight: 500;
    }

    .year-filter select[b-a2f16d7vu4] {
        border: 1px solid #b0d8de;
        border-radius: 20px;
        padding: 0.25rem 0.8rem;
        font-size: 0.82rem;
        color: #0a2535;
        background: #fff;
        cursor: pointer;
        outline: none;
    }

.last-updated[b-a2f16d7vu4] {
    font-size: 0.72rem;
    color: #aaa;
}

    .last-updated span[b-a2f16d7vu4] {
        color: #007c91;
        font-weight: 500;
    }

/* Date Divider */
.date-divider-row[b-a2f16d7vu4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.6rem 0 1.4rem;
}

.date-text[b-a2f16d7vu4] {
    font-size: 0.82rem;
    color: #666;
    white-space: nowrap;
}

.divider-line[b-a2f16d7vu4] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #b0d8de 0%, transparent 100%);
}

/* Year Filter */
.year-nav-stack[b-a2f16d7vu4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.year-nav-up[b-a2f16d7vu4],
.year-nav-down[b-a2f16d7vu4] {
    background: none;
    border: 1px solid #b0d8de;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: #007c91;
    padding: 0;
    line-height: 0;
    transition: background 0.15s, color 0.15s;
}

.year-nav-up[b-a2f16d7vu4] {
    transform: rotate(90deg);
    padding-bottom: 2px;
}

.year-nav-down[b-a2f16d7vu4] {
    transform: rotate(-270deg);
    padding-bottom: 2px;
    padding-left: 2px;
}

    .year-nav-up:hover:not(:disabled)[b-a2f16d7vu4],
    .year-nav-down:hover:not(:disabled)[b-a2f16d7vu4] {
        background: #007c91;
        color: #fff;
    }

    .year-nav-up:disabled[b-a2f16d7vu4],
    .year-nav-down:disabled[b-a2f16d7vu4] {
        opacity: 0.25;
        cursor: not-allowed;
    }

/* Section Header */
.section-header[b-a2f16d7vu4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.section-header-title[b-a2f16d7vu4] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-divider[b-a2f16d7vu4] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,124,145,0.3) 0%, transparent 100%);
}

/* Grids */
.charts-2[b-a2f16d7vu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.charts-3[b-a2f16d7vu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Chart Cards */
.chart-header[b-a2f16d7vu4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.8rem;
    flex-wrap: wrap; 
}

    .chart-header > div:first-child[b-a2f16d7vu4] {
        display: flex;
        flex-direction: column;
    }

.chart-card[b-a2f16d7vu4] {
    background: #fff;
    border-radius: 14px;
    padding: 1.2rem 1.4rem; /* 1.4rem 1.6rem;*/
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    min-width: 0;
}

.chart-title[b-a2f16d7vu4] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0a2535;
    margin-bottom: 0.25rem;
}

.chart-subtitle[b-a2f16d7vu4] {
    font-size: 0.72rem;
    color: #aaa;
}

.chart-placeholder[b-a2f16d7vu4] {
    height: 200px;
    background: linear-gradient(135deg, #e8f6f8 0%, #d0ecf0 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ab8c0;
    font-size: 0.82rem;
    border: 1px dashed #b0d8de;
}

.chart-card-wide[b-a2f16d7vu4] {
    flex: 2;
    min-width: 200px;
}

.chart-card-narrow[b-a2f16d7vu4] {
    flex: 1;
    width: 15px;
    min-width: 200px;
}

.chart-card-fixed[b-a2f16d7vu4] {
    flex: none;
}

.chart-card:not(.chart-card-wide)[b-a2f16d7vu4] {
    overflow: hidden;
}

.chart-card canvas[b-a2f16d7vu4] {
    max-width: 100%;
    display: block;
}

.charts-2 > .chart-card:not(.chart-card-wide)[b-a2f16d7vu4],
.charts-3 > .chart-card:not(.chart-card-wide)[b-a2f16d7vu4] {
    min-width: 0;
    flex: 1;
    max-width: 100%;
}

.charts-2 > .chart-card-wide[b-a2f16d7vu4],
.charts-3 > .chart-card-wide[b-a2f16d7vu4] {
    min-width: 0;
    max-width: 100%;
}

.charts-2 > .chart-card:not(.chart-card-wide)[b-a2f16d7vu4] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Legend */
.chart-legend[b-a2f16d7vu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
    justify-content: center;
}

.legend-item[b-a2f16d7vu4] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: #666;
}

.legend-dot[b-a2f16d7vu4] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Pie Chart */
.pie-wrap[b-a2f16d7vu4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5rem 0;
}

/* Bar Filter */
.bar-filter-row[b-a2f16d7vu4] {
    display: flex;
    align-items: center;
    gap: 6px; /*8px*/
    margin-bottom: 14px;
    flex-wrap: wrap;
    flex-shrink: 1;
}

.bar-filter-label[b-a2f16d7vu4] {
    font-size: 0.72rem;
    color: #666;
    font-weight: 500;
}

.bar-filter-sep[b-a2f16d7vu4] {
    font-size: 0.72rem;
    color: #aaa;
}

.bar-filter-select[b-a2f16d7vu4] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 4px 6px; 
    font-size: 0.68rem;
    color: #0a2535;
    background: #fff;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    max-width: 90px; 
}

    .bar-filter-select:focus[b-a2f16d7vu4] {
        border-color: #00bcd4;
    }

.bar-filter-btn[b-a2f16d7vu4] {
    padding: 4px 14px;
    border-radius: 8px;
    background: #007c91;
    color: #fff;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

    .bar-filter-btn:hover[b-a2f16d7vu4] {
        background: #005f70;
    }

/* Bar Chart */
.bar-loading[b-a2f16d7vu4] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #aaa;
}

/* Dark Mode */
.main-content.dark .bar-filter-select[b-a2f16d7vu4] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

.main-content.dark .bar-filter-label[b-a2f16d7vu4],
.main-content.dark .bar-filter-sep[b-a2f16d7vu4] {
    color: #7ab8c8;
}

.main-content.dark .bar-grid-line[b-a2f16d7vu4] {
    background: rgba(0,188,212,0.08);
}

.main-content.dark .bar-chart-inner[b-a2f16d7vu4] {
    border-color: rgba(0,188,212,0.15);
}

.main-content.dark .bar-month-label[b-a2f16d7vu4],
.main-content.dark .bar-y-axis[b-a2f16d7vu4] {
    color: #4a9aaa;
}

/* Responsive */
@media (max-width: 1100px) {
    .cards-4[b-a2f16d7vu4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-2[b-a2f16d7vu4] {
        grid-template-columns: 1fr;
    }

    .charts-3[b-a2f16d7vu4] {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .cards-3[b-a2f16d7vu4] {
        grid-template-columns: 1fr;
    }

    .cards-2[b-a2f16d7vu4] {
        grid-template-columns: 1fr;
    }

    .card-core-value[b-a2f16d7vu4] {
        font-size: 1.6rem;
    }

    .card-perf-value[b-a2f16d7vu4] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .chart-header[b-a2f16d7vu4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .charts-2[b-a2f16d7vu4],
    .charts-3[b-a2f16d7vu4] {
        flex-direction: column;
    }

        .charts-2 > .chart-card[b-a2f16d7vu4],
        .charts-3 > .chart-card[b-a2f16d7vu4] {
            width: 100%;
            flex: none;
        }

    .chart-card-wide[b-a2f16d7vu4] {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cards-4[b-a2f16d7vu4] {
        grid-template-columns: 1fr;
    }

    .card-core-value[b-a2f16d7vu4] {
        font-size: 1.4rem;
    }

    .hero-row[b-a2f16d7vu4] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-right[b-a2f16d7vu4] {
        align-items: flex-start;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Dashboard/TopManagement.razor.rz.scp.css */
/* Page Wrapper */
.home-page[b-i9aik4uk95] {
    padding: 0.15rem 0.2rem 3rem; /*2rem 1.5rem 3rem;*/
    max-width: 100%;
    box-sizing: border-box;
}

/* Breadcrumb */
.breadcrumb-row[b-i9aik4uk95] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.4rem;
}

    .breadcrumb-row span[b-i9aik4uk95] {
        color: #333;
        font-weight: 500;
    }

/* Hero */
.hero-row[b-i9aik4uk95] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.page-title[b-i9aik4uk95] {
    font-size: 2rem;
    font-weight: 800;
    color: #0a2535;
    letter-spacing: -0.02em;
}

.hero-right[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.year-filter[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .year-filter label[b-i9aik4uk95] {
        font-size: 0.78rem;
        color: #666;
        font-weight: 500;
    }

    .year-filter select[b-i9aik4uk95] {
        border: 1px solid #b0d8de;
        border-radius: 20px;
        padding: 0.25rem 0.8rem;
        font-size: 0.82rem;
        color: #0a2535;
        background: #fff;
        cursor: pointer;
        outline: none;
    }

.last-updated[b-i9aik4uk95] {
    font-size: 0.72rem;
    color: #aaa;
}

    .last-updated span[b-i9aik4uk95] {
        color: #007c91;
        font-weight: 500;
    }

/* Date Divider */
.date-divider-row[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.6rem 0 1.4rem;
}

.date-text[b-i9aik4uk95] {
    font-size: 0.82rem;
    color: #666;
    white-space: nowrap;
}

.divider-line[b-i9aik4uk95] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #b0d8de 0%, transparent 100%);
}

/* Year Filter */
.year-nav-stack[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.year-nav-up[b-i9aik4uk95],
.year-nav-down[b-i9aik4uk95] {
    background: none;
    border: 1px solid #b0d8de;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: #007c91;
    padding: 0;
    line-height: 0;
    transition: background 0.15s, color 0.15s;
}

.year-nav-up[b-i9aik4uk95] {
    transform: rotate(90deg);
    padding-bottom: 2px;
}

.year-nav-down[b-i9aik4uk95] {
    transform: rotate(-270deg);
    padding-bottom: 2px;
    padding-left: 2px;
}

    .year-nav-up:hover:not(:disabled)[b-i9aik4uk95],
    .year-nav-down:hover:not(:disabled)[b-i9aik4uk95] {
        background: #007c91;
        color: #fff;
    }

    .year-nav-up:disabled[b-i9aik4uk95],
    .year-nav-down:disabled[b-i9aik4uk95] {
        opacity: 0.25;
        cursor: not-allowed;
    }

/* Section Header */
.section-header[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.section-header-title[b-i9aik4uk95] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-divider[b-i9aik4uk95] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,124,145,0.3) 0%, transparent 100%);
}

/* Grids */
.cards-3[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cards-2[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cards-4[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/*.charts-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}*/

.charts-2[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.charts-3[b-i9aik4uk95] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.charts-2.charts-2-expanded[b-i9aik4uk95] {
    grid-template-columns: 1fr 1fr;
}

.charts-2-narrow-right[b-i9aik4uk95] {
    grid-template-columns: 5fr 1fr;
}

@media (max-width: 1100px) {
    .charts-2.charts-2-expanded[b-i9aik4uk95] {
        grid-template-columns: 1fr;
    }
}

/* Core Summary Cards */
.card-core[b-i9aik4uk95] {
    border-radius: 14px;
    padding: 1.5rem 1.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
}

    .card-core[b-i9aik4uk95]::after {
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
    }

    .card-core.c-billings[b-i9aik4uk95] {
        background: linear-gradient(135deg, #0a2535 0%, #007c91 100%);
        box-shadow: 0 6px 24px rgba(0,124,145,0.4);
    }

    .card-core.c-manpower[b-i9aik4uk95] {
        background: linear-gradient(135deg, #0d3d4f 0%, #00838f 100%);
        box-shadow: 0 6px 24px rgba(0,131,143,0.35);
    }

    .card-core.c-manhours[b-i9aik4uk95] {
        background: linear-gradient(135deg, #093040 0%, #006978 100%);
        box-shadow: 0 6px 24px rgba(0,105,120,0.35);
    }

.card-core-label[b-i9aik4uk95] {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-core-value[b-i9aik4uk95] {
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.card-core-desc[b-i9aik4uk95] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.card-core-trend[b-i9aik4uk95] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #69f0ae; /*#4caf50*/
    margin-top: 0.1rem;
}

/* Performance Cards */
.card-perf[b-i9aik4uk95] {
    background: #fff;
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 12px rgba(0,124,145,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-top: 3px solid #007c91;
    position: relative;
    overflow: hidden;
}

    .card-perf[b-i9aik4uk95]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(180deg, rgba(0,124,145,0.06) 0%, transparent 100%);
        pointer-events: none;
    }

.card-perf-label[b-i9aik4uk95] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-perf-value[b-i9aik4uk95] {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0a2535;
    line-height: 1.1;
}

.card-perf-desc[b-i9aik4uk95] {
    font-size: 0.73rem;
    color: #aaa;
}

.card-perf-trend[b-i9aik4uk95] {
    font-size: 0.73rem;
    font-weight: 600;
    color: #2e7d32;
}

.card-perf-tag[b-i9aik4uk95] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    width: fit-content;
    background: #e0f4f4;
    color: #007c91;
}

/* Dept Cards */
.card-dept[b-i9aik4uk95] {
    background: #fff;
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .card-dept.d-yellow[b-i9aik4uk95] {
        border-top: 3px solid #fddb87; /*#007c91*/
    }

    .card-dept.d-green[b-i9aik4uk95] {
        border-top: 3px solid #2e7d32;
    }

    .card-dept.d-orange[b-i9aik4uk95] {
        border-top: 3px solid #e65100;
    }

    .card-dept.d-purple[b-i9aik4uk95] {
        border-top: 3px solid #6a1b9a;
    }

.card-dept-label[b-i9aik4uk95] {
    font-size: 0.68rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-dept-value[b-i9aik4uk95] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0a2535;
    line-height: 1.1;
}

.card-dept-desc[b-i9aik4uk95] {
    font-size: 0.7rem;
    color: #aaa;
}

.card-dept-tag[b-i9aik4uk95] {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    width: fit-content;
}

.tag-yellow[b-i9aik4uk95] {
    background: #fef9e7;
    color: #b7770d;
}

.tag-teal[b-i9aik4uk95] {
    background: #e0f4f4;
    color: #007c91;
}

.tag-green[b-i9aik4uk95] {
    background: #e8f5e9;
    color: #2e7d32;
}

.tag-orange[b-i9aik4uk95] {
    background: #fff3e0;
    color: #e65100;
}

.tag-purple[b-i9aik4uk95] {
    background: #f3e5f5;
    color: #6a1b9a;
}

/* Chart Cards */
.chart-card[b-i9aik4uk95] {
    background: #fff;
    border-radius: 14px;
    padding: 1.2rem 1.4rem; /* 1.4rem 1.6rem;*/
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    min-width: 0;
}

.chart-title[b-i9aik4uk95] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0a2535;
    margin-bottom: 0.25rem;
}

.chart-subtitle[b-i9aik4uk95] {
    font-size: 0.72rem;
    color: #aaa;
}

.chart-placeholder[b-i9aik4uk95] {
    height: 200px;
    background: linear-gradient(135deg, #e8f6f8 0%, #d0ecf0 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7ab8c0;
    font-size: 0.82rem;
    border: 1px dashed #b0d8de;
}

/* Responsive */
@media (max-width: 1100px) {
    .cards-4[b-i9aik4uk95] {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-2[b-i9aik4uk95] {
        grid-template-columns: 1fr;
    }

    .charts-3[b-i9aik4uk95] {
        flex-direction: column;
    }

    .pie-compare-wrap-expanded canvas[b-i9aik4uk95] {
        width: 785px;
    }
}

@media (max-width: 900px) {
    .cards-3[b-i9aik4uk95] {
        grid-template-columns: 1fr;
    }

    .cards-2[b-i9aik4uk95] {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .card-core-value[b-i9aik4uk95] {
        font-size: 1.6rem;
    }

    .card-perf-value[b-i9aik4uk95] {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .cards-4[b-i9aik4uk95] {
        grid-template-columns: 1fr;
    }

    .card-core-value[b-i9aik4uk95] {
        font-size: 1.4rem;
    }

    .hero-row[b-i9aik4uk95] {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-right[b-i9aik4uk95] {
        align-items: flex-start;
    }
}



/* ----------------------------------*/



/*@media (max-width: 1100px) {
    .cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }*/

/* REMOVE grid-template-columns here — charts-2 is flex, not grid */
/*.charts-2 {*/
/*flex-wrap: nowrap;*/ /* keep side by side until 768px */

/*grid-template-columns: 1fr;
    }

    .charts-3 {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .cards-3 {
        grid-template-columns: 1fr;
    }

    .cards-2 {
        grid-template-columns: 1fr;
    }

    .card-core-value {
        font-size: 1.6rem;
    }

    .card-perf-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {*/
/* NOW stack charts-2 vertically on smaller screens */
/*.charts-2 {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .chart-card-wide,
    .chart-card-shrink {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cards-4 {
        grid-template-columns: 1fr;
    }

    .card-core-value {
        font-size: 1.4rem;
    }

    .hero-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-right {
        align-items: flex-start;
    }
}*/













/* Bar Chart */
.bar-chart-wrap[b-i9aik4uk95] {
    display: flex;
    gap: 0.5rem;
    height: 210px;
}

.bar-y-labels[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.6rem;
    color: #aaa;
    padding-bottom: 1.2rem;
    flex-shrink: 0;
}

.bar-chart[b-i9aik4uk95] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    flex: 1;
    height: 100%;
    padding-bottom: 1.2rem;
    overflow: hidden;
}

.bar-group[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
    justify-content: flex-end;
}

.bar-stack[b-i9aik4uk95] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.bar-label[b-i9aik4uk95] {
    font-size: 0.58rem;
    color: #aaa;
    margin-top: 4px;
    white-space: nowrap;
}

.chart-legend[b-i9aik4uk95] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
    justify-content: center;
}

.legend-item[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: #666;
}

.legend-dot[b-i9aik4uk95] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Donut Chart */
.donut-wrap[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.donut-legend[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.donut-legend-item[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #555;
}

.donut-dot[b-i9aik4uk95] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-pct[b-i9aik4uk95] {
    margin-left: auto;
    font-weight: 700;
    color: #333;
    padding-left: 1rem;
}

/* Line Chart */
.line-chart-wrap[b-i9aik4uk95] {
    position: relative;
}

.line-x-labels[b-i9aik4uk95] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #aaa;
    margin-top: 0.25rem;
    padding: 0 2px;
}

/* YTD List */
.ytd-list[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.3rem;
}

.ytd-item[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ytd-item-top[b-i9aik4uk95] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ytd-dept[b-i9aik4uk95] {
    font-size: 0.78rem;
    font-weight: 500;
    color: #444;
}

.ytd-amount[b-i9aik4uk95] {
    font-size: 0.78rem;
    font-weight: 700;
}

.ytd-bar-track[b-i9aik4uk95] {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.ytd-bar-fill[b-i9aik4uk95] {
    height: 100%;
    border-radius: 3px;
}

.chart-card-wide[b-i9aik4uk95] {
    flex: 2;
    min-width: 200px; /*300px*/
}

.chart-card-narrow[b-i9aik4uk95] {
    flex: 1;
    min-width: 200px; /*300px*/
}

.chart-card-fixed[b-i9aik4uk95] {
    flex: none;
}

/* Pie Chart */
.pie-wrap[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5rem 0;
}

.pie-legend[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.pie-legend-item[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.pie-legend-dot[b-i9aik4uk95] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pie-legend-text[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    font-size: 0.78rem;
}

.pie-legend-label[b-i9aik4uk95] {
    color: var(--color-text-primary);
    font-weight: 500;
    flex: 1;
}

.pie-legend-amount[b-i9aik4uk95] {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.pie-legend-pct[b-i9aik4uk95] {
    color: var(--color-text-secondary);
    font-weight: 600;
    min-width: 2.5rem;
    text-align: right;
}

.pie-nodata[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    width: 480px;
    padding: 40px;
}

.pie-nodata-icon[b-i9aik4uk95] {
    font-size: 2.5rem;
    color: var(--color-border-secondary);
    line-height: 1;
}

.pie-nodata-text[b-i9aik4uk95] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pie-nodata-sub[b-i9aik4uk95] {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
}

/* Bar Filter */
.bar-filter-row[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bar-filter-label[b-i9aik4uk95] {
    font-size: 0.72rem;
    color: #666;
    font-weight: 500;
}

.bar-filter-sep[b-i9aik4uk95] {
    font-size: 0.72rem;
    color: #aaa;
}

.bar-filter-select[b-i9aik4uk95] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 4px 6px;
    font-size: 0.68rem;
    color: #0a2535;
    background: #fff;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    max-width: 90px;
}

    .bar-filter-select:focus[b-i9aik4uk95] {
        border-color: #00bcd4;
    }

.bar-filter-btn[b-i9aik4uk95] {
    padding: 4px 14px;
    border-radius: 8px;
    background: #007c91;
    color: #fff;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

    .bar-filter-btn:hover[b-i9aik4uk95] {
        background: #005f70;
    }

/* Bar Chart Layout */
.bar-chart-outer[b-i9aik4uk95] {
    display: flex;
    gap: 8px;
}

.bar-y-axis[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.58rem;
    color: #aaa;
    flex-shrink: 0;
    min-width: 40px;
    box-sizing: border-box;
}

.bar-chart-inner[b-i9aik4uk95] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0;
    position: relative;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.7px;
    box-sizing: border-box;
}

.bar-grid-line[b-i9aik4uk95] {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #f0f0f0;
}

.bar-month-group[b-i9aik4uk95] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 45px;
    min-width: 10px;
    height: 100%;
}

.bar-bars[b-i9aik4uk95] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 45px;
    flex: none;
    flex-shrink: 0;
}

.bar-single[b-i9aik4uk95] {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity 0.15s;
    cursor: default;
    vertical-align: bottom;
}

    .bar-single:hover[b-i9aik4uk95] {
        opacity: 0.75;
    }

.bar-misc[b-i9aik4uk95] {
    background: #00bcd4;
}

.bar-struct[b-i9aik4uk95] {
    background: #007c91;
}

.bar-month-label[b-i9aik4uk95] {
    font-size: 0.58rem;
    color: #aaa;
    margin-top: 4px;
    white-space: nowrap;
    text-align: center;
}

.bar-loading[b-i9aik4uk95] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #aaa;
}

.bar-empty[b-i9aik4uk95] {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #aaa;
}

/* Dark Mode */
.main-content.dark .bar-filter-select[b-i9aik4uk95] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

.main-content.dark .bar-filter-label[b-i9aik4uk95],
.main-content.dark .bar-filter-sep[b-i9aik4uk95] {
    color: #7ab8c8;
}

.main-content.dark .bar-grid-line[b-i9aik4uk95] {
    background: rgba(0,188,212,0.08);
}

.main-content.dark .bar-chart-inner[b-i9aik4uk95] {
    border-color: rgba(0,188,212,0.15);
}

.main-content.dark .bar-month-label[b-i9aik4uk95],
.main-content.dark .bar-y-axis[b-i9aik4uk95] {
    color: #4a9aaa;
}

.chart-header[b-i9aik4uk95] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.bar-filter-row[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
}

.chart-header > div:first-child[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .chart-header[b-i9aik4uk95] {
        flex-direction: column;
        align-items: flex-start;
    }
}





/* Pie Compare */
/*.chart-card-shrink {
    flex: 1 !important;
}

.pie-compare-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    transition: all 0.3s ease;
}

.pie-compare-expanded {
    gap: 1rem;
}

.pie-compare-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pie-compare-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(0,124,145,0.2), transparent);
    flex-shrink: 0;
}

.pie-slot-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.pie-nodata-inline {
    font-size: 0.8rem;
    color: #aaa;
    padding: 2rem 0;
    text-align: center;
}

.pie-expand-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 14px;
    border-radius: 8px;
    background: #007c91;
    color: #fff;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
}

    .pie-expand-btn:hover {
        background: #005f70;
    }*/

/* Pie Compare */
.chart-card-shrink[b-i9aik4uk95] {
    flex: 1 !important;
}

/*.pie-compare-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}*/

.pie-compare-wrap[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 2.5rem;
}

.pie-slot-label[b-i9aik4uk95] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
    align-self: center; /*flex-start*/
    padding-left: 0.2rem;
}

.pie-nodata-inline[b-i9aik4uk95] {
    font-size: 0.8rem;
    color: #aaa;
    padding: 2rem 0;
    text-align: center;
}

.pie-expand-btn[b-i9aik4uk95] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 14px;
    border-radius: 8px;
    background: #007c91;
    color: #fff;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
}

    .pie-expand-btn:hover[b-i9aik4uk95] {
        background: #005f70;
    }



/*.pie-compare-wrap-expanded {
    padding-top:0.1rem;
}
    .pie-compare-wrap-expanded .pie-slot-label {
        margin-top: 0.1rem;
        margin-bottom: -3rem;
    }*/

.pie-compare-wrap-expanded[b-i9aik4uk95] {
    padding-top: 0.1rem;
    gap: 0.1rem;
}


    .pie-compare-wrap-expanded .pie-slot-label[b-i9aik4uk95] {
        align-self: center;
        margin-top: 0.1rem;
        margin-bottom: -3rem;
    }

    .pie-compare-wrap-expanded .pie-chart_current[b-i9aik4uk95] {
        /*   margin: auto auto auto 200px;*/
        padding-left: 30rem;
    }






/*.pie-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.5rem;
}*/

.pie-compare-grid[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.5rem;
    align-items: start;
}

    .pie-compare-grid .pie-slot-top[b-i9aik4uk95] {
        display: flex;
        flex-direction: column;
        /*align-items: flex-start;*/
        align-items: center;
        gap: 1rem;
    }

    .pie-compare-grid .pie-slot-bottom[b-i9aik4uk95] {
        display: flex;
        flex-direction: column;
        /*     align-items: flex-end;*/
        align-items: center;
        gap: 1rem;
        margin-top: 10.25rem;
    }

    .pie-compare-grid .pie-slot-top[b-i9aik4uk95],
    .pie-compare-grid .pie-slot-bottom[b-i9aik4uk95] {
        overflow: visible;
    }

    /* aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.charts-2-dept-expanded[b-i9aik4uk95] {
    grid-template-columns: 1fr;
}

.dept-pie-grid[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.dept-pie-label[b-i9aik4uk95] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    text-align: center;
}



.dept-pie-split[b-i9aik4uk95] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.dept-pie-col[b-i9aik4uk95] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 900px) {
    .dept-pie-split[b-i9aik4uk95] {
        grid-template-columns: 1fr;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Departments/GeneralDepartment.razor.rz.scp.css */
/* Page Wrapper */
.generalDepartment-page[b-98a4fsu5ct] {
    padding: 0.15rem 0.2rem 3rem;
}

/* Breadcrumb */
.breadcrumb-row[b-98a4fsu5ct] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-98a4fsu5ct] {
        color: #333;
        font-weight: 500;
    }

/* Page Title */
.page-title[b-98a4fsu5ct] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-98a4fsu5ct] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    max-width: 500px;
}

/* Date Divider */
.date-divider-row[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.6rem 0 1.4rem;
}

.date-text[b-98a4fsu5ct] {
    font-size: 0.82rem;
    color: #666;
    white-space: nowrap;
}

.divider-line[b-98a4fsu5ct] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #b0d8de 0%, transparent 100%);
}

/* Two Table Grid */
.tables-grid[b-98a4fsu5ct] {
    display: grid;
    grid-template-columns: 1fr 1fr; /*remove 1fr for one column*/
    gap: 1.5rem;
    align-items: start;
    min-width: 0;
}

/* Table Card */
.table-card[b-98a4fsu5ct] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow-x: auto;
}

/* Card Header */
.table-card-header[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid #f0f0f0;
}

.table-card-title[b-98a4fsu5ct] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0a2535;
}

.table-card-desc[b-98a4fsu5ct] {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 0.1rem;
}

.table-card-count[b-98a4fsu5ct] {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 0.1rem;
}

/* Add Button */
.btn-add[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #007c91;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-add:hover[b-98a4fsu5ct] {
        background: #005f70;
    }

/* Toolbar */
.table-toolbar[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.3rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.search-wrap[b-98a4fsu5ct] {
    position: relative;
    flex: 1;
}

.search-icon[b-98a4fsu5ct] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 0.8rem;
    pointer-events: none;
}

.search-input[b-98a4fsu5ct] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.38rem 0.75rem 0.38rem 2rem;
    font-size: 0.8rem;
    color: #333;
    outline: none;
}

    .search-input:focus[b-98a4fsu5ct] {
        border-color: #007c91;
    }

/* Table */
table[b-98a4fsu5ct] {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}

thead tr[b-98a4fsu5ct] {
    background: #f7fbfc;
    border-bottom: 2px solid #e8f6f8;
}

thead th[b-98a4fsu5ct] {
    padding: 0.65rem 1.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
}

thead th[b-98a4fsu5ct],
tbody td[b-98a4fsu5ct] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

tbody tr[b-98a4fsu5ct] {
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

    tbody tr:hover[b-98a4fsu5ct] {
        background: #f7fbfc;
    }

    tbody tr:last-child[b-98a4fsu5ct] {
        border-bottom: none;
    }

tbody td[b-98a4fsu5ct] {
    padding: 0.75rem 1.3rem;
    font-size: 0.83rem;
    color: #333;
}

.td-id[b-98a4fsu5ct] {
    color: #bbb;
    font-size: 0.75rem;
    font-weight: 500;
    width: 40px;
}

.td-code[b-98a4fsu5ct] {
    font-weight: 600;
    color: #007c91;
    font-family: monospace;
    font-size: 0.82rem;
}

.td-name[b-98a4fsu5ct] {
    font-weight: 500;
    color: #0a2535;
}

.td-parent-badge[b-98a4fsu5ct] {
    display: inline-block;
    background: #e0f4f4;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}

.td-badge-1[b-98a4fsu5ct] {
    background: #e3f2fd;
    color: #1565c0;
}

.td-badge-2[b-98a4fsu5ct] {
    background: #e8f5e9;
    color: #2e7d32;
}

.td-badge-3[b-98a4fsu5ct] {
    background: #fff8e1;
    color: #f57f17;
}

.td-badge-4[b-98a4fsu5ct] {
    background: #f3e5f5;
    color: #7b1fa2;
}

.td-badge-5[b-98a4fsu5ct] {
    background: #eceff1;
    color: #455a64;
}

.td-badge-6[b-98a4fsu5ct] {
    background: #fdf6e3;
    color: #92400e;
}

.td-badge-7[b-98a4fsu5ct] {
    background: #e8eaf6;
    color: #283593;
}

.td-badge-8[b-98a4fsu5ct] {
    background: #f9fbe7;
    color: #558b2f;
}

.td-badge-9[b-98a4fsu5ct] {
    background: #fff3e0;
    color: #e65100;
}

.td-badge-10[b-98a4fsu5ct] {
    background: #e0f7fa;
    color: #00695c;
}



thead th:not(:first-child)[b-98a4fsu5ct],
tbody td:not(:first-child)[b-98a4fsu5ct] {
    text-align: center;
}

/* Action Buttons */
.action-wrap[b-98a4fsu5ct] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: center;
}

.btn-edit[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #e0f4f4;
    color: #007c91;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-edit:hover[b-98a4fsu5ct] {
        background: #b0e0e8;
    }

.btn-delete[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #fdecea;
    color: #c62828;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-delete:hover[b-98a4fsu5ct] {
        background: #f5c0bc;
    }

thead th:last-child[b-98a4fsu5ct],
tbody td:last-child[b-98a4fsu5ct] {
    width: 160px;
    min-width: 160px;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
}

/* Footer */
.table-footer[b-98a4fsu5ct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.3rem;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.table-footer-info[b-98a4fsu5ct] {
    font-size: 0.72rem;
    color: #aaa;
}

.pagination[b-98a4fsu5ct] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-98a4fsu5ct] {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .page-btn:hover[b-98a4fsu5ct] {
        border-color: #007c91;
        color: #007c91;
    }

    .page-btn.active[b-98a4fsu5ct] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }

/* Responsive */
@media (max-width: 768px) { /*1200px*/
    .tables-grid[b-98a4fsu5ct] {
        grid-template-columns: 1fr;
    }

    thead th[b-98a4fsu5ct],
    tbody td[b-98a4fsu5ct] {
        padding: 0.65rem 0.75rem;
        font-size: 0.75rem;
    }

    .btn-edit[b-98a4fsu5ct],
    .btn-delete[b-98a4fsu5ct] {
        padding: 0.25rem 0.5rem;
        font-size: 0.68rem;
    }

    .page-title[b-98a4fsu5ct] {
        font-size: 1.5rem;
    }
}

@media (max-width: 900px) {
    thead th[b-98a4fsu5ct],
    tbody td[b-98a4fsu5ct] {
        padding: 0.5rem 0.5rem;
        font-size: 0.72rem;
    }
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/DataImport.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-o18pb484qz] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
}

body.dark .page-wrap[b-o18pb484qz] {
    background: #081820;
}

/* Breadcrumb */
.breadcrumb-row[b-o18pb484qz] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-o18pb484qz] {
        color: #333;
        font-weight: 500;
    }

.main-content.dark .breadcrumb-row[b-o18pb484qz] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-o18pb484qz] {
        color: #b0d0d8;
    }

/* Title and SubTitle */
.page-title[b-o18pb484qz] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-o18pb484qz] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.main-content.dark .page-title[b-o18pb484qz] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-o18pb484qz] {
    color: #6a9aaa;
}

/* Tabs */
.di-tabs-row[b-o18pb484qz] {
    display: flex;
    gap: 0;
    background: rgba(0,124,145,0.07);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 1rem;
}

.di-tab[b-o18pb484qz] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .di-tab:hover[b-o18pb484qz] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .di-tab.active[b-o18pb484qz] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .di-tabs-row[b-o18pb484qz] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .di-tab[b-o18pb484qz] {
    color: rgba(255,255,255,0.45);
}

    body.dark .di-tab:hover[b-o18pb484qz] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .di-tab.active[b-o18pb484qz] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* Main Card */
.di-card[b-o18pb484qz] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .di-card[b-o18pb484qz]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

body.dark .di-card[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inline Upload Row */
.di-upload-row[b-o18pb484qz] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,124,145,0.04);
    border-bottom: 1px solid #d0e8ed;
    flex-wrap: wrap;
}

body.dark .di-upload-row[b-o18pb484qz] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

.di-field[b-o18pb484qz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-label[b-o18pb484qz] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .di-label[b-o18pb484qz] {
    color: #4a9aaa;
}

.di-input[b-o18pb484qz] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    color: #0a2535;
    width: 90px;
    outline: none;
    transition: border-color 0.15s;
}

    .di-input:focus[b-o18pb484qz] {
        border-color: #00bcd4;
    }

.di-field-file .di-input[b-o18pb484qz] {
    width: 180px;
}

.di-file-input[b-o18pb484qz] {
    font-size: 0.7rem;
    color: #5a8090;
}

.di-file-hint[b-o18pb484qz] {
    font-size: 0.68rem;
    color: #9bb8c2;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.di-btn-upload[b-o18pb484qz] {
    background: #e65100;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.38rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
    white-space: nowrap;
}

    .di-btn-upload:hover[b-o18pb484qz] {
        background: #bf360c;
    }

    .di-btn-upload:disabled[b-o18pb484qz] {
        opacity: 0.5;
        cursor: default;
    }

body.dark .di-input[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .di-input:focus[b-o18pb484qz] {
        border-color: #00bcd4;
    }

/* Status Message */
.di-status[b-o18pb484qz] {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}

.di-status-success[b-o18pb484qz] {
    background: rgba(0,150,100,0.08);
    color: #00695c;
    border-color: rgba(0,150,100,0.2);
}

.di-status-error[b-o18pb484qz] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border-color: rgba(220,53,69,0.2);
}

body.dark .di-status-success[b-o18pb484qz] {
    background: rgba(0,188,150,0.1);
    color: #00e5b0;
}

body.dark .di-status-error[b-o18pb484qz] {
    background: rgba(220,53,69,0.1);
    color: #ff6b6b;
}

/* Table Header */
.di-table-header[b-o18pb484qz] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,124,145,0.03);
}

.di-table-title[b-o18pb484qz] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-table-meta[b-o18pb484qz] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .di-table-header[b-o18pb484qz] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .di-table-title[b-o18pb484qz] {
    color: #00bcd4;
}

body.dark .di-table-meta[b-o18pb484qz] {
    color: #4a9aaa;
}

/* Table */
.di-table-wrap[b-o18pb484qz] {
    overflow-x: auto;
}

.di-table[b-o18pb484qz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 700px;
    text-align: center;
}

    .di-table.fixed[b-o18pb484qz] {
        table-layout: fixed;
    }

    .di-table th[b-o18pb484qz] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .di-table td[b-o18pb484qz] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

        .di-table td.td-wrap[b-o18pb484qz] {
            white-space: normal;
            word-break: break-word;
        }

    .di-table tr:last-child td[b-o18pb484qz] {
        border-bottom: none;
    }

    .di-table tr:hover td[b-o18pb484qz] {
        background: rgba(0,124,145,0.03);
    }

.di-empty[b-o18pb484qz] {
    text-align: center;
    color: #9bb8c2;
    padding: 2rem !important;
    font-style: italic;
}

body.dark .di-table th[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-table td[b-o18pb484qz] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .di-table tr:hover td[b-o18pb484qz] {
    background: rgba(0,188,212,0.04);
}

/* Badges */
.di-badge-file[b-o18pb484qz] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

.di-status-badge[b-o18pb484qz] {
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
}

.di-badge-success[b-o18pb484qz] {
    background: rgba(0,150,100,0.1);
    color: #00695c;
}

.di-badge-error[b-o18pb484qz] {
    background: rgba(220,53,69,0.1);
    color: #c62828;
}

body.dark .di-badge-file[b-o18pb484qz] {
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
}

body.dark .di-badge-success[b-o18pb484qz] {
    color: #00e5b0;
}

body.dark .di-badge-error[b-o18pb484qz] {
    color: #ff6b6b;
}

/* Action Buttons */
.di-action-cell[b-o18pb484qz] {
    display: flex;
    gap: 5px;
    justify-content: center; 
    align-items: center; 
}

.di-btn-view[b-o18pb484qz] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-view:hover[b-o18pb484qz] {
        background: rgba(0,124,145,0.18);
    }

    .di-btn-view:disabled[b-o18pb484qz] {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
    }

.di-btn-del[b-o18pb484qz] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-del:hover[b-o18pb484qz] {
        background: rgba(220,53,69,0.15);
    }

    .di-btn-del:disabled[b-o18pb484qz] {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
    }

body.dark .di-btn-view[b-o18pb484qz] {
    background: rgba(0,188,212,0.1);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.3);
}

body.dark .di-btn-del[b-o18pb484qz] {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.3);
}

/* Pagination */
.di-pagination[b-o18pb484qz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
}

.di-pg-info[b-o18pb484qz] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.di-pg-btns[b-o18pb484qz] {
    display: flex;
    gap: 3px;
}

.di-pg-btn[b-o18pb484qz] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .di-pg-btn:hover:not(:disabled)[b-o18pb484qz] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .di-pg-btn.active[b-o18pb484qz] {
        background: #007c91;
        color: #fff;
        border-color: #007c91;
    }

    .di-pg-btn:disabled[b-o18pb484qz] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .di-pagination[b-o18pb484qz] {
    border-color: rgba(0,188,212,0.15);
    background: rgba(0,188,212,0.03);
}

body.dark .di-pg-info[b-o18pb484qz] {
    color: #4a9aaa;
}

body.dark .di-pg-btn[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .di-pg-btn.active[b-o18pb484qz] {
        background: rgba(0,188,212,0.2);
        color: #fff;
    }

/* Preview Card */
.di-preview-card[b-o18pb484qz] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 2px 10px rgba(0,124,145,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.dark .di-preview-card[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
}

/* Modal */
.di-modal-overlay[b-o18pb484qz] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 1rem 1rem;
}

.di-modal[b-o18pb484qz] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d0e8ed;
    width: 95%;
    max-width: 950px;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.di-modal-header[b-o18pb484qz] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-start; /*center*/
    justify-content: space-between;
    background: rgba(0,124,145,0.04);
    flex-shrink: 0;
    white-space: normal; 
    word-break: break-word; 
    flex: 1;
    margin-right: 0.5rem;
}

.di-modal-title[b-o18pb484qz] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-modal-close[b-o18pb484qz] {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #9bb8c2;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s;
}

    .di-modal-close:hover[b-o18pb484qz] {
        background: rgba(220,53,69,0.1);
        color: #c62828;
    }

.di-modal-meta[b-o18pb484qz] {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: #5a8090;
    font-weight: 600;
    border-bottom: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
    flex-shrink: 0;
}

.di-modal-body[b-o18pb484qz] {
    flex: 1;
    overflow-y: auto;
}

body.dark .di-modal[b-o18pb484qz] {
    background: #112233;
    border-color: rgba(0,188,212,0.2);
}

body.dark .di-modal-header[b-o18pb484qz] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-modal-title[b-o18pb484qz] {
    color: #00bcd4;
}

body.dark .di-modal-meta[b-o18pb484qz] {
    color: #4a9aaa;
    border-color: rgba(0,188,212,0.15);
}

/* Main table scrollbar */
.di-table-wrap[b-o18pb484qz]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-track {
    background: transparent;
}

.di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Modal body scrollbar */
.di-modal-body[b-o18pb484qz]::-webkit-scrollbar {
    width: 6px;
}

.di-modal-body[b-o18pb484qz]::-webkit-scrollbar-track {
    background: transparent;
}

.di-modal-body[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-modal-body[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-modal-body[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-modal-body[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Preview table scrollbar */
.di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-track {
    background: transparent;
}

.di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-preview-card .di-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

.di-progress-wrap[b-o18pb484qz] {
    position: relative;
    height: 28px;
    background: rgba(0,124,145,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.di-progress-bar[b-o18pb484qz] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #007c91, #00bcd4);
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .di-progress-bar.di-progress-done[b-o18pb484qz] {
        background: linear-gradient(90deg, #00796b, #00bfa5);
    }

.di-progress-label[b-o18pb484qz] {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a2535;
    padding: 0 0.75rem;
    white-space: nowrap;
}

body.dark .di-progress-wrap[b-o18pb484qz] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-progress-label[b-o18pb484qz] {
    color: #e4f6fa;
}









/* ── Multi-file preview ─────────────────────────────────── */
/*.di-multi-preview {
    margin-top: 0.5px;*/ /*12px*/
    /*display: flex;
    flex-direction: column;
    gap: 6px;*/ /*6px*/
/*}*/
/*.di-multi-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}*/

/*.di-multi-progress-label {
    padding: 8px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1d4ed8;
}

.di-file-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.di-file-section-failed {
    border-color: #fca5a5;
}

.di-file-section-partial {
    border-color: #fcd34d;
}

.di-file-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12.5px;
    flex-wrap: wrap;
    cursor: default;
}

.di-file-header-clickable {
    cursor: pointer;*/ /* only when there's content to toggle */
/*}

    .di-file-header-clickable:hover {
        background: #f3f4f6;
    }

.di-file-section-header:not(.di-file-header-clickable):hover {
    background: #f9fafb;*/ /* same as default, no change on hover */
/*}

.di-file-section-failed .di-file-section-header {
    background: #fff5f5;
    border-bottom-color: #fca5a5;
}

.di-file-section-partial .di-file-section-header {
    background: #fffbeb;
    border-bottom-color: #fcd34d;
}

.di-file-section-name {
    font-weight: 600;
    color: #111827;
    font-family: monospace;
    font-size: 12px;
}

.di-file-section-size {
    color: #9ca3af;
    font-size: 11px;
}

.di-file-icon {
    flex-shrink: 0;
}

.di-file-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.di-file-badge-ok {
    background: #dcfce7;
    color: #16a34a;
}

.di-file-badge-partial {
    background: #fef3c7;
    color: #d97706;
}

.di-file-badge-failed {
    background: #fee2e2;
    color: #dc2626;
}

.di-file-section-error {
    padding: 8px 16px;
    background: #fff5f5;
    font-size: 12px;
    color: #dc2626;
    font-family: monospace;
}*/

/* ── Multi-file preview ─────────────────────────── */


/*.di-file-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.di-file-section-failed {
    border-color: #fca5a5;
}*/

/* Header is a button so it's keyboard accessible */
/*.di-file-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #f9fafb;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 12.5px;
    text-align: left;
    transition: background 0.15s;
    flex-wrap: wrap;
}

    .di-file-section-header:hover {
        background: #f3f4f6;
    }

.di-file-section-failed .di-file-section-header {
    background: #fff5f5;
    border-bottom-color: #fca5a5;
}*/

/* When collapsed, no border-bottom since body is hidden */
/*.di-file-section:has(.di-file-section-header + :empty) .di-file-section-header,
.di-file-section-header:last-child {
    border-bottom: none;
}

.di-file-collapse-icon {
    font-size: 10px;
    color: #9ca3af;
    flex-shrink: 0;
    width: 12px;
}

.di-file-icon {
    flex-shrink: 0;
}

.di-file-section-name {
    font-weight: 600;
    color: #111827;
    font-family: monospace;
    font-size: 12px;
    flex: 1;*/ /* takes remaining space, pushes badges right */
    /*min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.di-file-section-size {
    color: #9ca3af;
    font-size: 11px;
    flex-shrink: 0;
}

.di-file-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.di-file-badge-ok {
    background: #dcfce7;
    color: #16a34a;
}

.di-file-badge-partial {
    background: #fef3c7;
    color: #d97706;
}

.di-file-badge-failed {
    background: #fee2e2;
    color: #dc2626;
}

.di-file-section-error {
    padding: 10px 16px;
    background: #fff5f5;
    font-size: 12px;
    color: #dc2626;
    font-family: monospace;
}

.di-file-section-table-wrap {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
}

.di-file-badge-warn {
    background: #fef3c7;
    color: #d97706;
}*/


/* ── Multi-file preview ─────────────────────────────────── */
.di-multi-preview[b-o18pb484qz] {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.di-file-section[b-o18pb484qz] {
    border: 1px solid #d0e8ed;
    border-radius: 8px;
    overflow: hidden;
}

.di-file-section-failed[b-o18pb484qz] {
    border-color: #fca5a5;
}

.di-file-section-partial[b-o18pb484qz] {
    border-color: #fcd34d;
}

.di-file-section-header[b-o18pb484qz] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(0,124,145,0.03);
    border: none;
    border-bottom: 1px solid #d0e8ed;
    font-size: 12.5px;
    text-align: left;
    flex-wrap: wrap;
    cursor: default;
    transition: background 0.15s;
}

.di-file-header-clickable[b-o18pb484qz] {
    cursor: pointer;
}

    .di-file-header-clickable:hover[b-o18pb484qz] {
        background: rgba(0,124,145,0.07);
    }

.di-file-section-failed .di-file-section-header[b-o18pb484qz] {
    background: #fff5f5;
    border-bottom-color: #fca5a5;
}

.di-file-section-partial .di-file-section-header[b-o18pb484qz] {
    background: #fffbeb;
    border-bottom-color: #fcd34d;
}

.di-file-collapse-icon[b-o18pb484qz] {
    font-size: 10px;
    color: #9bb8c2;
    flex-shrink: 0;
    width: 12px;
}

.di-file-icon[b-o18pb484qz] {
    flex-shrink: 0;
}

.di-file-section-name[b-o18pb484qz] {
    font-weight: 600;
    color: #0a2535;
    font-family: monospace;
    font-size: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.di-file-section-size[b-o18pb484qz] {
    color: #9bb8c2;
    font-size: 11px;
    flex-shrink: 0;
}

.di-file-badge[b-o18pb484qz] {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.di-file-badge-ok[b-o18pb484qz] {
    background: #dcfce7;
    color: #16a34a;
}

.di-file-badge-partial[b-o18pb484qz] {
    background: #fef3c7;
    color: #d97706;
}

.di-file-badge-failed[b-o18pb484qz] {
    background: #fee2e2;
    color: #dc2626;
}

.di-file-badge-warn[b-o18pb484qz] {
    background: #fef3c7;
    color: #d97706;
}

.di-file-section-error[b-o18pb484qz] {
    padding: 10px 16px;
    background: #fff5f5;
    font-size: 12px;
    color: #dc2626;
    font-family: monospace;
}

.di-file-section-table-wrap[b-o18pb484qz] {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
    background: #fff;
}

/* Debug panel */
.di-multi-debug[b-o18pb484qz] {
    margin-top: 4px;
    border: 1px solid #d0e8ed;
    border-radius: 8px;
    overflow: hidden;
}

.di-multi-debug-header[b-o18pb484qz] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0,124,145,0.03);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #5a8090;
    text-align: left;
    transition: background 0.15s;
}

    .di-multi-debug-header:hover[b-o18pb484qz] {
        background: rgba(0,124,145,0.07);
    }

.di-multi-debug-table[b-o18pb484qz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .di-multi-debug-table th[b-o18pb484qz] {
        padding: 6px 12px;
        text-align: left;
        border-bottom: 1px solid #d0e8ed;
        background: rgba(0,124,145,0.03);
        color: #007c91;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        white-space: nowrap;
    }

    .di-multi-debug-table td[b-o18pb484qz] {
        padding: 5px 12px;
        border-bottom: 1px solid #f0f4f5;
        color: #0a2535;
        font-size: 11.5px;
    }

.di-debug-row-ok[b-o18pb484qz] {
    background: #fff;
}

.di-debug-row-partial[b-o18pb484qz] {
    background: #fffbeb;
}

.di-debug-row-failed[b-o18pb484qz] {
    background: #fff5f5;
}

/* ── Dark mode — multi-file preview ─────────────────────── */
body.dark .di-file-section[b-o18pb484qz] {
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-file-section-failed[b-o18pb484qz] {
    border-color: rgba(255,107,107,0.4);
}

body.dark .di-file-section-partial[b-o18pb484qz] {
    border-color: rgba(251,191,36,0.4);
}

body.dark .di-file-section-header[b-o18pb484qz] {
    background: rgba(0,188,212,0.05);
    border-bottom-color: rgba(0,188,212,0.15);
}

body.dark .di-file-header-clickable:hover[b-o18pb484qz] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-file-section-failed .di-file-section-header[b-o18pb484qz] {
    background: rgba(255,107,107,0.06);
    border-bottom-color: rgba(255,107,107,0.3);
}

body.dark .di-file-section-partial .di-file-section-header[b-o18pb484qz] {
    background: rgba(251,191,36,0.06);
    border-bottom-color: rgba(251,191,36,0.3);
}

body.dark .di-file-collapse-icon[b-o18pb484qz] {
    color: #4a9aaa;
}

body.dark .di-file-section-name[b-o18pb484qz] {
    color: #c8eef5;
}

body.dark .di-file-section-size[b-o18pb484qz] {
    color: #4a9aaa;
}

body.dark .di-file-section-error[b-o18pb484qz] {
    background: rgba(255,107,107,0.08);
    color: #ff6b6b;
}

body.dark .di-file-section-table-wrap[b-o18pb484qz] {
    background: rgba(0,188,212,0.03);
}

body.dark .di-multi-debug[b-o18pb484qz] {
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-multi-debug-header[b-o18pb484qz] {
    background: rgba(0,188,212,0.05);
    color: #4a9aaa;
}

    body.dark .di-multi-debug-header:hover[b-o18pb484qz] {
        background: rgba(0,188,212,0.1);
    }

body.dark .di-multi-debug-table th[b-o18pb484qz] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-bottom-color: rgba(0,188,212,0.18);
}

body.dark .di-multi-debug-table td[b-o18pb484qz] {
    color: #c8eef5;
    border-bottom-color: rgba(0,188,212,0.08);
}

body.dark .di-debug-row-ok[b-o18pb484qz] {
    background: transparent;
}

body.dark .di-debug-row-partial[b-o18pb484qz] {
    background: rgba(251,191,36,0.05);
}

body.dark .di-debug-row-failed[b-o18pb484qz] {
    background: rgba(255,107,107,0.05);
}

.di-multi-debug-scroll[b-o18pb484qz] {
    overflow-x: auto;
    max-height: 220px;
    overflow-y: auto;
    background: transparent;
}

body.dark .di-multi-debug-scroll[b-o18pb484qz] {
    background: transparent;
}

/* ── File section table wrap scrollbar ── */
.di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar-track {
    background: transparent;
}

.di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-file-section-table-wrap[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* ── Debug scroll area scrollbar ── */
.di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar-track {
    background: transparent;
}

.di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-multi-debug-scroll[b-o18pb484qz]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Fix sticky header background inside file section table wrap */
.di-file-section-table-wrap .di-table th[b-o18pb484qz] {
    background: #f4fafc;
}

body.dark .di-file-section-table-wrap .di-table th[b-o18pb484qz] {
    background: #0d2535;
}


/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/DataImportComponents/BillingsComponent.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-to6066x3dw] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
}

body.dark .page-wrap[b-to6066x3dw] {
    background: #081820;
}

/* Breadcrumb */
.breadcrumb-row[b-to6066x3dw] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-to6066x3dw] {
        color: #333;
        font-weight: 500;
    }

.main-content.dark .breadcrumb-row[b-to6066x3dw] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-to6066x3dw] {
        color: #b0d0d8;
    }

/* Title and SubTitle */
.page-title[b-to6066x3dw] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-to6066x3dw] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.main-content.dark .page-title[b-to6066x3dw] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-to6066x3dw] {
    color: #6a9aaa;
}

/* Tabs */
.di-tabs-row[b-to6066x3dw] {
    display: flex;
    gap: 0;
    background: rgba(0,124,145,0.07);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 1rem;
}

.di-tab[b-to6066x3dw] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .di-tab:hover[b-to6066x3dw] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .di-tab.active[b-to6066x3dw] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .di-tabs-row[b-to6066x3dw] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .di-tab[b-to6066x3dw] {
    color: rgba(255,255,255,0.45);
}

    body.dark .di-tab:hover[b-to6066x3dw] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .di-tab.active[b-to6066x3dw] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* Main Card */
.di-card[b-to6066x3dw] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .di-card[b-to6066x3dw]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

body.dark .di-card[b-to6066x3dw] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inline Upload Row */
.di-upload-row[b-to6066x3dw] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,124,145,0.04);
    border-bottom: 1px solid #d0e8ed;
    flex-wrap: wrap;
}

body.dark .di-upload-row[b-to6066x3dw] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

.di-field[b-to6066x3dw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-label[b-to6066x3dw] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .di-label[b-to6066x3dw] {
    color: #4a9aaa;
}

.di-input[b-to6066x3dw] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    color: #0a2535;
    width: 90px;
    outline: none;
    transition: border-color 0.15s;
}

    .di-input:focus[b-to6066x3dw] {
        border-color: #00bcd4;
    }

.di-field-file .di-input[b-to6066x3dw] {
    width: 180px;
}

.di-file-input[b-to6066x3dw] {
    font-size: 0.7rem;
    color: #5a8090;
}

.di-file-hint[b-to6066x3dw] {
    font-size: 0.68rem;
    color: #9bb8c2;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.di-btn-upload[b-to6066x3dw] {
    background: #e65100;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.38rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
    white-space: nowrap;
}

    .di-btn-upload:hover[b-to6066x3dw] {
        background: #bf360c;
    }

    .di-btn-upload:disabled[b-to6066x3dw] {
        opacity: 0.5;
        cursor: default;
    }

body.dark .di-input[b-to6066x3dw] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .di-input:focus[b-to6066x3dw] {
        border-color: #00bcd4;
    }

/* Status Message */
.di-status[b-to6066x3dw] {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}

.di-status-success[b-to6066x3dw] {
    background: rgba(0,150,100,0.08);
    color: #00695c;
    border-color: rgba(0,150,100,0.2);
}

.di-status-error[b-to6066x3dw] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border-color: rgba(220,53,69,0.2);
}

body.dark .di-status-success[b-to6066x3dw] {
    background: rgba(0,188,150,0.1);
    color: #00e5b0;
}

body.dark .di-status-error[b-to6066x3dw] {
    background: rgba(220,53,69,0.1);
    color: #ff6b6b;
}

/* Table Header */
.di-table-header[b-to6066x3dw] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,124,145,0.03);
}

.di-table-title[b-to6066x3dw] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-table-meta[b-to6066x3dw] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .di-table-header[b-to6066x3dw] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .di-table-title[b-to6066x3dw] {
    color: #00bcd4;
}

body.dark .di-table-meta[b-to6066x3dw] {
    color: #4a9aaa;
}

/* Table */
.di-table-wrap[b-to6066x3dw] {
    overflow-x: auto;
}

.di-table[b-to6066x3dw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 700px;
    text-align: center;
}

    .di-table.fixed[b-to6066x3dw] {
        table-layout: fixed;
    }

    .di-table th[b-to6066x3dw] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .di-table td[b-to6066x3dw] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

        .di-table td.td-wrap[b-to6066x3dw] {
            white-space: normal;
            word-break: break-word;
        }

    .di-table tr:last-child td[b-to6066x3dw] {
        border-bottom: none;
    }

    .di-table tr:hover td[b-to6066x3dw] {
        background: rgba(0,124,145,0.03);
    }

.di-empty[b-to6066x3dw] {
    text-align: center;
    color: #9bb8c2;
    padding: 2rem !important;
    font-style: italic;
}

body.dark .di-table th[b-to6066x3dw] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-table td[b-to6066x3dw] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .di-table tr:hover td[b-to6066x3dw] {
    background: rgba(0,188,212,0.04);
}

/* Badges */
.di-badge-file[b-to6066x3dw] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

.di-status-badge[b-to6066x3dw] {
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
}

.di-badge-success[b-to6066x3dw] {
    background: rgba(0,150,100,0.1);
    color: #00695c;
}

.di-badge-error[b-to6066x3dw] {
    background: rgba(220,53,69,0.1);
    color: #c62828;
}

body.dark .di-badge-file[b-to6066x3dw] {
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
}

body.dark .di-badge-success[b-to6066x3dw] {
    color: #00e5b0;
}

body.dark .di-badge-error[b-to6066x3dw] {
    color: #ff6b6b;
}

/* Action Buttons */
.di-action-cell[b-to6066x3dw] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.di-btn-view[b-to6066x3dw] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-view:hover[b-to6066x3dw] {
        background: rgba(0,124,145,0.18);
    }

.di-btn-del[b-to6066x3dw] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-del:hover[b-to6066x3dw] {
        background: rgba(220,53,69,0.15);
    }

body.dark .di-btn-view[b-to6066x3dw] {
    background: rgba(0,188,212,0.1);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.3);
}

body.dark .di-btn-del[b-to6066x3dw] {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.3);
}

/* Pagination */
.di-pagination[b-to6066x3dw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
}

.di-pg-info[b-to6066x3dw] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.di-pg-btns[b-to6066x3dw] {
    display: flex;
    gap: 3px;
}

.di-pg-btn[b-to6066x3dw] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .di-pg-btn:hover:not(:disabled)[b-to6066x3dw] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .di-pg-btn.active[b-to6066x3dw] {
        background: #007c91;
        color: #fff;
        border-color: #007c91;
    }

    .di-pg-btn:disabled[b-to6066x3dw] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .di-pagination[b-to6066x3dw] {
    border-color: rgba(0,188,212,0.15);
    background: rgba(0,188,212,0.03);
}

body.dark .di-pg-info[b-to6066x3dw] {
    color: #4a9aaa;
}

body.dark .di-pg-btn[b-to6066x3dw] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .di-pg-btn.active[b-to6066x3dw] {
        background: rgba(0,188,212,0.2);
        color: #fff;
    }

/* Preview Card */
.di-preview-card[b-to6066x3dw] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 2px 10px rgba(0,124,145,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.dark .di-preview-card[b-to6066x3dw] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
}

/* Modal */
.di-modal-overlay[b-to6066x3dw] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 1rem 1rem;
}

.di-modal[b-to6066x3dw] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d0e8ed;
    width: 95%;
    max-width: 950px;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.di-modal-header[b-to6066x3dw] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-start; /*center*/
    justify-content: space-between;
    background: rgba(0,124,145,0.04);
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    flex: 1;
    margin-right: 0.5rem;
}

.di-modal-title[b-to6066x3dw] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-modal-close[b-to6066x3dw] {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #9bb8c2;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s;
}

    .di-modal-close:hover[b-to6066x3dw] {
        background: rgba(220,53,69,0.1);
        color: #c62828;
    }

.di-modal-meta[b-to6066x3dw] {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: #5a8090;
    font-weight: 600;
    border-bottom: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
    flex-shrink: 0;
}

.di-modal-body[b-to6066x3dw] {
    flex: 1;
    overflow-y: auto;
}

body.dark .di-modal[b-to6066x3dw] {
    background: #112233;
    border-color: rgba(0,188,212,0.2);
}

body.dark .di-modal-header[b-to6066x3dw] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-modal-title[b-to6066x3dw] {
    color: #00bcd4;
}

body.dark .di-modal-meta[b-to6066x3dw] {
    color: #4a9aaa;
    border-color: rgba(0,188,212,0.15);
}

/* Main table scrollbar */
.di-table-wrap[b-to6066x3dw]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-track {
    background: transparent;
}

.di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Modal body scrollbar */
.di-modal-body[b-to6066x3dw]::-webkit-scrollbar {
    width: 6px;
}

.di-modal-body[b-to6066x3dw]::-webkit-scrollbar-track {
    background: transparent;
}

.di-modal-body[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-modal-body[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-modal-body[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-modal-body[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Preview table scrollbar */
.di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-track {
    background: transparent;
}

.di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-preview-card .di-table-wrap[b-to6066x3dw]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

.di-progress-wrap[b-to6066x3dw] {
    position: relative;
    height: 28px;
    background: rgba(0,124,145,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.di-progress-bar[b-to6066x3dw] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #007c91, #00bcd4);
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .di-progress-bar.di-progress-done[b-to6066x3dw] {
        background: linear-gradient(90deg, #00796b, #00bfa5);
    }

.di-progress-label[b-to6066x3dw] {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a2535;
    padding: 0 0.75rem;
    white-space: nowrap;
}

body.dark .di-progress-wrap[b-to6066x3dw] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-progress-label[b-to6066x3dw] {
    color: #e4f6fa;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/DataImportComponents/JobComponent.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-leithe7x0k] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
}

body.dark .page-wrap[b-leithe7x0k] {
    background: #081820;
}

/* Breadcrumb */
.breadcrumb-row[b-leithe7x0k] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-leithe7x0k] {
        color: #333;
        font-weight: 500;
    }

.main-content.dark .breadcrumb-row[b-leithe7x0k] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-leithe7x0k] {
        color: #b0d0d8;
    }

/* Title and SubTitle */
.page-title[b-leithe7x0k] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-leithe7x0k] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.main-content.dark .page-title[b-leithe7x0k] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-leithe7x0k] {
    color: #6a9aaa;
}

/* Tabs */
.di-tabs-row[b-leithe7x0k] {
    display: flex;
    gap: 0;
    background: rgba(0,124,145,0.07);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 1rem;
}

.di-tab[b-leithe7x0k] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .di-tab:hover[b-leithe7x0k] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .di-tab.active[b-leithe7x0k] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .di-tabs-row[b-leithe7x0k] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .di-tab[b-leithe7x0k] {
    color: rgba(255,255,255,0.45);
}

    body.dark .di-tab:hover[b-leithe7x0k] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .di-tab.active[b-leithe7x0k] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* Main Card */
.di-card[b-leithe7x0k] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .di-card[b-leithe7x0k]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

body.dark .di-card[b-leithe7x0k] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inline Upload Row */
.di-upload-row[b-leithe7x0k] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,124,145,0.04);
    border-bottom: 1px solid #d0e8ed;
    flex-wrap: wrap;
}

body.dark .di-upload-row[b-leithe7x0k] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

.di-field[b-leithe7x0k] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-label[b-leithe7x0k] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .di-label[b-leithe7x0k] {
    color: #4a9aaa;
}

.di-input[b-leithe7x0k] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    color: #0a2535;
    width: 90px;
    outline: none;
    transition: border-color 0.15s;
}

    .di-input:focus[b-leithe7x0k] {
        border-color: #00bcd4;
    }

.di-field-file .di-input[b-leithe7x0k] {
    width: 180px;
}

.di-file-input[b-leithe7x0k] {
    font-size: 0.7rem;
    color: #5a8090;
}

.di-file-hint[b-leithe7x0k] {
    font-size: 0.68rem;
    color: #9bb8c2;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.di-btn-upload[b-leithe7x0k] {
    background: #e65100;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.38rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
    white-space: nowrap;
}

    .di-btn-upload:hover[b-leithe7x0k] {
        background: #bf360c;
    }

    .di-btn-upload:disabled[b-leithe7x0k] {
        opacity: 0.5;
        cursor: default;
    }

body.dark .di-input[b-leithe7x0k] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .di-input:focus[b-leithe7x0k] {
        border-color: #00bcd4;
    }

/* Status Message */
.di-status[b-leithe7x0k] {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}

.di-status-success[b-leithe7x0k] {
    background: rgba(0,150,100,0.08);
    color: #00695c;
    border-color: rgba(0,150,100,0.2);
}

.di-status-error[b-leithe7x0k] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border-color: rgba(220,53,69,0.2);
}

body.dark .di-status-success[b-leithe7x0k] {
    background: rgba(0,188,150,0.1);
    color: #00e5b0;
}

body.dark .di-status-error[b-leithe7x0k] {
    background: rgba(220,53,69,0.1);
    color: #ff6b6b;
}

/* Table Header */
.di-table-header[b-leithe7x0k] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,124,145,0.03);
}

.di-table-title[b-leithe7x0k] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-table-meta[b-leithe7x0k] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .di-table-header[b-leithe7x0k] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .di-table-title[b-leithe7x0k] {
    color: #00bcd4;
}

body.dark .di-table-meta[b-leithe7x0k] {
    color: #4a9aaa;
}

/* Table */
.di-table-wrap[b-leithe7x0k] {
    overflow-x: auto;
}

.di-table[b-leithe7x0k] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 700px;
    text-align: center;
}

    .di-table.fixed[b-leithe7x0k] {
        table-layout: fixed;
    }

    .di-table th[b-leithe7x0k] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .di-table td[b-leithe7x0k] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

        .di-table td.td-wrap[b-leithe7x0k] {
            white-space: normal;
            word-break: break-word;
        }

    .di-table tr:last-child td[b-leithe7x0k] {
        border-bottom: none;
    }

    .di-table tr:hover td[b-leithe7x0k] {
        background: rgba(0,124,145,0.03);
    }

.di-empty[b-leithe7x0k] {
    text-align: center;
    color: #9bb8c2;
    padding: 2rem !important;
    font-style: italic;
}

body.dark .di-table th[b-leithe7x0k] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-table td[b-leithe7x0k] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .di-table tr:hover td[b-leithe7x0k] {
    background: rgba(0,188,212,0.04);
}

/* Badges */
.di-badge-file[b-leithe7x0k] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

.di-status-badge[b-leithe7x0k] {
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
}

.di-badge-success[b-leithe7x0k] {
    background: rgba(0,150,100,0.1);
    color: #00695c;
}

.di-badge-error[b-leithe7x0k] {
    background: rgba(220,53,69,0.1);
    color: #c62828;
}

body.dark .di-badge-file[b-leithe7x0k] {
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
}

body.dark .di-badge-success[b-leithe7x0k] {
    color: #00e5b0;
}

body.dark .di-badge-error[b-leithe7x0k] {
    color: #ff6b6b;
}

/* Action Buttons */
.di-action-cell[b-leithe7x0k] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.di-btn-view[b-leithe7x0k] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-view:hover[b-leithe7x0k] {
        background: rgba(0,124,145,0.18);
    }

.di-btn-del[b-leithe7x0k] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-del:hover[b-leithe7x0k] {
        background: rgba(220,53,69,0.15);
    }

body.dark .di-btn-view[b-leithe7x0k] {
    background: rgba(0,188,212,0.1);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.3);
}

body.dark .di-btn-del[b-leithe7x0k] {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.3);
}

/* Pagination */
.di-pagination[b-leithe7x0k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
}

.di-pg-info[b-leithe7x0k] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.di-pg-btns[b-leithe7x0k] {
    display: flex;
    gap: 3px;
}

.di-pg-btn[b-leithe7x0k] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .di-pg-btn:hover:not(:disabled)[b-leithe7x0k] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .di-pg-btn.active[b-leithe7x0k] {
        background: #007c91;
        color: #fff;
        border-color: #007c91;
    }

    .di-pg-btn:disabled[b-leithe7x0k] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .di-pagination[b-leithe7x0k] {
    border-color: rgba(0,188,212,0.15);
    background: rgba(0,188,212,0.03);
}

body.dark .di-pg-info[b-leithe7x0k] {
    color: #4a9aaa;
}

body.dark .di-pg-btn[b-leithe7x0k] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .di-pg-btn.active[b-leithe7x0k] {
        background: rgba(0,188,212,0.2);
        color: #fff;
    }

/* Preview Card */
.di-preview-card[b-leithe7x0k] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 2px 10px rgba(0,124,145,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.dark .di-preview-card[b-leithe7x0k] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
}

/* Modal */
.di-modal-overlay[b-leithe7x0k] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 1rem 1rem;
}

.di-modal[b-leithe7x0k] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d0e8ed;
    width: 95%;
    max-width: 950px;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.di-modal-header[b-leithe7x0k] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-start; /*center*/
    justify-content: space-between;
    background: rgba(0,124,145,0.04);
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    flex: 1;
    margin-right: 0.5rem;
}

.di-modal-title[b-leithe7x0k] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-modal-close[b-leithe7x0k] {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #9bb8c2;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s;
}

    .di-modal-close:hover[b-leithe7x0k] {
        background: rgba(220,53,69,0.1);
        color: #c62828;
    }

.di-modal-meta[b-leithe7x0k] {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: #5a8090;
    font-weight: 600;
    border-bottom: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
    flex-shrink: 0;
}

.di-modal-body[b-leithe7x0k] {
    flex: 1;
    overflow-y: auto;
}

body.dark .di-modal[b-leithe7x0k] {
    background: #112233;
    border-color: rgba(0,188,212,0.2);
}

body.dark .di-modal-header[b-leithe7x0k] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-modal-title[b-leithe7x0k] {
    color: #00bcd4;
}

body.dark .di-modal-meta[b-leithe7x0k] {
    color: #4a9aaa;
    border-color: rgba(0,188,212,0.15);
}

/* Main table scrollbar */
.di-table-wrap[b-leithe7x0k]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-track {
    background: transparent;
}

.di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Modal body scrollbar */
.di-modal-body[b-leithe7x0k]::-webkit-scrollbar {
    width: 6px;
}

.di-modal-body[b-leithe7x0k]::-webkit-scrollbar-track {
    background: transparent;
}

.di-modal-body[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-modal-body[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-modal-body[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-modal-body[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Preview table scrollbar */
.di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-track {
    background: transparent;
}

.di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-preview-card .di-table-wrap[b-leithe7x0k]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

.di-progress-wrap[b-leithe7x0k] {
    position: relative;
    height: 28px;
    background: rgba(0,124,145,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.di-progress-bar[b-leithe7x0k] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #007c91, #00bcd4);
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .di-progress-bar.di-progress-done[b-leithe7x0k] {
        background: linear-gradient(90deg, #00796b, #00bfa5);
    }

.di-progress-label[b-leithe7x0k] {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a2535;
    padding: 0 0.75rem;
    white-space: nowrap;
}

body.dark .di-progress-wrap[b-leithe7x0k] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-progress-label[b-leithe7x0k] {
    color: #e4f6fa;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/DataImportComponents/ProjectAssistanceReportComponent.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-vtxx28deag] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
}

body.dark .page-wrap[b-vtxx28deag] {
    background: #081820;
}

/* Breadcrumb */
.breadcrumb-row[b-vtxx28deag] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-vtxx28deag] {
        color: #333;
        font-weight: 500;
    }

.main-content.dark .breadcrumb-row[b-vtxx28deag] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-vtxx28deag] {
        color: #b0d0d8;
    }

/* Title and SubTitle */
.page-title[b-vtxx28deag] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-vtxx28deag] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.main-content.dark .page-title[b-vtxx28deag] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-vtxx28deag] {
    color: #6a9aaa;
}

/* Tabs */
.di-tabs-row[b-vtxx28deag] {
    display: flex;
    gap: 0;
    background: rgba(0,124,145,0.07);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 1rem;
}

.di-tab[b-vtxx28deag] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .di-tab:hover[b-vtxx28deag] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .di-tab.active[b-vtxx28deag] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .di-tabs-row[b-vtxx28deag] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .di-tab[b-vtxx28deag] {
    color: rgba(255,255,255,0.45);
}

    body.dark .di-tab:hover[b-vtxx28deag] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .di-tab.active[b-vtxx28deag] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* Main Card */
.di-card[b-vtxx28deag] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .di-card[b-vtxx28deag]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

body.dark .di-card[b-vtxx28deag] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inline Upload Row */
.di-upload-row[b-vtxx28deag] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,124,145,0.04);
    border-bottom: 1px solid #d0e8ed;
    flex-wrap: wrap;
}

body.dark .di-upload-row[b-vtxx28deag] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

.di-field[b-vtxx28deag] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-label[b-vtxx28deag] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .di-label[b-vtxx28deag] {
    color: #4a9aaa;
}

.di-input[b-vtxx28deag] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    color: #0a2535;
    width: 90px;
    outline: none;
    transition: border-color 0.15s;
}

    .di-input:focus[b-vtxx28deag] {
        border-color: #00bcd4;
    }

.di-field-file .di-input[b-vtxx28deag] {
    width: 180px;
}

.di-file-input[b-vtxx28deag] {
    font-size: 0.7rem;
    color: #5a8090;
}

.di-file-hint[b-vtxx28deag] {
    font-size: 0.68rem;
    color: #9bb8c2;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.di-btn-upload[b-vtxx28deag] {
    background: #e65100;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.38rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
    white-space: nowrap;
}

    .di-btn-upload:hover[b-vtxx28deag] {
        background: #bf360c;
    }

    .di-btn-upload:disabled[b-vtxx28deag] {
        opacity: 0.5;
        cursor: default;
    }

body.dark .di-input[b-vtxx28deag] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .di-input:focus[b-vtxx28deag] {
        border-color: #00bcd4;
    }

/* Status Message */
.di-status[b-vtxx28deag] {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}

.di-status-success[b-vtxx28deag] {
    background: rgba(0,150,100,0.08);
    color: #00695c;
    border-color: rgba(0,150,100,0.2);
}

.di-status-error[b-vtxx28deag] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border-color: rgba(220,53,69,0.2);
}

body.dark .di-status-success[b-vtxx28deag] {
    background: rgba(0,188,150,0.1);
    color: #00e5b0;
}

body.dark .di-status-error[b-vtxx28deag] {
    background: rgba(220,53,69,0.1);
    color: #ff6b6b;
}

/* Table Header */
.di-table-header[b-vtxx28deag] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,124,145,0.03);
}

.di-table-title[b-vtxx28deag] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-table-meta[b-vtxx28deag] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .di-table-header[b-vtxx28deag] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .di-table-title[b-vtxx28deag] {
    color: #00bcd4;
}

body.dark .di-table-meta[b-vtxx28deag] {
    color: #4a9aaa;
}

/* Table */
.di-table-wrap[b-vtxx28deag] {
    overflow-x: auto;
}

.di-table[b-vtxx28deag] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 700px;
    text-align: center;
}

    .di-table.fixed[b-vtxx28deag] {
        table-layout: fixed;
    }

    .di-table th[b-vtxx28deag] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .di-table td[b-vtxx28deag] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

        .di-table td.td-wrap[b-vtxx28deag] {
            white-space: normal;
            word-break: break-word;
        }

    .di-table tr:last-child td[b-vtxx28deag] {
        border-bottom: none;
    }

    .di-table tr:hover td[b-vtxx28deag] {
        background: rgba(0,124,145,0.03);
    }

.di-empty[b-vtxx28deag] {
    text-align: center;
    color: #9bb8c2;
    padding: 2rem !important;
    font-style: italic;
}

body.dark .di-table th[b-vtxx28deag] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-table td[b-vtxx28deag] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .di-table tr:hover td[b-vtxx28deag] {
    background: rgba(0,188,212,0.04);
}

/* Badges */
.di-badge-file[b-vtxx28deag] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

.di-status-badge[b-vtxx28deag] {
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
}

.di-badge-success[b-vtxx28deag] {
    background: rgba(0,150,100,0.1);
    color: #00695c;
}

.di-badge-error[b-vtxx28deag] {
    background: rgba(220,53,69,0.1);
    color: #c62828;
}

body.dark .di-badge-file[b-vtxx28deag] {
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
}

body.dark .di-badge-success[b-vtxx28deag] {
    color: #00e5b0;
}

body.dark .di-badge-error[b-vtxx28deag] {
    color: #ff6b6b;
}

/* Action Buttons */
.di-action-cell[b-vtxx28deag] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.di-btn-view[b-vtxx28deag] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-view:hover[b-vtxx28deag] {
        background: rgba(0,124,145,0.18);
    }

.di-btn-del[b-vtxx28deag] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-del:hover[b-vtxx28deag] {
        background: rgba(220,53,69,0.15);
    }

body.dark .di-btn-view[b-vtxx28deag] {
    background: rgba(0,188,212,0.1);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.3);
}

body.dark .di-btn-del[b-vtxx28deag] {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.3);
}

/* Pagination */
.di-pagination[b-vtxx28deag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
}

.di-pg-info[b-vtxx28deag] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.di-pg-btns[b-vtxx28deag] {
    display: flex;
    gap: 3px;
}

.di-pg-btn[b-vtxx28deag] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .di-pg-btn:hover:not(:disabled)[b-vtxx28deag] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .di-pg-btn.active[b-vtxx28deag] {
        background: #007c91;
        color: #fff;
        border-color: #007c91;
    }

    .di-pg-btn:disabled[b-vtxx28deag] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .di-pagination[b-vtxx28deag] {
    border-color: rgba(0,188,212,0.15);
    background: rgba(0,188,212,0.03);
}

body.dark .di-pg-info[b-vtxx28deag] {
    color: #4a9aaa;
}

body.dark .di-pg-btn[b-vtxx28deag] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .di-pg-btn.active[b-vtxx28deag] {
        background: rgba(0,188,212,0.2);
        color: #fff;
    }

/* Preview Card */
.di-preview-card[b-vtxx28deag] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 2px 10px rgba(0,124,145,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.dark .di-preview-card[b-vtxx28deag] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
}

/* Modal */
.di-modal-overlay[b-vtxx28deag] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 1rem 1rem;
}

.di-modal[b-vtxx28deag] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d0e8ed;
    width: 95%;
    max-width: 950px;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.di-modal-header[b-vtxx28deag] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-start; /*center*/
    justify-content: space-between;
    background: rgba(0,124,145,0.04);
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    flex: 1;
    margin-right: 0.5rem;
}

.di-modal-title[b-vtxx28deag] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-modal-close[b-vtxx28deag] {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #9bb8c2;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s;
}

    .di-modal-close:hover[b-vtxx28deag] {
        background: rgba(220,53,69,0.1);
        color: #c62828;
    }

.di-modal-meta[b-vtxx28deag] {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: #5a8090;
    font-weight: 600;
    border-bottom: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
    flex-shrink: 0;
}

.di-modal-body[b-vtxx28deag] {
    flex: 1;
    overflow-y: auto;
}

body.dark .di-modal[b-vtxx28deag] {
    background: #112233;
    border-color: rgba(0,188,212,0.2);
}

body.dark .di-modal-header[b-vtxx28deag] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-modal-title[b-vtxx28deag] {
    color: #00bcd4;
}

body.dark .di-modal-meta[b-vtxx28deag] {
    color: #4a9aaa;
    border-color: rgba(0,188,212,0.15);
}

/* Main table scrollbar */
.di-table-wrap[b-vtxx28deag]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-track {
    background: transparent;
}

.di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Modal body scrollbar */
.di-modal-body[b-vtxx28deag]::-webkit-scrollbar {
    width: 6px;
}

.di-modal-body[b-vtxx28deag]::-webkit-scrollbar-track {
    background: transparent;
}

.di-modal-body[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-modal-body[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-modal-body[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-modal-body[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Preview table scrollbar */
.di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-track {
    background: transparent;
}

.di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-preview-card .di-table-wrap[b-vtxx28deag]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

.di-progress-wrap[b-vtxx28deag] {
    position: relative;
    height: 28px;
    background: rgba(0,124,145,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.di-progress-bar[b-vtxx28deag] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #007c91, #00bcd4);
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .di-progress-bar.di-progress-done[b-vtxx28deag] {
        background: linear-gradient(90deg, #00796b, #00bfa5);
    }

.di-progress-label[b-vtxx28deag] {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a2535;
    padding: 0 0.75rem;
    white-space: nowrap;
}

body.dark .di-progress-wrap[b-vtxx28deag] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-progress-label[b-vtxx28deag] {
    color: #e4f6fa;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/DataImportComponents/TimeUseReportComponent.razor.rz.scp.css */
/* Page-Wrap */
.page-wrap[b-xuiu3j5zba] {
    padding: 0.15rem 0.2rem 3rem;
    background: #eaf5f7;
}

body.dark .page-wrap[b-xuiu3j5zba] {
    background: #081820;
}

/* Breadcrumb */
.breadcrumb-row[b-xuiu3j5zba] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-xuiu3j5zba] {
        color: #333;
        font-weight: 500;
    }

.main-content.dark .breadcrumb-row[b-xuiu3j5zba] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-xuiu3j5zba] {
        color: #b0d0d8;
    }

/* Title and SubTitle */
.page-title[b-xuiu3j5zba] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-xuiu3j5zba] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.main-content.dark .page-title[b-xuiu3j5zba] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-xuiu3j5zba] {
    color: #6a9aaa;
}

/* Tabs */
.di-tabs-row[b-xuiu3j5zba] {
    display: flex;
    gap: 0;
    background: rgba(0,124,145,0.07);
    border: 1.5px solid rgba(0,124,145,0.15);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin-bottom: 1rem;
}

.di-tab[b-xuiu3j5zba] {
    padding: 0.38rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #8aabb5;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    border-radius: 8px;
    transition: all 0.15s;
}

    .di-tab:hover[b-xuiu3j5zba] {
        color: #007c91;
        background: rgba(0,124,145,0.08);
    }

    .di-tab.active[b-xuiu3j5zba] {
        background: #fff;
        color: #007c91;
        font-weight: 800;
        box-shadow: 0 1px 6px rgba(0,124,145,0.15);
    }

body.dark .di-tabs-row[b-xuiu3j5zba] {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.12);
}

body.dark .di-tab[b-xuiu3j5zba] {
    color: rgba(255,255,255,0.45);
}

    body.dark .di-tab:hover[b-xuiu3j5zba] {
        color: rgba(255,255,255,0.85);
        background: rgba(255,255,255,0.08);
    }

    body.dark .di-tab.active[b-xuiu3j5zba] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* Main Card */
.di-card[b-xuiu3j5zba] {
    background: #fff;
    border-radius: 0 14px 14px 14px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 4px 20px rgba(0,124,145,0.08);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

    .di-card[b-xuiu3j5zba]::before {
        content: '';
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #007c91, #00bcd4, #00e5ff);
    }

body.dark .di-card[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Inline Upload Row */
.di-upload-row[b-xuiu3j5zba] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0,124,145,0.04);
    border-bottom: 1px solid #d0e8ed;
    flex-wrap: wrap;
}

body.dark .di-upload-row[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

.di-field[b-xuiu3j5zba] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-label[b-xuiu3j5zba] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .di-label[b-xuiu3j5zba] {
    color: #4a9aaa;
}

.di-input[b-xuiu3j5zba] {
    border: 1.5px solid #d0e8ed;
    border-radius: 8px;
    padding: 0.32rem 0.65rem;
    font-size: 0.75rem;
    font-family: inherit;
    background: #fff;
    color: #0a2535;
    width: 90px;
    outline: none;
    transition: border-color 0.15s;
}

    .di-input:focus[b-xuiu3j5zba] {
        border-color: #00bcd4;
    }

.di-field-file .di-input[b-xuiu3j5zba] {
    width: 180px;
}

.di-file-input[b-xuiu3j5zba] {
    font-size: 0.7rem;
    color: #5a8090;
}

.di-file-hint[b-xuiu3j5zba] {
    font-size: 0.68rem;
    color: #9bb8c2;
    align-self: flex-end;
    padding-bottom: 0.35rem;
}

.di-btn-upload[b-xuiu3j5zba] {
    background: #e65100;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.38rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.15s;
    white-space: nowrap;
}

    .di-btn-upload:hover[b-xuiu3j5zba] {
        background: #bf360c;
    }

    .di-btn-upload:disabled[b-xuiu3j5zba] {
        opacity: 0.5;
        cursor: default;
    }

body.dark .di-input[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #e4f6fa;
}

    body.dark .di-input:focus[b-xuiu3j5zba] {
        border-color: #00bcd4;
    }

/* Status Message */
.di-status[b-xuiu3j5zba] {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
}

.di-status-success[b-xuiu3j5zba] {
    background: rgba(0,150,100,0.08);
    color: #00695c;
    border-color: rgba(0,150,100,0.2);
}

.di-status-error[b-xuiu3j5zba] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border-color: rgba(220,53,69,0.2);
}

body.dark .di-status-success[b-xuiu3j5zba] {
    background: rgba(0,188,150,0.1);
    color: #00e5b0;
}

body.dark .di-status-error[b-xuiu3j5zba] {
    background: rgba(220,53,69,0.1);
    color: #ff6b6b;
}

/* Table Header */
.di-table-header[b-xuiu3j5zba] {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,124,145,0.03);
}

.di-table-title[b-xuiu3j5zba] {
    font-size: 0.72rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-table-meta[b-xuiu3j5zba] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

body.dark .di-table-header[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.05);
    border-color: rgba(0,188,212,0.15);
}

body.dark .di-table-title[b-xuiu3j5zba] {
    color: #00bcd4;
}

body.dark .di-table-meta[b-xuiu3j5zba] {
    color: #4a9aaa;
}

/* Table */
.di-table-wrap[b-xuiu3j5zba] {
    overflow-x: auto;
}

.di-table[b-xuiu3j5zba] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    min-width: 700px;
    text-align: center;
}

    .di-table.fixed[b-xuiu3j5zba] {
        table-layout: fixed;
    }

    .di-table th[b-xuiu3j5zba] {
        padding: 0.42rem 0.75rem;
        text-align: center;
        color: #007c91;
        font-weight: 800;
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-bottom: 1.5px solid #d0e8ed;
        white-space: normal;
        word-break: break-word;
        vertical-align: central;
        position: sticky;
        top: 0;
        background: #f4fafc;
        z-index: 1;
    }

    .di-table td[b-xuiu3j5zba] {
        padding: 0.42rem 0.75rem;
        color: #0a2535;
        border-bottom: 1px solid #f0f4f5;
        vertical-align: middle;
        white-space: nowrap;
    }

        .di-table td.td-wrap[b-xuiu3j5zba] {
            white-space: normal;
            word-break: break-word;
        }

    .di-table tr:last-child td[b-xuiu3j5zba] {
        border-bottom: none;
    }

    .di-table tr:hover td[b-xuiu3j5zba] {
        background: rgba(0,124,145,0.03);
    }

.di-empty[b-xuiu3j5zba] {
    text-align: center;
    color: #9bb8c2;
    padding: 2rem !important;
    font-style: italic;
}

body.dark .di-table th[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.06);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-table td[b-xuiu3j5zba] {
    color: #c8eef5;
    border-color: rgba(0,188,212,0.08);
}

body.dark .di-table tr:hover td[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.04);
}

/* Badges */
.di-badge-file[b-xuiu3j5zba] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-block;
    white-space: normal;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

.di-status-badge[b-xuiu3j5zba] {
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.62rem;
    font-weight: 700;
}

.di-badge-success[b-xuiu3j5zba] {
    background: rgba(0,150,100,0.1);
    color: #00695c;
}

.di-badge-error[b-xuiu3j5zba] {
    background: rgba(220,53,69,0.1);
    color: #c62828;
}

body.dark .di-badge-file[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.12);
    color: #00bcd4;
}

body.dark .di-badge-success[b-xuiu3j5zba] {
    color: #00e5b0;
}

body.dark .di-badge-error[b-xuiu3j5zba] {
    color: #ff6b6b;
}

/* Action Buttons */
.di-action-cell[b-xuiu3j5zba] {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.di-btn-view[b-xuiu3j5zba] {
    background: rgba(0,124,145,0.1);
    color: #007c91;
    border: 1px solid rgba(0,124,145,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-view:hover[b-xuiu3j5zba] {
        background: rgba(0,124,145,0.18);
    }

.di-btn-del[b-xuiu3j5zba] {
    background: rgba(220,53,69,0.08);
    color: #c62828;
    border: 1px solid rgba(220,53,69,0.3);
    border-radius: 5px;
    padding: 2px 9px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

    .di-btn-del:hover[b-xuiu3j5zba] {
        background: rgba(220,53,69,0.15);
    }

body.dark .di-btn-view[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.1);
    color: #00bcd4;
    border-color: rgba(0,188,212,0.3);
}

body.dark .di-btn-del[b-xuiu3j5zba] {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.3);
}

/* Pagination */
.di-pagination[b-xuiu3j5zba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
}

.di-pg-info[b-xuiu3j5zba] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #5a8090;
}

.di-pg-btns[b-xuiu3j5zba] {
    display: flex;
    gap: 3px;
}

.di-pg-btn[b-xuiu3j5zba] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid #d0e8ed;
    background: #fff;
    color: #007c91;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

    .di-pg-btn:hover:not(:disabled)[b-xuiu3j5zba] {
        background: rgba(0,124,145,0.08);
        border-color: #007c91;
    }

    .di-pg-btn.active[b-xuiu3j5zba] {
        background: #007c91;
        color: #fff;
        border-color: #007c91;
    }

    .di-pg-btn:disabled[b-xuiu3j5zba] {
        opacity: 0.35;
        cursor: default;
    }

body.dark .di-pagination[b-xuiu3j5zba] {
    border-color: rgba(0,188,212,0.15);
    background: rgba(0,188,212,0.03);
}

body.dark .di-pg-info[b-xuiu3j5zba] {
    color: #4a9aaa;
}

body.dark .di-pg-btn[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.2);
    color: #00bcd4;
}

    body.dark .di-pg-btn.active[b-xuiu3j5zba] {
        background: rgba(0,188,212,0.2);
        color: #fff;
    }

/* Preview Card */
.di-preview-card[b-xuiu3j5zba] {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d0e8ed;
    box-shadow: 0 2px 10px rgba(0,124,145,0.07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

body.dark .di-preview-card[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.06);
    border-color: rgba(0,188,212,0.18);
}

/* Modal */
.di-modal-overlay[b-xuiu3j5zba] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 1rem 1rem;
}

.di-modal[b-xuiu3j5zba] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #d0e8ed;
    width: 95%;
    max-width: 950px;
    max-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.di-modal-header[b-xuiu3j5zba] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0e8ed;
    display: flex;
    align-items: flex-start; /*center*/
    justify-content: space-between;
    background: rgba(0,124,145,0.04);
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    flex: 1;
    margin-right: 0.5rem;
}

.di-modal-title[b-xuiu3j5zba] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.di-modal-close[b-xuiu3j5zba] {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: #9bb8c2;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    transition: background 0.12s;
}

    .di-modal-close:hover[b-xuiu3j5zba] {
        background: rgba(220,53,69,0.1);
        color: #c62828;
    }

.di-modal-meta[b-xuiu3j5zba] {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    color: #5a8090;
    font-weight: 600;
    border-bottom: 1px solid #d0e8ed;
    background: rgba(0,124,145,0.02);
    flex-shrink: 0;
}

.di-modal-body[b-xuiu3j5zba] {
    flex: 1;
    overflow-y: auto;
}

body.dark .di-modal[b-xuiu3j5zba] {
    background: #112233;
    border-color: rgba(0,188,212,0.2);
}

body.dark .di-modal-header[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.08);
    border-color: rgba(0,188,212,0.18);
}

body.dark .di-modal-title[b-xuiu3j5zba] {
    color: #00bcd4;
}

body.dark .di-modal-meta[b-xuiu3j5zba] {
    color: #4a9aaa;
    border-color: rgba(0,188,212,0.15);
}

/* Main table scrollbar */
.di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-track {
    background: transparent;
}

.di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Modal body scrollbar */
.di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar {
    width: 6px;
}

.di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar-track {
    background: transparent;
}

.di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-modal-body[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

/* Preview table scrollbar */
.di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-track {
    background: transparent;
}

.di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,124,145,0.3);
    border-radius: 10px;
}

    .di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,124,145,0.6);
    }

body.dark .di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb {
    background: rgba(0,188,212,0.3);
}

    body.dark .di-preview-card .di-table-wrap[b-xuiu3j5zba]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,188,212,0.6);
    }

.di-progress-wrap[b-xuiu3j5zba] {
    position: relative;
    height: 28px;
    background: rgba(0,124,145,0.08);
    border-radius: 8px;
    overflow: hidden;
    min-width: 180px;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.di-progress-bar[b-xuiu3j5zba] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #007c91, #00bcd4);
    border-radius: 8px;
    transition: width 0.3s ease;
}

    .di-progress-bar.di-progress-done[b-xuiu3j5zba] {
        background: linear-gradient(90deg, #00796b, #00bfa5);
    }

.di-progress-label[b-xuiu3j5zba] {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #0a2535;
    padding: 0 0.75rem;
    white-space: nowrap;
}

body.dark .di-progress-wrap[b-xuiu3j5zba] {
    background: rgba(0,188,212,0.1);
}

body.dark .di-progress-label[b-xuiu3j5zba] {
    color: #e4f6fa;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Developer/UserAccess.razor.rz.scp.css */
.manage-users-page[b-6vgrkseazo] {
    padding: 0.15rem 0.2rem 3rem;
}

.breadcrumb-row[b-6vgrkseazo] {
    font-size: 0.82rem;
    color: #888;
    margin-bottom: 0.5rem;
}

    .breadcrumb-row span[b-6vgrkseazo] {
        color: #333;
        font-weight: 500;
    }

.page-title[b-6vgrkseazo] {
    font-size: 1.9rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    width: 500px;
}

.page-subtitle[b-6vgrkseazo] {
    font-size: 0.88rem;
    color: #888;
    margin-bottom: 2rem;
    min-width: 300px;
    max-width: 500px;
}

.table-card[b-6vgrkseazo] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.table-card-header[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.3rem;
    border-bottom: 1px solid #f0f0f0;
}

.table-card-title[b-6vgrkseazo] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0a2535;
}

.table-card-desc[b-6vgrkseazo] {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 0.1rem;
}

.table-card-count[b-6vgrkseazo] {
    font-size: 0.72rem;
    color: #aaa;
    margin-top: 0.1rem;
}

.table-toolbar[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.3rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.search-wrap[b-6vgrkseazo] {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.search-icon[b-6vgrkseazo] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 0.8rem;
    pointer-events: none;
}

.search-input[b-6vgrkseazo] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.38rem 0.75rem 0.38rem 2rem;
    font-size: 0.8rem;
    color: #333;
    outline: none;
    background: #fff;
}

    .search-input:focus[b-6vgrkseazo] {
        border-color: #007c91;
    }

table[b-6vgrkseazo] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

thead tr[b-6vgrkseazo] {
    background: #f7fbfc;
    border-bottom: 2px solid #e8f6f8;
}

thead th[b-6vgrkseazo] {
    padding: 0.65rem 1.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #007c91;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
}

    thead th:first-child[b-6vgrkseazo] {
        text-align: center;
    }

tbody tr[b-6vgrkseazo] {
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

    tbody tr:hover[b-6vgrkseazo] {
        background: #f7fbfc;
    }

    tbody tr:last-child[b-6vgrkseazo] {
        border-bottom: none;
    }

tbody td[b-6vgrkseazo] {
    padding: 0.75rem 1.3rem;
    font-size: 0.83rem;
    color: #333;
    vertical-align: middle;
}

.td-id[b-6vgrkseazo] {
    color: #bbb;
    font-size: 0.75rem;
    font-weight: 500;
    width: 40px;
    text-align: center;
}

.td-name-wrap[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.td-avatar[b-6vgrkseazo] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e0f4f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #007c91;
    flex-shrink: 0;
}

.td-name[b-6vgrkseazo] {
    font-weight: 600;
    color: #0a2535;
    font-size: 0.85rem;
}

.td-email[b-6vgrkseazo] {
    font-size: 0.8rem;
    color: #666;
}

.td-role[b-6vgrkseazo] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #444;
}

.action-wrap[b-6vgrkseazo] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: center;
}

.btn-edit[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #e0f4f4;
    color: #007c91;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-edit:hover[b-6vgrkseazo] {
        background: #b0e0e8;
    }

.btn-delete[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #fdecea;
    color: #c62828;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-delete:hover[b-6vgrkseazo] {
        background: #f5c0bc;
    }

.btn-password[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #fff8e1;
    color: #f57f17;
    border: none;
    border-radius: 6px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

    .btn-password:hover[b-6vgrkseazo] {
        background: #ffe082;
    }

/* Dark mode */
.main-content.dark .btn-password[b-6vgrkseazo] {
    background: rgba(245,127,23,0.15);
    color: #ffb300;
}

    .main-content.dark .btn-password:hover[b-6vgrkseazo] {
        background: rgba(245,127,23,0.28);
    }

.empty-row[b-6vgrkseazo] {
    text-align: center;
    color: #bbb;
    font-size: 0.82rem;
    padding: 2rem !important;
}

.table-footer[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.3rem;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.table-footer-info[b-6vgrkseazo] {
    font-size: 0.72rem;
    color: #aaa;
}

.pagination[b-6vgrkseazo] {
    display: flex;
    gap: 0.25rem;
}

.page-btn[b-6vgrkseazo] {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

    .page-btn:hover:not(:disabled)[b-6vgrkseazo] {
        border-color: #007c91;
        color: #007c91;
    }

    .page-btn.active[b-6vgrkseazo] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }

    .page-btn:disabled[b-6vgrkseazo] {
        opacity: 0.4;
        cursor: not-allowed;
    }

thead th:not(:first-child)[b-6vgrkseazo] {
    text-align: center;
}

tbody td:not(:first-child)[b-6vgrkseazo] {
    text-align: center;
}

/* Keep name left-aligned since it has avatar */
tbody td:nth-child(2)[b-6vgrkseazo] {
    text-align: left;
}

thead th:not(:first-child)[b-6vgrkseazo] {
    text-align: center;
}

tbody td:not(:first-child)[b-6vgrkseazo] {
    text-align: center;
}

.td-name-wrap[b-6vgrkseazo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
}

/* Dark Mode */
.main-content.dark .breadcrumb-row[b-6vgrkseazo] {
    color: #6a9aaa;
}

    .main-content.dark .breadcrumb-row span[b-6vgrkseazo] {
        color: #b0d0d8;
    }

.main-content.dark .page-title[b-6vgrkseazo] {
    color: #e0f4f4;
}

.main-content.dark .page-subtitle[b-6vgrkseazo] {
    color: #6a9aaa;
}

.main-content.dark .table-card[b-6vgrkseazo] {
    background: #0d2535;
    border-color: rgba(0,188,212,0.12);
}

.main-content.dark .table-card-header[b-6vgrkseazo] {
    border-bottom-color: rgba(255,255,255,0.06);
}

.main-content.dark .table-card-title[b-6vgrkseazo] {
    color: #00e5ff;
}

.main-content.dark .table-card-desc[b-6vgrkseazo],
.main-content.dark .table-card-count[b-6vgrkseazo] {
    color: #3a6a7a;
}

.main-content.dark .table-toolbar[b-6vgrkseazo] {
    background: #081820;
    border-bottom-color: rgba(255,255,255,0.04);
}

.main-content.dark .search-input[b-6vgrkseazo] {
    background: #0a1f2e;
    border-color: rgba(0,188,212,0.2);
    color: #e0f4f4;
}

    .main-content.dark .search-input:focus[b-6vgrkseazo] {
        border-color: #00e5ff;
    }

.main-content.dark .search-icon[b-6vgrkseazo] {
    color: #3a6a7a;
}

.main-content.dark thead tr[b-6vgrkseazo] {
    background: #081820;
    border-bottom-color: rgba(0,188,212,0.1);
}

.main-content.dark thead th[b-6vgrkseazo] {
    color: #00e5ff;
}

.main-content.dark tbody tr[b-6vgrkseazo] {
    border-bottom-color: rgba(255,255,255,0.04);
}

    .main-content.dark tbody tr:hover[b-6vgrkseazo] {
        background: rgba(0,188,212,0.05);
    }

.main-content.dark .td-id[b-6vgrkseazo] {
    color: #2a5a6a;
}

.main-content.dark .td-avatar[b-6vgrkseazo] {
    background: #0a2535;
    color: #00bcd4;
}

.main-content.dark .td-name[b-6vgrkseazo] {
    color: #c8e4ea;
}

.main-content.dark .td-email[b-6vgrkseazo] {
    color: #5a8a9a;
}

.main-content.dark .td-role[b-6vgrkseazo] {
    color: #8baab8;
}

.main-content.dark .btn-edit[b-6vgrkseazo] {
    background: rgba(0,188,212,0.12);
    color: #00e5ff;
}

    .main-content.dark .btn-edit:hover[b-6vgrkseazo] {
        background: rgba(0,188,212,0.25);
    }

.main-content.dark .btn-delete[b-6vgrkseazo] {
    background: rgba(198,40,40,0.15);
    color: #ff5252;
}

    .main-content.dark .btn-delete:hover[b-6vgrkseazo] {
        background: rgba(198,40,40,0.28);
    }

.main-content.dark .table-footer[b-6vgrkseazo] {
    background: #081820;
    border-top-color: rgba(255,255,255,0.04);
}

.main-content.dark .table-footer-info[b-6vgrkseazo] {
    color: #3a6a7a;
}

.main-content.dark .page-btn[b-6vgrkseazo] {
    background: #0a1f2e;
    border-color: rgba(0,188,212,0.2);
    color: #8baab8;
}

    .main-content.dark .page-btn:hover:not(:disabled)[b-6vgrkseazo] {
        border-color: #00e5ff;
        color: #00e5ff;
    }

    .main-content.dark .page-btn.active[b-6vgrkseazo] {
        background: #007c91;
        border-color: #007c91;
        color: #fff;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsM/DeptBarChart/AnalyticsMBarChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-j2pki93qhi] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-j2pki93qhi] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.mb-card[b-j2pki93qhi] {
    margin-bottom: 1rem;
}

/* Chart label */
.chart-label[b-j2pki93qhi] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-j2pki93qhi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-j2pki93qhi] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-j2pki93qhi] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-j2pki93qhi] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-j2pki93qhi] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-j2pki93qhi] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-j2pki93qhi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-j2pki93qhi] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-j2pki93qhi 0.7s linear infinite;
}

@keyframes spin-b-j2pki93qhi {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-j2pki93qhi] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-j2pki93qhi] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-j2pki93qhi] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-j2pki93qhi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-j2pki93qhi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-j2pki93qhi] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-j2pki93qhi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-j2pki93qhi] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-j2pki93qhi] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-j2pki93qhi] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsM/DeptPieChart/AnalyticsMPieChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-zqocgs50y1] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-zqocgs50y1] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-zqocgs50y1] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-zqocgs50y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-zqocgs50y1] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-zqocgs50y1] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-zqocgs50y1] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-zqocgs50y1] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-zqocgs50y1] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-zqocgs50y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-zqocgs50y1] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-zqocgs50y1 0.7s linear infinite;
}

@keyframes spin-b-zqocgs50y1 {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-zqocgs50y1] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-zqocgs50y1] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-zqocgs50y1] {
    color: #4a8a9a;
}

/* Pie legend */
.pie-legend-row[b-zqocgs50y1] {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.pie-legend-item[b-zqocgs50y1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.pie-legend-value[b-zqocgs50y1] {
    font-weight: 700;
    color: #0a2535;
    margin-left: 0.2rem;
}

.pie-legend-pct[b-zqocgs50y1] {
    font-size: 0.72rem;
    color: #0097a7;
    font-weight: 600;
}

body.dark .pie-legend-item[b-zqocgs50y1] {
    color: #7ab8c8;
}

body.dark .pie-legend-value[b-zqocgs50y1] {
    color: #e4f6fa;
}

body.dark .pie-legend-pct[b-zqocgs50y1] {
    color: #00bcd4;
}

/* Pie grid */
.pie-grid[b-zqocgs50y1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
}

.pie-grid-item[b-zqocgs50y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/*.pie-year-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0;
    letter-spacing: 0.02em;
}

body.dark .pie-year-label {
    color: #e4f6fa;
}*/

.pie-year-label[b-zqocgs50y1] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
    text-align: center;
}

body.dark .pie-year-label[b-zqocgs50y1] {
    color: #4a8a9a;
}

.pie-canvas-wrap[b-zqocgs50y1] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
}

    .pie-canvas-wrap canvas[b-zqocgs50y1] {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

.pie-year-totals[b-zqocgs50y1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    align-items: center;
}

.pie-year-total-row[b-zqocgs50y1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.pie-dot[b-zqocgs50y1] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pie-year-total-val[b-zqocgs50y1] {
    font-weight: 700;
    color: #0a2535;
}

.pie-year-total-pct[b-zqocgs50y1] {
    font-size: 0.7rem;
    color: #0097a7;
    font-weight: 600;
}

body.dark .pie-year-total-val[b-zqocgs50y1] {
    color: #e4f6fa;
}

body.dark .pie-year-total-pct[b-zqocgs50y1] {
    color: #00bcd4;
}

/* No data state per year */
.no-data-card[b-zqocgs50y1] {
    opacity: 0.5;
}

.pie-no-data[b-zqocgs50y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 80px;
    opacity: 0.5;
    padding: 1.5rem 0;
}

.pie-no-data-icon[b-zqocgs50y1] {
    font-size: 1.1rem;
    color: #c8dfe6;
}

.pie-no-data-text[b-zqocgs50y1] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.03em;
}

body.dark .pie-no-data-icon[b-zqocgs50y1] {
    color: #1a4a5a;
}

body.dark .pie-no-data-text[b-zqocgs50y1] {
    color: #4a8a9a;
}

/* Per-year card */
.pie-year-card[b-zqocgs50y1] {
    border: 0.5px solid #d8eef2;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .pie-year-card.has-data[b-zqocgs50y1] {
        border-color: #0097a7;
    }

        .pie-year-card.has-data .pie-year-label[b-zqocgs50y1] {
            color: #0097a7;
        }

body.dark .pie-year-card[b-zqocgs50y1] {
    border-color: #1a4a5a;
}

    body.dark .pie-year-card.has-data[b-zqocgs50y1] {
        border-color: #00bcd4;
    }

        body.dark .pie-year-card.has-data .pie-year-label[b-zqocgs50y1] {
            color: #00bcd4;
        }

/* Total badge */
.pie-year-total-badge[b-zqocgs50y1] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0097a7;
    background: rgba(0,151,167,0.08);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.03em;
}

body.dark .pie-year-total-badge[b-zqocgs50y1] {
    color: #00bcd4;
    background: rgba(0,188,212,0.12);
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsM/TeamLineChart/AnalyticsMCostLineChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-z2emej8ojc] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-z2emej8ojc] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-z2emej8ojc] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-z2emej8ojc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-z2emej8ojc] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-z2emej8ojc] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-z2emej8ojc] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-z2emej8ojc] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-z2emej8ojc] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-z2emej8ojc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-z2emej8ojc] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-z2emej8ojc 0.7s linear infinite;
}

@keyframes spin-b-z2emej8ojc {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-z2emej8ojc] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-z2emej8ojc] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-z2emej8ojc] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-z2emej8ojc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-z2emej8ojc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-z2emej8ojc] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-z2emej8ojc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-z2emej8ojc] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-z2emej8ojc] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-z2emej8ojc] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMBarChart.razor.rz.scp.css */
/* Card wrapper */
/*.analytics-card {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}*/
.analytics-card[b-as8xyap8kt] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
    overflow: hidden;
}

body.dark .analytics-card[b-as8xyap8kt] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.mb-card[b-as8xyap8kt] {
    margin-bottom: 1rem;
}

/* Chart label */
.chart-label[b-as8xyap8kt] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-as8xyap8kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-as8xyap8kt] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-as8xyap8kt] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-as8xyap8kt] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-as8xyap8kt] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-as8xyap8kt] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-as8xyap8kt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-as8xyap8kt] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-as8xyap8kt 0.7s linear infinite;
}

@keyframes spin-b-as8xyap8kt {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-as8xyap8kt] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-as8xyap8kt] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-as8xyap8kt] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-as8xyap8kt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-as8xyap8kt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-as8xyap8kt] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-as8xyap8kt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-as8xyap8kt] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-as8xyap8kt] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-as8xyap8kt] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMBreakdown.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-riconn5dnc] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-riconn5dnc] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-riconn5dnc] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-riconn5dnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-riconn5dnc] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-riconn5dnc] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-riconn5dnc] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-riconn5dnc] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-riconn5dnc] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-riconn5dnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-riconn5dnc] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-riconn5dnc 0.7s linear infinite;
}

@keyframes spin-b-riconn5dnc {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-riconn5dnc] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-riconn5dnc] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-riconn5dnc] {
    color: #4a8a9a;
}

/* Breakdown grid */
.breakdown-tables-row[b-riconn5dnc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 0;
}

    .breakdown-tables-row.cols-3[b-riconn5dnc] {
        grid-template-columns: repeat(3, 1fr);
    }

    .breakdown-tables-row.cols-4[b-riconn5dnc] {
        grid-template-columns: repeat(4, 1fr);
    }

.breakdown-table-card[b-riconn5dnc] {
    min-width: 0;
    border-right: 1px solid #d8eef2;
    padding: 0 1.5rem;
}

    .breakdown-table-card:first-child[b-riconn5dnc] {
        padding-left: 0;
    }

    .breakdown-table-card:nth-child(4n)[b-riconn5dnc] {
        border-right: none;
        padding-right: 0;
    }

    .breakdown-table-card:nth-child(4n+1)[b-riconn5dnc] {
        padding-left: 0;
    }

.breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(2n)[b-riconn5dnc] {
    border-right: 10px solid #d8eef2;
    padding: 0 1.5rem;
}

.breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(4n)[b-riconn5dnc] {
    border-right: none;
}

.breakdown-tables-row.cols-3 .breakdown-table-card:nth-child(2n)[b-riconn5dnc] {
    border-right: 1px solid #d8eef2;
}

body.dark .breakdown-table-card[b-riconn5dnc] {
    border-right-color: #1a4a5a;
}

body.dark .breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(2n)[b-riconn5dnc] {
    border-right: 10px solid #1a4a5a;
}

body.dark .breakdown-tables-row.cols-3 .breakdown-table-card:nth-child(2n)[b-riconn5dnc] {
    border-right: 1px solid #1a4a5a;
}

.breakdown-table-title[b-riconn5dnc] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0 0 0.6rem;
}

body.dark .breakdown-table-title[b-riconn5dnc] {
    color: #e4f6fa;
}

.breakdown-year-badge[b-riconn5dnc] {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #00bcd4;
    background: rgba(0,188,212,0.08);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

body.dark .breakdown-year-badge[b-riconn5dnc] {
    background: rgba(0,188,212,0.15);
}

.breakdown-divider[b-riconn5dnc] {
    border: none;
    border-top: 2px solid #d8eef2;
    margin: 1.2rem 0;
}

body.dark .breakdown-divider[b-riconn5dnc] {
    border-top-color: #1a4a5a;
}

/* Table typography */
.analytics-card .table thead th[b-riconn5dnc] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #d8eef2;
}

    .analytics-card .table thead th:not(:first-child)[b-riconn5dnc] {
        text-align: center;
    }

.analytics-card .table tbody td:not(:first-child)[b-riconn5dnc] {
    text-align: center;
}

.analytics-card .table tbody td[b-riconn5dnc] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #0a2535;
}

    .analytics-card .table tbody td:first-child[b-riconn5dnc] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #5a8090;
    }

/* Remove Bootstrap striped fills */
.analytics-card .table-striped > tbody > tr > *[b-riconn5dnc] {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

/* Table dark mode */
body.dark .analytics-card .table[b-riconn5dnc],
body.dark .analytics-card .table > :not(caption) > * > *[b-riconn5dnc] {
    color: #c8eaf0;
    border-color: #1a4a5a;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #c8eaf0;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #c8eaf0;
}

    body.dark .analytics-card .table thead th[b-riconn5dnc] {
        color: #4a8a9a;
        border-bottom: 1px solid #1a4a5a;
        background-color: transparent;
    }

    body.dark .analytics-card .table tbody tr > *[b-riconn5dnc] {
        color: #c8eaf0;
        border-color: #1a4a5a;
        background-color: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }

    body.dark .analytics-card .table tbody td:first-child[b-riconn5dnc] {
        color: #7ab8c8;
    }

/* Load More */
.load-more-wrap[b-riconn5dnc] {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.2rem;
}

.load-more-btn[b-riconn5dnc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 1px solid #d8eef2;
    border-radius: 8px;
    padding: 0.5rem 2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0097a7;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

    .load-more-btn:hover[b-riconn5dnc] {
        background: rgba(0,188,212,0.06);
        border-color: #00bcd4;
    }

.load-more-hint[b-riconn5dnc] {
    font-size: 0.68rem;
    font-weight: 500;
    color: #7a9faa;
}

body.dark .load-more-btn[b-riconn5dnc] {
    border-color: #1a4a5a;
    color: #00bcd4;
}

    body.dark .load-more-btn:hover[b-riconn5dnc] {
        background: rgba(0,188,212,0.08);
        border-color: #00bcd4;
    }

body.dark .load-more-hint[b-riconn5dnc] {
    color: #4a8a9a;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMManhourBreakdown.razor.rz.scp.css */
.analytics-card[b-6v2wfk3z3m] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-6v2wfk3z3m] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.chart-label[b-6v2wfk3z3m] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

.chart-error-state[b-6v2wfk3z3m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-6v2wfk3z3m] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-6v2wfk3z3m] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-6v2wfk3z3m] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-6v2wfk3z3m] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-6v2wfk3z3m] {
    color: #6b7280;
}

.section-loading-state[b-6v2wfk3z3m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-6v2wfk3z3m] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-6v2wfk3z3m 0.7s linear infinite;
}

@keyframes spin-b-6v2wfk3z3m {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-6v2wfk3z3m] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-6v2wfk3z3m] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-6v2wfk3z3m] {
    color: #4a8a9a;
}

.breakdown-divider[b-6v2wfk3z3m] {
    border: none;
    border-top: 2px solid #d8eef2;
    margin: 1.2rem 0;
}

body.dark .breakdown-divider[b-6v2wfk3z3m] {
    border-top-color: #1a4a5a;
}

.mh-year-block[b-6v2wfk3z3m] {
    margin-bottom: 0.5rem;
}

.mh-year-label[b-6v2wfk3z3m] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #007c91;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

body.dark .mh-year-label[b-6v2wfk3z3m] {
    color: #00bcd4;
}

.mh-table-wrap[b-6v2wfk3z3m] {
    overflow-x: auto;
}

.mh-table[b-6v2wfk3z3m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .mh-table thead tr[b-6v2wfk3z3m] {
        background: #f4fafc;
        border-bottom: 1.5px solid #d0e8ed;
    }

    .mh-table thead th[b-6v2wfk3z3m] {
        padding: 0.5rem 1rem;
        font-size: 0.68rem;
        font-weight: 800;
        color: #007c91;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: center;
        white-space: nowrap;
    }

        .mh-table thead th:first-child[b-6v2wfk3z3m] {
            text-align: left;
        }

body.dark .mh-table thead tr[b-6v2wfk3z3m] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

body.dark .mh-table thead th[b-6v2wfk3z3m] {
    color: #00d4e8;
}

.mh-table tbody tr[b-6v2wfk3z3m] {
    border-bottom: 1px solid #eaf5f7;
    transition: background 0.15s;
}

    .mh-table tbody tr:hover[b-6v2wfk3z3m] {
        background: rgba(0,124,145,0.04);
    }

    .mh-table tbody tr:last-child[b-6v2wfk3z3m] {
        border-bottom: none;
    }

.mh-table tbody td[b-6v2wfk3z3m] {
    padding: 0.5rem 1rem;
    color: #0a2535;
    text-align: center;
    vertical-align: middle;
}

body.dark .mh-table tbody tr[b-6v2wfk3z3m] {
    border-color: rgba(0,188,212,0.08);
}

    body.dark .mh-table tbody tr:hover[b-6v2wfk3z3m] {
        background: rgba(0,188,212,0.05);
    }

body.dark .mh-table tbody td[b-6v2wfk3z3m] {
    color: #c8eaf0;
}

.mh-month-cell[b-6v2wfk3z3m] {
    text-align: left !important;
    font-weight: 600;
    color: #5a8090 !important;
    white-space: nowrap;
}

body.dark .mh-month-cell[b-6v2wfk3z3m] {
    color: #7ab8c8 !important;
}

.mh-total-col[b-6v2wfk3z3m] {
    color: #0a2535 !important;
    font-weight: 800 !important;
    border-left: 1.5px solid #d0e8ed;
}

.mh-total-cell[b-6v2wfk3z3m] {
    font-weight: 700;
    color: #0a2535;
    border-left: 1.5px solid #d0e8ed;
}

body.dark .mh-total-col[b-6v2wfk3z3m] {
    color: #e4f6fa !important;
    border-color: rgba(0,188,212,0.2);
}

body.dark .mh-total-cell[b-6v2wfk3z3m] {
    color: #e4f6fa;
    border-color: rgba(0,188,212,0.2);
}

.mh-footer-row[b-6v2wfk3z3m] {
    border-top: 1.5px solid #d0e8ed;
    background: #f4fafc;
}

    .mh-footer-row td[b-6v2wfk3z3m] {
        padding: 0.5rem 1rem;
        font-weight: 700;
        color: #0a2535;
        text-align: center;
    }

        .mh-footer-row td:first-child[b-6v2wfk3z3m] {
            text-align: left;
            color: #007c91;
            font-weight: 800;
        }

body.dark .mh-footer-row[b-6v2wfk3z3m] {
    background: #163040;
    border-color: rgba(0,188,212,0.2);
}

    body.dark .mh-footer-row td[b-6v2wfk3z3m] {
        color: #e4f6fa;
    }

        body.dark .mh-footer-row td:first-child[b-6v2wfk3z3m] {
            color: #00bcd4;
        }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMMiscBarChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-71uvihg27a] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-71uvihg27a] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.mb-card[b-71uvihg27a] {
    margin-bottom: 1rem;
}

/* Chart label */
.chart-label[b-71uvihg27a] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-71uvihg27a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-71uvihg27a] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-71uvihg27a] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-71uvihg27a] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-71uvihg27a] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-71uvihg27a] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-71uvihg27a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-71uvihg27a] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-71uvihg27a 0.7s linear infinite;
}

@keyframes spin-b-71uvihg27a {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-71uvihg27a] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-71uvihg27a] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-71uvihg27a] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-71uvihg27a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-71uvihg27a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-71uvihg27a] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-71uvihg27a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-71uvihg27a] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-71uvihg27a] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-71uvihg27a] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMStructBarChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-r627e957us] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-r627e957us] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.mb-card[b-r627e957us] {
    margin-bottom: 1rem;
}

/* Chart label */
.chart-label[b-r627e957us] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-r627e957us] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-r627e957us] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-r627e957us] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-r627e957us] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-r627e957us] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-r627e957us] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-r627e957us] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-r627e957us] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-r627e957us 0.7s linear infinite;
}

@keyframes spin-b-r627e957us {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-r627e957us] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-r627e957us] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-r627e957us] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-r627e957us] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-r627e957us] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-r627e957us] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-r627e957us] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-r627e957us] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-r627e957us] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-r627e957us] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptBarChart/AnalyticsTMSummary.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-9sjsal1oxy] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-9sjsal1oxy] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-9sjsal1oxy] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-9sjsal1oxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-9sjsal1oxy] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-9sjsal1oxy] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-9sjsal1oxy] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-9sjsal1oxy] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-9sjsal1oxy] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-9sjsal1oxy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-9sjsal1oxy] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-9sjsal1oxy 0.7s linear infinite;
}

@keyframes spin-b-9sjsal1oxy {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-9sjsal1oxy] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-9sjsal1oxy] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-9sjsal1oxy] {
    color: #4a8a9a;
}

/* Table typography */
.analytics-card .table thead th[b-9sjsal1oxy] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #d8eef2;
}

    .analytics-card .table thead th:not(:first-child)[b-9sjsal1oxy] {
        text-align: center;
    }

.analytics-card .table tbody td:not(:first-child)[b-9sjsal1oxy] {
    text-align: center;
}

.analytics-card .table tbody td[b-9sjsal1oxy] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #0a2535;
}

    .analytics-card .table tbody td:first-child[b-9sjsal1oxy] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #5a8090;
    }

/* Remove Bootstrap striped fills */
.analytics-card .table-striped > tbody > tr > *[b-9sjsal1oxy] {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

/* Table dark mode */
body.dark .analytics-card .table[b-9sjsal1oxy],
body.dark .analytics-card .table > :not(caption) > * > *[b-9sjsal1oxy] {
    color: #c8eaf0;
    border-color: #1a4a5a;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #c8eaf0;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #c8eaf0;
}

    body.dark .analytics-card .table thead th[b-9sjsal1oxy] {
        color: #4a8a9a;
        border-bottom: 1px solid #1a4a5a;
        background-color: transparent;
    }

    body.dark .analytics-card .table tbody tr > *[b-9sjsal1oxy] {
        color: #c8eaf0;
        border-color: #1a4a5a;
        background-color: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }

    body.dark .analytics-card .table tbody td:first-child[b-9sjsal1oxy] {
        color: #7ab8c8;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/DeptPieChart/AnalyticsTMPieChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-8fbd6ax22o] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-8fbd6ax22o] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-8fbd6ax22o] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-8fbd6ax22o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-8fbd6ax22o] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-8fbd6ax22o] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-8fbd6ax22o] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-8fbd6ax22o] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-8fbd6ax22o] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-8fbd6ax22o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-8fbd6ax22o] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-8fbd6ax22o 0.7s linear infinite;
}

@keyframes spin-b-8fbd6ax22o {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-8fbd6ax22o] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-8fbd6ax22o] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-8fbd6ax22o] {
    color: #4a8a9a;
}

/* Pie legend */
.pie-legend-row[b-8fbd6ax22o] {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.pie-legend-item[b-8fbd6ax22o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.pie-legend-value[b-8fbd6ax22o] {
    font-weight: 700;
    color: #0a2535;
    margin-left: 0.2rem;
}

.pie-legend-pct[b-8fbd6ax22o] {
    font-size: 0.72rem;
    color: #0097a7;
    font-weight: 600;
}

body.dark .pie-legend-item[b-8fbd6ax22o] {
    color: #7ab8c8;
}

body.dark .pie-legend-value[b-8fbd6ax22o] {
    color: #e4f6fa;
}

body.dark .pie-legend-pct[b-8fbd6ax22o] {
    color: #00bcd4;
}

/* Pie grid */
.pie-grid[b-8fbd6ax22o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
}

.pie-grid-item[b-8fbd6ax22o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/*.pie-year-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0;
    letter-spacing: 0.02em;
}

body.dark .pie-year-label {
    color: #e4f6fa;
}*/

.pie-year-label[b-8fbd6ax22o] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
    text-align: center;
}

body.dark .pie-year-label[b-8fbd6ax22o] {
    color: #4a8a9a;
}

.pie-canvas-wrap[b-8fbd6ax22o] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
}

    .pie-canvas-wrap canvas[b-8fbd6ax22o] {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

.pie-year-totals[b-8fbd6ax22o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    align-items: center;
}

.pie-year-total-row[b-8fbd6ax22o] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.pie-dot[b-8fbd6ax22o] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pie-year-total-val[b-8fbd6ax22o] {
    font-weight: 700;
    color: #0a2535;
}

.pie-year-total-pct[b-8fbd6ax22o] {
    font-size: 0.7rem;
    color: #0097a7;
    font-weight: 600;
}

body.dark .pie-year-total-val[b-8fbd6ax22o] {
    color: #e4f6fa;
}

body.dark .pie-year-total-pct[b-8fbd6ax22o] {
    color: #00bcd4;
}

/* Tooltip */
.pie-hover-tooltip[b-8fbd6ax22o] {
    position: fixed;
    display: none;
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    pointer-events: none;
    z-index: 100;
    font-size: 0.76rem;
    min-width: 180px;
}

.pie-hover-tooltip-row[b-8fbd6ax22o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.pie-hover-tooltip-dot[b-8fbd6ax22o] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pie-hover-tooltip-label[b-8fbd6ax22o] {
    color: #5a8090;
    font-weight: 500;
    flex: 1;
}

.pie-hover-tooltip-val[b-8fbd6ax22o] {
    font-weight: 700;
    color: #0a2535;
}

.pie-hover-tooltip-pct[b-8fbd6ax22o] {
    font-size: 0.7rem;
    color: #0097a7;
    font-weight: 600;
    margin-left: 0.2rem;
}

body.dark .pie-hover-tooltip[b-8fbd6ax22o] {
    background: #0d2b38;
    border-color: #1a4a5a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

body.dark .pie-hover-tooltip-label[b-8fbd6ax22o] {
    color: #7ab8c8;
}

body.dark .pie-hover-tooltip-val[b-8fbd6ax22o] {
    color: #e4f6fa;
}

body.dark .pie-hover-tooltip-pct[b-8fbd6ax22o] {
    color: #00bcd4;
}

/* No data state per year */
.no-data-card[b-8fbd6ax22o] {
    opacity: 0.5;
}

.pie-no-data[b-8fbd6ax22o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 80px;
    opacity: 0.5;
    padding: 1.5rem 0;
}

.pie-no-data-icon[b-8fbd6ax22o] {
    font-size: 1.1rem;
    color: #c8dfe6;
}

.pie-no-data-text[b-8fbd6ax22o] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.03em;
}

body.dark .pie-no-data-icon[b-8fbd6ax22o] {
    color: #1a4a5a;
}

body.dark .pie-no-data-text[b-8fbd6ax22o] {
    color: #4a8a9a;
}

/* Per-year card */
.pie-year-card[b-8fbd6ax22o] {
    border: 0.5px solid #d8eef2;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .pie-year-card.has-data[b-8fbd6ax22o] {
        border-color: #0097a7;
    }

        .pie-year-card.has-data .pie-year-label[b-8fbd6ax22o] {
            color: #0097a7;
        }

body.dark .pie-year-card[b-8fbd6ax22o] {
    border-color: #1a4a5a;
}

    body.dark .pie-year-card.has-data[b-8fbd6ax22o] {
        border-color: #00bcd4;
    }

        body.dark .pie-year-card.has-data .pie-year-label[b-8fbd6ax22o] {
            color: #00bcd4;
        }

/* Total badge */
.pie-year-total-badge[b-8fbd6ax22o] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0097a7;
    background: rgba(0,151,167,0.08);
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.03em;
}

body.dark .pie-year-total-badge[b-8fbd6ax22o] {
    color: #00bcd4;
    background: rgba(0,188,212,0.12);
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/TeamLineChart/AnalyticsTMCostLineChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-ekxdqvbzc0] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-ekxdqvbzc0] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-ekxdqvbzc0] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-ekxdqvbzc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-ekxdqvbzc0] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-ekxdqvbzc0] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-ekxdqvbzc0] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-ekxdqvbzc0] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-ekxdqvbzc0] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-ekxdqvbzc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-ekxdqvbzc0] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-ekxdqvbzc0 0.7s linear infinite;
}

@keyframes spin-b-ekxdqvbzc0 {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-ekxdqvbzc0] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-ekxdqvbzc0] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-ekxdqvbzc0] {
    color: #4a8a9a;
}

/* Legend row */
.chart-legend-row[b-ekxdqvbzc0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-legend[b-ekxdqvbzc0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #5a8090;
}

.legend-dot[b-ekxdqvbzc0] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* Trend toggles */
.chart-trend-toggles[b-ekxdqvbzc0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-check-label[b-ekxdqvbzc0] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #5a8090;
    cursor: pointer;
    user-select: none;
}

    .filter-check-label input[type="checkbox"][b-ekxdqvbzc0] {
        accent-color: #0097a7;
        width: 13px;
        height: 13px;
        cursor: pointer;
    }

body.dark .filter-check-label[b-ekxdqvbzc0] {
    color: #7ab8c8;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/TeamPieChart/AnalyticsTMTBreakdown.razor.rz.scp.css */
/* Card wrapper */
/*.analytics-card {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card {
    background: #0d2b38;
    border-color: #1a4a5a;
}*/

/* Chart label */
/*.chart-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}*/

/* Error state */
/*.chart-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title {
    color: #fca5a5;
}

body.dark .chart-error-sub {
    color: #6b7280;
}*/

/* Loading state */
/*.section-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text {
    color: #4a8a9a;
}*/

/* Breakdown grid */
/*.breakdown-tables-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 0;
}

    .breakdown-tables-row.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .breakdown-tables-row.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .breakdown-tables-row.cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

.breakdown-table-card {
    min-width: 0;
    border-right: 1px solid #d8eef2;
    padding: 0 1.5rem;
}

    .breakdown-table-card:first-child {
        padding-left: 0;
    }

    .breakdown-table-card:nth-child(4n) {
        border-right: none;
        padding-right: 0;
    }

    .breakdown-table-card:nth-child(4n+1) {
        padding-left: 0;
    }

.breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(2n) {
    border-right: 10px solid #d8eef2;
    padding: 0 1.5rem;
}

.breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(4n) {
    border-right: none;
}

.breakdown-tables-row.cols-3 .breakdown-table-card:nth-child(2n) {
    border-right: 1px solid #d8eef2;
}

body.dark .breakdown-table-card {
    border-right-color: #1a4a5a;
}

body.dark .breakdown-tables-row.cols-4 .breakdown-table-card:nth-child(2n) {
    border-right: 10px solid #1a4a5a;
}

body.dark .breakdown-tables-row.cols-3 .breakdown-table-card:nth-child(2n) {
    border-right: 1px solid #1a4a5a;
}

.breakdown-table-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0 0 0.6rem;
}

body.dark .breakdown-table-title {
    color: #e4f6fa;
}

.breakdown-year-badge {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #00bcd4;
    background: rgba(0,188,212,0.08);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

body.dark .breakdown-year-badge {
    background: rgba(0,188,212,0.15);
}

.breakdown-divider {
    border: none;
    border-top: 2px solid #d8eef2;
    margin: 1.2rem 0;
}

body.dark .breakdown-divider {
    border-top-color: #1a4a5a;
}*/

/* Table typography */
/*.analytics-card .table thead th {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #d8eef2;
}

    .analytics-card .table thead th:not(:first-child) {
        text-align: center;
    }

.analytics-card .table tbody td:not(:first-child) {
    text-align: center;
}

.analytics-card .table tbody td {
    font-size: 0.82rem;
    font-weight: 500;
    color: #0a2535;
}

    .analytics-card .table tbody td:first-child {
        font-size: 0.78rem;
        font-weight: 600;
        color: #5a8090;
    }*/

/* Remove Bootstrap striped fills */
/*.analytics-card .table-striped > tbody > tr > * {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}*/

/* Table dark mode */
/*body.dark .analytics-card .table,
body.dark .analytics-card .table > :not(caption) > * > * {
    color: #c8eaf0;
    border-color: #1a4a5a;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #c8eaf0;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #c8eaf0;
}

    body.dark .analytics-card .table thead th {
        color: #4a8a9a;
        border-bottom: 1px solid #1a4a5a;
        background-color: transparent;
    }

    body.dark .analytics-card .table tbody tr > * {
        color: #c8eaf0;
        border-color: #1a4a5a;
        background-color: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }

    body.dark .analytics-card .table tbody td:first-child {
        color: #7ab8c8;
    }*/

/* Load More */
/*.load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.2rem;
}

.load-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 1px solid #d8eef2;
    border-radius: 8px;
    padding: 0.5rem 2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0097a7;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

    .load-more-btn:hover {
        background: rgba(0,188,212,0.06);
        border-color: #00bcd4;
    }

.load-more-hint {
    font-size: 0.68rem;
    font-weight: 500;
    color: #7a9faa;
}

body.dark .load-more-btn {
    border-color: #1a4a5a;
    color: #00bcd4;
}

    body.dark .load-more-btn:hover {
        background: rgba(0,188,212,0.08);
        border-color: #00bcd4;
    }

body.dark .load-more-hint {
    color: #4a8a9a;
}*/

/* Manpower-Hours Table */
/*.mh-year-block {
    margin-bottom: 0.5rem;
}

.mh-year-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #007c91;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

body.dark .mh-year-label {
    color: #00bcd4;
}

.mh-table-wrap {
    overflow-x: auto;
}

.mh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}*/

    /* Header */
    /*.mh-table thead tr {
        background: #f4fafc;
        border-bottom: 1.5px solid #d0e8ed;
    }

    .mh-table thead th {
        padding: 0.5rem 1rem;
        font-size: 0.68rem;
        font-weight: 800;
        color: #007c91;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: center;
        white-space: nowrap;
    }

        .mh-table thead th:first-child {
            text-align: left;
        }

body.dark .mh-table thead tr {
    background: #163040;
    border-color: rgba(0, 188, 212, 0.2);
}

body.dark .mh-table thead th {
    color: #00d4e8;
}*/

/* Body rows */
/*.mh-table tbody tr {
    border-bottom: 1px solid #eaf5f7;
    transition: background 0.15s;
}

    .mh-table tbody tr:hover {
        background: rgba(0, 124, 145, 0.04);
    }

    .mh-table tbody tr:last-child {
        border-bottom: none;
    }

.mh-table tbody td {
    padding: 0.5rem 1rem;
    color: #0a2535;
    text-align: center;
    vertical-align: middle;
}

body.dark .mh-table tbody tr {
    border-color: rgba(0, 188, 212, 0.08);
}

    body.dark .mh-table tbody tr:hover {
        background: rgba(0, 188, 212, 0.05);
    }

body.dark .mh-table tbody td {
    color: #c8eaf0;
}*/

/* Month cell */
/*.mh-month-cell {
    text-align: left !important;
    font-weight: 600;
    color: #5a8090 !important;
    white-space: nowrap;
}

body.dark .mh-month-cell {
    color: #7ab8c8 !important;
}*/

/* Pending columns */
/*.mh-pending {
    color: #b0cdd6 !important;
    font-style: italic;
}

body.dark .mh-pending {
    color: #2a5a6a !important;
}*/

/* Total column */
/*.mh-total-col {
    color: #0a2535 !important;
    font-weight: 800 !important;
    border-left: 1.5px solid #d0e8ed;
}

.mh-total-cell {
    font-weight: 700;
    color: #0a2535;
    border-left: 1.5px solid #d0e8ed;
}

body.dark .mh-total-col {
    color: #e4f6fa !important;
    border-color: rgba(0, 188, 212, 0.2);
}

body.dark .mh-total-cell {
    color: #e4f6fa;
    border-color: rgba(0, 188, 212, 0.2);
}*/

/* Footer row */
/*.mh-footer-row {
    border-top: 1.5px solid #d0e8ed;
    background: #f4fafc;
}

    .mh-footer-row td {
        padding: 0.5rem 1rem;
        font-weight: 700;
        color: #0a2535;
        text-align: center;
    }

        .mh-footer-row td:first-child {
            text-align: left;
            color: #007c91;
            font-weight: 800;
        }

body.dark .mh-footer-row {
    background: #163040;
    border-color: rgba(0, 188, 212, 0.2);
}

    body.dark .mh-footer-row td {
        color: #e4f6fa;
    }

        body.dark .mh-footer-row td:first-child {
            color: #00bcd4;
        }


.breakdown-year-section {
    margin-bottom: 1.5rem;
}

.breakdown-year-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.breakdown-year-divider-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #007c91;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.breakdown-year-header::before,
.breakdown-year-header::after {
    content: "";
    flex: 1;
    height: 1.5px;
    background: #d8eef2;
}

body.dark .breakdown-year-divider-label {
    color: #00bcd4;
}

body.dark .breakdown-year-header::before,
body.dark .breakdown-year-header::after {
    background: #1a4a5a;
}

.breakdown-year-section {
    margin-bottom: 0.75rem;
}

.breakdown-year-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #d8eef2;
    width: 100%;
    padding: 0.4rem 0;
    margin-bottom: 1rem;
    cursor: pointer;
    text-align: left;
}

.breakdown-year-toggle-icon {
    font-size: 0.78rem;
    color: #00bcd4;
}

.breakdown-year-toggle-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #007c91;
    letter-spacing: 0.08em;
}

.breakdown-year-toggle-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: #7a9faa;
    margin-left: auto;
}

body.dark .breakdown-year-toggle {
    border-bottom-color: #1a4a5a;
}

body.dark .breakdown-year-toggle-label {
    color: #00bcd4;
}

body.dark .breakdown-year-toggle-count {
    color: #4a8a9a;
}

.breakdown-no-data {
    font-size: 0.78rem;
    font-style: italic;
    color: #7a9faa;
    padding: 0.5rem 0 1rem;
}

body.dark .breakdown-no-data {
    color: #4a8a9a;
}*/


.analytics-card[b-lltkwj8nhz] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-lltkwj8nhz] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

.chart-label[b-lltkwj8nhz] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

.chart-error-state[b-lltkwj8nhz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-lltkwj8nhz] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-lltkwj8nhz] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-lltkwj8nhz] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-lltkwj8nhz] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-lltkwj8nhz] {
    color: #6b7280;
}

.section-loading-state[b-lltkwj8nhz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-lltkwj8nhz] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-lltkwj8nhz 0.7s linear infinite;
}

@keyframes spin-b-lltkwj8nhz {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-lltkwj8nhz] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-lltkwj8nhz] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-lltkwj8nhz] {
    color: #4a8a9a;
}

.breakdown-tables-row[b-lltkwj8nhz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 0;
}

    .breakdown-tables-row.cols-6[b-lltkwj8nhz] {
        grid-template-columns: repeat(6, 1fr);
    }

.breakdown-table-card[b-lltkwj8nhz] {
    min-width: 0;
    border-right: 1px solid #d8eef2;
    padding: 0 1.5rem;
}

    .breakdown-table-card:first-child[b-lltkwj8nhz] {
        padding-left: 0;
    }

    .breakdown-table-card:nth-child(6n)[b-lltkwj8nhz] {
        border-right: none;
        padding-right: 0;
    }

    .breakdown-table-card:nth-child(6n+1)[b-lltkwj8nhz] {
        padding-left: 0;
    }

body.dark .breakdown-table-card[b-lltkwj8nhz] {
    border-right-color: #1a4a5a;
}

.breakdown-table-title[b-lltkwj8nhz] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0 0 0.6rem;
}

body.dark .breakdown-table-title[b-lltkwj8nhz] {
    color: #e4f6fa;
}

.breakdown-divider[b-lltkwj8nhz] {
    border: none;
    border-top: 2px solid #d8eef2;
    margin: 1.2rem 0;
}

body.dark .breakdown-divider[b-lltkwj8nhz] {
    border-top-color: #1a4a5a;
}

.analytics-card .table thead th[b-lltkwj8nhz] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #d8eef2;
}

    .analytics-card .table thead th:not(:first-child)[b-lltkwj8nhz] {
        text-align: center;
    }

.analytics-card .table tbody td:not(:first-child)[b-lltkwj8nhz] {
    text-align: center;
}

.analytics-card .table tbody td[b-lltkwj8nhz] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #0a2535;
}

    .analytics-card .table tbody td:first-child[b-lltkwj8nhz] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #5a8090;
    }

.analytics-card .table-striped > tbody > tr > *[b-lltkwj8nhz] {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

body.dark .analytics-card .table[b-lltkwj8nhz],
body.dark .analytics-card .table > :not(caption) > * > *[b-lltkwj8nhz] {
    color: #c8eaf0;
    border-color: #1a4a5a;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #c8eaf0;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #c8eaf0;
}

    body.dark .analytics-card .table thead th[b-lltkwj8nhz] {
        color: #4a8a9a;
        border-bottom: 1px solid #1a4a5a;
        background-color: transparent;
    }

    body.dark .analytics-card .table tbody tr > *[b-lltkwj8nhz] {
        color: #c8eaf0;
        border-color: #1a4a5a;
        background-color: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }

    body.dark .analytics-card .table tbody td:first-child[b-lltkwj8nhz] {
        color: #7ab8c8;
    }

.breakdown-year-section[b-lltkwj8nhz] {
    margin-bottom: 0.75rem;
}

.breakdown-year-toggle[b-lltkwj8nhz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid #d8eef2;
    width: 100%;
    padding: 0.4rem 0;
    margin-bottom: 1rem;
    cursor: pointer;
    text-align: left;
}

.breakdown-year-toggle-icon[b-lltkwj8nhz] {
    font-size: 0.78rem;
    color: #00bcd4;
}

.breakdown-year-toggle-label[b-lltkwj8nhz] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #007c91;
    letter-spacing: 0.08em;
}

.breakdown-year-toggle-count[b-lltkwj8nhz] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #7a9faa;
    margin-left: auto;
}

body.dark .breakdown-year-toggle[b-lltkwj8nhz] {
    border-bottom-color: #1a4a5a;
}

body.dark .breakdown-year-toggle-label[b-lltkwj8nhz] {
    color: #00bcd4;
}

body.dark .breakdown-year-toggle-count[b-lltkwj8nhz] {
    color: #4a8a9a;
}

.breakdown-no-data[b-lltkwj8nhz] {
    font-size: 0.78rem;
    font-style: italic;
    color: #7a9faa;
    padding: 0.5rem 0 1rem;
}

body.dark .breakdown-no-data[b-lltkwj8nhz] {
    color: #4a8a9a;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/TeamPieChart/AnalyticsTMTPieChart.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-p72aqmd41a] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-p72aqmd41a] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-p72aqmd41a] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-p72aqmd41a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-p72aqmd41a] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-p72aqmd41a] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-p72aqmd41a] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-p72aqmd41a] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-p72aqmd41a] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-p72aqmd41a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-p72aqmd41a] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-p72aqmd41a 0.7s linear infinite;
}

@keyframes spin-b-p72aqmd41a {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-p72aqmd41a] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-p72aqmd41a] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-p72aqmd41a] {
    color: #4a8a9a;
}

/* Pie grid */
.pie-grid[b-p72aqmd41a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
}
/*.pie-grid-team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
}*/

.pie-grid-item[b-p72aqmd41a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/*.pie-year-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0a2535;
    margin: 0;
    letter-spacing: 0.02em;
}

body.dark .pie-year-label {
    color: #e4f6fa;
}*/

.pie-year-label[b-p72aqmd41a] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
    text-align: center;
}

body.dark .pie-year-label[b-p72aqmd41a] {
    color: #4a8a9a;
}

.pie-canvas-wrap[b-p72aqmd41a] {
    position: relative;
    width: 100%;
    aspect-ratio: 3/ 1;
}

    .pie-canvas-wrap canvas[b-p72aqmd41a] {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

.pie-year-totals[b-p72aqmd41a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    align-items: center;
}

.pie-year-total-row[b-p72aqmd41a] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.pie-dot[b-p72aqmd41a] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pie-year-total-val[b-p72aqmd41a] {
    font-weight: 700;
    color: #0a2535;
}

.pie-year-total-pct[b-p72aqmd41a] {
    font-size: 0.7rem;
    color: #0097a7;
    font-weight: 600;
}

body.dark .pie-year-total-val[b-p72aqmd41a] {
    color: #e4f6fa;
}

body.dark .pie-year-total-pct[b-p72aqmd41a] {
    color: #00bcd4;
}


/*.pie-grid .pie-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: unset;
    height: 280px;*/ /*380px*/
/*}*/

.pie-grid .pie-canvas-wrap[b-p72aqmd41a] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
}





    /*.pie-grid .pie-canvas-wrap {
    position: relative;
    width: 100%;
    height: 500px;
}*/

    .pie-grid .pie-canvas-wrap canvas[b-p72aqmd41a] {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

/*.pie-grid-item .pie-canvas-wrap canvas[id^="analytictmteampie"] {
    width: 100% !important;
    height: 300px !important;
}*/

/*.pie-grid-item .pie-canvas-wrap canvas[id^="analytictmteampie"] {
    width: 100% !important;
    height: 100% !important;
}*/

/* ── Team pie legend ── */
.team-pie-legend[b-p72aqmd41a] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.team-pie-legend-row[b-p72aqmd41a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
}

.team-pie-legend-dot[b-p72aqmd41a] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.team-pie-legend-name[b-p72aqmd41a] {
    flex: 1;
    color: #5a8090;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-pie-legend-pct[b-p72aqmd41a] {
    font-weight: 700;
    color: #0a2535;
    min-width: 36px;
    text-align: right;
}

body.dark .team-pie-legend-name[b-p72aqmd41a] {
    color: #7ab8c8;
}

body.dark .team-pie-legend-pct[b-p72aqmd41a] {
    color: #e4f6fa;
}

/* ── No data state ── */
.team-pie-no-data[b-p72aqmd41a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2rem 0;
    opacity: 0.4;
    font-size: 0.75rem;
    color: #7a9faa;
}

    .team-pie-no-data i[b-p72aqmd41a] {
        font-size: 1.4rem;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Components/AnalyticsTM/TeamPieChart/AnalyticsTMTSummary.razor.rz.scp.css */
/* Card wrapper */
.analytics-card[b-49gfi792mw] {
    background: #fff;
    border: 1px solid #d8eef2;
    border-radius: 12px;
    padding: 1rem 1.2rem 0.8rem;
}

body.dark .analytics-card[b-49gfi792mw] {
    background: #0d2b38;
    border-color: #1a4a5a;
}

/* Chart label */
.chart-label[b-49gfi792mw] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

/* Error state */
.chart-error-state[b-49gfi792mw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2.5rem 1rem;
}

.chart-error-icon[b-49gfi792mw] {
    font-size: 1.8rem;
    color: #ef4444;
    line-height: 1;
}

.chart-error-title[b-49gfi792mw] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ef4444;
}

.chart-error-sub[b-49gfi792mw] {
    font-size: 0.75rem;
    color: #aaa;
}

body.dark .chart-error-title[b-49gfi792mw] {
    color: #fca5a5;
}

body.dark .chart-error-sub[b-49gfi792mw] {
    color: #6b7280;
}

/* Loading state */
.section-loading-state[b-49gfi792mw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 3rem 1rem;
}

.section-spinner[b-49gfi792mw] {
    width: 28px;
    height: 28px;
    border: 3px solid #d8eef2;
    border-top-color: #0097a7;
    border-radius: 50%;
    animation: spin-b-49gfi792mw 0.7s linear infinite;
}

@keyframes spin-b-49gfi792mw {
    to {
        transform: rotate(360deg);
    }
}

.section-loading-text[b-49gfi792mw] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7a9faa;
    letter-spacing: 0.02em;
}

body.dark .section-spinner[b-49gfi792mw] {
    border-color: #1a4a5a;
    border-top-color: #00bcd4;
}

body.dark .section-loading-text[b-49gfi792mw] {
    color: #4a8a9a;
}

/* Table typography */
.analytics-card .table thead th[b-49gfi792mw] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7a9faa;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #d8eef2;
}

    .analytics-card .table thead th:not(:first-child)[b-49gfi792mw] {
        text-align: center;
    }

.analytics-card .table tbody td:not(:first-child)[b-49gfi792mw] {
    text-align: center;
}

.analytics-card .table tbody td[b-49gfi792mw] {
    font-size: 0.82rem;
    font-weight: 500;
    color: #0a2535;
}

    .analytics-card .table tbody td:first-child[b-49gfi792mw] {
        font-size: 0.78rem;
        font-weight: 600;
        color: #5a8090;
    }

/* Remove Bootstrap striped fills */
.analytics-card .table-striped > tbody > tr > *[b-49gfi792mw] {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

/* Table dark mode */
body.dark .analytics-card .table[b-49gfi792mw],
body.dark .analytics-card .table > :not(caption) > * > *[b-49gfi792mw] {
    color: #c8eaf0;
    border-color: #1a4a5a;
    background-color: transparent;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: #c8eaf0;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-color: #c8eaf0;
}

    body.dark .analytics-card .table thead th[b-49gfi792mw] {
        color: #4a8a9a;
        border-bottom: 1px solid #1a4a5a;
        background-color: transparent;
    }

    body.dark .analytics-card .table tbody tr > *[b-49gfi792mw] {
        color: #c8eaf0;
        border-color: #1a4a5a;
        background-color: transparent !important;
        --bs-table-bg: transparent !important;
        --bs-table-accent-bg: transparent !important;
    }

    body.dark .analytics-card .table tbody td:first-child[b-49gfi792mw] {
        color: #7ab8c8;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Dialog/BillingTargetDialog.razor.rz.scp.css */
.monthly-cell[b-bkmxhvkuoq] {
    border: 1px solid #d0e8ed;
    border-radius: 8px;
    padding: 8px 10px;
    background: #f4fafc;
    transition: border-color 0.2s, background 0.2s;
}

    .monthly-cell.locked[b-bkmxhvkuoq] {
        border-color: #f0a500;
        background: #fffbf0;
    }

.monthly-cell-header[b-bkmxhvkuoq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.monthly-name[b-bkmxhvkuoq] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #5a8090;
}

.monthly-cell.locked .monthly-name[b-bkmxhvkuoq] {
    color: #b07800;
}

.lock-btn[b-bkmxhvkuoq] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: #9bb8c2;
    padding: 0;
    line-height: 1;
}

.monthly-cell.locked .lock-btn[b-bkmxhvkuoq] {
    color: #f0a500;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/Dialog/JobDialog.razor.rz.scp.css */
.delete-confirm-inline[b-0zp8n4se7v] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    flex-wrap: wrap;
}

.delete-confirm-text[b-0zp8n4se7v] {
    flex: 1;
    font-size: 0.82rem;
    color: #5a6472;
}

.manager-suggestions[b-0zp8n4se7v] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.manager-suggestion-item[b-0zp8n4se7v] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
    text-align: left;
}

    .manager-suggestion-item:last-child[b-0zp8n4se7v] {
        border-bottom: none;
    }

    .manager-suggestion-item:hover[b-0zp8n4se7v] {
        background-color: #f0f4ff;
        color: #0d6efd;
    }
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/FabMenu.razor.rz.scp.css */
/* Backdrop */
.fab-backdrop[b-oes18i1s2b] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 1999;
    transition: opacity 0.2s;
}

/* Container */
.fab-container[b-oes18i1s2b] {
    position: fixed;
    bottom: 1rem; /*2rem*/
    right: 1rem; /*2rem*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    z-index: 2000;
}

/* Items wrapper */
.fab-items[b-oes18i1s2b] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .fab-items.open[b-oes18i1s2b] {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

/* Each item row */
.fab-item[b-oes18i1s2b] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.fab-item-label[b-oes18i1s2b] {
    background: #0a2535;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Item buttons */
.fab-item-btn[b-oes18i1s2b] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

    .fab-item-btn:hover[b-oes18i1s2b] {
        transform: scale(1.1);
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }

.fab-user[b-oes18i1s2b] {
    background: #007c91;
    color: #fff;
}

.fab-access[b-oes18i1s2b] {
    background: #6a1b9a;
    color: #fff;
}

.fab-dept[b-oes18i1s2b] {
    background: #2e7d32;
    color: #fff;
}

.fab-data-import[b-oes18i1s2b] {
    background: #e65100;
    color: #fff;
}

/* Main FAB */
.fab-main[b-oes18i1s2b] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d3d4f 0%, #007c91 100%);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,124,145,0.5);
    transition: transform 0.25s ease, box-shadow 0.2s;
}

    .fab-main:hover[b-oes18i1s2b] {
        box-shadow: 0 6px 22px rgba(0,124,145,0.6);
    }

    .fab-main.open[b-oes18i1s2b] {
        transform: rotate(45deg);
    }

/* Dark mode */
.main-content.dark .fab-item-label[b-oes18i1s2b] {
    background: #00e5ff;
    color: #0a1f2e;
}
/* _content/CSF.Software.ProductionDashboard/Components/Pages/Other/SnackbarNotification.razor.rz.scp.css */
.snackbar-container[b-st8p84pfsj] {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    pointer-events: none;
    animation: snackbar-in 0.25s ease;
}

.snackbar[b-st8p84pfsj] {
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 320px;
    max-width: 520px;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.88rem;
    font-weight: 500;
}

.snackbar-message[b-st8p84pfsj] {
    flex: 1;
    line-height: 1.4;
}

.snackbar-close[b-st8p84pfsj] {
    background: none;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 0.25rem;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

    .snackbar-close:hover[b-st8p84pfsj] {
        opacity: 1;
    }

/* Severity colors */
.snackbar-warning[b-st8p84pfsj] {
    background: #fff8e1;
    color: #7a5a00;
    border-left: 4px solid #f4a00a;
}

    .snackbar-warning .snackbar-close[b-st8p84pfsj] {
        color: #7a5a00;
    }

.snackbar-success[b-st8p84pfsj] {
    background: #e6f9f1;
    color: #1a6640;
    border-left: 4px solid #2ec47b;
}

    .snackbar-success .snackbar-close[b-st8p84pfsj] {
        color: #1a6640;
    }

.snackbar-danger[b-st8p84pfsj] {
    background: #fdecea;
    color: #8b1a1a;
    border-left: 4px solid #e53935;
}

    .snackbar-danger .snackbar-close[b-st8p84pfsj] {
        color: #8b1a1a;
    }

.snackbar-info[b-st8p84pfsj] {
    background: #e3f2fd;
    color: #0d47a1;
    border-left: 4px solid #1976d2;
}

    .snackbar-info .snackbar-close[b-st8p84pfsj] {
        color: #0d47a1;
    }

/* Dark mode */
.main-content.dark .snackbar-warning[b-st8p84pfsj] {
    background: #2a1f00;
    color: #ffd54f;
}

.main-content.dark .snackbar-success[b-st8p84pfsj] {
    background: #002a1a;
    color: #69f0ae;
}

.main-content.dark .snackbar-danger[b-st8p84pfsj] {
    background: #2a0a0a;
    color: #ef9a9a;
}

.main-content.dark .snackbar-info[b-st8p84pfsj] {
    background: #001a3a;
    color: #90caf9;
}