/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-y4rgibjk2b] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.top-row[b-y4rgibjk2b] {
    background: linear-gradient(135deg, #5b21b6 0%, #06b6d4 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    height: 3.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.top-row[b-y4rgibjk2b]  a, .top-row[b-y4rgibjk2b]  .btn-link {
    white-space: nowrap;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.top-row[b-y4rgibjk2b]  a:hover, .top-row[b-y4rgibjk2b]  .btn-link:hover {
    text-decoration: none;
    color: white;
}

/* All top navbar text is bold */
.top-row[b-y4rgibjk2b]  .navbar-brand,
.top-row[b-y4rgibjk2b]  .nav-dropdown-btn,
.top-row[b-y4rgibjk2b]  .ms-auto .btn,
.top-row[b-y4rgibjk2b]  .user-badge,
.top-row[b-y4rgibjk2b]  .user-name,
.top-row[b-y4rgibjk2b]  .user-role,
.top-row[b-y4rgibjk2b]  .logout-btn {
    font-weight: 700 !important;
}

.top-row[b-y4rgibjk2b]  .navbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.top-row[b-y4rgibjk2b]  .nav-dropdown-btn,
.top-row[b-y4rgibjk2b]  .ms-auto .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.top-row[b-y4rgibjk2b]  .nav-dropdown-btn:hover,
.top-row[b-y4rgibjk2b]  .ms-auto .btn:hover:not(.logout-btn) {
    background: rgba(34, 197, 94, 0.75) !important;
    border-color: rgba(34, 197, 94, 0.9) !important;
    color: #fff !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.top-row[b-y4rgibjk2b]  .nav-dropdown-btn:focus,
.top-row[b-y4rgibjk2b]  .ms-auto .btn:focus:not(.logout-btn) {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.top-row[b-y4rgibjk2b]  .nav-dropdown-btn:active,
.top-row[b-y4rgibjk2b]  .ms-auto .btn:active:not(.logout-btn) {
    background: rgba(22, 163, 74, 0.85) !important;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.top-row[b-y4rgibjk2b]  .ms-auto .btn.logout-btn,
.top-row[b-y4rgibjk2b]  .ms-auto .logout-btn,
.top-row[b-y4rgibjk2b]  .logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.5;
    cursor: pointer;
    background: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.top-row[b-y4rgibjk2b]  .ms-auto .btn.logout-btn:hover,
.top-row[b-y4rgibjk2b]  .ms-auto .btn.logout-btn:focus,
.top-row[b-y4rgibjk2b]  .ms-auto .logout-btn:hover,
.top-row[b-y4rgibjk2b]  .logout-btn:hover,
.top-row[b-y4rgibjk2b]  .logout-btn:focus {
    background: #bf360c !important;
    border-color: #bf360c !important;
    color: #fff !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 14px rgba(191, 54, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.top-row[b-y4rgibjk2b]  .ms-auto .btn.logout-btn:active,
.top-row[b-y4rgibjk2b]  .ms-auto .logout-btn:active,
.top-row[b-y4rgibjk2b]  .logout-btn:active {
    background: #992b09 !important;
    border-color: #992b09 !important;
    color: #fff !important;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.body-container[b-y4rgibjk2b] {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.sidebar[b-y4rgibjk2b] {
    background-image: linear-gradient(180deg, #1e3a8a 0%, #5b21b6 70%);
    transition: width 0.3s ease;
    width: 250px;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed[b-y4rgibjk2b] {
    width: 60px;
}

.sidebar-header[b-y4rgibjk2b] {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding: 0 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
    gap: 0.5rem;
    color: white;
}

.sidebar-header:hover[b-y4rgibjk2b] {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-brand-icon[b-y4rgibjk2b] {
    font-size: 1.3rem;
    color: #00e5ff;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-title[b-y4rgibjk2b] {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
}

.sidebar-toggle-icon[b-y4rgibjk2b] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Collapsed sidebar overrides */
.sidebar.collapsed .sidebar-title[b-y4rgibjk2b] {
    display: none;
}

.sidebar.collapsed .sidebar-header[b-y4rgibjk2b] {
    justify-content: center;
    padding: 0;
}

.sidebar.collapsed .sidebar-toggle-icon[b-y4rgibjk2b] {
    display: none;
}

/* Nav text hidden when sidebar collapsed */
.sidebar.collapsed[b-y4rgibjk2b]  .nav-text {
    display: none;
}

.sidebar.collapsed[b-y4rgibjk2b]  .nav-item {
    padding-bottom: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar.collapsed[b-y4rgibjk2b]  .title-text {
    display: none;
}

.sidebar.collapsed[b-y4rgibjk2b]  .nav-link {
    justify-content: center;
    padding: 0 !important;
}

.sidebar.collapsed[b-y4rgibjk2b]  .nav-link .bi {
    margin: 0 !important;
    font-size: 1.2rem;
}

main[b-y4rgibjk2b] {
    flex: 1;
}

article[b-y4rgibjk2b] {
    padding-top: 1.1rem;
}

@media (min-width: 641px) {
    .body-container[b-y4rgibjk2b] {
        flex-direction: row;
    }

    .sidebar[b-y4rgibjk2b] {
        height: calc(100vh - 3.5rem);
        position: sticky;
        top: 3.5rem;
        overflow: hidden;
    }

    .sidebar.collapsed[b-y4rgibjk2b] {
        overflow: visible;
    }

    main[b-y4rgibjk2b] {
        overflow-y: auto;
    }

    .top-row[b-y4rgibjk2b], article[b-y4rgibjk2b] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-y4rgibjk2b] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-y4rgibjk2b] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.bi[b-1sdj30p8pu] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    background-size: cover;
}

.nav-item[b-1sdj30p8pu] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item[b-1sdj30p8pu]  .nav-link {
    color: white !important;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 3rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    padding: 0 1rem;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.98rem;
}

.nav-item[b-1sdj30p8pu]  a.active {
    background-color: rgba(0, 229, 255, 0.2) !important;
    color: #00e5ff !important;
}

.nav-item[b-1sdj30p8pu]  a.active .bi {
    color: #00e5ff;
}

.nav-item[b-1sdj30p8pu]  .nav-link:hover {
    background-color: rgba(0, 229, 255, 0.1);
    color: #00e5ff !important;
}

.nav-item[b-1sdj30p8pu]  .nav-link:hover .bi {
    color: #00e5ff;
}

.nav-item[b-1sdj30p8pu]  .text-light {
    color: #00e5ff !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 0.25rem;
}

.nav-scrollable[b-1sdj30p8pu] {
    display: block;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-scrollable[b-1sdj30p8pu]::-webkit-scrollbar {
    display: none;
}

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dskfjpxfl6],
.components-reconnect-repeated-attempt-visible[b-dskfjpxfl6],
.components-reconnect-failed-visible[b-dskfjpxfl6],
.components-pause-visible[b-dskfjpxfl6],
.components-resume-failed-visible[b-dskfjpxfl6],
.components-rejoining-animation[b-dskfjpxfl6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-retrying[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-failed[b-dskfjpxfl6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dskfjpxfl6] {
    display: block;
}


#components-reconnect-modal[b-dskfjpxfl6] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dskfjpxfl6 0.5s both;
    &[open]

{
    opacity: 1;
    pointer-events: auto;
    animation: components-reconnect-modal-slideUp-b-dskfjpxfl6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dskfjpxfl6 0.5s ease-in-out 0.3s forwards;
}

}

#components-reconnect-modal[b-dskfjpxfl6]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dskfjpxfl6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dskfjpxfl6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-dskfjpxfl6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dskfjpxfl6 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dskfjpxfl6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dskfjpxfl6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dskfjpxfl6] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dskfjpxfl6] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dskfjpxfl6] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-dskfjpxfl6] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dskfjpxfl6] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dskfjpxfl6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dskfjpxfl6] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dskfjpxfl6 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/CandidateForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CandidateForm — Excel-Style ERP Data Entry
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.cbb-wrap[b-78ugnzcuhh] {
    position: fixed;
    top: 6px;
    left: 4px;
    right: 4px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #080c16;
    background: #f1f5f9;
    line-height: 1.5;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}



/* ── Tab Bar (replaces step progress) ── */
.cbb-tab-bar[b-78ugnzcuhh] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 0 24px;
    background: linear-gradient(180deg, #f1f3f9 0%, #e8ecf4 100%);
    border-bottom: 2px solid #c7d2e0;
}
.cbb-tabs[b-78ugnzcuhh] {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.cbb-tab[b-78ugnzcuhh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #dde2eb;
    border: 1px solid #c0c8d6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    margin-right: -1px;
    position: relative;
}
.cbb-tab:hover[b-78ugnzcuhh] { color: #1e3a8a; background: #e8ecf4; transform: translateY(-1px); }
.cbb-tab.active[b-78ugnzcuhh] {
    color: #1e3a8a;
    background: #fff;
    border-color: #c0c8d6;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 -2px 6px rgba(30,58,138,.06);
    transform: translateY(-2px);
}
.cbb-tab.active[b-78ugnzcuhh]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #1e40af);
    border-radius: 2px 2px 0 0;
}
.cbb-tab i[b-78ugnzcuhh] { font-size: 13px; }
.cbb-tab-badge[b-78ugnzcuhh] {
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.3;
}

/* ── Form Body ── */
.cbb-form-body[b-78ugnzcuhh] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    padding: 16px 24px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════ */
.cbb-section[b-78ugnzcuhh] {
    margin-bottom: 16px;
}
.cbb-section-header[b-78ugnzcuhh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    color: #fff;
    border-radius: 6px 6px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cbb-section-header i[b-78ugnzcuhh] { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   EXCEL TABLE
   ═══════════════════════════════════════════════════════════════ */
.cbb-grid-table[b-78ugnzcuhh] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #d0d5dd;
    border-radius: 0 0 6px 6px;
}
.cbb-grid-table td[b-78ugnzcuhh] {
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    vertical-align: middle;
    color: #0f172a;
    background: #ffffff;
}
.cbb-grid-table td:last-child[b-78ugnzcuhh] { border-right: none; }
.cbb-grid-table tr:last-child td[b-78ugnzcuhh] { border-bottom: none; }

/* ── Label Cells ── */
.cbb-label[b-78ugnzcuhh] {
    background: #f8f9fb !important;
    color: #1e293b;
    font-weight: 600;
    font-size: 13px;
    text-align: right;
    padding: 7px 12px 7px 10px;
    white-space: nowrap;
    letter-spacing: .1px;
    width: 15%;
}
.cbb-required[b-78ugnzcuhh] { color: #dc2626; font-weight: 700; }

/* ── Input Cells ── */
.cbb-input-cell[b-78ugnzcuhh] {
    padding: 5px 8px;
    background: #ffffff;
    overflow: visible;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS — Clean, Premium
   ═══════════════════════════════════════════════════════════════ */
.cbb-input[b-78ugnzcuhh] {
    width: 100%;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #0f172a;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 5px;
    outline: none;
    transition: all .18s ease;
    line-height: 1.4;
}
.cbb-input[b-78ugnzcuhh]::placeholder { color: #9ca3af; font-weight: 400; }
.cbb-input:hover[b-78ugnzcuhh] { border-color: #93a8cc; }
.cbb-input:focus[b-78ugnzcuhh] { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.1); }
.cbb-input:disabled[b-78ugnzcuhh] { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }

/* ── Validation Error ── */
.cbb-error[b-78ugnzcuhh] {
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Select ── */
select.cbb-input[b-78ugnzcuhh] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 28px;
}
select.cbb-input option[b-78ugnzcuhh] {
    padding: 8px 10px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
}

/* ── Custom Dropdown (Passport Type) ── */
.cbb-dropdown-wrap[b-78ugnzcuhh] {
    position: relative;
    overflow: visible;
}
.cbb-dropdown-btn[b-78ugnzcuhh] {
    width: 100%;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #0f172a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .18s ease;
    text-align: left;
}
.cbb-dropdown-btn:hover[b-78ugnzcuhh] { border-color: #93a8cc; }
.cbb-dropdown-btn:focus[b-78ugnzcuhh] {
    border-color: #6d28d9;
    box-shadow: 0 0 0 3px rgba(109,40,217,.12);
    outline: none;
}
.cbb-dropdown-btn i[b-78ugnzcuhh] {
    font-size: 10px;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    color: #6b7280;
}
.cbb-dropdown-btn.open i[b-78ugnzcuhh] { transform: rotate(180deg); }
.cbb-dropdown-menu[b-78ugnzcuhh] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e3ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    z-index: 1050;
    overflow: hidden;
    animation: cbb-dropdown-in-b-78ugnzcuhh .15s ease-out;
}
@keyframes cbb-dropdown-in-b-78ugnzcuhh {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cbb-dropdown-item[b-78ugnzcuhh] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: all .12s ease;
    outline: none;
}
.cbb-dropdown-item:hover[b-78ugnzcuhh] { background: #f0f2f7; }
.cbb-dropdown-item:focus-visible[b-78ugnzcuhh] {
    background: #ede9fe;
    box-shadow: inset 0 0 0 2px #7c3aed;
}
.cbb-dropdown-item.selected[b-78ugnzcuhh] {
    font-weight: 700;
    color: #5b21b6;
    background: #f5f3ff;
}
.cbb-dropdown-item.selected[b-78ugnzcuhh]::before {
    content: '\f272';
    font-family: 'bootstrap-icons';
    margin-right: 6px;
    font-size: 11px;
}

/* ── Review Cards ── */
.cbb-review-card[b-78ugnzcuhh] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
}
.cbb-review-title[b-78ugnzcuhh] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.cbb-review-grid[b-78ugnzcuhh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 13px;
}
.cbb-review-label[b-78ugnzcuhh] { color: #64748b; font-weight: 500; }
.cbb-review-value[b-78ugnzcuhh] { color: #0f172a; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.cbb-statusbar[b-78ugnzcuhh] {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #fff;
    min-height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -4px 16px rgba(91,33,182,.15);
}

/* ── Statusbar: Rating Stars ── */
.cbb-sb-rating[b-78ugnzcuhh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px 0 0;
}
.cbb-sb-star[b-78ugnzcuhh] {
    background: none;
    border: none;
    padding: 1px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, transform .15s;
}
.cbb-sb-star:hover[b-78ugnzcuhh] { transform: scale(1.2); }
.cbb-sb-rating-val[b-78ugnzcuhh] {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    min-width: 22px;
    margin-left: 3px;
}

/* ── Statusbar: Status Toggle ── */
.cbb-sb-status-toggle[b-78ugnzcuhh] {
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.cbb-sb-status-toggle:hover[b-78ugnzcuhh] { transform: translateY(-1px); }

/* ── Statusbar: Divider ── */
.cbb-sb-divider[b-78ugnzcuhh] {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.25);
    margin: 0 6px;
    flex-shrink: 0;
}
.cbb-status-left[b-78ugnzcuhh], .cbb-status-right[b-78ugnzcuhh] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cbb-step-info[b-78ugnzcuhh] {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-weight: 500;
    margin-left: 8px;
}

.cbb-btn[b-78ugnzcuhh] {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
    letter-spacing: .02em;
}
.cbb-btn-cancel[b-78ugnzcuhh] {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.cbb-btn-cancel:hover[b-78ugnzcuhh] {
    background: rgba(255,255,255,.24);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.cbb-btn-prev[b-78ugnzcuhh] {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}
.cbb-btn-prev:hover[b-78ugnzcuhh] { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.cbb-btn-next[b-78ugnzcuhh] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 10px rgba(22,163,74,.4);
    color: #fff;
    padding: 9px 24px;
}
.cbb-btn-next:hover[b-78ugnzcuhh] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22,163,74,.5);
}
.cbb-btn-save[b-78ugnzcuhh] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 10px rgba(5,150,105,.4);
    color: #fff;
    font-size: 13.5px;
    padding: 9px 28px;
}
.cbb-btn-save:hover[b-78ugnzcuhh] {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(5,150,105,.5);
}
.cbb-btn:disabled[b-78ugnzcuhh] { opacity: .5; cursor: not-allowed; transform: none; }



/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.cbb-toast-wrap[b-78ugnzcuhh] {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 99999;
}
.cbb-toast[b-78ugnzcuhh] {
    padding: 12px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    min-width: 300px;
}
.cbb-toast-success[b-78ugnzcuhh] { background: linear-gradient(135deg, #16a34a, #22c55e); }
.cbb-toast-error[b-78ugnzcuhh] { background: linear-gradient(135deg, #dc2626, #ef4444); }
.cbb-toast-close[b-78ugnzcuhh] {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 12px;
    opacity: .7;
}
.cbb-toast-close:hover[b-78ugnzcuhh] { opacity: 1; }
/* /Components/Pages/JobPositionForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   JobPositionForm — Premium Royal Blue Theme
   Professional Typography · Clean Dropdowns
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.xls-wrap[b-ogyzveot9d] {
    position: fixed;
    top: 63px;
    left: 4px;
    right: 4px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    background: #e8ecf4;
    line-height: 1.5;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Loading ── */
.xls-loading[b-ogyzveot9d] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   INFO BAR — Royal Blue
   ═══════════════════════════════════════════════════════════════ */
.xls-info-bar[b-ogyzveot9d] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 2px 8px rgba(30,58,138,.3);
}
.xls-info-left[b-ogyzveot9d], .xls-info-right[b-ogyzveot9d] { display: flex; align-items: center; gap: 6px; }
.xls-info-label[b-ogyzveot9d] {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: rgba(255,255,255,.75);
}
.xls-info-value[b-ogyzveot9d] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.xls-sep[b-ogyzveot9d] {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.25);
    margin: 0 14px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   SHEET TAB BAR
   ═══════════════════════════════════════════════════════════════ */
.xls-tab-bar[b-ogyzveot9d] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding: 0 24px;
    background: linear-gradient(180deg, #f1f3f9 0%, #e8ecf4 100%);
    border-bottom: 2px solid #c7d2e0;
}
.xls-tabs[b-ogyzveot9d] {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}
.xls-tab[b-ogyzveot9d] {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: #dde2eb;
    border: 1px solid #c0c8d6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    margin-right: -1px;
    position: relative;
    letter-spacing: .1px;
}
.xls-tab:hover[b-ogyzveot9d] {
    color: #1e3a8a;
    background: #e8ecf4;
    transform: translateY(-1px);
}
.xls-tab.active[b-ogyzveot9d] {
    color: #1e3a8a;
    background: #ffffff;
    border-color: #c0c8d6;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 -3px 8px rgba(30,58,138,.08);
    transform: translateY(-2px);
}
.xls-tab.active[b-ogyzveot9d]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #1e40af);
    border-radius: 2px 2px 0 0;
}
.xls-tab i[b-ogyzveot9d] { font-size: 15px; margin-right: 5px; }

/* ═══════════════════════════════════════════════════════════════
   SHEET BODY
   ═══════════════════════════════════════════════════════════════ */
.xls-sheet-body[b-ogyzveot9d] {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    background: #ffffff;
    padding: 8px 12px;
}
.xls-grid[b-ogyzveot9d] {
    width: 100%;
    min-height: 100%;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   EXCEL TABLE
   ═══════════════════════════════════════════════════════════════ */
.xls-table[b-ogyzveot9d] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #b8c4d6;
    border-radius: 6px;
    overflow: hidden;
}

.xls-col-rownum[b-ogyzveot9d] { width: 48px; }
.xls-col-label[b-ogyzveot9d] { width: 170px; }
.xls-col-input[b-ogyzveot9d] { width: auto; }

.xls-corner[b-ogyzveot9d] {
    width: 48px;
    min-width: 48px;
    background: #e0e7f5;
    border-right: 1px solid #b8c4d6;
    border-bottom: 1px solid #b8c4d6;
}

/* ── Column Headers ── */
.xls-col-hdr[b-ogyzveot9d] {
    background: #e8edf5;
    color: #1e2a5e;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    padding: 9px 0;
    border-right: 1px solid #b8c4d6;
    border-bottom: 2px solid #a8b8d0;
    letter-spacing: .5px;
    user-select: none;
    text-transform: uppercase;
}
.xls-col-hdr:last-child[b-ogyzveot9d] { border-right: none; }

/* ── Row Headers ── */
.xls-row-hdr[b-ogyzveot9d] {
    width: 48px;
    min-width: 48px;
    background: #e8edf5;
    color: #1e2a5e;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid #b8c4d6;
    border-bottom: 1px solid #d0d8e4;
    user-select: none;
}

/* ── Label Cells ── */
.xls-label[b-ogyzveot9d] {
    background: #f0f3f9 !important;
    color: #0f172a;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    padding: 12px 18px 12px 14px;
    border-right: 1px solid #b8c4d6;
    border-bottom: 1px solid #d0d8e4;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: .1px;
    line-height: 1.4;
}
.xls-required[b-ogyzveot9d] { color: #dc2626; font-weight: 700; }

/* ── Input Cells ── */
.xls-cell[b-ogyzveot9d] {
    padding: 8px 12px;
    border-right: 1px solid #d0d8e4;
    border-bottom: 1px solid #d0d8e4;
    background: #ffffff;
    vertical-align: middle;
    transition: background .15s ease;
}
.xls-cell:last-child[b-ogyzveot9d] { border-right: none; }

.xls-merge-right[b-ogyzveot9d] {
    border-right: 1px solid #d0d8e4 !important;
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS — Clean, Premium
   ═══════════════════════════════════════════════════════════════ */
.xls-input[b-ogyzveot9d] {
    width: 100%;
    border: 1.5px solid #c7d2e0 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 6px;
    outline: none;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: none !important;
    line-height: 1.4;
}
.xls-input[b-ogyzveot9d]::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 1;
}
.xls-input:hover[b-ogyzveot9d] {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #93a8cc !important;
}
.xls-input:focus[b-ogyzveot9d] {
    border: 2px solid #2563eb !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
    padding: 9px 13px;
    color: #0f172a;
    font-weight: 600;
}
.xls-textarea[b-ogyzveot9d] {
    resize: vertical;
    min-height: 36px;
    white-space: normal !important;
    overflow: visible !important;
    line-height: 1.5;
}
.xls-num[b-ogyzveot9d] { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS — Pure White + Premium
   ═══════════════════════════════════════════════════════════════ */
/* ── Dropdown chevron via CSS (no SVG, no pattern) ── */
.xls-cell:has(> select.xls-input)[b-ogyzveot9d] {
    position: relative;
}
.xls-cell:has(> select.xls-input)[b-ogyzveot9d]::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #1e3a8a;
    pointer-events: none;
    z-index: 1;
    transition: border-color .2s ease;
}
.xls-cell:has(> select.xls-input:focus)[b-ogyzveot9d]::after {
    border-top-color: #2563eb;
}

select.xls-input[b-ogyzveot9d] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color-scheme: light;
    background: #ffffff !important;
    background-image: none !important;
    padding-right: 36px !important;
    border: 1.5px solid #c7d2e0 !important;
    border-radius: 6px !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 500;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
select.xls-input:hover[b-ogyzveot9d] {
    border-color: #93a8cc !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(30,58,138,.08) !important;
}
select.xls-input:focus[b-ogyzveot9d] {
    border: 2px solid #2563eb !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
    outline: none;
}
select.xls-input option[b-ogyzveot9d] {
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a !important;
    background: #ffffff !important;
    border: none;
    line-height: 1.5;
}
select.xls-input option:hover[b-ogyzveot9d],
select.xls-input option:focus[b-ogyzveot9d] {
    background: #f0f4ff !important;
    color: #0f172a !important;
}
select.xls-input option:checked[b-ogyzveot9d] {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600;
}
select.xls-input option:active[b-ogyzveot9d] {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Override browser native blue selection on dropdowns */
select.xls-input[b-ogyzveot9d]::-webkit-scrollbar,
select.xls-input[b-ogyzveot9d]::-webkit-scrollbar-track {
    background: #ffffff !important;
}
.xls-cell [b-ogyzveot9d]::selection {
    background: rgba(37,99,235,.15) !important;
    color: #0f172a !important;
}
.xls-cell [b-ogyzveot9d]::-moz-selection {
    background: rgba(37,99,235,.15) !important;
    color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROW HOVER
   ═══════════════════════════════════════════════════════════════ */
.xls-table tbody tr:hover td[b-ogyzveot9d] {
    background: #f0f4ff;
}
.xls-table tbody tr:hover .xls-label[b-ogyzveot9d] {
    background: #e4ecf9 !important;
}
.xls-table tbody tr:hover .xls-cell[b-ogyzveot9d] {
    background: #f0f4ff;
}
.xls-table tbody tr:hover .xls-row-hdr[b-ogyzveot9d] {
    background: #d4dde9;
}

/* ═══════════════════════════════════════════════════════════════
   REMOVE BUTTON
   ═══════════════════════════════════════════════════════════════ */
.xls-remove-btn[b-ogyzveot9d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.xls-remove-btn:hover[b-ogyzveot9d] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    box-shadow: 0 2px 6px rgba(220,38,38,.15);
    transform: scale(1.05);
}
.xls-remove-btn:active[b-ogyzveot9d] { transform: scale(.95); }
.xls-remove-btn.disabled[b-ogyzveot9d],
.xls-remove-btn:disabled[b-ogyzveot9d] {
    background: #f9fafb;
    border-color: #f3f4f6;
    color: #d1d5db;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.xls-remove-btn.disabled:hover[b-ogyzveot9d],
.xls-remove-btn:disabled:hover[b-ogyzveot9d] {
    background: #f9fafb;
    border-color: #f3f4f6;
    color: #d1d5db;
    box-shadow: none;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   ADD ROW
   ═══════════════════════════════════════════════════════════════ */
.xls-add-row-bar[b-ogyzveot9d] {
    flex: 0 0 auto;
    padding: 14px 24px;
    border-top: 1px solid #c7d2e0;
    background: #f8f9fc;
    display: flex;
    align-items: center;
    gap: 16px;
}
.xls-add-row-btn[b-ogyzveot9d] {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border: 1.5px dashed #2563eb;
    border-radius: 6px;
    background: #eef2ff;
    color: #1e3a8a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    letter-spacing: .1px;
}
.xls-add-row-btn:hover[b-ogyzveot9d] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    border-style: solid;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
    transform: translateY(-1px);
}
.xls-add-row-btn:active[b-ogyzveot9d] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(37,99,235,.2);
}
.xls-row-count[b-ogyzveot9d] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.xls-statusbar[b-ogyzveot9d] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    min-height: 56px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 -2px 10px rgba(30,58,138,.2);
}
.xls-status-left[b-ogyzveot9d], .xls-status-center[b-ogyzveot9d], .xls-status-right[b-ogyzveot9d] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xls-status-center[b-ogyzveot9d] { gap: 18px; }

.xls-sheet-indicator[b-ogyzveot9d] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xls-dot[b-ogyzveot9d] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    cursor: pointer;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(255,255,255,.15);
}
.xls-dot:hover[b-ogyzveot9d] {
    background: rgba(255,255,255,.55);
    transform: scale(1.2);
}
.xls-dot.active[b-ogyzveot9d] {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 1px 4px rgba(0,0,0,.15);
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.xls-btn[b-ogyzveot9d] {
    display: inline-flex;
    align-items: center;
    padding: 9px 24px;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    letter-spacing: .15px;
    line-height: 1.3;
}
.xls-btn-cancel[b-ogyzveot9d] {
    background: rgba(255,255,255,.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.2);
}
.xls-btn-cancel:hover[b-ogyzveot9d] {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.xls-btn-nav[b-ogyzveot9d] {
    background: rgba(255,255,255,.1);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.2);
}
.xls-btn-nav:hover[b-ogyzveot9d] {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.xls-btn-save[b-ogyzveot9d] {
    background: #ffffff;
    color: #1e3a8a;
    border: 1px solid #ffffff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.xls-btn-save:hover[b-ogyzveot9d] {
    background: #eef2ff;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    color: #1e2a5e;
    transform: translateY(-1px);
}
.xls-btn-save:active[b-ogyzveot9d] { transform: translateY(0); }
.xls-btn-save:disabled[b-ogyzveot9d] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.xls-toast-wrap[b-ogyzveot9d] {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 99999;
}
.xls-toast[b-ogyzveot9d] {
    padding: 14px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    min-width: 320px;
    border: 1px solid rgba(255,255,255,.1);
}
.xls-toast-success[b-ogyzveot9d] { background: #1e3a8a; }
.xls-toast-error[b-ogyzveot9d] { background: #991b1b; }
.xls-toast-close[b-ogyzveot9d] {
    margin-left: auto;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 12px;
    opacity: .7;
    transition: opacity .15s ease;
}
.xls-toast-close:hover[b-ogyzveot9d] { opacity: 1; }
/* /Components/Pages/ManageProjects.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ManageProjects — Premium UI
   Styled to match the app-wide premium design system in
   wwwroot/app.css: Segoe UI type ramp, slate/purple palette,
   soft radii, refined weights and breathing room. All class
   names and layout behaviour are unchanged.
   ═══════════════════════════════════════════════════════════════ */

/* ── Content wrapper ── */
.cbb-wrap[b-6rpfo7f85r] {
    position: fixed;
    top: 63px;
    left: 4px;
    right: 4px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #080c16;
    background: #f1f5f9;
    line-height: 1.5;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Info Panel ── */
.cbb-info-panel[b-6rpfo7f85r] {
    background: #fff;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(15,23,42,.05);
    position: relative;
    z-index: 2;
}
.cbb-info-left[b-6rpfo7f85r] { flex: 1; min-width: 0; }
.cbb-info-right[b-6rpfo7f85r] { text-align: right; min-width: 260px; }
.cbb-info-label[b-6rpfo7f85r] {
    color: #1e293b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.cbb-info-value[b-6rpfo7f85r] {
    color: #070b16;
    font-size: 14px;
    font-weight: 700;
}
.cbb-info-line[b-6rpfo7f85r] { margin-bottom: 2px; }
.cbb-change-link[b-6rpfo7f85r] {
    display: inline-block;
    margin-left: 10px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 100%);
    border: none;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(91,33,182,.35);
    transition: all .18s ease;
    vertical-align: middle;
    cursor: pointer;
}
.cbb-change-link:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(91,33,182,.5);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.cbb-change-link:active[b-6rpfo7f85r] { transform: translateY(0); box-shadow: 0 1px 4px rgba(91,33,182,.4); }

/* ── Top-bar ── */
.cbb-topbar[b-6rpfo7f85r] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbb-range-sep[b-6rpfo7f85r] {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    margin: 0 14px;
    vertical-align: middle;
}
.cbb-info-panel .cbb-range-label[b-6rpfo7f85r] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    color: #1e293b;
    text-transform: uppercase;
}
.cbb-info-panel .cbb-range-input[b-6rpfo7f85r] {
    border: 1.5px solid #e0e3e8;
    background: #fff;
    color: #0d1321;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    min-width: 220px;
    color-scheme: light;
    transition: all .18s ease;
}
.cbb-info-panel .cbb-range-input:hover[b-6rpfo7f85r] { border-color: #a5b4fc; }
.cbb-info-panel .cbb-range-input:focus[b-6rpfo7f85r] { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

/* ── Grid table ── */
.cbb-grid-wrapper[b-6rpfo7f85r] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cbb-grid-body[b-6rpfo7f85r] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.cbb-grid-table[b-6rpfo7f85r] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.cbb-grid-table thead[b-6rpfo7f85r] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.cbb-grid-table thead th[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 0 12px;
    height: 44px;
    display: table-cell;
    vertical-align: middle;
    border-right: 1px solid rgba(255,255,255,.14);
    border-bottom: 2px solid #3724a0;
    white-space: nowrap;
}
.cbb-grid-table thead th:last-child[b-6rpfo7f85r] { border-right: none; }

.cbb-grid-table td[b-6rpfo7f85r] {
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #0f172a;
    background: #ffffff;
}
.cbb-grid-table td:last-child[b-6rpfo7f85r] { border-right: none; }

/* No zebra striping — all rows share a clean, consistent background */

/* Hover highlight */
.cbb-grid-table tbody tr:hover td[b-6rpfo7f85r] { background: #f5f3ff; }

/* Strong leading column values (company name etc. use inline #0f172a) */
.cbb-grid-table td strong[b-6rpfo7f85r] { font-weight: 700; color: #0f172a; }

.cbb-grid-table .cbb-num[b-6rpfo7f85r] { text-align: right; }

/* ── Status Badges (premium pills) ── */
.cbb-badge[b-6rpfo7f85r] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.3;
    white-space: nowrap;
}
.cbb-badge-active[b-6rpfo7f85r] { background: #d4edda; color: #0c3b17; }
.cbb-badge-inactive[b-6rpfo7f85r] { background: #f8d7da; color: #64101a; }

/* ── Cell Input (Add/Edit form grid) ── */
.cbb-cell-input[b-6rpfo7f85r] {
    width: 100%;
    border: 1.5px solid #e0e3e8;
    background: #fff;
    color: #0d1321;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 7px;
    transition: all .18s ease;
}
.cbb-cell-input:hover[b-6rpfo7f85r] { border-color: #a5b4fc; }
.cbb-cell-input:focus[b-6rpfo7f85r] { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
select.cbb-cell-input[b-6rpfo7f85r] { cursor: pointer; }

/* ── Action Buttons (Edit / Delete in grid) ── */
.cbb-action-btn[b-6rpfo7f85r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.cbb-action-btn i[b-6rpfo7f85r] { pointer-events: none; }
.cbb-action-btn + .cbb-action-btn[b-6rpfo7f85r] { margin-left: 8px; }
.cbb-action-btn:active[b-6rpfo7f85r] { transform: translateY(0) scale(.96); filter: brightness(.94); }
.cbb-action-edit[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
.cbb-action-edit:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    box-shadow: 0 4px 12px rgba(2,132,199,.4);
    transform: translateY(-1px);
}
.cbb-action-delete[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.cbb-action-delete:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(220,38,38,.4);
    transform: translateY(-1px);
}

/* ── Status Bar ── */
.cbb-statusbar[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #fff;
    min-height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.cbb-status-btns[b-6rpfo7f85r] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Status Bar Buttons: Base ── */
.cbb-status-btns button[b-6rpfo7f85r] {
    text-decoration: none;
    min-width: 140px;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 10px 26px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
}

/* ── Status Bar Buttons: Secondary (Back, Cancel) ── */
.cbb-btn-secondary[b-6rpfo7f85r] {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cbb-btn-secondary:hover[b-6rpfo7f85r] {
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.45);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

/* ── Status Bar Buttons: Primary (Add, Save) ── */
.cbb-btn-primary[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 10px rgba(22,163,74,.45);
    letter-spacing: .04em;
}
.cbb-btn-primary:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(22,163,74,.55);
}
.cbb-btn-primary:active[b-6rpfo7f85r] { transform: translateY(0); box-shadow: 0 1px 4px rgba(22,163,74,.4); }
.cbb-btn-primary:disabled[b-6rpfo7f85r] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Toast ── */
.cbb-toast-wrap[b-6rpfo7f85r] {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 99999;
}
.cbb-toast[b-6rpfo7f85r] {
    padding: 12px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    min-width: 300px;
}
.cbb-toast-success[b-6rpfo7f85r] { background: linear-gradient(135deg, #16a34a, #22c55e); }
.cbb-toast-error[b-6rpfo7f85r] { background: linear-gradient(135deg, #dc2626, #ef4444); }
.cbb-toast-close[b-6rpfo7f85r] {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 12px;
    opacity: .7;
}
.cbb-toast-close:hover[b-6rpfo7f85r] { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   FORM VIEW — Premium Purple Theme
   Only applied where .cbb-form-theme is present (Add/Edit form)
   ═══════════════════════════════════════════════════════════════ */

.cbb-form-theme[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
}
.cbb-form-theme.cbb-info-panel[b-6rpfo7f85r] {
    border-bottom-color: #e9d5ff;
}
.cbb-form-theme .cbb-info-label[b-6rpfo7f85r],
.cbb-form-theme.cbb-info-panel .cbb-range-label[b-6rpfo7f85r] {
    color: #7c3aed;
}
.cbb-form-theme .cbb-info-value[b-6rpfo7f85r] {
    color: #581c87;
}
.cbb-form-theme .cbb-range-sep[b-6rpfo7f85r] {
    background: #ddd6fe;
}

.cbb-form-theme .cbb-grid-table td[b-6rpfo7f85r] {
    border-right-color: #f3e8ff;
    border-bottom-color: #f3e8ff;
}

/* Form grid keeps the same premium purple header as the list */
.cbb-form-theme .cbb-grid-table thead th[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
}
/* No zebra striping in form view — all rows share a consistent background */

.cbb-form-theme .cbb-cell-input[b-6rpfo7f85r] {
    border-color: #eaddff;
}
.cbb-form-theme .cbb-cell-input:hover[b-6rpfo7f85r] {
    border-color: #8b5cf6;
}
.cbb-form-theme .cbb-cell-input:focus[b-6rpfo7f85r] {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.cbb-form-theme .cbb-statusbar[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #581c87 0%, #7c3aed 50%, #a78bfa 100%);
}
.cbb-form-theme .cbb-btn-secondary[b-6rpfo7f85r] {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 1px 4px rgba(220,38,38,.4);
}
.cbb-form-theme .cbb-btn-secondary:hover[b-6rpfo7f85r] {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 3px 10px rgba(185,28,28,.5);
    transform: translateY(-1px);
}
.cbb-form-theme .cbb-btn-secondary:active[b-6rpfo7f85r] {
    box-shadow: 0 1px 4px rgba(220,38,38,.45);
}
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 2px 10px rgba(124,58,237,.45);[b-6rpfo7f85r]
}
.cbb-form-theme .cbb-btn-primary:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    box-shadow: 0 4px 16px rgba(124,58,237,.6);
}
.cbb-form-theme .cbb-btn-primary:active[b-6rpfo7f85r] {
    box-shadow: 0 1px 4px rgba(124,58,237,.45);
}

/* ── Add / Remove Row Buttons ── */
.cbb-add-row-bar[b-6rpfo7f85r] {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-top: 1px solid #e9d5ff;
    background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
}
.cbb-add-row-btn[b-6rpfo7f85r] {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1.5px dashed #8b5cf6;
    border-radius: 7px;
    background: rgba(139,92,246,.06);
    color: #5b21b6;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .18s ease;
}
.cbb-add-row-btn:hover[b-6rpfo7f85r] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 2px 8px rgba(124,58,237,.35);
    transform: translateY(-1px);
}
.cbb-add-row-btn:active[b-6rpfo7f85r] { transform: translateY(0); }

.cbb-row-remove-btn[b-6rpfo7f85r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: rgba(220,38,38,.08);
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.cbb-row-remove-btn:hover[b-6rpfo7f85r] {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 6px rgba(220,38,38,.35);
    transform: translateY(-1px);
}
.cbb-row-remove-btn:active[b-6rpfo7f85r] { transform: translateY(0); }
/* /Components/Pages/ProjectDemand.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ProjectDemand — Premium UI (matches ManageProjects)
   ═══════════════════════════════════════════════════════════════ */

/* ── Content wrapper ── */
.cbb-wrap[b-mgqhu6zd2j] {
    position: fixed;
    top: 63px;
    left: 4px;
    right: 4px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #080c16;
    background: #f1f5f9;
    line-height: 1.5;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Info Panel ── */
.cbb-info-panel[b-mgqhu6zd2j] {
    background: #fff;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(15,23,42,.05);
    position: relative;
    z-index: 2;
}
.cbb-info-left[b-mgqhu6zd2j] { flex: 1; min-width: 0; }
.cbb-info-right[b-mgqhu6zd2j] { text-align: right; min-width: 200px; }
.cbb-info-label[b-mgqhu6zd2j] {
    color: #1e293b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.cbb-info-value[b-mgqhu6zd2j] {
    color: #070b16;
    font-size: 14px;
    font-weight: 700;
}
.cbb-info-line[b-mgqhu6zd2j] { margin-bottom: 2px; }

/* ── Top-bar ── */
.cbb-topbar[b-mgqhu6zd2j] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cbb-range-sep[b-mgqhu6zd2j] {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    margin: 0 14px;
    vertical-align: middle;
}
.cbb-info-panel .cbb-range-label[b-mgqhu6zd2j] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    color: #1e293b;
    text-transform: uppercase;
}
.cbb-info-panel .cbb-range-input[b-mgqhu6zd2j] {
    border: 1.5px solid #e0e3e8;
    background: #fff;
    color: #0d1321;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    min-width: 220px;
    color-scheme: light;
    transition: all .18s ease;
}
.cbb-info-panel .cbb-range-input:hover[b-mgqhu6zd2j] { border-color: #a5b4fc; }
.cbb-info-panel .cbb-range-input:focus[b-mgqhu6zd2j] { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

/* ── Date Inputs ── */
.cbb-date-input[b-mgqhu6zd2j] {
    border: 1.5px solid #e0e3e8;
    background: #fff;
    color: #0d1321;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 8px;
    width: 140px;
    color-scheme: light;
    transition: all .18s ease;
}
.cbb-date-input:hover[b-mgqhu6zd2j] { border-color: #a5b4fc; }
.cbb-date-input:focus[b-mgqhu6zd2j] { outline: none; border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

/* ── Create New Button (Info Panel) ── */
.cbb-btn-create[b-mgqhu6zd2j] {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(22,163,74,.35);
    transition: all .18s ease;
    white-space: nowrap;
}
.cbb-btn-create:hover[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 14px rgba(22,163,74,.5);
    transform: translateY(-1px);
}
.cbb-btn-create:active[b-mgqhu6zd2j] { transform: translateY(0); box-shadow: 0 1px 4px rgba(22,163,74,.4); }

/* ── Clear Filter Button ── */
.cbb-clear-btn[b-mgqhu6zd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1.5px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.cbb-clear-btn:hover[b-mgqhu6zd2j] { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════
   STATS CARDS
   ═══════════════════════════════════════════════════════════════ */
.cbb-stats-row[b-mgqhu6zd2j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.cbb-stat-card[b-mgqhu6zd2j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all .2s ease;
}
.cbb-stat-card:hover[b-mgqhu6zd2j] { box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.cbb-stat-icon[b-mgqhu6zd2j] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cbb-stat-number[b-mgqhu6zd2j] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}
.cbb-stat-label[b-mgqhu6zd2j] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════════════════
   GRID TABLE
   ═══════════════════════════════════════════════════════════════ */
.cbb-grid-wrapper[b-mgqhu6zd2j] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cbb-grid-body[b-mgqhu6zd2j] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.cbb-grid-table[b-mgqhu6zd2j] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.cbb-grid-table thead[b-mgqhu6zd2j] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.cbb-grid-table thead th[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 0 12px;
    height: 44px;
    display: table-cell;
    vertical-align: middle;
    border-right: 1px solid rgba(255,255,255,.14);
    border-bottom: 2px solid #3724a0;
    white-space: nowrap;
}
.cbb-grid-table thead th:last-child[b-mgqhu6zd2j] { border-right: none; }

.cbb-grid-table td[b-mgqhu6zd2j] {
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #0f172a;
    background: #ffffff;
}
.cbb-grid-table td:last-child[b-mgqhu6zd2j] { border-right: none; }

.cbb-grid-table tbody tr:hover td[b-mgqhu6zd2j] { background: #f5f3ff; }
.cbb-grid-table td strong[b-mgqhu6zd2j] { font-weight: 700; color: #0f172a; }
.cbb-grid-table .cbb-num[b-mgqhu6zd2j] { text-align: right; }

/* ── Expand Button ── */
.cbb-expand-btn[b-mgqhu6zd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1.5px solid #e0e3e8;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.cbb-expand-btn:hover[b-mgqhu6zd2j] { background: #f0f4ff; border-color: #a5b4fc; color: #5b21b6; }
.cbb-expand-btn.expanded[b-mgqhu6zd2j] { background: #f0f4ff; border-color: #8b5cf6; color: #5b21b6; }

/* ── Detail Row ── */
.cbb-detail-row td[b-mgqhu6zd2j] {
    padding: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}
.cbb-detail-row.collapsed td[b-mgqhu6zd2j] { display: none; }
.cbb-detail-row.expanded td[b-mgqhu6zd2j] { display: table-cell; }
.cbb-detail-inner[b-mgqhu6zd2j] {
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}
.cbb-detail-grid[b-mgqhu6zd2j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 20px;
}
.cbb-detail-item[b-mgqhu6zd2j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cbb-detail-item.span-2[b-mgqhu6zd2j] { grid-column: span 2; }
.cbb-detail-label[b-mgqhu6zd2j] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b;
}
.cbb-detail-value[b-mgqhu6zd2j] {
    font-size: 13.5px;
    font-weight: 500;
    color: #0f172a;
    line-height: 1.4;
}

/* ── Action Buttons ── */
.cbb-action-btn[b-mgqhu6zd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.cbb-action-btn i[b-mgqhu6zd2j] { pointer-events: none; }
.cbb-action-btn + .cbb-action-btn[b-mgqhu6zd2j] { margin-left: 8px; }
.cbb-action-btn:active[b-mgqhu6zd2j] { transform: translateY(0) scale(.96); filter: brightness(.94); }
.cbb-action-edit[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}
.cbb-action-edit:hover[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    box-shadow: 0 4px 12px rgba(2,132,199,.4);
    transform: translateY(-1px);
}
.cbb-action-delete[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.cbb-action-delete:hover[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(220,38,38,.4);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.cbb-statusbar[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #fff;
    min-height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.cbb-status-left[b-mgqhu6zd2j] { display: flex; align-items: center; gap: 10px; }
.cbb-status-center[b-mgqhu6zd2j] { display: flex; align-items: center; gap: 8px; }
.cbb-status-right[b-mgqhu6zd2j] { display: flex; align-items: center; gap: 10px; }

/* ── Status Bar Buttons ── */
.cbb-status-btns button[b-mgqhu6zd2j],
.cbb-btn[b-mgqhu6zd2j] {
    text-decoration: none;
    min-width: 120px;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 10px 26px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
}
.cbb-btn-primary[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 10px rgba(22,163,74,.45);
    letter-spacing: .04em;
}
.cbb-btn-primary:hover[b-mgqhu6zd2j] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(22,163,74,.55);
}
.cbb-btn-primary:active[b-mgqhu6zd2j] { transform: translateY(0); box-shadow: 0 1px 4px rgba(22,163,74,.4); }
.cbb-btn-primary:disabled[b-mgqhu6zd2j] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Pagination ── */
.cbb-pagination[b-mgqhu6zd2j] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cbb-page-btn[b-mgqhu6zd2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.cbb-page-btn:hover[b-mgqhu6zd2j] { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.cbb-page-btn.active[b-mgqhu6zd2j] {
    background: #fff;
    color: #5b21b6;
    border-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.cbb-page-btn:disabled[b-mgqhu6zd2j] {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}
.cbb-page-info[b-mgqhu6zd2j] {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    margin: 0 8px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING / EMPTY
   ═══════════════════════════════════════════════════════════════ */
.cbb-loading[b-mgqhu6zd2j] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
}
.cbb-empty[b-mgqhu6zd2j] {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.cbb-empty i[b-mgqhu6zd2j] { font-size: 40px; display: block; margin-bottom: 12px; }
.cbb-empty p[b-mgqhu6zd2j] { margin: 0; font-size: 15px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */
.cbb-toast-wrap[b-mgqhu6zd2j] {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 99999;
}
.cbb-toast[b-mgqhu6zd2j] {
    padding: 12px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    display: flex;
    align-items: center;
    min-width: 300px;
}
.cbb-toast-success[b-mgqhu6zd2j] { background: linear-gradient(135deg, #16a34a, #22c55e); }
.cbb-toast-error[b-mgqhu6zd2j] { background: linear-gradient(135deg, #dc2626, #ef4444); }
.cbb-toast-close[b-mgqhu6zd2j] {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 12px;
    opacity: .7;
}
.cbb-toast-close:hover[b-mgqhu6zd2j] { opacity: 1; }