/* /Components/Layout/AppFooter.razor.rz.scp.css */
.app-footer[b-6skyu1nwlq] {
    font-family: var(--g-font-sans);
    padding: 16px 0;
    -webkit-font-smoothing: antialiased;
}

.app-footer .copyright[b-6skyu1nwlq] {
    font-size: var(--g-fs-xs);
    line-height: 1.6;
    margin-left: 6px;
}

.app-footer .footer-brand-link[b-6skyu1nwlq] {
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    text-decoration: none;
    transition: color var(--g-transition);
}

.app-footer .footer-brand-link:hover[b-6skyu1nwlq] {
    color: var(--g-gray-900);
}

.app-footer .nav-footer .nav-link[b-6skyu1nwlq] {
    font-size: var(--g-fs-sm);
    padding: 0.5rem 1rem;
    transition: color var(--g-transition);
}

.app-footer .nav-footer .nav-link:hover[b-6skyu1nwlq] {
    color: var(--g-gray-800);
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .app-footer .copyright[b-6skyu1nwlq] {
        font-size: var(--g-fs-xs);
        text-align: center;
    }

    .app-footer .nav-footer[b-6skyu1nwlq] {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
    }

    .app-footer .nav-footer .nav-link[b-6skyu1nwlq] {
        font-size: var(--g-fs-xs);
        padding: 0.25rem 0.5rem;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-4tntz1eapo] {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

 
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.navbar-brand-logo[b-ldlokas3zw] {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.nav-link[b-ldlokas3zw] {
    transition: background-color 0.2s;
    border-radius: 0.25rem;
}

.nav-link:hover[b-ldlokas3zw] {
    background-color: rgba(255, 255, 255, 0.1);
}
/* /Components/Layout/ManagerLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════
   ManagerLayout – Shell Styles
   Matches SuperAdminLayout exactly
   ═══════════════════════════════════════ */

.sa-layout[b-0w88j4r92l] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--g-bg-layout);
}

.sa-main[b-0w88j4r92l] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s var(--g-ease);
    overflow-y: auto;
    height: 100vh;
}



.sa-layout.collapsed .sa-main[b-0w88j4r92l] {
    margin-left: var(--sidebar-width-collapsed);
}

.sa-content[b-0w88j4r92l] {
    flex: 1;
    padding: 10px 16px 48px;
}

/* ── Page content card ── */
[b-0w88j4r92l] .sa-page-card { 
    border: none;
    border-radius: 0;
    overflow: visible;
    margin: 0;
    padding: 15px 20px;
    flex: 1;
}

/* ── Mobile overlay ── */
.sa-overlay[b-0w88j4r92l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1110;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--g-ease);
}

.sa-overlay.active[b-0w88j4r92l] {
    opacity: 1;
    pointer-events: auto;
}

 

@media (max-width: 1024px) {
    .sa-layout[b-0w88j4r92l] {
        height: 100vh;
        overflow: visible;
    }

    .sa-main[b-0w88j4r92l] {
        margin-left: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .sa-content[b-0w88j4r92l] {
        padding: 10px 8px 48px;
    }

    [b-0w88j4r92l] .sa-page-card {
        padding: 20px 16px;
     }
}

@media (max-width: 800px) {
    .sa-layout[b-0w88j4r92l] {
        height: auto;
        overflow: visible;
    }

    .sa-main[b-0w88j4r92l] {
        margin-left: 0 !important;
        height: auto;
        overflow-y: visible;
    }

    .sa-content[b-0w88j4r92l] {
        padding: 10px 8px 48px;
    }

    [b-0w88j4r92l] .sa-page-card {
        padding: 20px 16px;
         border-radius: var(--g-radius-lg);
    }
}

@media (min-width: 1025px) {
    .sa-overlay[b-0w88j4r92l] {
        display: none;
    }
}

@media (max-width: 768px) {
    [b-0w88j4r92l] .sa-page-card {
        padding: 16px 12px;
         border-radius: var(--g-radius-lg);
    }
}

@media (max-width: 640px) {
    [b-0w88j4r92l] .sa-page-card {
        padding: 16px 12px;
     }
}

@media (max-width: 425px) {
    .sa-content[b-0w88j4r92l] {
        padding: 8px 4px 48px;
    }

    [b-0w88j4r92l] .sa-page-card {
        padding: 12px 8px;
         border-radius: var(--g-radius-md, 10px);
    }
}
/* /Components/Layout/ManagerSidebar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ManagerSidebar – White Enterprise Theme
   Uses shared --sidebar-* tokens from variables.css
   ═══════════════════════════════════════════ */

/* ── Sidebar Shell ── */
.sa-sidebar[b-7fih6qshew] {
    width: var(--sidebar-width);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width 0.3s var(--g-ease), transform 0.3s var(--g-ease);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    font-family: 'Inter', var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sa-sidebar.collapsed[b-7fih6qshew] {
    width: var(--sidebar-width-collapsed);
}

/* ── Brand ── */
.sa-sidebar-brand[b-7fih6qshew] {
    display: flex;
    align-items: center;
    padding: 23px 15px 13px;
    overflow: hidden;
    background: transparent;
        margin: 5px 0px;
}

.sa-brand-logo-wrap[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    transition: width 0.3s var(--g-ease);
}

.sa-brand-logo-wrap:hover[b-7fih6qshew] {
    text-decoration: none;
}

.sa-brand-img[b-7fih6qshew] {
    height: 41px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    transition: height 0.3s var(--g-ease);
}

.sa-brand-divider[b-7fih6qshew] {
    width: 1px;
    height: 20px;
    background: var(--sidebar-border);
    flex-shrink: 0;
}

.sa-brand-role[b-7fih6qshew] {
    font-size: 13px;
    font-weight: 600;
    color: var(--g-info);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.sa-sidebar.collapsed .sa-brand-img[b-7fih6qshew] {
    height: 31px;
}

.sa-sidebar.collapsed .sa-brand-logo-wrap[b-7fih6qshew] {
    width: 36px;
}

.sa-sidebar.collapsed .sa-brand-divider[b-7fih6qshew],
.sa-sidebar.collapsed .sa-brand-role[b-7fih6qshew] {
    display: none;
}

.sa-sidebar.collapsed .sa-sidebar-brand[b-7fih6qshew] {
    justify-content: center;
    padding: 12px 16px;
}

/* ── Divider ── */
.sa-divider[b-7fih6qshew] {
    border: none;
    height: 1px;
    background: var(--sidebar-border);
    opacity: 1;
    margin: 0 16px 4px;
}

.sa-divider-top[b-7fih6qshew] {
    margin-bottom: 4px;
}

.sa-sidebar.collapsed .sa-divider[b-7fih6qshew] {
    margin: 0 12px 4px;
}

/* ── Navigation ── */
.sa-nav[b-7fih6qshew] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  
}

.sa-nav[b-7fih6qshew]::-webkit-scrollbar {
    width: 3px;
}

.sa-nav[b-7fih6qshew]::-webkit-scrollbar-thumb {
    background: var(--g-gray-300);
    border-radius: 3px;
}

.sa-nav[b-7fih6qshew]::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Section Label ── */
.sa-nav-section-label[b-7fih6qshew] {
    padding: 4px 16px 0;
       margin: 8px;
}

.sa-nav-section-label .sa-nav-label[b-7fih6qshew] {
    font-size: 10px;
    font-weight: 400;
    color: var(--g-info);
}

.sa-sidebar.collapsed .sa-nav-section-label[b-7fih6qshew] {
    display: none;
}

/* ── Nav Item ── */
.sa-nav-item[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 37px;
    padding: 0 16px;
    margin: 1px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.2s var(--g-ease),
                color 0.2s var(--g-ease),
                box-shadow 0.2s var(--g-ease);
    cursor: pointer;
    line-height: 1;
    letter-spacing: -0.01em;
}

.sa-nav-item:hover[b-7fih6qshew] {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
    text-decoration: none;
}

.sa-nav-item:focus-visible[b-7fih6qshew] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}

/* Active: dark black/navy card */
.sa-nav-item.active[b-7fih6qshew] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: var(--sidebar-active-shadow);
}

.sa-nav-item.active:hover[b-7fih6qshew] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    text-decoration: none;
}

/* ── Icon ── */
.sa-nav-icon[b-7fih6qshew] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--sidebar-icon);
    transition: color 0.2s var(--g-ease);
}

.sa-nav-icon svg[b-7fih6qshew] {
    width: 15px;
    height: 15px;
}

.sa-nav-item.active .sa-nav-icon[b-7fih6qshew] {
    color: var(--sidebar-bg);
}

.sa-nav-item.active .sa-nav-chevron[b-7fih6qshew] {
    color: var(--sidebar-bg);
}

/* ── Label ── */
.sa-nav-label[b-7fih6qshew] {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sa-sidebar.collapsed .sa-nav-label[b-7fih6qshew] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Center icons when collapsed */
.sa-sidebar.collapsed .sa-nav-item[b-7fih6qshew] {
    justify-content: center;
    padding: 0;
    gap: 0;
    margin: 1px 12px;
}

/* ── Expandable Nav Group ── */
.sa-nav-group[b-7fih6qshew] {
    display: flex;
    flex-direction: column;
}

.sa-nav-chevron[b-7fih6qshew] {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.25s var(--g-ease);
    opacity: 0.4;
    width: 14px;
    height: 14px;
    color: var(--sidebar-icon);
}

.sa-nav-group.open .sa-nav-chevron[b-7fih6qshew] {
    transform: rotate(180deg);
    opacity: 0.7;
}

.sa-sidebar.collapsed .sa-nav-chevron[b-7fih6qshew] {
    display: none;
}

.sa-nav-submenu[b-7fih6qshew] {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--g-ease);
    padding-left: 6px;
}

.sa-nav-group.open .sa-nav-submenu[b-7fih6qshew] {
    max-height: 250px;
}

.sa-sidebar.collapsed .sa-nav-submenu[b-7fih6qshew] {
    display: none;
}

.sa-nav-sub-item[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 34px;
    margin: 1px 12px;
    border-radius: 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: var(--g-fs-body);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.2s var(--g-ease), color 0.2s var(--g-ease);
    cursor: pointer;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.sa-nav-sub-item:hover[b-7fih6qshew] {
    color: var(--sidebar-hover-text);
    text-decoration: none;
}

.sa-nav-sub-item.active[b-7fih6qshew] {
    color: var(--sidebar-hover-text);
    font-weight: 600;
}

.sa-sub-dot[b-7fih6qshew] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g-gray-300);
    flex-shrink: 0;
    transition: background 0.2s var(--g-ease);
}

.sa-nav-sub-item.active .sa-sub-dot[b-7fih6qshew] {
    background: var(--sidebar-active-bg);
    width: 7px;
    height: 7px;
}

.sa-nav-sub-item:hover .sa-sub-dot[b-7fih6qshew] {
    background: var(--sidebar-icon);
}

/* ── Bottom Admin Card ── */
.sa-sidebar-bottom[b-7fih6qshew] {
    margin-top: auto;
    padding: 22px 12px 16px;
    border-top: 1px solid var(--sidebar-border);
    background: transparent;
}

/* ── Admin Link Button ── */
.sa-admin-link-btn[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px 3px;
    margin-bottom: 9px;
    border-radius: 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sa-admin-link-btn:hover[b-7fih6qshew] {
    background: var(--g-brand-bg);
    color: var(--sidebar-hover-text);
    text-decoration: none;
}

.sa-admin-link-icon[b-7fih6qshew] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    color: var(--sidebar-text);
    transition: color 0.2s ease;
}

.sa-admin-link-btn:hover .sa-admin-link-icon[b-7fih6qshew] {
    color: var(--sidebar-hover-text);
}

.sa-admin-link-text[b-7fih6qshew] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 400;
}

/* ── User Profile ── */
.sa-user-profile[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
}

.sa-user-avatar[b-7fih6qshew] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--sidebar-active-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.sa-user-initials[b-7fih6qshew] {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: 0.02em;
}

.sa-user-details[b-7fih6qshew] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sa-user-name[b-7fih6qshew] {
    font-size: 13px;
    font-weight: 500;
    color: var(--sidebar-active-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.sa-user-role[b-7fih6qshew] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 400;
    color: var(--sidebar-brand-text);
    line-height: 1.4;
}

.sa-user-role-dot[b-7fih6qshew] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sidebar-brand-text);
    flex-shrink: 0;
    position: absolute;
    left: 42px;
    bottom: 22px;
    border: 1px solid var(--bs-body-bg);
}

/* Hide when collapsed */
.sa-sidebar.collapsed .sa-user-details[b-7fih6qshew] {
    display: none;
}

.sa-sidebar.collapsed .sa-admin-link-text[b-7fih6qshew] {
    display: none;
}

.sa-sidebar.collapsed .sa-admin-link-btn[b-7fih6qshew] {
    justify-content: center;
    padding: 10px;
}

.sa-sidebar.collapsed .sa-admin-info[b-7fih6qshew] {
    display: none;
}

.sa-sidebar.collapsed .sa-admin-card[b-7fih6qshew] {
    justify-content: center;
    padding: 10px 0;
    background: transparent;
}

/* ── Responsive: Tablet — collapse to icon-only ── */
@media (max-width: 1024px) {
    .sa-sidebar[b-7fih6qshew] {
        width: var(--sidebar-width-collapsed);
        transform: translateX(-100%);
        z-index: 1120;
    }

    .sa-sidebar .sa-nav-label[b-7fih6qshew] {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .sa-sidebar .sa-nav-item[b-7fih6qshew] {
        justify-content: center;
        padding: 0;
        gap: 0;
        margin: 1px 12px;
    }

    .sa-sidebar .sa-nav-chevron[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-nav-submenu[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-nav-section-label[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-brand-divider[b-7fih6qshew],
    .sa-sidebar .sa-brand-role[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-sidebar-brand[b-7fih6qshew] {
        justify-content: center;
        padding: 12px 16px;
    }

    .sa-sidebar .sa-brand-logo-wrap[b-7fih6qshew] {
        width: 47px;
    }

    .sa-sidebar .sa-user-details[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-admin-link-text[b-7fih6qshew] {
        display: none;
    }

    .sa-sidebar .sa-admin-link-btn[b-7fih6qshew] {
        justify-content: center;
        padding: 10px;
    }
}

/* ── Responsive: Mobile — off-canvas hidden by default ── */
@media (max-width: 800px) {
    .sa-sidebar[b-7fih6qshew] {
        transform: translateX(-100%);
        z-index: 1040;
    }
}

/* ── Mobile-open: restore full sidebar (shared for tablet + mobile) ── */
@media (max-width: 1024px) {
    .sa-sidebar.mobile-open[b-7fih6qshew] {
        width: var(--sidebar-width);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
        background: var(--g-bg-card);
        transform: translateX(0);
        z-index: 1120;
    }

    .sa-sidebar.mobile-open .sa-nav-label[b-7fih6qshew] {
        opacity: 1;
        width: auto;
        overflow: visible;
    }

    .sa-sidebar.mobile-open .sa-nav-item[b-7fih6qshew] {
        justify-content: flex-start;
        padding: 0 16px;
        gap: 12px;
        margin: 1px 12px;
    }

    .sa-sidebar.mobile-open .sa-brand-logo-wrap[b-7fih6qshew] {
        width: 100%;
    }

    .sa-sidebar.mobile-open .sa-sidebar-brand[b-7fih6qshew] {
        justify-content: flex-start;
        padding: 12px 20px;
    }

    .sa-sidebar.mobile-open .sa-brand-divider[b-7fih6qshew],
    .sa-sidebar.mobile-open .sa-brand-role[b-7fih6qshew] {
        display: flex;
    }

    .sa-sidebar.mobile-open .sa-nav-section-label[b-7fih6qshew] {
        display: block;
    }

    .sa-sidebar.mobile-open .sa-user-details[b-7fih6qshew] {
        display: flex;
    }

    .sa-sidebar.mobile-open .sa-admin-link-text[b-7fih6qshew] {
        display: inline;
    }

    .sa-sidebar.mobile-open .sa-admin-link-btn[b-7fih6qshew] {
        justify-content: flex-start;
        padding: 10px 16px;
    }

    .sa-sidebar.mobile-open .sa-nav-submenu[b-7fih6qshew],
    .sa-sidebar.collapsed.mobile-open .sa-nav-submenu[b-7fih6qshew] {
        display: flex;
    }

    .sa-sidebar.mobile-open .sa-nav-group.open .sa-nav-submenu[b-7fih6qshew],
    .sa-sidebar.collapsed.mobile-open .sa-nav-group.open .sa-nav-submenu[b-7fih6qshew] {
        max-height: 250px;
    }

    .sa-sidebar.mobile-open .sa-nav-chevron[b-7fih6qshew],
    .sa-sidebar.collapsed.mobile-open .sa-nav-chevron[b-7fih6qshew] {
        display: block;
    }
}
/* /Components/Layout/ManagerTopBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ManagerTopBar – Scoped Styles
   Consistent with SuperAdminTopBar design
   ═══════════════════════════════════════════ */

.mgr-topbar[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-16) var(--g-space-16) var(--g-space-8);
    background: transparent;
    position: sticky;
    top: 0;
    margin: 0 var(--g-space-16) 0 0;
    z-index: 1030;
    gap: var(--g-space-16);
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.mgr-topbar.scrolled[b-hlc8cexnoe] {
    background: var(--g-bg-card);
    box-shadow: var(--g-shadow-md);
    border-radius: var(--g-radius-xl);
}

/* ── Left side ── */
.mgr-topbar-left[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    min-width: 0;
}

/* ── Hamburger ── */
.mgr-hamburger[b-hlc8cexnoe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-xs);
    background: transparent;
    color: var(--g-dark-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
    flex-shrink: 0;
}

.mgr-hamburger:hover[b-hlc8cexnoe] {
    color: var(--g-dark);
}

.mgr-hamburger:focus-visible[b-hlc8cexnoe] {
    box-shadow: var(--g-focus-shadow);
}

/* ── Header block ── */
.mgr-header-block[b-hlc8cexnoe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Breadcrumb ── */
.mgr-breadcrumb-nav[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
}

.mgr-breadcrumb[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: var(--g-fs-xs);
}

.mgr-crumb-item[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-normal);
}

.mgr-crumb-item + .mgr-crumb-item[b-hlc8cexnoe]::before {
    content: '/';
    color: var(--g-text-muted);
    margin: 0 5px;
    font-weight: var(--g-fw-normal);
    font-size: var(--g-fs-xxs);
}

.mgr-crumb-item a[b-hlc8cexnoe] {
    color: var(--g-text-muted);
    text-decoration: none;
    font-weight: var(--g-fw-normal);
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.mgr-crumb-item a:hover[b-hlc8cexnoe] {
    color: var(--g-dark-muted);
    text-decoration: none;
}

.mgr-crumb-item.current[b-hlc8cexnoe] {
    color: var(--g-dark);
    font-weight: var(--g-fw-medium);
}

/* ── Right side ── */
.mgr-topbar-right[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    flex-shrink: 0;
    margin-right: var(--g-space-20);
}

/* ── Icon buttons ── */
.mgr-topbar-btn[b-hlc8cexnoe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-dark-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
}

.mgr-topbar-btn:hover[b-hlc8cexnoe] {
    color: var(--g-dark);
}

.mgr-topbar-btn:focus-visible[b-hlc8cexnoe] {
    box-shadow: var(--g-focus-shadow);
}

/* ── User dropdown ── */
.mgr-user-dropdown-wrap[b-hlc8cexnoe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    z-index: 16;
}

.mgr-user-toggle[b-hlc8cexnoe] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-4) var(--g-space-8);
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-dark);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    line-height: 1;
    outline: none;
    transition: background 0.15s ease;
}

.mgr-user-toggle:hover[b-hlc8cexnoe] {
    background: rgba(0, 0, 0, 0.04);
}

.mgr-user-toggle:focus-visible[b-hlc8cexnoe] {
    box-shadow: var(--g-focus-shadow);
}

.mgr-avatar-icon[b-hlc8cexnoe] {
    color: var(--g-dark-muted);
    flex-shrink: 0;
}

.mgr-user-name[b-hlc8cexnoe] {
    white-space: nowrap;
    color: var(--g-dark);
    font-weight: var(--g-fw-medium);
}

.mgr-dropdown-chevron[b-hlc8cexnoe] {
    color: var(--g-dark-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mgr-dropdown-chevron.open[b-hlc8cexnoe] {
    transform: rotate(180deg);
}

/* ── Dropdown menu ── */
.mgr-user-dropdown[b-hlc8cexnoe] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    padding: var(--g-space-6) 0;
    z-index: 1050;
    animation: mgr-dropdown-fade-b-hlc8cexnoe 0.15s ease;
}

@keyframes mgr-dropdown-fade-b-hlc8cexnoe {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mgr-dropdown-item[b-hlc8cexnoe] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    width: 100%;
    padding: var(--g-space-8) var(--g-space-16);
    border: none;
    background: transparent;
    color: var(--g-dark);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
    line-height: var(--g-lh-normal);
}

.mgr-dropdown-item:hover[b-hlc8cexnoe] {
    background: var(--g-gray-100);
    color: var(--g-dark);
    text-decoration: none;
}

.mgr-dropdown-item:focus-visible[b-hlc8cexnoe] {
    outline: none;
    box-shadow: var(--g-focus-shadow);
}

.mgr-dropdown-divider[b-hlc8cexnoe] {
    border: none;
    height: 1px;
    background: var(--g-gray-200);
    margin: var(--g-space-4) 0;
}

.mgr-dropdown-logout[b-hlc8cexnoe] {
    color: var(--g-error-text);
}

.mgr-dropdown-logout:hover[b-hlc8cexnoe] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

/* ── Click catcher (invisible overlay for closing dropdown) ── */
.click-catcher[b-hlc8cexnoe] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1049;
    background: transparent;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
    .mgr-topbar[b-hlc8cexnoe] {
        padding: 14px 12px 8px;
        margin: 0 8px 0 0;
    }

    .mgr-topbar-right[b-hlc8cexnoe] {
        margin-right: 8px;
        gap: var(--g-space-4);
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 800px) {
    .mgr-topbar[b-hlc8cexnoe] {
        padding: 12px 10px 8px;
        margin: 0;
    }

    .mgr-topbar-left[b-hlc8cexnoe] {
        gap: 16px;
    }

    .mgr-topbar-right[b-hlc8cexnoe] {
        margin-right: 4px;
    }

    .mgr-user-name[b-hlc8cexnoe] {
        display: none;
    }
}
/* /Components/Layout/SuperAdminLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════
   SuperAdminLayout – Shell Styles
   ═══════════════════════════════════════ */

.sa-layout[b-lntknxrypj] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--g-bg-sidebar);
}

.sa-main[b-lntknxrypj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s var(--g-ease);
    overflow-y: auto;
    height: 100vh;
}

@media (min-width: 1025px) and (max-width: 1600px) {
    .sa-layout[b-lntknxrypj] {
        height: calc(100vh / 0.85);
    }
    .sa-main[b-lntknxrypj] {
        height: calc(100vh / 0.85);
    }
}

.sa-layout.collapsed .sa-main[b-lntknxrypj] {
    margin-left: var(--sidebar-width-collapsed);
}

.sa-content[b-lntknxrypj] {
    flex: 1;
    padding: 10px 16px 48px;
}

/* ── Common page card ── */
[b-lntknxrypj] .sa-page-card { 
    border: none;
    border-radius: 0;
    overflow: visible;
    margin: 0;
    padding: 15px 20px;
    flex: 1;
}

/* ── Common action button ── */
/* btn-onboard now defined globally in layout.css */

/* ── Mobile overlay ── */
.sa-overlay[b-lntknxrypj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--g-ease);
}

.sa-overlay.active[b-lntknxrypj] {
    opacity: 1;
    pointer-events: auto;
}

 

@media (max-width: 1280px) {
    .sa-content[b-lntknxrypj] {
        padding: 10px 10px 48px;
    }

    [b-lntknxrypj] .sa-page-card {
        padding: 28px 20px;
     }
}

@media (max-width: 1024px) {
    .sa-main[b-lntknxrypj] {
        margin-left: var(--sidebar-width-collapsed);
    }

    .sa-content[b-lntknxrypj] {
        padding: 10px 8px 48px;
    }

    [b-lntknxrypj] .sa-page-card {
        padding: 20px 16px;
     }
}

@media (max-width: 800px) {
    .sa-layout[b-lntknxrypj] {
        height: auto;
        overflow: visible;
    }

    .sa-main[b-lntknxrypj] {
        margin-left: 0 !important;
        height: auto;
        overflow-y: visible;
    }

    .sa-content[b-lntknxrypj] {
        padding: 10px 8px 48px;
    }

    [b-lntknxrypj] .sa-page-card {
        padding: 20px 16px;
         border-radius: var(--g-radius-lg);
    }
}

@media (min-width: 801px) {
    .sa-overlay[b-lntknxrypj] {
        display: none;
    }
}

@media (max-width: 768px) {
    [b-lntknxrypj] .sa-page-card {
        padding: 16px 12px;
         border-radius: var(--g-radius-lg);
    }
}

@media (max-width: 640px) {
    [b-lntknxrypj] .sa-page-card {
        padding: 16px 12px;
     }
}

@media (max-width: 425px) {
    .sa-content[b-lntknxrypj] {
        padding: 8px 4px 48px;
    }

    [b-lntknxrypj] .sa-page-card {
        padding: 12px 8px;
         border-radius: var(--g-radius-md, 10px);
    }
}
/* /Components/Layout/SuperAdminSidebar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SuperAdminSidebar – White Enterprise Theme
   Uses shared --sidebar-* tokens from variables.css
   ═══════════════════════════════════════════ */

/* ── Sidebar Shell ── */
.sa-sidebar[b-fm9yhmks5b] {
    width: var(--sidebar-width);
  
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width 0.3s var(--g-ease);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  
    font-family: 'Inter', var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sa-sidebar.collapsed[b-fm9yhmks5b] {
    width: var(--sidebar-width-collapsed);
}

/* ── Brand ── */
.sa-sidebar-brand[b-fm9yhmks5b] {
       display: flex;
    align-items: center;
      margin: 5px 0px;
    padding: 23px 15px 13px;
    overflow: hidden;
    background: transparent;
}

.sa-brand-logo-wrap[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    transition: width 0.3s var(--g-ease);
}

.sa-brand-logo-wrap:hover[b-fm9yhmks5b] {
    text-decoration: none;
}

.sa-brand-img[b-fm9yhmks5b] {
      height: 41px;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
    transition: height 0.3s var(--g-ease);
}

.sa-brand-divider[b-fm9yhmks5b] {
    width: 1px;
    height: 20px;
    background: var(--sidebar-border);
    flex-shrink: 0;
}

.sa-brand-role[b-fm9yhmks5b] {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-brand-text);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.sa-sidebar.collapsed .sa-brand-img[b-fm9yhmks5b] {
    height: 31px;
}

.sa-sidebar.collapsed .sa-brand-logo-wrap[b-fm9yhmks5b] {
    width: 36px;
}

.sa-sidebar.collapsed .sa-brand-divider[b-fm9yhmks5b],
.sa-sidebar.collapsed .sa-brand-role[b-fm9yhmks5b] {
    display: none;
}

.sa-sidebar.collapsed .sa-sidebar-brand[b-fm9yhmks5b] {
    justify-content: center;
    padding: 12px 16px;
}

/* ── Divider ── */
.sa-divider[b-fm9yhmks5b] {
    border: none;
    height: 1px;
    background: var(--sidebar-border);
    opacity: 1;
    margin: 0 16px 4px;
}

.sa-sidebar.collapsed .sa-divider[b-fm9yhmks5b] {
    margin: 0 12px 4px;
}

/* ── Navigation ── */
.sa-nav[b-fm9yhmks5b] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
     
}

.sa-nav[b-fm9yhmks5b]::-webkit-scrollbar { width: 3px; }
.sa-nav[b-fm9yhmks5b]::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
.sa-nav[b-fm9yhmks5b]::-webkit-scrollbar-track { background: transparent; }

/* ── Section Label ── */
.sa-nav-section-label[b-fm9yhmks5b] {
    padding: 18px 16px 6px;
     margin: 8px;
}

.sa-nav-section-label .sa-nav-label[b-fm9yhmks5b] {
    font-size: 10px;
    font-weight: 400;
    color: var(--g-info);
   
}

.sa-sidebar.collapsed .sa-nav-section-label[b-fm9yhmks5b] {
    display: none;
}

/* ── Nav Item ── */
.sa-nav-item[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 37px;
    padding: 0 16px;
    margin: 1px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
       font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.2s var(--g-ease),
                color 0.2s var(--g-ease),
                box-shadow 0.2s var(--g-ease);
    cursor: pointer;
    line-height: 1;
    letter-spacing: -0.01em;
}

.sa-nav-item:hover[b-fm9yhmks5b] {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
    text-decoration: none;
}

.sa-nav-item:focus-visible[b-fm9yhmks5b] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
}

/* Active: dark black/navy card */
.sa-nav-item.active[b-fm9yhmks5b] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: var(--sidebar-active-shadow);
}

.sa-nav-item.active:hover[b-fm9yhmks5b] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    text-decoration: none;
}

/* ── Icon ── */
.sa-nav-icon[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--sidebar-icon);
    transition: color 0.2s var(--g-ease);
}

.sa-nav-icon svg[b-fm9yhmks5b] {
    width: 18px;
    height: 18px;
}

/* Active icon */
.sa-nav-item.active .sa-nav-icon[b-fm9yhmks5b] {
    color: var(--sidebar-icon-active);
}



/* ── Label ── */
.sa-nav-label[b-fm9yhmks5b] {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sa-sidebar.collapsed .sa-nav-label[b-fm9yhmks5b] {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Center icons when collapsed */
.sa-sidebar.collapsed .sa-nav-item[b-fm9yhmks5b] {
    justify-content: center;
    padding: 0;
    gap: 0;
    margin: 1px 12px;
}

/* ── Bottom Section ── */
.sa-sidebar-bottom[b-fm9yhmks5b] {
    margin-top: auto;
    padding: 12px 12px 16px;
    border-top: 1px solid var(--sidebar-border);
     background: transparent;
}

/* ── Back Card ── */
.sa-back-card[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px;
    border-radius: 999px;
    overflow: hidden;
    transition: background 0.2s ease;
    cursor: pointer;
    border: none;
   
}

.sa-back-card:hover[b-fm9yhmks5b] {
    background: #E2E8F0;
}

.sa-back-avatar[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    color: var(--sidebar-text);
    transition: color 0.2s ease;
}

.sa-back-card:hover .sa-back-avatar[b-fm9yhmks5b] {
    color: var(--sidebar-hover-text);
}

.sa-back-info[b-fm9yhmks5b] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sa-back-name[b-fm9yhmks5b] {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-hover-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.sa-back-link-name[b-fm9yhmks5b] {
    text-decoration: none;
    color: var(--sidebar-hover-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sa-back-link-name:hover[b-fm9yhmks5b] {
    color: var(--sidebar-brand-text);
}

.sa-back-link[b-fm9yhmks5b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--sidebar-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.sa-back-link:hover[b-fm9yhmks5b] {
    color: var(--sidebar-brand-text);
    text-decoration: none;
}

.sa-back-link svg[b-fm9yhmks5b] {
    flex-shrink: 0;
}

/* Hide info when sidebar collapsed */
.sa-sidebar.collapsed .sa-back-info[b-fm9yhmks5b] {
    display: none;
}

.sa-sidebar.collapsed .sa-back-card[b-fm9yhmks5b] {
    justify-content: center;
    padding: 10px 0;
    background: transparent;
}

/* ── User Profile ── */
.sa-user-profile[b-fm9yhmks5b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px 0;
}

.sa-user-avatar[b-fm9yhmks5b] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--sidebar-active-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sa-user-initials[b-fm9yhmks5b] {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: 0.02em;
}

.sa-user-details[b-fm9yhmks5b] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sa-user-name[b-fm9yhmks5b] {
    font-size: 13px;
    font-weight: 500;
    color: var(--sidebar-active-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.sa-user-role[b-fm9yhmks5b] {
   display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 400;
    color: var(--sidebar-brand-text);
    line-height: 1.4;
}

.sa-user-role-dot[b-fm9yhmks5b] {
   width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sidebar-brand-text);
    flex-shrink: 0;
    position: absolute;
    left: 42px;
    bottom: 22px;
    border: 1px solid var(--bs-body-bg);
}

/* Hide when collapsed */
.sa-sidebar.collapsed .sa-user-details[b-fm9yhmks5b] {
    display: none;
}

/* ── Responsive ── */
@media (max-width:1440px){
 .sa-sidebar-bottom[b-fm9yhmks5b] {
    padding: 0px 12px 5px;
}
#mgr-section-label-others[b-fm9yhmks5b]{
        margin-bottom: 0;
}
#mgr-nav-top-recruiters[b-fm9yhmks5b]{
        margin-bottom: 10px;
}
}
@media (max-width: 1024px) {
    .sa-sidebar[b-fm9yhmks5b] {
        width: var(--sidebar-width-collapsed);
    }
    .sa-sidebar .sa-nav-label[b-fm9yhmks5b] {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }
    .sa-sidebar .sa-nav-item[b-fm9yhmks5b] {
        justify-content: center;
        padding: 0;
        gap: 0;
        margin: 1px 12px;
    }
     .sa-user-profile[b-fm9yhmks5b]{
            padding: 6px 18px;
    }
    .sa-user-role-dot[b-fm9yhmks5b]{
      position: absolute;
      left: 52px;
    bottom: 23px;
    }
    .sa-user-profile[b-fm9yhmks5b]{
            padding: 6px 18px;
    }
    .sa-user-role-dot[b-fm9yhmks5b]{
      position: absolute;
      left: 52px;
    bottom: 23px;
    }
    .sa-user-profile[b-fm9yhmks5b]{
        margin: 0 18px;
    }
    .sa-user-role-dot[b-fm9yhmks5b]{
        position: absolute;
    left: 56px;
    bottom: 20px;
    }
    .sa-sidebar .sa-nav-section-label[b-fm9yhmks5b] {
        display: none;
    }
    .sa-sidebar .sa-brand-divider[b-fm9yhmks5b],
    .sa-sidebar .sa-brand-role[b-fm9yhmks5b] {
        display: none;
    }
    .sa-sidebar .sa-sidebar-brand[b-fm9yhmks5b] {
        justify-content: center;
        padding: 12px 16px;
    }
    .sa-sidebar .sa-brand-logo-wrap[b-fm9yhmks5b] {
        width: 47px;
    }
    .sa-sidebar .sa-back-info[b-fm9yhmks5b] {
        display: none;
    }
    .sa-sidebar .sa-back-card[b-fm9yhmks5b] {
        justify-content: center;
        padding: 10px 0;
        background: transparent;
    }
    .sa-sidebar .sa-user-details[b-fm9yhmks5b] {
        display: none;
    }

    /* Expand sidebar when mobile-open */
    .sa-sidebar.mobile-open[b-fm9yhmks5b] {
        width: var(--sidebar-width);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
        background-color: var(--g-bg-card);
    }
    .sa-sidebar.mobile-open .sa-nav-label[b-fm9yhmks5b] {
        opacity: 1;
        width: auto;
        overflow: visible;
    }
    .sa-sidebar.mobile-open .sa-nav-item[b-fm9yhmks5b] {
        justify-content: flex-start;
        padding: 0 16px;
        gap: 12px;
        margin: 1px 12px;
    }
    .sa-sidebar.mobile-open .sa-nav-section-label[b-fm9yhmks5b] {
        display: block;
    }
    .sa-sidebar.mobile-open .sa-brand-divider[b-fm9yhmks5b],
    .sa-sidebar.mobile-open .sa-brand-role[b-fm9yhmks5b] {
        display: inline;
    }
    .sa-sidebar.mobile-open .sa-sidebar-brand[b-fm9yhmks5b] {
        justify-content: flex-start;
        padding: 12px 20px;
    }
    .sa-sidebar.mobile-open .sa-brand-logo-wrap[b-fm9yhmks5b] {
        width: 100%;
    }
    .sa-sidebar.mobile-open .sa-back-info[b-fm9yhmks5b] {
        display: flex;
    }
    .sa-sidebar.mobile-open .sa-back-card[b-fm9yhmks5b] {
        justify-content: flex-start;
        padding: 10px 14px;
        background: #F1F5F9;
    }
    .sa-sidebar.mobile-open .sa-user-details[b-fm9yhmks5b] {
        display: flex;
    }
}

@media (max-width: 800px) {
    .sa-sidebar[b-fm9yhmks5b] {
        transform: translateX(-100%);
        transition: transform 0.3s var(--g-ease),
                    width 0.3s var(--g-ease);
        z-index: 1040;
    }

    .sa-sidebar.mobile-open[b-fm9yhmks5b] {
        transform: translateX(0);
        width: var(--sidebar-width);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
        background: var(--g-bg-card);
    }
}
/* /Components/Layout/SuperAdminTopBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SuperAdminTopBar – Scoped Styles
   Pixel-match to reference breadcrumb image
   ═══════════════════════════════════════════ */

.sa-topbar[b-20po954l7i] {
        display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-page);
    padding: var(--g-space-10) var(--g-space-16) var(--g-space-8);
     position: sticky;
    top: 0;
    height: 56px;
    /* Kept below modal/drawer backdrops (which start at 1000) so popups always cover the
       topbar app-wide. Still well above in-page content/popovers (≤300). */
    z-index: 900;
    /* margin: 0 15px; */
    gap: var(--g-space-16);
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.25s ease, box-shadow 0.25s ease;
      border-bottom: 1px solid var(--bs-secondary-bg-subtle);
}

.sa-topbar.scrolled[b-20po954l7i] {
    z-index: 900;
}

/* ── Left side ── */
.sa-topbar-left[b-20po954l7i] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    min-width: 0;
}

/* ── Hamburger ── */
.sa-hamburger[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-xs);
    background: transparent;
    color: var(--g-dark-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
    flex-shrink: 0;
}

.sa-hamburger:hover[b-20po954l7i] {
    color: var(--g-dark);
}

.sa-hamburger:focus-visible[b-20po954l7i] {
    box-shadow: var(--g-focus-shadow);
}

/* ── Header block (breadcrumb + title stacked) ── */
.sa-header-block[b-20po954l7i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Breadcrumb ── */
.sa-breadcrumb-nav[b-20po954l7i] {
    display: flex;
    align-items: center;
}

.sa-breadcrumb[b-20po954l7i] {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: var(--g-fs-xs);
}

.sa-crumb-item[b-20po954l7i] {
    display: flex;
    align-items: center;
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-normal);
}

.sa-crumb-item + .sa-crumb-item[b-20po954l7i]::before {
    content: '/';
    color: var(--g-text-muted);
    margin: 0 5px;
    font-weight: var(--g-fw-normal);
    font-size: var(--g-fs-xxs);
}

.sa-crumb-item a[b-20po954l7i] {
    color: var(--g-text-muted);
    text-decoration: none;
    font-weight: var(--g-fw-normal);
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.sa-crumb-item a:hover[b-20po954l7i] {
    color: var(--g-dark-muted);
    text-decoration: none;
}

.sa-crumb-item.current[b-20po954l7i] {
    color: var(--g-dark);
    font-weight: var(--g-fw-medium);
}

/* ── Right side ── */
.sa-topbar-right[b-20po954l7i] {
   display: flex;
    align-items: center;
    gap: var(--g-space-6);
    flex-shrink: 0;

}

/* ── Icon buttons ── */
.sa-topbar-btn[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-dark-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
    box-shadow: none;
    outline: none;
}

.sa-topbar-btn:hover[b-20po954l7i] {
    color: var(--g-dark);
}

.sa-topbar-btn:focus-visible[b-20po954l7i] {
    box-shadow: var(--g-focus-shadow);
}

/* ── TechWaukee Logo ── */
.sa-topbar-tw-logo-wrap[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
 
    justify-content: center;
}
.sa-topbar-company-name[b-20po954l7i]{
    font-size:var(--g-fs-pipeline-title);
    text-transform: uppercase;
    color: var(--bs-black);
    font-weight: var(--g-fw-bold);
}


.sa-topbar-tw-logo[b-20po954l7i] {
   height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

.sa-logo-divider[b-20po954l7i] {
    width: 1px;
    height: 18px;
    background-color: #cbd5e1;
    margin: 0 8px;
    flex-shrink: 0;
}

.sa-company-name[b-20po954l7i] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
    color: var(--g-text-body, #334155);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.sa-topbar-divider[b-20po954l7i] {
    width: 1px;
    height: 18px;
    background-color: #cbd5e1;
    margin: 0 8px;
    flex-shrink: 0;
}

.sa-topbar-flag[b-20po954l7i] {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
   
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.sa-user-avatar-img[b-20po954l7i] {
    width: 25px;
    height: 25px;
    max-width: 25px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── User dropdown ── */
.sa-user-dropdown-wrap[b-20po954l7i] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    z-index: 16;
}

.sa-user-toggle[b-20po954l7i] {
       display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-dark);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    outline: none;
    transition: background 0.15s ease;
}

.sa-user-toggle:hover[b-20po954l7i] {
    background: rgba(0, 0, 0, 0.04);
}

.sa-user-toggle:focus-visible[b-20po954l7i] {
    box-shadow: var(--g-focus-shadow);
}

/* ── User Avatar Icon ── */
.sa-avatar-icon[b-20po954l7i] {
    color: var(--g-dark-muted);
    flex-shrink: 0;
}

.sa-user-info[b-20po954l7i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.sa-user-name[b-20po954l7i] {
    white-space: nowrap;
    color: var(--sidebar-active-bg);
    font-weight: 700;
}

.sa-user-position[b-20po954l7i] {
    white-space: nowrap;
    color: var(--g-dark-muted);
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 400;
}

.sa-dropdown-chevron[b-20po954l7i] {
    color: var(--g-dark-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sa-dropdown-chevron.open[b-20po954l7i] {
    transform: rotate(180deg);
}

/* ── Dropdown menu ── */
.sa-user-dropdown[b-20po954l7i] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 123px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    padding: var(--g-space-6) 0;
    z-index: 1050;
    animation: sa-dropdown-fade-b-20po954l7i 0.15s ease;
}

@keyframes sa-dropdown-fade-b-20po954l7i {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sa-dropdown-item[b-20po954l7i] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--g-dark);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-normal);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
    line-height: var(--g-lh-normal);
}

.sa-dropdown-item:hover[b-20po954l7i] {
    background: var(--g-gray-100);
    color: var(--g-dark);
    text-decoration: none;
}

.sa-dropdown-item:focus-visible[b-20po954l7i] {
    outline: none;
    box-shadow: var(--g-focus-shadow);
}

.sa-dropdown-logout-form[b-20po954l7i] {
    margin: 0;
    padding: 0;
    border: none;
}

.sa-dropdown-divider[b-20po954l7i] {
    border: none;
    height: 1px;
    background: var(--g-gray-200);
    margin: var(--g-space-4) 0;
}

.sa-dropdown-logout[b-20po954l7i] {
    border-top: none;
    margin-top: 2px;
    padding-top: 10px;
    color: var(--g-error-text);
}

.sa-dropdown-logout:hover[b-20po954l7i] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.sa-avatar-icon:hover[b-20po954l7i] {
    color: var(--g-dark);
}

/* ── Responsive ── */
.sa-hamburger-mobile[b-20po954l7i] {
    display: none;
}

@media (max-width: 800px) {
    .sa-dropdown-item[b-20po954l7i]{
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .sa-topbar[b-20po954l7i] {
        padding: 12px 10px 8px;
    }

    .sa-topbar-left[b-20po954l7i] {
        gap: 16px;
    }

    .sa-search-wrap[b-20po954l7i] {
        display: none;
    }

    .sa-topbar-right[b-20po954l7i] {
        margin-right: 4px;
    }

    .sa-user-name[b-20po954l7i] {
        display: none;
    }

    .sa-hamburger-desktop[b-20po954l7i] {
        display: none;
    }

    .sa-hamburger-mobile[b-20po954l7i] {
        display: inline-flex;
    }
}

@media (max-width: 500px) {
    .sa-user-position[b-20po954l7i] {
        display: none;
    }
        .sa-topbar-company-name[b-20po954l7i]{
        font-size:var(--g-fs-xxs);
        text-transform: uppercase;
        color: var(--bs-black);
        font-weight: var(--g-fw-bold);
    }
    .sa-topbar-tw-logo[b-20po954l7i]{
        height: 20px;
    }
}
@media (max-width:416px) {
    .sa-crumb-item.current[b-20po954l7i]{
        font-size:var(--g-fs-sm);
    }
}
@media (max-width:375px){
    .sa-topbar-tw-logo[b-20po954l7i]{
        height: 17px;
    }
}
/* /Components/Pages/AboutUs.razor.rz.scp.css */
.about-us-page[b-y44xleaoia] {
    padding: 20px 0px;
}
a.hover[b-y44xleaoia] {
    text-decoration: none;
}
.about-us-container[b-y44xleaoia] {
    max-width: 100%;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 40px 36px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.about-us-title[b-y44xleaoia] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 28px;
}

.about-us-content p[b-y44xleaoia] {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0 0 20px;
}

.about-us-content p:last-child[b-y44xleaoia] {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .about-us-page[b-y44xleaoia] {
        padding: 16px;
    }

    .about-us-container[b-y44xleaoia] {
        padding: 24px 18px;
    }

    .about-us-title[b-y44xleaoia] {
        font-size: 1.3rem;
    }
}
/* /Components/Pages/Admin/AssignedRole.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Assigned Roles Page
   ═══════════════════════════════════════ */

/* ── Page Wrapper ── */
.ar-page[b-iex4sig52v] {
    padding: 0;
}

/* ── Outer Card ── */
.ar-card[b-iex4sig52v] {
    padding: 0;
    overflow: visible;
}

/* ── Page Header ── */
.ar-header[b-iex4sig52v] {
    display: flex;
   display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px 20px;
}

.ar-title[b-iex4sig52v] {
    font-size: 1.25rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0 0 4px 0;
}

.ar-subtitle[b-iex4sig52v] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

/* ── Inner Section ── */
.ar-section[b-iex4sig52v] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: visible;
    box-shadow: var(--g-shadow-xs);
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--g-text-body);
    margin: 24px 0px;
}

/* ── Table Wrapper ── */
.ar-table-wrap[b-iex4sig52v] {
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

/* ── Table ── */
.ar-table[b-iex4sig52v] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 680px;
}

.ar-table thead th[b-iex4sig52v] {
    padding: 12px 16px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-text-secondary);
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-border-light);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

.ar-table tbody td[b-iex4sig52v] {
    padding: 14px 16px;
    font-size: 0.8125rem;
    color: var(--g-text-body);
    border-bottom: 1px solid var(--g-border-light);
    vertical-align: middle;
}

.ar-table tbody tr:last-child td[b-iex4sig52v] {
    border-bottom: none;
}

.ar-table tbody tr[b-iex4sig52v] {
    transition: background .12s ease;
}

.ar-table tbody tr:hover[b-iex4sig52v] {
    background-color: var(--g-gray-50);
}

/* ── Role Name Cell ── */
.ar-role-name[b-iex4sig52v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ar-name-text[b-iex4sig52v] {
    font-size: 0.8125rem;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    line-height: 1.3;
}

.tl-default-badge[b-iex4sig52v] {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    margin-left: 8px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
     vertical-align: middle;
}

/* ── Description Cell ── */
.ar-desc-cell[b-iex4sig52v] {
    color: var(--g-text-secondary);
    font-size: 0.8125rem;
    max-width: 400px;
    line-height: 1.5;
}

/* ── User Count ── */
.ar-user-count[b-iex4sig52v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.75rem;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-body);
    background: var(--g-bg-card);
    white-space: nowrap;
}

.ar-user-count svg[b-iex4sig52v] {
    color: var(--g-dark-light);
}

/* ── Actions ── */
.ar-action-locked[b-iex4sig52v] {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-dark-light);
    background: var(--g-gray-50);
}

.ar-action-edit[b-iex4sig52v] {
    background: none;
    border: none;
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.ar-action-edit:focus-visible[b-iex4sig52v] {
    outline: 2px solid var(--g-focus-border);
    outline-offset: 2px;
}

.ar-action-edit:hover[b-iex4sig52v] {
    color: var(--g-brand);
    text-decoration: underline;
}

.ar-actions-row[b-iex4sig52v] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ar-actions-row .ar-action-delete[b-iex4sig52v] {
    border-left: 1px solid var(--g-border);
    padding-left: 6px;
}

.ar-action-delete[b-iex4sig52v] {
    background: none;
    border: none;
    color: var(--g-error);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.ar-action-delete:focus-visible[b-iex4sig52v] {
    outline: 2px solid var(--g-focus-border);
    outline-offset: 2px;
}

.ar-action-delete:hover[b-iex4sig52v] {
    color: var(--g-error-text);
    text-decoration: underline;
}

/* ── Mobile Cards (hidden on desktop) ── */
.mobile-cards[b-iex4sig52v] {
    display: none;
}

.ar-m-card[b-iex4sig52v] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}

.ar-m-card:last-child[b-iex4sig52v] {
    margin-bottom: 0;
}

.ar-m-card-row[b-iex4sig52v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--g-border-light);
}

.ar-m-card-row:first-child[b-iex4sig52v] {
    padding-top: 0;
}

.ar-m-card-row:last-child[b-iex4sig52v] {
    border-bottom: none;
    padding-bottom: 0;
}

.ar-m-label[b-iex4sig52v] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ar-m-card-top[b-iex4sig52v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ar-m-card-desc[b-iex4sig52v] {
    color: var(--g-dark-muted);
    font-size: var(--g-fs-xs);
    line-height: 1.5;
    margin: 0;
}

.ar-m-card-action[b-iex4sig52v] {
    display: flex;
    gap: 10px;
}

/* ═══════════════════════════════════════
   Delete Modal
   ═══════════════════════════════════════ */
.ar-modal-overlay[b-iex4sig52v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

.ar-modal[b-iex4sig52v] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 92vw;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 32px;
    z-index: 1050;
}

.ar-modal-icon[b-iex4sig52v] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--g-error-bg, #fef2f2);
    color: var(--g-error);
    margin-bottom: 16px;
}

.ar-modal-title[b-iex4sig52v] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--g-dark);
    margin: 0 0 8px 0;
}

.ar-modal-text[b-iex4sig52v] {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--g-dark-muted);
    margin: 0 0 20px 0;
}

.ar-modal-reassign[b-iex4sig52v] {
    margin-bottom: 20px;
}

.ar-modal-label[b-iex4sig52v] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-dark);
    margin-bottom: 6px;
}

.ar-modal-select[b-iex4sig52v] {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-gray-50);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    transition: border-color var(--g-transition);
}

.ar-modal-select:focus[b-iex4sig52v] {
    border-color: var(--g-brand);
    box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.08);
}

.ar-modal-actions[b-iex4sig52v] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--g-border-light);
}

.ar-modal-btn[b-iex4sig52v] {
    height: 38px;
    padding: 0 20px;
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ar-modal-btn-cancel[b-iex4sig52v] {
    background: var(--g-bg-card);
    color: var(--g-dark);
    border: 1px solid var(--g-border);
}

.ar-modal-btn-cancel:hover[b-iex4sig52v] {
    background: var(--g-gray-50);
}

.ar-modal-btn-delete[b-iex4sig52v] {
    background: var(--g-error);
    color: #fff;
}

.ar-modal-btn-delete:hover[b-iex4sig52v] {
    opacity: 0.9;
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */

@media (max-width: 1280px) {
    .ar-table-wrap[b-iex4sig52v] {
        overflow-x: auto;
    }

    .ar-table[b-iex4sig52v] {
        min-width: 640px;
    }

    .ar-table thead th[b-iex4sig52v],
    .ar-table tbody td[b-iex4sig52v] {
        padding: 12px 12px;
        font-size: 0.75rem;
    }

    .ar-desc-cell[b-iex4sig52v] {
        max-width: 280px;
    }
}

@media (max-width: 1024px) {
    .ar-title[b-iex4sig52v] {
        font-size: var(--g-fs-card-title, 1rem);
    }

    .ar-subtitle[b-iex4sig52v] {
        font-size: 0.75rem;
    }

    .ar-table thead th[b-iex4sig52v] {
        font-size: 0.625rem;
        padding: 10px 10px;
    }

    .ar-table tbody td[b-iex4sig52v] {
        font-size: 0.6875rem;
        padding: 10px 10px;
    }

    .ar-name-text[b-iex4sig52v] {
        font-size: 0.75rem;
    }

    .ar-desc-cell[b-iex4sig52v] {
        font-size: 0.6875rem;
        max-width: 220px;
    }
}

@media (max-width: 991px) {
    .ar-header[b-iex4sig52v] {
         padding: 20px;
    }

    .ar-section[b-iex4sig52v] {
        margin: 16px;
    }

    .desktop-table[b-iex4sig52v] {
        display: none;
    }

    .mobile-cards[b-iex4sig52v] {
        display: block;
        padding: 0 16px 16px;
    }

    .ar-btn-create[b-iex4sig52v] {
        padding: 5px 22px;
        font-size: var(--g-fs-xs);
    }

    .ar-title[b-iex4sig52v] {
        font-size: var(--g-fs-section-title);
    }

    .ar-subtitle[b-iex4sig52v] {
        font-size: var(--g-fs-xs);
    }
}

@media (max-width: 640px) {
    .ar-header[b-iex4sig52v] {
       flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .ar-section[b-iex4sig52v] {
        margin: 12px;
    }

    .g-btn-primary[b-iex4sig52v] {
        width: 100%;
        justify-content: center;
    }

    .ar-m-card[b-iex4sig52v] {
        padding: 14px 12px;
    }

    .tl-default-badge[b-iex4sig52v] {
        font-size: var(--g-fs-xxs);
        padding: 2px 8px;
    }
}
/* /Components/Pages/Admin/Clients.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Clients Page – Pixel-Perfect Styling
   ═══════════════════════════════════════ */

/* ── Page Shell ── */
.clients-page[b-e9lcgewkoj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Page Header (inside card) ── */
.tl-header[b-e9lcgewkoj] {
      display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px 20px;

}

.page-title[b-e9lcgewkoj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    border: none;
}

.page-subtitle[b-e9lcgewkoj] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ── Table Card ── */
.table-card[b-e9lcgewkoj] {
 
    padding: 0;
    overflow: visible;
}

/* ── Client Section (wraps toolbar + table + pagination) ── */
.client-section[b-e9lcgewkoj] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: visible;
    box-shadow: var(--g-shadow-xs);
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--g-text-body);
    margin: 24px 0px;
}

.card-toolbar[b-e9lcgewkoj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.card-title[b-e9lcgewkoj] {
    margin: 0;
    padding: 0;
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Search ── */
.search-wrap[b-e9lcgewkoj] {
    position: relative;
    width: 240px;
}

.search-icon[b-e9lcgewkoj] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-dark-light);
    pointer-events: none;
}

.search-input[b-e9lcgewkoj] {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-body);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition),
               box-shadow var(--g-transition);
}

.search-input[b-e9lcgewkoj]::placeholder {
    color: var(--g-text-muted);
}

.search-input:focus[b-e9lcgewkoj] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

/* ── Data Table ── */
.table-scroll[b-e9lcgewkoj] {
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

.data-table[b-e9lcgewkoj] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 720px;
}

.data-table thead th[b-e9lcgewkoj] {
    padding: 12px 16px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-text-secondary);
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-gray-100);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

.data-table tbody td[b-e9lcgewkoj] {
    padding: 14px 16px;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-body);
    border-bottom: 1px solid var(--g-gray-100);
    vertical-align: middle;
}

.data-table tbody tr:last-child td[b-e9lcgewkoj] {
    border-bottom: none;
}

.data-table tbody tr[b-e9lcgewkoj] {
    transition: background .12s ease;
    cursor: pointer;
}

.data-table tbody tr:hover[b-e9lcgewkoj] {
    background-color: var(--g-gray-50);
}

/* ── Client Name Cell ── */
.client-name-cell[b-e9lcgewkoj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-logo-thumb[b-e9lcgewkoj] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius:50%;
    object-fit: cover;
    flex-shrink: 0;
}

.m-card-name-row[b-e9lcgewkoj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Client Name ── */
.client-name[b-e9lcgewkoj] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    line-height: 1.3;
    cursor: pointer;
}

.client-name:hover[b-e9lcgewkoj] {
    color: var(--g-brand);
  
}

/* ── Industry ── */
.td-industry[b-e9lcgewkoj] {
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-medium);
}

/* ── Active Jobs ── */
.jobs-cell[b-e9lcgewkoj] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--g-dark-muted);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
}

.jobs-icon[b-e9lcgewkoj] {
    color: var(--g-brand);
    flex-shrink: 0;
}

/* ── Key Contact ── */
.contact-cell[b-e9lcgewkoj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.contact-name[b-e9lcgewkoj] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    line-height: 1.3;
}

.contact-sub[b-e9lcgewkoj] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    color: var(--g-dark-light);
}

/* ── Status Pill ── */
.status-badge[b-e9lcgewkoj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
}

.status-dot[b-e9lcgewkoj] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.active[b-e9lcgewkoj] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

.status-badge.active .status-dot[b-e9lcgewkoj] {
    background: var(--g-success);
}

.status-badge.inactive[b-e9lcgewkoj] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.status-badge.inactive .status-dot[b-e9lcgewkoj] {
    background: var(--g-error);
}

/* ── Actions Cell ── */
.actions-cell[b-e9lcgewkoj] {
    display: flex;
    align-items: center;

    gap: 6px;
}

.btn-view[b-e9lcgewkoj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 22px;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    color: var(--g-info);
    text-decoration: none;
    background: var(--g-info-bg);
    transition: all 0.15s ease;
    letter-spacing: -0.006em;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.btn-view:hover[b-e9lcgewkoj] {
    background: var(--g-info-bg);
    color: var(--g-info);
}

.btn-view:focus-visible[b-e9lcgewkoj] {
    outline: 2px solid var(--g-focus-border);
    outline-offset: 2px;
}

.menu-wrap[b-e9lcgewkoj] {
    position: relative;
}

/* ── Dropdown ── */
.dropdown-menu[b-e9lcgewkoj] {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    padding: 4px 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    z-index: 50;
}

.dropdown-item[b-e9lcgewkoj] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    color: var(--g-dark);
    cursor: pointer;
    text-align: left;
    transition: background .1s ease;
}

.dropdown-item:hover[b-e9lcgewkoj] {
    background: var(--g-gray-50);
}

.dropdown-item:focus-visible[b-e9lcgewkoj] {
    outline: 2px solid var(--g-focus-border);
    outline-offset: -2px;
    border-radius: var(--g-radius-sm);
}

.dropdown-item svg[b-e9lcgewkoj] {
    color: var(--g-text-secondary);
    flex-shrink: 0;
}

.dropdown-item.danger[b-e9lcgewkoj] {
    color: var(--g-error);
}

.dropdown-item.danger:hover[b-e9lcgewkoj] {
    background: var(--g-error-bg);
}

.dropdown-divider[b-e9lcgewkoj] {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--g-border);
}

/* ── Empty State ── */
.empty-row[b-e9lcgewkoj] {
    height: 300px;
    padding: 48px 24px;
    text-align: center;
    color: var(--g-dark-light);
    font-size: var(--g-fs-sm);
}

/* ── Mobile Card View (hidden on desktop) ── */
.mobile-cards[b-e9lcgewkoj] {
    display: none;
}

/* ── Responsive: 1024–1280px ── */
@media (max-width: 1280px) {
    .table-scroll[b-e9lcgewkoj] {
        overflow-x: auto;
    }

    .data-table[b-e9lcgewkoj] {
        min-width: 680px;
    }

    .data-table thead th[b-e9lcgewkoj],
    .data-table tbody td[b-e9lcgewkoj] {
        padding: 12px 12px;
        font-size: 0.75rem;
    }

    .search-wrap[b-e9lcgewkoj] {
        width: 200px;
    }

    .card-title[b-e9lcgewkoj] {
        font-size: 0.9375rem;
    }
}

@media (max-width: 1024px) {
    .page-title[b-e9lcgewkoj] {
        font-size: var(--g-fs-section-title, 1.125rem);
    }

    .page-subtitle[b-e9lcgewkoj] {
        font-size: 0.75rem;
    }

    .data-table thead th[b-e9lcgewkoj] {
        font-size: 0.625rem;
        padding: 10px 10px;
    }

    .data-table tbody td[b-e9lcgewkoj] {
        font-size: 0.6875rem;
        padding: 10px 10px;
    }

    .client-name[b-e9lcgewkoj] {
        font-size: 0.75rem;
    }

    .card-title[b-e9lcgewkoj] {
        font-size: var(--g-fs-sm, 0.8125rem);
    }

    .search-wrap[b-e9lcgewkoj] {
        width: 180px;
    }

    .search-input[b-e9lcgewkoj] {
        font-size: 0.6875rem;
        height: 30px;
    }
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .desktop-table[b-e9lcgewkoj] {
        display: none;
    }

    .mobile-cards[b-e9lcgewkoj] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 16px 16px;
    }

    .m-client-card[b-e9lcgewkoj] {
    border-bottom: 1px solid var(--g-border);
        padding: 16px;
        transition: box-shadow 0.15s ease;
    }

    .m-client-card:hover[b-e9lcgewkoj] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .m-card-top[b-e9lcgewkoj] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .m-card-info[b-e9lcgewkoj] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .m-card-name[b-e9lcgewkoj] {
        font-size: var(--g-fs-body);
        font-weight: var(--g-fw-bold);
        color: var(--g-text-heading);
        line-height: 1.3;
        cursor: pointer;
    }

    .m-card-name:hover[b-e9lcgewkoj] {
        color: var(--g-indigo);
        text-decoration: underline;
    }

    .m-card-industry[b-e9lcgewkoj] {
        font-size: var(--g-fs-xs);
        font-weight: var(--g-fw-medium);
        color: var(--g-text-secondary);
        line-height: 1.3;
    }

    .m-card-actions[b-e9lcgewkoj] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        font-size: 12px
    }

    .m-card-details[b-e9lcgewkoj] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px solid var(--g-border);
    }

    .m-card-detail[b-e9lcgewkoj] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .m-detail-label[b-e9lcgewkoj] {
        font-size: var(--g-fs-xxs);
        font-weight: var(--g-fw-semibold);
        color: var(--g-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .m-detail-label-sub[b-e9lcgewkoj] {
        margin-top: 8px;
    }

    .m-detail-value[b-e9lcgewkoj] {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: var(--g-fs-sm);
        font-weight: var(--g-fw-semibold);
        color: var(--g-dark);
        line-height: 1.4;
    }

    .m-detail-sub[b-e9lcgewkoj] {
        font-size: var(--g-fs-xxs);
        font-weight: var(--g-fw-normal);
        color: var(--g-dark-light);
    }

    .m-empty[b-e9lcgewkoj] {
        padding: 40px 16px;
        text-align: center;
        color: var(--g-dark-light);
        font-size: var(--g-fs-sm);
    }

    .card-toolbar[b-e9lcgewkoj] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .search-wrap[b-e9lcgewkoj] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tl-header[b-e9lcgewkoj] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .btn-onboard[b-e9lcgewkoj] {
        width: 100%;
    }

    .client-section[b-e9lcgewkoj] {
        margin: 16px;
    }

    .m-card-details[b-e9lcgewkoj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .client-section[b-e9lcgewkoj] {
        margin: 12px;
    }

    .m-client-card[b-e9lcgewkoj] {
        padding: 12px;
    }

    .m-card-name[b-e9lcgewkoj] {
        font-size: var(--g-fs-body);
    }
}
/* /Components/Pages/Admin/Config/ConfigTable.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Config Table Page
   ═══════════════════════════════════════ */

.cfg-page-header[b-bzled520u8] { 
    margin-bottom: 24px;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px 20px;
    background: #fff;
}

.cfg-page-title[b-bzled520u8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.cfg-page-subtitle[b-bzled520u8] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cfg-layout[b-bzled520u8] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 70vh;
}

/* ── Left Sidebar ── */
.cfg-sidebar[b-bzled520u8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfg-sidebar-item[b-bzled520u8] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    color: var(--g-text-body);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.cfg-sidebar-item:hover[b-bzled520u8] {
    border-color: var(--g-border);
    background: var(--g-bg-section);
}

.cfg-sidebar-item.active[b-bzled520u8] {
    border-color: var(--sidebar-active-bg);
    background: #1e293b;
    color: var(--g-bg-card);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--sidebar-active-bg);
}

.cfg-sidebar-icon[b-bzled520u8] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-md);
    background: #1e293b;
    border: 1px solid var(--sidebar-active-bg);
    color: var(--g-bg-card);
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.cfg-sidebar-item.active .cfg-sidebar-icon[b-bzled520u8] {
    background: #1e293b;
    border-color: var(--sidebar-active-bg);
    color: var(--g-bg-card);
}

.cfg-sidebar-label[b-bzled520u8] {
    flex: 1;
}

.cfg-sidebar-arrow[b-bzled520u8] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
    flex-shrink: 0;
}

.cfg-sidebar-item.active .cfg-sidebar-arrow[b-bzled520u8] {
    color: var(--g-brand);
}

/* ── Right Content ── */
.cfg-content[b-bzled520u8] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Keep the detail card pinned while the left sidebar list scrolls */
    position: sticky;
    top: 80px;
    align-self: start; 
}

.cfg-content-title[b-bzled520u8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
}

/* ── Add Form ── */
.cfg-form-section[b-bzled520u8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cfg-form-label[b-bzled520u8] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-text-heading);
}

.cfg-form-input[b-bzled520u8] {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cfg-form-input[b-bzled520u8]::placeholder {
    color: var(--g-text-muted);
}

.cfg-form-input:focus[b-bzled520u8] {
    border-color: var(--g-focus-border);
    box-shadow: 0 0 0 3px var(--g-focus-ring);
}

.cfg-form-input-error[b-bzled520u8] {
    border-color: var(--g-error) !important;
}

.cfg-validation-error[b-bzled520u8] {
    font-size: 0.75rem;
    color: var(--g-error);
    margin: 0;
}

.cfg-form-actions[b-bzled520u8] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.cfg-btn-add[b-bzled520u8] {
    padding: 6px 20px;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: none;
    border-radius: var(--g-radius-sm);
}

/* ── Table ── */
.cfg-table-section[b-bzled520u8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cfg-table-title[b-bzled520u8] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
}

.cfg-table-wrap[b-bzled520u8] {
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    overflow-x: auto;
}

.cfg-table[b-bzled520u8] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cfg-table thead th:first-child[b-bzled520u8],
.cfg-table tbody td:first-child[b-bzled520u8] {
    width: 20%;
}

.cfg-table thead th:last-child[b-bzled520u8],
.cfg-table tbody td:last-child[b-bzled520u8] {
    width: 35%;
    text-align: center;
}

.cfg-table thead th[b-bzled520u8] {
    height: 40px;
    padding: 12px 16px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-text-secondary);
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-border-light);
    text-align: left;
    white-space: nowrap;
    user-select: none;
}

.cfg-table tbody td[b-bzled520u8] {
    padding: 10px 16px;
    font-size: 0.75rem;
    color: var(--g-text-body);
    border-bottom: 1px solid var(--g-border-light);
    vertical-align: middle;
}

.cfg-table tbody tr:last-child td[b-bzled520u8] {
    border-bottom: none;
}

.cfg-table tbody tr:hover[b-bzled520u8] {
    background: var(--g-bg-section);
}


/* ── Editing row highlight ── */
.cfg-row-editing[b-bzled520u8] {
    background: var(--g-brand-bg, #eff6ff) !important;
}

/* ── Form input editing state ── */
.cfg-form-input-editing[b-bzled520u8] {
    border-color: var(--g-brand, #2c7cff) !important;
    box-shadow: 0 0 0 3px var(--g-focus-ring, rgba(0, 111, 249, 0.15)) !important;
}

.cfg-btn-form-cancel[b-bzled520u8] {
    padding: 8px 22px;
}

/* ── Job Image Upload ── */
.cfg-img-upload-area[b-bzled520u8] {
    border: 2px dashed var(--g-border);
    border-radius: var(--g-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(135deg, var(--g-bg-section) 0%, rgba(44,124,255,0.02) 100%);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cfg-img-upload-area:hover[b-bzled520u8] {
    border-color: var(--g-brand);
    background: linear-gradient(135deg, rgba(44,124,255,0.04) 0%, rgba(44,124,255,0.08) 100%);
    box-shadow: 0 0 0 3px rgba(44,124,255,0.08);
}

/* Image 1: full-width banner */
.cfg-img-upload-banner[b-bzled520u8] {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 240px;
}

/* Image 2: small square icon */
.cfg-img-upload-square[b-bzled520u8] {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--g-radius-md);
}

.cfg-img-preview[b-bzled520u8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Drop-zone placeholder content */
.cfg-img-drop-content[b-bzled520u8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
}

.cfg-img-drop-content.cfg-img-drop-compact[b-bzled520u8] {
    gap: 2px;
    padding: 4px;
}

.cfg-img-drop-icon[b-bzled520u8] {
    color: var(--g-brand);
    opacity: 0.55;
    transition: opacity 0.2s;
}

.cfg-img-upload-area:hover .cfg-img-drop-icon[b-bzled520u8] {
    opacity: 0.9;
}

.cfg-img-drop-text[b-bzled520u8] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading);
    letter-spacing: -0.01em;
}

.cfg-img-drop-hint[b-bzled520u8] {
    font-size: 0.6875rem;
    color: var(--g-text-muted);
}

/* Small label above icon / title */
.cfg-form-label-sm[b-bzled520u8] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

/* Icon + Job Title inline row */
.cfg-icon-title-row[b-bzled520u8] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
}

.cfg-upload-slot-square[b-bzled520u8] {
    display: flex;
    flex-direction: column;
}

.cfg-title-input-wrap[b-bzled520u8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cfg-img-upload-link[b-bzled520u8] {
    font-size: 0.8125rem;
    color: var(--g-info);
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
}

.cfg-img-hint[b-bzled520u8] {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    text-align: center;
    margin: 0;
}

.cfg-img-error[b-bzled520u8] {
    font-size: 0.75rem;
    color: var(--g-error);
    text-align: center;
    margin: 4px 0 0;
}

/* ── Image Table (5 columns) ── */
.cfg-table-image[b-bzled520u8] {
}

.cfg-table-image thead th:nth-child(1)[b-bzled520u8],
.cfg-table-image tbody td:nth-child(1)[b-bzled520u8] {
    width: 8%;
}

.cfg-table-image thead th:nth-child(2)[b-bzled520u8],
.cfg-table-image tbody td:nth-child(2)[b-bzled520u8] {
    width: 12%;
}

.cfg-table-image thead th:nth-child(3)[b-bzled520u8],
.cfg-table-image tbody td:nth-child(3)[b-bzled520u8] {
    width: 12%;
}

.cfg-table-image thead th:nth-child(5)[b-bzled520u8],
.cfg-table-image tbody td:nth-child(5)[b-bzled520u8] {
    width: 140px;
}

.cfg-img-thumb[b-bzled520u8] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--g-radius-xs);
}

.cfg-img-thumb-placeholder[b-bzled520u8] {
    font-size: 1.25rem;
    color: var(--g-text-muted);
}

/* ── Action Buttons ── */
.cfg-action-btns[b-bzled520u8] {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.cfg-btn-edit[b-bzled520u8],
.cfg-btn-delete[b-bzled520u8],
.cfg-btn-save[b-bzled520u8],
.cfg-btn-cancel[b-bzled520u8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 30px;
    height: 30px;
    border-radius: var(--g-radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.cfg-btn-edit i[b-bzled520u8],
.cfg-btn-delete i[b-bzled520u8],
.cfg-btn-save i[b-bzled520u8],
.cfg-btn-cancel i[b-bzled520u8] {
    font-size: 0.875rem;
}

.cfg-btn-edit[b-bzled520u8] {
    border: 1.5px solid var(--g-info);
    background: var(--g-bg-card);
    color: var(--g-info);
}

.cfg-btn-edit:hover:not(:disabled)[b-bzled520u8] {
    background: var(--g-info-bg);
}

.cfg-btn-edit:disabled[b-bzled520u8] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cfg-btn-delete[b-bzled520u8] {
    border: 1.5px solid var(--g-error);
    background: var(--g-bg-card);
    color: var(--g-error);
}

.cfg-btn-delete:hover:not(:disabled)[b-bzled520u8] {
    background: var(--g-error-bg);
}

.cfg-btn-delete:disabled[b-bzled520u8] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cfg-btn-save[b-bzled520u8] {
    border: 1.5px solid var(--g-success);
    background: var(--g-bg-card);
    color: var(--g-success-text);
}

.cfg-btn-save:hover[b-bzled520u8] {
    background: var(--g-success-bg);
}

.cfg-btn-cancel[b-bzled520u8] {
    border: 1.5px solid var(--g-text-muted);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
}

.cfg-btn-cancel:hover[b-bzled520u8] {
    background: var(--g-bg-section);
}


/* ── Mobile Dropdown (hidden on desktop) ── */
.cfg-mobile-dropdown[b-bzled520u8] {
    display: none;
    position: relative;
}

.cfg-dropdown-toggle[b-bzled520u8] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--g-bg-card);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--g-indigo);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

.cfg-dropdown-toggle:hover[b-bzled520u8] {
    border-color: var(--g-info);
}

.cfg-dropdown-label[b-bzled520u8] {
    flex: 1;
    text-align: left;
}

.cfg-dropdown-arrow[b-bzled520u8] {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    transition: transform 0.2s;
}

.cfg-dropdown-overlay[b-bzled520u8] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.cfg-dropdown-menu[b-bzled520u8] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--g-bg-card);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.cfg-dropdown-item[b-bzled520u8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}

.cfg-dropdown-item:hover[b-bzled520u8] {
    background: var(--g-info-bg);
    color: var(--g-indigo);
}

.cfg-dropdown-item.active[b-bzled520u8] {
    background: var(--g-brand);
    color: #fff;
}

.cfg-dropdown-item.active .cfg-sidebar-icon[b-bzled520u8] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ── Responsive: 1024–1280px ── */
@media (max-width: 1280px) {
    .cfg-layout[b-bzled520u8] {
        grid-template-columns: 240px 1fr;
        gap: 16px;
    }

    .cfg-sidebar-item[b-bzled520u8] {
        padding: 10px 14px;
        font-size: 0.8125rem;
    }

    .cfg-sidebar-icon[b-bzled520u8] {
        width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }

    .cfg-content[b-bzled520u8] {
        padding: 24px 20px;
    }

    .cfg-table thead th[b-bzled520u8],
    .cfg-table tbody td[b-bzled520u8] {
        padding: 8px 10px;
    }
}

@media (max-width: 1024px) {
    .cfg-layout[b-bzled520u8] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cfg-sidebar[b-bzled520u8] {
        display: none;
    }

    .cfg-mobile-dropdown[b-bzled520u8] {
        display: block;
    }

    .cfg-content[b-bzled520u8] {
        padding: 20px 16px;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .cfg-content-title[b-bzled520u8] {
        font-size: 1.1rem;
    }

    .cfg-page-title[b-bzled520u8] {
        font-size: 1.1rem;
    }

    .cfg-page-subtitle[b-bzled520u8] {
        font-size: 0.75rem;
    }

    .cfg-table thead th[b-bzled520u8] {
        font-size: 0.625rem;
        padding: 6px 8px;
    }

    .cfg-table tbody td[b-bzled520u8] {
        font-size: 0.6875rem;
        padding: 6px 8px;
    }

    .aq-table tbody td:nth-child(3)[b-bzled520u8] {
        font-size: 0.75rem;
    }

    .cfg-form-label[b-bzled520u8] {
        font-size: 0.75rem;
    }

    .cfg-form-input[b-bzled520u8] {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .cfg-table-title[b-bzled520u8] {
        font-size: 0.8125rem;
    }

    .cfg-btn-add[b-bzled520u8] {
       font-size: 0.625rem;
        padding: 5px 16px;
       
    }

    /* Assessment question form at 1024px */
    .aq-form-grid[b-bzled520u8] {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .aq-label[b-bzled520u8] {
        font-size: 0.625rem;
    }

    .aq-select[b-bzled520u8] {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .aq-th-id[b-bzled520u8] {
        width: 40px;
    }

    .aq-th-heading[b-bzled520u8] {
        width: auto;
    }

    .aq-th-type[b-bzled520u8] {
        width: auto;
    }

    .aq-th-action[b-bzled520u8] {
        width: auto;
    }

    .aq-heading-badge[b-bzled520u8] {
        font-size: var(--g-fs-xxs, 0.625rem);
        padding: 2px 6px;
    }

    .aq-type-badge[b-bzled520u8] {
        font-size: 0.625rem;
        padding: 2px 8px;
    }

    .cfg-btn-edit[b-bzled520u8],
    .cfg-btn-delete[b-bzled520u8] {
        width: 28px;
        height: 28px;
        padding: 5px;
    }

    .aq-preview-box[b-bzled520u8] {
        padding: 8px 10px;
        min-height: 36px;
    }

    .aq-preview-input[b-bzled520u8],
    .aq-preview-textarea[b-bzled520u8],
    .aq-preview-select[b-bzled520u8] {
        font-size: 0.75rem;
    }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .cfg-layout[b-bzled520u8] {
        grid-template-columns: 1fr;
    }

    .cfg-sidebar[b-bzled520u8] {
        display: none;
    }

    .cfg-mobile-dropdown[b-bzled520u8] {
        display: block;
    }
}

@media (max-width: 600px) {
    .cfg-content[b-bzled520u8] {
        padding: 20px 16px;
    }

    .cfg-table thead th[b-bzled520u8],
    .cfg-table tbody td[b-bzled520u8] {
        padding: 10px 12px;
    }

    .cfg-action-btns[b-bzled520u8] {
        flex-direction: row;
        gap: 6px;
    }

    .cfg-btn-edit[b-bzled520u8],
    .cfg-btn-delete[b-bzled520u8],
    .cfg-btn-save[b-bzled520u8],
    .cfg-btn-cancel[b-bzled520u8] {
        width: 28px;
        height: 28px;
        padding: 5px;
    }
}

/* ── Delete Confirmation Modal ── */
.cfg-modal-overlay[b-bzled520u8] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cfg-fade-in-b-bzled520u8 0.2s ease;
}

.cfg-modal[b-bzled520u8] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 32px 28px 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: cfg-scale-in-b-bzled520u8 0.2s ease;
}

.cfg-modal-icon[b-bzled520u8] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--g-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cfg-modal-icon i[b-bzled520u8] {
    font-size: 1.5rem;
    color: var(--g-error);
}

.cfg-modal-title[b-bzled520u8] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
    font-family: var(--g-font-sans);
}

.cfg-modal-text[b-bzled520u8] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-body);
    margin: 0 0 24px;
    line-height: 1.5;
    font-family: var(--g-font-sans);
}

.cfg-modal-actions[b-bzled520u8] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cfg-modal-btn[b-bzled520u8] {
    padding: 9px 24px;
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--g-font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.cfg-modal-btn-cancel[b-bzled520u8] {
    background: var(--g-bg-section);
    color: var(--g-text-secondary);
    border: 1.5px solid var(--g-border);
}

.cfg-modal-btn-cancel:hover[b-bzled520u8] {
    background: var(--g-border-light);
}

.cfg-modal-btn-delete[b-bzled520u8] {
    background: var(--g-error);
    color: #fff;
}

.cfg-modal-btn-delete:hover[b-bzled520u8] {
    background: var(--g-error-text);
}

/* ── Animations ── */
@keyframes cfg-fade-in-b-bzled520u8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cfg-scale-in-b-bzled520u8 {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════
   Assessment Question Section
   ═══════════════════════════════════════ */

.aq-form-grid[b-bzled520u8] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px 24px;
    align-items: start;
}

.aq-form-group[b-bzled520u8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aq-label[b-bzled520u8] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-text-secondary);
}

.aq-label-row[b-bzled520u8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.aq-ai-hint[b-bzled520u8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.aq-ai-hint i[b-bzled520u8] {
    font-size: var(--g-fs-sm, 0.8125rem);
    background: linear-gradient(135deg, var(--g-brand), #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aq-select[b-bzled520u8] {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.aq-select:focus[b-bzled520u8] {
    border-color: var(--g-focus-border);
    box-shadow: 0 0 0 3px var(--g-focus-ring);
}

/* Preview */
.aq-preview-box[b-bzled520u8] {
    padding: 0px 14px;
    border: 1px dashed var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-section);
    min-height: 42px;
    display: flex;
    align-items: center;
}

.aq-preview-input[b-bzled520u8] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    font-size: 0.8125rem;
    color: var(--g-text-muted);
    background: var(--g-bg-card);
    font-family: inherit;
}

.aq-preview-textarea[b-bzled520u8] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    font-size: 0.8125rem;
    color: var(--g-text-muted);
    background: var(--g-bg-card);
    font-family: inherit;
    resize: none;
    min-height: 48px;
}

.aq-preview-radio-group[b-bzled520u8] {
    display: flex;
    gap: 16px;
}

.aq-preview-radio[b-bzled520u8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--g-text-muted);
    cursor: default;
}

.aq-preview-select[b-bzled520u8] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    font-size: 0.8125rem;
    color: var(--g-text-muted);
    background: var(--g-bg-card);
    font-family: inherit;
}

.aq-preview-file[b-bzled520u8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--g-text-muted);
}

.aq-preview-file i[b-bzled520u8] { font-size: 1.1rem; }

.aq-preview-rating[b-bzled520u8] {
    display: flex;
    gap: 4px;
}

.aq-preview-rating i[b-bzled520u8] {
    font-size: 1.1rem;
    color: #facc15;
}

/* List header */
.aq-list-header[b-bzled520u8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.aq-search-wrap[b-bzled520u8] {
    position: relative;
    width: 240px;
}

.aq-search-icon[b-bzled520u8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-muted);
    pointer-events: none;
}

.aq-search-input[b-bzled520u8] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.aq-search-input[b-bzled520u8]::placeholder { color: var(--g-text-muted); }

.aq-search-input:focus[b-bzled520u8] {
    border-color: var(--g-focus-border);
    box-shadow: 0 0 0 3px var(--g-focus-ring);
}

/* Table columns */
.aq-table[b-bzled520u8] { table-layout: auto; }
.aq-th-id[b-bzled520u8] { width: 50px; }
.aq-th-heading[b-bzled520u8] { width: 140px; }
.aq-th-type[b-bzled520u8] { width: 120px; }
.aq-th-action[b-bzled520u8] { width: 140px; }

/* Badges */
.aq-heading-badge[b-bzled520u8] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--g-radius-sm);
    background: var(--g-info-bg);
    color: var(--g-info);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.aq-type-badge[b-bzled520u8] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--g-bg-section);
    border: 1px solid var(--g-border);
    color: var(--g-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.aq-edit-select[b-bzled520u8] {
    padding: 6px 10px;
    border: 1px solid var(--g-focus-border);
    border-radius: var(--g-radius-sm);
    font-size: 0.8125rem;
    color: var(--g-text-heading);
    font-family: inherit;
    outline: none;
    box-shadow: 0 0 0 3px var(--g-focus-ring);
    width: 100%;
    background: var(--g-bg-card);
}
@media (max-width: 425px) {
    .aq-form-grid[b-bzled520u8] {
        grid-template-columns: 1fr;
        width: 377px;
    }
    }

@media (max-width: 768px) {
    .aq-form-grid[b-bzled520u8] {
        grid-template-columns: 1fr;
       
    }

    .aq-list-header[b-bzled520u8] {
        flex-direction: column;
        align-items: stretch;
    }

    .aq-search-wrap[b-bzled520u8] { width: 100%; }

    .aq-th-id[b-bzled520u8] { display: none; }
    .aq-table tbody td:first-child[b-bzled520u8] { display: none; }

    .aq-th-type[b-bzled520u8] { display: none; }
    .aq-td-type[b-bzled520u8] { display: none; }

    .aq-th-action[b-bzled520u8] { width: auto; }
    .aq-th-heading[b-bzled520u8] { width: auto; }

    .cfg-action-btns[b-bzled520u8] {
        flex-direction: row;
        gap: 4px;
    }

    .cfg-btn-edit[b-bzled520u8],
    .cfg-btn-delete[b-bzled520u8] {
        font-size: var(--g-fs-xxs, 0.625rem);
        padding: 4px 8px;
    }
}

.tl-default-badge[b-bzled520u8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    margin-left: 8px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
     vertical-align: middle;
}

/* Skeleton loader rows shown while a config section's data is fetching */
@keyframes cfg-skel-shimmer-b-bzled520u8 {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.cfg-skel[b-bzled520u8] {
    display: inline-block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 50%, #eef2f7 75%);
    background-size: 200% 100%;
    animation: cfg-skel-shimmer-b-bzled520u8 1.4s ease-in-out infinite;
}
.cfg-skel-btn[b-bzled520u8] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
/* /Components/Pages/Admin/CreateRole.razor.rz.scp.css */
/* CreateRole – All styles moved to global components.css (g-form-*, g-perm-*, g-toggle-*) */
/* /Components/Pages/Admin/EditClient.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Edit Client – Production SaaS Styling
   ═══════════════════════════════════════════ */

/* ── Page Shell ── */
.edit-page[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Card wrapper ── */
.edit-card[b-3jcixia6tb] {
     overflow: visible;
}

/* ── Page Header ── */
.page-header[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
    position: sticky;
    top: 66px;
    z-index: 50;
}

.header-left[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page-title[b-3jcixia6tb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-subtitle[b-3jcixia6tb] {
    font-size: var(--g-fs-sm);
    font-weight: 400;
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.header-actions[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Cancel Button ── */
.btn-cancel[b-3jcixia6tb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 22px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: #e5e7eb;
    color: var(--g-text-body);
    font-size: 0.7125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--g-transition);
}

.btn-cancel:hover[b-3jcixia6tb] {
    background: var(--g-gray-300);
}

.btn-cancel:focus-visible[b-3jcixia6tb] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

/* ── Save Button ── */
.btn-save[b-3jcixia6tb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 24px;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--sidebar-active-bg);
    color: #fff;
    font-size: 0.7125rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.006em;
    cursor: pointer;
    white-space: nowrap;
    gap: 6px;
    box-shadow: 0 3px 5px -1px var(--g-primary-shadow),
                0 5px 12px -4px var(--g-primary-shadow-deep);
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-save:hover[b-3jcixia6tb] {
    opacity: 0.92;
    box-shadow: 0 4px 8px -1px rgba(0, 147, 255, 0.25),
                0 6px 16px -4px rgba(0, 147, 255, 0.35);
}

.btn-save:active[b-3jcixia6tb] {
    box-shadow: 0 2px 4px -1px rgba(0, 147, 255, 0.2);
}

.btn-save:focus-visible[b-3jcixia6tb] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

/* ═══════════════════════════════════
   Form Sections
   ═══════════════════════════════════ */
.form-section[b-3jcixia6tb] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 28px 32px 32px;
    box-shadow: var(--g-shadow-xs);
    margin: 24px 0px;
}

.section-header[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: -28px -32px 28px;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--g-border);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
}

.contacts-section .section-header[b-3jcixia6tb] {
    border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
}

.section-title-group[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-brand);
    flex-shrink: 0;
}

.section-title[b-3jcixia6tb] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
}

/* ── Status Toggle ── */
.status-toggle-wrap[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--g-gray-100);
    padding: 6px 14px;
    border-radius: var(--g-radius-md);
}

.status-label[b-3jcixia6tb] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.toggle[b-3jcixia6tb] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    cursor: pointer;
}

.toggle input[b-3jcixia6tb] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-3jcixia6tb] {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--g-gray-300);
    transition: background 0.25s ease;
}

.toggle-slider[b-3jcixia6tb]::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: var(--g-bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.toggle input:checked + .toggle-slider[b-3jcixia6tb] {
    background: var(--sidebar-active-bg);
}

.toggle input:checked + .toggle-slider[b-3jcixia6tb]::before {
    transform: translateX(18px);
}

.toggle input:focus-visible + .toggle-slider[b-3jcixia6tb] {
    box-shadow: var(--g-focus-shadow);
}

.status-text[b-3jcixia6tb] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.06em;
}

.status-text.active[b-3jcixia6tb] {
    color: var(--g-success-text);
}

.status-text.inactive[b-3jcixia6tb] {
    color: var(--g-text-muted);
}

/* ═══════════════════════════════
   Form Controls
   ═══════════════════════════════ */
.form-group[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-3jcixia6tb] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    line-height: 1.4;
}

.required[b-3jcixia6tb] {
    color: var(--g-error);
    font-weight: 500;
}

.form-input[b-3jcixia6tb] {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.form-input[b-3jcixia6tb]::placeholder {
    color: var(--g-text-muted);
    font-weight: 400;
}

.form-input:hover[b-3jcixia6tb] {
    border-color: var(--g-gray-300);
}

.form-input:focus[b-3jcixia6tb] {
    border-color: var(--g-brand);
    box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.1);
}

.form-input.input-error[b-3jcixia6tb] {
    border-color: var(--g-error);
}

.form-input.input-error:focus[b-3jcixia6tb] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error[b-3jcixia6tb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g-error);
    margin-top: 2px;
}

/* ── Identity Grid ── */
.identity-grid[b-3jcixia6tb] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

.identity-fields[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.identity-row-2col[b-3jcixia6tb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-hint[b-3jcixia6tb] {
    font-size: 0.7rem;
    color: var(--g-text-muted);
    font-weight: 400;
}

.form-hint-error[b-3jcixia6tb] {
    color: var(--g-error);
}

/* ── Logo Upload ── */
.logo-upload-group[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logo-dropzone[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 212px;
    border: 2px dashed var(--g-gray-300);
    border-radius: var(--g-radius-xl);
    background: var(--g-gray-50);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    padding: 24px;
}

.logo-dropzone:hover[b-3jcixia6tb],
.logo-dropzone:focus-visible[b-3jcixia6tb] {
    border-color: var(--g-brand);
    background: var(--g-info-bg);
    outline: none;
}

.upload-icon[b-3jcixia6tb] {
    color: var(--g-text-muted);
}

.logo-dropzone:hover .upload-icon[b-3jcixia6tb],
.logo-dropzone:focus-visible .upload-icon[b-3jcixia6tb] {
    color: var(--g-brand);
}

.upload-text[b-3jcixia6tb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--g-brand);
}

.upload-text.change[b-3jcixia6tb] {
    font-size: 0.8125rem;
}

.upload-hint[b-3jcixia6tb] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
    font-weight: 400;
}

.upload-filename[b-3jcixia6tb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--g-gray-800);
    word-break: break-all;
    text-align: center;
}

.logo-preview-img[b-3jcixia6tb] {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    border-radius: var(--g-radius-md);
}

.upload-error[b-3jcixia6tb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g-error);
    margin-top: 4px;
}

/* ═══════════════════════════════
   Contact Persons
   ═══════════════════════════════ */
.form-section.contacts-section[b-3jcixia6tb] {
    background: var(--g-gray-50);
}

.btn-add-contact[b-3jcixia6tb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-add-contact:hover[b-3jcixia6tb] {
    background: var(--g-info-bg);
}

.btn-add-contact:focus-visible[b-3jcixia6tb] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

.contacts-list[b-3jcixia6tb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-card[b-3jcixia6tb] {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 20px 24px 24px;
    background: var(--g-bg-card);
}

.contact-card .form-input[b-3jcixia6tb] {
    background: var(--g-bg-card);
}

.contact-card-header[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stakeholder-badge[b-3jcixia6tb] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--g-brand);
    text-transform: uppercase;
}

.btn-remove-contact[b-3jcixia6tb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-remove-contact:hover[b-3jcixia6tb] {
    color: var(--g-error);
    border-color: var(--g-error-border);
    background: var(--g-error-bg);
}

.btn-remove-contact:focus-visible[b-3jcixia6tb] {
    outline: 2px solid var(--g-error);
    outline-offset: 2px;
}

.contact-fields[b-3jcixia6tb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-row-2col[b-3jcixia6tb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ═══════════════════════════════
   Success Popup & Overlay
   ═══════════════════════════════ */
[b-3jcixia6tb] .overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-3jcixia6tb 0.2s ease;
}

[b-3jcixia6tb] .success-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    width: 90%;
    max-width: 420px;
    animation: popIn-b-3jcixia6tb 0.25s ease;
}

[b-3jcixia6tb] .success-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--g-success-bg);
    color: var(--g-success);
    margin: 0 auto 20px;
}

[b-3jcixia6tb] .success-title {
    font-size: var(--g-fs-page-title, 1.25rem);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

[b-3jcixia6tb] .success-message {
    font-size: 0.875rem;
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

[b-3jcixia6tb] .btn-success-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 40px;
    border: none;
    border-radius: var(--g-radius-md);
    background: linear-gradient(310deg, #2c7cff, #21d4fd);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 5px -1px rgba(0, 147, 255, 0.2),
                0 5px 12px -4px rgba(0, 147, 255, 0.3);
}

[b-3jcixia6tb] .btn-success-ok:hover {
    opacity: 0.92;
    box-shadow: 0 4px 8px -1px rgba(0, 147, 255, 0.25),
                0 6px 16px -4px rgba(0, 147, 255, 0.35);
}

[b-3jcixia6tb] .btn-success-ok:focus-visible {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

@keyframes fadeIn-b-3jcixia6tb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn-b-3jcixia6tb {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ═══════════════════════════════
   Responsive Design
   ═══════════════════════════════ */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
    .form-section[b-3jcixia6tb] {
        margin: 16px;
        padding: 24px;
    }

    .identity-grid[b-3jcixia6tb] {
        grid-template-columns: 1fr 280px;
        gap: 24px;
    }

    .contacts-list[b-3jcixia6tb] {
        grid-template-columns: 1fr;
    }

    .contact-card[b-3jcixia6tb] {
        padding: 16px 20px 20px;
    }

    .contact-row-2col[b-3jcixia6tb] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .page-title[b-3jcixia6tb] {
        font-size: var(--g-fs-section-title, 1.125rem);
    }

    .page-subtitle[b-3jcixia6tb] {
        font-size: 0.75rem;
    }

    .section-title[b-3jcixia6tb] {
        font-size: 0.9375rem;
    }

    .form-label[b-3jcixia6tb] {
        font-size: 0.75rem;
    }

    .form-input[b-3jcixia6tb] {
        font-size: 0.8125rem;
    }

    .status-label[b-3jcixia6tb] {
        font-size: 0.75rem;
    }

    .stakeholder-badge[b-3jcixia6tb] {
        font-size: 0.625rem;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .form-section[b-3jcixia6tb] {
        margin: 16px 8px;
        padding: 24px 20px;
    }

    .section-header[b-3jcixia6tb] {
        padding: 24px 20px 16px;
        margin: -24px -20px 24px;
    }

    .identity-grid[b-3jcixia6tb] {
        grid-template-columns: 1fr 260px;
        gap: 20px;
    }

    .contacts-list[b-3jcixia6tb] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .contact-card[b-3jcixia6tb] {
        padding: 16px 16px 20px;
    }

    .contact-row-2col[b-3jcixia6tb] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-header[b-3jcixia6tb] {
        padding: 14px 20px;
    }
}

/* Small tablet: <= 768px */
@media (max-width: 768px) {
    .page-header[b-3jcixia6tb] {
        flex-direction: row;
        gap: 12px;
    }

    .header-actions[b-3jcixia6tb] {
        width: 100%;
    }

    .g-btn-cancel[b-3jcixia6tb],
    .g-btn-primary[b-3jcixia6tb] {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    .form-section[b-3jcixia6tb] {
        padding: 20px 16px 24px;
        border-radius: var(--g-radius-lg);
        margin: 12px;
    }

    .section-header[b-3jcixia6tb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: -20px -16px 20px;
        padding: 20px 16px 16px;
    }

    .identity-grid[b-3jcixia6tb] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .identity-row-2col[b-3jcixia6tb] {
        grid-template-columns: 1fr;
    }

    .logo-dropzone[b-3jcixia6tb] {
        min-height: 140px;
    }

    .contacts-list[b-3jcixia6tb] {
        grid-template-columns: 1fr;
    }

    .contact-card[b-3jcixia6tb] {
        padding: 16px;
    }

    .contact-row-2col[b-3jcixia6tb] {
        grid-template-columns: 1fr;
    }

    .status-toggle-wrap[b-3jcixia6tb] {
        width: 100%;
        justify-content: flex-end;
    }

    [b-3jcixia6tb] .success-popup {
        padding: 32px 24px;
        width: 92%;
    }
}

/* Phone: <= 480px */
@media (max-width: 480px) {
    .page-title[b-3jcixia6tb] {
        font-size: var(--g-fs-page-title, 1.25rem);
    }

    .form-section[b-3jcixia6tb] {
        padding: 16px 12px 20px;
        margin: 8px;
    }

    .section-header[b-3jcixia6tb] {
        margin: -16px -12px 16px;
        padding: 16px 12px 12px;
    }

    .section-title[b-3jcixia6tb] {
        font-size: var(--g-fs-body, 0.875rem);
    }

    .g-btn-cancel[b-3jcixia6tb],
    .g-btn-primary[b-3jcixia6tb] {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    [b-3jcixia6tb] .success-popup {
        padding: 28px 20px;
    }
}
/* /Components/Pages/Admin/EditRole.razor.rz.scp.css */
/* EditRole – All styles moved to global components.css (g-form-*, g-perm-*, g-toggle-*) */
/* /Components/Pages/Admin/EmailTemplates.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Email Templates – Sidebar + Editor
   ═══════════════════════════════════════ */

/* ── Page Shell ── */
.et-page[b-xyw53wkcyy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Outer Card (matches Clients table-card) ── */
.et-outer-card[b-xyw53wkcyy] {
   
    padding: 0;
    overflow: visible;
}

/* ── Page Header (inside card) ── */
.et-page-header[b-xyw53wkcyy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px 20px;
   
}

.et-page-title[b-xyw53wkcyy] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.et-page-subtitle[b-xyw53wkcyy] {
    font-size: var(--g-fs-sm);
    font-weight: 400;
    color: var(--g-text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ── Inner Content Card ── */
.et-card[b-xyw53wkcyy] {
    display: flex;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-border-card);
    box-shadow: var(--g-shadow-xs);
    margin: 24px 0px;
    overflow: visible;
    min-height: 520px;
}

/* ── Sidebar ── */
.et-sidebar[b-xyw53wkcyy] {
    width: 330px;
    flex-shrink: 0;
    border-right: 1px solid var(--g-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.et-nav[b-xyw53wkcyy] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 4px;
}

.et-nav-item[b-xyw53wkcyy] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--g-radius-md);
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--g-text-label);
    cursor: pointer;
    transition: all 0.12s ease;
    line-height: 1.4;
}

.et-nav-item:hover[b-xyw53wkcyy] {
    background: var(--g-gray-50);
    color: var(--g-text-heading);
}

.et-nav-item.active[b-xyw53wkcyy] {
    color: var(--g-brand);
    font-weight: 600;
    background: var(--g-brand-bg);
    border-color: var(--g-brand-border);
}

/* ── Editor Panel ── */
.et-editor[b-xyw53wkcyy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Keep the editor panel pinned while the left template list scrolls */
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 96px);
}

.et-editor-head[b-xyw53wkcyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.et-editor-title[b-xyw53wkcyy] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Header Actions ── */
.et-header-actions[b-xyw53wkcyy] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Edit Button ── */
.et-btn-edit[b-xyw53wkcyy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    height: 30px;
    margin: 0;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-800);
    color: #fff;
    font-size: 0.7125rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 6px;
    transition: background 0.15s ease;
}

.et-btn-edit:hover[b-xyw53wkcyy] {
    background: var(--g-gray-900);
}

.et-btn-edit:active[b-xyw53wkcyy] {
    transform: translateY(1px);
}

.et-btn-edit:focus-visible[b-xyw53wkcyy] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

/* ── Disabled Fields ── */
.et-input:disabled[b-xyw53wkcyy],
.et-textarea:disabled[b-xyw53wkcyy] {
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    cursor: not-allowed;
    border-color: var(--g-border);
}

/* ── Editor Body ── */
.et-editor-body[b-xyw53wkcyy] {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Form Fields ── */
.et-field[b-xyw53wkcyy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.et-label[b-xyw53wkcyy] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    line-height: 1;
}

.et-input[b-xyw53wkcyy] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
    background: var(--g-gray-50);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.et-input:focus[b-xyw53wkcyy] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
    background: var(--g-bg-card);
}

.et-textarea[b-xyw53wkcyy] {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
    background: var(--g-gray-50);
    outline: none;
    resize: vertical;
    min-height: 350px;
    line-height: 1.6;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.et-textarea:focus[b-xyw53wkcyy] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
    background: var(--g-bg-card);
}

/* ── Available Variables ── */
.et-variables[b-xyw53wkcyy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.et-var-label[b-xyw53wkcyy] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.et-var-list[b-xyw53wkcyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.et-var-tag[b-xyw53wkcyy] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace;
    color: var(--g-text-label);
    background: var(--g-gray-50);
    user-select: all;
    cursor: default;
    transition: border-color 0.12s ease;
}

.et-var-tag:hover[b-xyw53wkcyy] {
    border-color: var(--g-text-muted);
    background: var(--g-gray-100);
}

/* ── Label Row (label + toggle) ── */
.et-label-row[b-xyw53wkcyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ── Preview / Edit Code Toggle ── */
.et-toggle-btn[b-xyw53wkcyy] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-brand, #2c7cff);
    background: transparent;
    border: 1px solid var(--g-brand, #2c7cff);
    border-radius: var(--g-radius-sm, 4px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.et-toggle-btn:hover[b-xyw53wkcyy] {
    background: var(--g-brand, #2c7cff);
    color: #fff;
}

/* ── HTML Preview iframe ── */
.et-preview-frame-wrap[b-xyw53wkcyy] {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: #fff;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.et-preview-frame[b-xyw53wkcyy] {
    width: 100%;
    height: 350px;
    border: none;
    display: block;
}

.et-preview-editable[b-xyw53wkcyy] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(0, 147, 255, 0.08);
}

/* ═══════════════════════════════════════
   Mobile Dropdown (hidden on desktop)
   ═══════════════════════════════════════ */

[b-xyw53wkcyy] .et-dropdown-wrap {
    display: none;
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */

/* ── Responsive: 1024–1280px ── */
@media (max-width: 1280px) {
    .et-sidebar[b-xyw53wkcyy] {
        width: 260px;
    }

    .et-editor-title[b-xyw53wkcyy] {
        font-size: 1rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .et-editor-head[b-xyw53wkcyy] {
        padding: 16px 20px;
    }

    .et-editor-body[b-xyw53wkcyy] {
        padding: 20px 24px;
        gap: 20px;
    }

    .et-nav-item[b-xyw53wkcyy] {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .et-sidebar[b-xyw53wkcyy] {
        width: 220px;
    }

    .et-editor-title[b-xyw53wkcyy] {
        font-size: 0.9375rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .et-editor-head[b-xyw53wkcyy] {
        padding: 14px 16px;
        gap: 12px;
    }

    .et-editor-body[b-xyw53wkcyy] {
        padding: 16px 20px;
        gap: 16px;
    }

    .et-nav-item[b-xyw53wkcyy] {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    .et-btn-edit[b-xyw53wkcyy],
    .et-btn-save[b-xyw53wkcyy] {
        padding: 6px 14px;
        font-size: 0.75rem;
    }
}

@media (max-width: 991px) {
    .et-card[b-xyw53wkcyy] {
        flex-direction: column;
        min-height: auto;
    }

    .et-editor[b-xyw53wkcyy] {
        position: static;
        max-height: none;
    }

    .et-sidebar[b-xyw53wkcyy] {
        display: none;
    }

    [b-xyw53wkcyy] .et-dropdown-wrap {
        display: block;
        position: relative;
        padding: 12px 16px;
        border-bottom: 1px solid var(--g-border);
    }

    [b-xyw53wkcyy] .et-dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 16px;
        background: var(--g-bg-card);
        border: 1.5px solid var(--g-gray-300);
        border-radius: var(--g-radius-md);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--g-dark);
        cursor: pointer;
        transition: border-color 0.15s;
    }

    [b-xyw53wkcyy] .et-dropdown-toggle:hover {
        border-color: var(--g-brand);
    }

    [b-xyw53wkcyy] .et-dropdown-arrow {
        font-size: 0.625rem;
        color: var(--g-dark-muted);
        transition: transform 0.2s;
    }

    [b-xyw53wkcyy] .et-dropdown-arrow.open {
        transform: rotate(180deg);
    }

    [b-xyw53wkcyy] .et-dropdown-list {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        background: var(--g-bg-card);
        border: 1px solid var(--g-border);
        border-radius: var(--g-radius-md);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 50;
        max-height: 300px;
        overflow-y: auto;
        padding: 6px;
    }

    [b-xyw53wkcyy] .et-dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 9px 12px;
        background: none;
        border: none;
        border-radius: var(--g-radius-sm);
        font-size: 0.8125rem;
        color: var(--g-dark);
        cursor: pointer;
        text-align: left;
        transition: background 0.15s;
    }

    [b-xyw53wkcyy] .et-dropdown-item:hover {
        background: var(--g-gray-100);
    }

    [b-xyw53wkcyy] .et-dropdown-item.active {
        background: var(--g-brand-bg);
        color: var(--g-brand);
        font-weight: 600;
    }

    [b-xyw53wkcyy] .et-dropdown-check {
        font-size: 0.75rem;
        color: var(--g-brand);
    }

    .et-editor-head[b-xyw53wkcyy] {
        padding: 16px;
    }

    .et-editor-body[b-xyw53wkcyy] {
        padding: 16px;
    }

    .et-editor-title[b-xyw53wkcyy] {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .et-editor-head[b-xyw53wkcyy] {
        padding: 12px;
        gap: 10px;
    }

    .et-editor-body[b-xyw53wkcyy] {
        padding: 12px;
        gap: 16px;
    }

    .et-editor-title[b-xyw53wkcyy] {
        font-size: 0.9375rem;
    }

    .et-btn-save[b-xyw53wkcyy] {
        padding: 7px 14px;
        font-size: 0.75rem;
    }

    .et-textarea[b-xyw53wkcyy] {
        min-height: 140px;
    }

    .et-nav[b-xyw53wkcyy] {
        padding: 6px 8px;
    }

    .et-nav-item[b-xyw53wkcyy] {
        padding: 6px 10px;
        font-size: 0.6875rem;
    }

    .et-var-tag[b-xyw53wkcyy] {
        padding: 4px 8px;
        font-size: 0.6875rem;
    }
}

.desc-cell[b-xyw53wkcyy] {
    max-width: 240px;
    color: var(--g-dark-muted);
    font-size: var(--g-fs-xxs, 0.6875rem);
}

.user-count[b-xyw53wkcyy] {
    font-weight: 700;
    color: var(--g-dark);
}

.permission-tags[b-xyw53wkcyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.permission-tag[b-xyw53wkcyy] {
    display: inline-block;
    padding: 2px 6px;
    background: var(--g-gray-100);
    border-radius: 3px;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 600;
    color: var(--g-dark-muted);
    white-space: nowrap;
}

.permission-tag.more[b-xyw53wkcyy] {
    background: var(--g-indigo-bg);
    color: var(--g-brand);
}

/* ── Config Table Specifics ── */
.config-key[b-xyw53wkcyy] {
    font-size: 12px;
    color: var(--g-brand);
    background: var(--g-indigo-bg);
    padding: 2px 6px;
    border-radius: var(--g-radius-xs);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.config-value[b-xyw53wkcyy] {
    font-size: 12px;
    color: var(--g-dark);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.config-value.sensitive[b-xyw53wkcyy] {
    color: var(--g-dark-light);
    letter-spacing: 2px;
}

.type-cell[b-xyw53wkcyy] {
    color: var(--g-dark-muted);
    font-size: var(--g-fs-xxs, 0.6875rem);
}

.bool-badge[b-xyw53wkcyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
}

.bool-badge.on[b-xyw53wkcyy] {
    background: var(--g-success-bg);
    color: var(--g-success);
}

.bool-badge.off[b-xyw53wkcyy] {
    background: var(--g-error-bg);
    color: var(--g-error);
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .page-header[b-xyw53wkcyy] {
        flex-direction: row;
    }

    .filters-bar[b-xyw53wkcyy] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-xyw53wkcyy] {
        max-width: none;
    }

    .table-responsive[b-xyw53wkcyy] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Admin/Overview.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Overview Page Styles
   ═══════════════════════════════════════ */

.overview[b-mjxrkzt2po] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Page Header ── */
.page-header[b-mjxrkzt2po] {
    margin-bottom: 24px;
}

.page-title[b-mjxrkzt2po] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}

.page-subtitle[b-mjxrkzt2po] {
    font-size: 0.8125rem;
    color: var(--g-text-secondary);
    margin: 0;
}

/* ── Subscription Card ── */
.subscription-card[b-mjxrkzt2po] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 0;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.sub-card-header[b-mjxrkzt2po] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.sub-header-icon[b-mjxrkzt2po] {
    color: var(--g-brand);
    font-size: 0.875rem;
}

.sub-header-title[b-mjxrkzt2po] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--g-text-heading);
}

.sub-card-body[b-mjxrkzt2po] {
    display: flex;

    justify-content: space-between;
    padding: 20px 24px;
}

.sub-left[b-mjxrkzt2po] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.sub-info[b-mjxrkzt2po] {
    display: flex;
    gap: 260px;
    align-items: center;
}

.sub-detail[b-mjxrkzt2po] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-label[b-mjxrkzt2po] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g-text-muted);
    text-transform: capitalize;
    letter-spacing: 0.04em;
}

.sub-value[b-mjxrkzt2po] {
    font-size: var(--g-fs-page-title, 1.25rem);
    font-weight: 600;
    color: var(--g-text-heading);
}

.plan-badge[b-mjxrkzt2po] {
    color: var(--g-brand);
}

.sub-renewal[b-mjxrkzt2po] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    border-left: 1px solid var(--g-border-card);
    padding-left: 40px;
}

.renewal-header[b-mjxrkzt2po] {
    display: flex;
    align-items: center;
    gap: 100px;
    margin-bottom: 8px;
}

.renewal-header-label[b-mjxrkzt2po] {
   font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading);
    letter-spacing: 0.06em;
}

.renewal-icon[b-mjxrkzt2po] {
    color: var(--g-brand, #2c7cff);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.renewal-ring-wrap[b-mjxrkzt2po] {
    position: relative;
    width: 120px;
    height: 120px;
}

.renewal-ring[b-mjxrkzt2po] {
    width: 120px;
    height: 120px;
}

.renewal-text[b-mjxrkzt2po] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

.renewal-days[b-mjxrkzt2po] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
}

.renewal-label[b-mjxrkzt2po] {
    display: block;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 600;
    color: var(--g-text-muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.sub-footer[b-mjxrkzt2po] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 19px;
    border-top: 1px solid var(--g-border-light);
 }

.sub-link[b-mjxrkzt2po] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
}

.sub-upgrade[b-mjxrkzt2po] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-indigo);
    text-decoration: none;
}

.sub-upgrade:hover[b-mjxrkzt2po] {
    text-decoration: underline;
}

/* ── Metrics Grid ── */
.metrics-grid[b-mjxrkzt2po] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.metric-card[b-mjxrkzt2po] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px;
}

.metric-header[b-mjxrkzt2po] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.metric-icon[b-mjxrkzt2po] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.jobs-icon[b-mjxrkzt2po] {
    background: #e8f0fe;
    color: var(--g-brand, #2c7cff);
}

.views-icon[b-mjxrkzt2po] {
    background: #e8f0fe;
    color: var(--g-brand, #2c7cff);
}

.users-icon[b-mjxrkzt2po] {
    background: #ecfdf5;
    color: var(--g-success, #22c55e);
}

.metric-icon-label[b-mjxrkzt2po] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric-ring-wrap[b-mjxrkzt2po] {
    position: relative;

    flex-shrink: 0;
}

.metric-ring[b-mjxrkzt2po] {
    width: 64px;
    height: 64px;
}

.metric-ring-pct[b-mjxrkzt2po] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--g-fs-sm, 0.8125rem);
    font-weight: 700;
    color: var(--g-text-body);
}

.metric-body[b-mjxrkzt2po] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}
.metric-chartValue[b-mjxrkzt2po]{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-body-with-ring[b-mjxrkzt2po] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.metric-body-with-ring .metric-body-content[b-mjxrkzt2po] {
    display: flex;
    flex-direction: column;
   
    flex: 1;
}

.metric-label[b-mjxrkzt2po] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-secondary);
    letter-spacing: -0.006em;
}

.metric-value-row[b-mjxrkzt2po] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.metric-value[b-mjxrkzt2po] {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
}

.metric-limit[b-mjxrkzt2po] {
    font-size: 0.8125rem;
    color: var(--g-text-muted);
    font-weight: 500;
}

.metric-growth[b-mjxrkzt2po] {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metric-growth.positive[b-mjxrkzt2po] {
    color: var(--g-success-text);
}

.metric-growth.negative[b-mjxrkzt2po] {
    color: var(--g-error-text);
}

.metric-growth svg[b-mjxrkzt2po] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Section Divider ── */
.section-divider[b-mjxrkzt2po] {
    border: none;
    border-top: 1px solid var(--g-border-light);
    margin: 0 0 24px;
}

/* ── Users List Card ── */
.users-list-card[b-mjxrkzt2po] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .metrics-grid[b-mjxrkzt2po] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sub-card-body[b-mjxrkzt2po] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .sub-info[b-mjxrkzt2po] {
        flex-wrap: wrap;
        gap: 80px;
    }
    .sub-renewal[b-mjxrkzt2po]{
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .sub-renewal[b-mjxrkzt2po]{
    display: flex;
    flex-direction: column;
            width: 99%;
    align-items: stretch;
    flex-shrink: 0;
    border-left: none;
    padding-left: 0px;
    }

    .renewal-header[b-mjxrkzt2po] {
        justify-content: space-between;
        width: 100%;
    }

    .renewal-ring-wrap[b-mjxrkzt2po] {
    align-self: center;
    }

    .metrics-grid[b-mjxrkzt2po] {
        grid-template-columns: 1fr;
    }

    .metric-body-with-ring[b-mjxrkzt2po] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .sub-card-body[b-mjxrkzt2po] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .sub-card-header[b-mjxrkzt2po] {
        padding: 12px 0px 0;
    }

    .sub-footer[b-mjxrkzt2po] {
        padding: 10px 16px;
    }

    .sub-info[b-mjxrkzt2po] {
        gap: 40px;
    }
}

@media (max-width: 375px) {
    .sub-info[b-mjxrkzt2po] {
        gap: 24px;
    }
}
/* /Components/Pages/Admin/RegisterClient.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Register Client – Production SaaS Styling
   ═══════════════════════════════════════════ */

/* ── Page Shell ── */
.register-page[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
}

/* ── Register Card (wraps header + sections) ── */
.register-card[b-13rr3u8g4q] {  
    overflow: visible;
}

/* ── Page Header ── */
.page-header[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
    position: sticky;
    top: 66px;
    z-index: 50;
}

.header-left[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-title[b-13rr3u8g4q] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.page-subtitle[b-13rr3u8g4q] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.header-actions[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════
   Form Sections (shared card style)
   ═══════════════════════════════════ */
.form-section[b-13rr3u8g4q] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 28px 32px 32px;
    box-shadow: var(--g-shadow-xs);
    margin: 24px 0px;
}

/* ── Section Header ── */
.section-header[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: -28px -32px 28px;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--g-border);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
}

.contacts-section .section-header[b-13rr3u8g4q] {
    border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
}

.section-title-group[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-brand);
    flex-shrink: 0;
}

.section-icon.contact-icon[b-13rr3u8g4q] {
    color: var(--g-brand);
}

.section-title[b-13rr3u8g4q] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
}

/* ── Status Toggle ── */
.status-toggle-wrap[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--g-gray-100);
    padding: 6px 14px;
    border-radius: var(--g-radius-md);
}

.status-label[b-13rr3u8g4q] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.toggle[b-13rr3u8g4q] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    cursor: pointer;
}

.toggle input[b-13rr3u8g4q] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider[b-13rr3u8g4q] {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--g-gray-300);
    transition: background 0.25s ease;
}

.toggle-slider[b-13rr3u8g4q]::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: var(--g-bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.toggle input:checked + .toggle-slider[b-13rr3u8g4q] {
    background: var(--sidebar-active-bg);
}

.toggle input:checked + .toggle-slider[b-13rr3u8g4q]::before {
    transform: translateX(18px);
}

.toggle input:focus-visible + .toggle-slider[b-13rr3u8g4q] {
    box-shadow: var(--g-focus-shadow);
}

.status-text[b-13rr3u8g4q] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.06em;
}

.status-text.active[b-13rr3u8g4q] {
    color: var(--g-success-text);
}

.status-text.inactive[b-13rr3u8g4q] {
    color: var(--g-text-muted);
}

/* ═══════════════════════════════
   Form Controls
   ═══════════════════════════════ */
.form-group[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-13rr3u8g4q] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    line-height: 1.4;
}

.required[b-13rr3u8g4q] {
    color: var(--g-error);
    font-weight: var(--g-fw-medium);
}

.label-hint[b-13rr3u8g4q] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-muted);
}

.form-input[b-13rr3u8g4q] {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
    transition: border-color var(--g-transition),
               box-shadow var(--g-transition);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.form-input[b-13rr3u8g4q]::placeholder {
    color: var(--g-text-muted);
    font-weight: var(--g-fw-normal);
}

.form-input:hover[b-13rr3u8g4q] {
    border-color: var(--g-gray-300);
}

.form-input:focus[b-13rr3u8g4q] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.form-input.input-error[b-13rr3u8g4q] {
    border-color: var(--g-error);
}

.form-input.input-error:focus[b-13rr3u8g4q] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error[b-13rr3u8g4q] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g-error);
    margin-top: 2px;
}

/* Select dropdown */
.form-select[b-13rr3u8g4q] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}

/* Radio Group */
.radio-group[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 42px;
}

.radio-option[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--g-fs-sm);
    color: var(--g-text-label);
    white-space: nowrap;
}

.radio-option input[type="radio"][b-13rr3u8g4q] {
    width: 16px;
    height: 16px;
    accent-color: var(--g-info);
    cursor: pointer;
    margin: 0;
}

.radio-label[b-13rr3u8g4q] {
    font-weight: var(--g-fw-medium);
}
.identity-grid[b-13rr3u8g4q] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

.identity-fields[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.identity-row-2col[b-13rr3u8g4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-hint[b-13rr3u8g4q] {
    font-size: 0.7rem;
    color: var(--g-text-muted);
    font-weight: 400;
}

.form-hint-error[b-13rr3u8g4q] {
    color: var(--g-error);
}

/* Logo Upload */
.logo-upload-group[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logo-dropzone[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 212px;
    border: 2px dashed var(--g-gray-300);
    border-radius: var(--g-radius-xl);
    background: var(--g-gray-50);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    padding: 24px;
}

.logo-dropzone:hover[b-13rr3u8g4q] {
    border-color: var(--g-brand);
    background: var(--g-info-bg);
}

.upload-icon[b-13rr3u8g4q] {
    color: var(--g-text-muted);
}

.logo-dropzone:hover .upload-icon[b-13rr3u8g4q] {
    color: var(--g-brand);
}

.upload-text[b-13rr3u8g4q] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
}

.upload-text.change[b-13rr3u8g4q] {
    font-size: var(--g-fs-sm);
}

.upload-hint[b-13rr3u8g4q] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-normal);
}

.upload-filename[b-13rr3u8g4q] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-medium);
    color: var(--g-gray-800);
    word-break: break-all;
    text-align: center;
}

.logo-preview-img[b-13rr3u8g4q] {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    border-radius: var(--g-radius-md);
}

.upload-error[b-13rr3u8g4q] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    color: var(--g-error);
    margin-top: 4px;
}

/* ═══════════════════════════════
   Section 2: Contacts
   ═══════════════════════════════ */
.form-section.contacts-section[b-13rr3u8g4q] {
    background: var(--g-gray-50);
}

.btn-add-contact[b-13rr3u8g4q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 22px;
    border: 1px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-add-contact:hover[b-13rr3u8g4q] {
    background: var(--g-info-bg);
}

.btn-add-contact:focus-visible[b-13rr3u8g4q] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
}

.contacts-list[b-13rr3u8g4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Contact Card */
.contact-card[b-13rr3u8g4q] {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 20px 24px 24px;
    background: var(--g-bg-card);
}

.contact-card .form-input[b-13rr3u8g4q] {
    background: var(--g-bg-card);
}

.contact-card-header[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.stakeholder-badge[b-13rr3u8g4q] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.08em;
    color: var(--g-brand);
    text-transform: uppercase;
}

.btn-remove-contact[b-13rr3u8g4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-remove-contact:hover[b-13rr3u8g4q] {
    color: var(--g-error);
    border-color: var(--g-error-border);
    background: var(--g-error-bg);
}

.contact-fields[b-13rr3u8g4q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-row-2col[b-13rr3u8g4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ═══════════════════════════════
   Success Popup & Overlay
   ═══════════════════════════════ */
[b-13rr3u8g4q] .overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-13rr3u8g4q 0.2s ease;
}

[b-13rr3u8g4q] .success-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 360px;
    max-width: 440px;
    animation: popIn-b-13rr3u8g4q 0.25s ease;
}

[b-13rr3u8g4q] .success-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--g-success-bg);
    color: var(--g-success);
    margin: 0 auto 20px;
}

[b-13rr3u8g4q] .success-title {
    font-size: var(--g-fs-section-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

[b-13rr3u8g4q] .success-message {
    font-size: var(--g-fs-body);
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

[b-13rr3u8g4q] .btn-success-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 40px;
    border: none;
    border-radius: var(--g-radius-md);
    background:var(--sidebar-active-bg);
    color: var(--g-bg-card);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: opacity var(--g-transition),
               box-shadow var(--g-transition);
    box-shadow: 0 3px 5px -1px var(--g-primary-shadow),
                0 5px 12px -4px var(--g-primary-shadow-deep);
}

[b-13rr3u8g4q] .btn-success-ok:hover {
    opacity: 0.92;
    box-shadow: 0 4px 8px -1px rgba(26, 115, 232, 0.25),
                0 6px 16px -4px rgba(26, 115, 232, 0.35);
}

@keyframes fadeIn-b-13rr3u8g4q {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn-b-13rr3u8g4q {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ═══════════════════════════════
   Responsive Design
   ═══════════════════════════════ */

/* Tablet: ≤ 1024px */
@media (max-width: 1024px) {
    .register-page[b-13rr3u8g4q] {
        padding: 0;
    }

    .form-section[b-13rr3u8g4q] {
        margin: 16px;
        padding: 24px;
    }

    .identity-grid[b-13rr3u8g4q] {
        grid-template-columns: 1fr 280px;
        gap: 24px;
    }

    .contacts-list[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
    }

    .contact-card[b-13rr3u8g4q] {
        padding: 16px 20px 20px;
    }

    .contact-row-2col[b-13rr3u8g4q] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    .form-section[b-13rr3u8g4q] {
        margin: 16px 8px;
        padding: 24px 20px;
    }

    .section-header[b-13rr3u8g4q] {
        padding: 24px 20px 16px;
        margin: -24px -20px 24px;
    }

    .identity-grid[b-13rr3u8g4q] {
        grid-template-columns: 1fr 260px;
        gap: 20px;
    }

    .contacts-list[b-13rr3u8g4q] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .contact-card[b-13rr3u8g4q] {
        padding: 16px 16px 20px;
    }

    .contact-row-2col[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .page-header[b-13rr3u8g4q] {
        padding: 14px 20px;
    }
}

/* Small tablet / large phone: ≤ 768px */
@media (max-width: 768px) {
    .register-page[b-13rr3u8g4q] {
        gap: 0;
        padding: 0;
    }

    .page-header[b-13rr3u8g4q] {
        flex-direction: row;
        gap: 12px;
    }

    .header-actions[b-13rr3u8g4q] {
        width: 100%;
    }

    .g-btn-cancel[b-13rr3u8g4q],
    .g-btn-primary[b-13rr3u8g4q] {
        flex: 1;
        width:100%;
        justify-content: center;
    }

    .form-section[b-13rr3u8g4q] {
        padding: 20px 16px 24px;
        border-radius: var(--g-radius-lg);
        margin: 12px;
    }

    .section-header[b-13rr3u8g4q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin: -20px -16px 20px;
        padding: 20px 16px 16px;
    }

    .identity-grid[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .identity-row-2col[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
    }

    .logo-dropzone[b-13rr3u8g4q] {
        min-height: 140px;
    }

    .radio-group[b-13rr3u8g4q] {
        gap: 10px;
    }

    .contact-card[b-13rr3u8g4q] {
        max-width: 100%;
        padding: 16px;
    }

    .contacts-list[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
    }

    .contact-row-2col[b-13rr3u8g4q] {
        grid-template-columns: 1fr;
    }

    .status-toggle-wrap[b-13rr3u8g4q] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Phone: ≤ 480px */
@media (max-width: 480px) {
    .register-page[b-13rr3u8g4q] {
        padding: 0;
    }

    .page-title[b-13rr3u8g4q] {
        font-size: var(--g-fs-page-title, 1.25rem);
    }

    .form-section[b-13rr3u8g4q] {
        padding: 16px 12px 20px;
        margin: 8px;
    }

    .section-header[b-13rr3u8g4q] {
        margin: -16px -12px 16px;
        padding: 16px 12px 12px;
    }

    .section-title[b-13rr3u8g4q] {
        font-size: var(--g-fs-body, 0.875rem);
    }

    .g-btn-cancel[b-13rr3u8g4q],
    .g-btn-primary[b-13rr3u8g4q] {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    .radio-group[b-13rr3u8g4q] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Components/Pages/Admin/Targets/CreateTarget.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Create Target Level Page
   ═══════════════════════════════════════ */

.ct-page[b-rxa41ey8yq] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Header ── */
.ct-header[b-rxa41ey8yq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 65px;
    z-index: 10;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 32px;
    transition: box-shadow 0.2s ease;
}

.ct-title[b-rxa41ey8yq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}

.ct-subtitle[b-rxa41ey8yq] {
    font-size: 0.8125rem;
    color: var(--g-text-secondary);
    margin: 0;
}

.ct-header-actions[b-rxa41ey8yq] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ct-btn-cancel, ct-btn-save → uses global .g-btn-cancel, .g-btn-primary */

/* ── Alerts ── */
.ct-alert[b-rxa41ey8yq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--g-radius-lg);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ct-alert-error[b-rxa41ey8yq] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
    border: 1px solid var(--g-error-border);
}

.ct-alert-success[b-rxa41ey8yq] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
    border: 1px solid var(--g-success-border);
}

/* ── Cards ── */
.ct-card[b-rxa41ey8yq] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: hidden;
}

.ct-card-header[b-rxa41ey8yq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
     border-bottom: 1px solid var(--g-border-card);
}

.ct-card-icon[b-rxa41ey8yq] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-lg);
    background: linear-gradient(310deg, rgb(33, 82, 255), rgb(33, 212, 253));
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(33, 82, 255, 0.25);
}

.ct-card-icon-green[b-rxa41ey8yq] {
    background: linear-gradient(310deg, #059669, #34d399);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.ct-card-icon-indigo[b-rxa41ey8yq] {
    background: linear-gradient(310deg, #6366f1, #a78bfa);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.ct-card-title[b-rxa41ey8yq] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 0 2px;
}

.ct-card-desc[b-rxa41ey8yq] {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    margin: 0;
}

.ct-card-body[b-rxa41ey8yq] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Fields ── */
.ct-field[b-rxa41ey8yq] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ct-field-wide[b-rxa41ey8yq] {
    max-width: 480px;
}

.ct-label[b-rxa41ey8yq] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ct-label-icon[b-rxa41ey8yq] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
}

.ct-req[b-rxa41ey8yq] {
    color: var(--g-error);
}

.ct-input[b-rxa41ey8yq],
[b-rxa41ey8yq] .ct-input {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    color: var(--g-text-heading); 
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.ct-input[b-rxa41ey8yq]::placeholder,
[b-rxa41ey8yq] .ct-input::placeholder {
    color: var(--g-text-muted);
}

.ct-input:focus[b-rxa41ey8yq],
[b-rxa41ey8yq] .ct-input:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

[b-rxa41ey8yq] .ct-input.invalid,
[b-rxa41ey8yq] .ct-input.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-rxa41ey8yq] .ct-input.modified.valid {
    border-color: var(--g-success);
}

[b-rxa41ey8yq] .ct-field-error {
    font-size: 0.75rem;
    color: var(--g-error-text);
    margin-top: 2px;
}

.ct-hint[b-rxa41ey8yq] {
    font-size: 0.6875rem;
    color: var(--g-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

/* ── Input with suffix ── */
.ct-input-wrap[b-rxa41ey8yq] {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-input-wrap .ct-input[b-rxa41ey8yq],
.ct-input-wrap[b-rxa41ey8yq]  .ct-input {
    padding-right: 52px;
}

.ct-input-suffix[b-rxa41ey8yq] {
    position: absolute;
    right: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* ── Input pair (side by side) ── */
.ct-input-pair[b-rxa41ey8yq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Toggle ── */
.ct-toggle-row[b-rxa41ey8yq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.ct-toggle[b-rxa41ey8yq] {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.ct-toggle input[b-rxa41ey8yq] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ct-toggle-track[b-rxa41ey8yq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-gray-300);
    border-radius: 24px;
    transition: background 0.2s ease;
}

.ct-toggle-track[b-rxa41ey8yq]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g-bg-card);
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ct-toggle input:checked + .ct-toggle-track[b-rxa41ey8yq] {
    background: var(--g-success);
}

.ct-toggle input:checked + .ct-toggle-track[b-rxa41ey8yq]::before {
    transform: translateX(20px);
}

.ct-toggle-text[b-rxa41ey8yq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-muted);
}

.ct-toggle-text.on[b-rxa41ey8yq] {
    color: var(--g-success-text);
}

/* ── Conversion Grid ── */
.ct-conversion-grid[b-rxa41ey8yq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ct-conv-card[b-rxa41ey8yq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-border-card);
    background: var(--g-gray-50);
    transition: box-shadow 0.15s ease;
}

.ct-conv-card:hover[b-rxa41ey8yq] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

 

.ct-conv-interviews[b-rxa41ey8yq] {
    border-left: none;
}

 

.ct-conv-icon[b-rxa41ey8yq] {
    font-size: 1.125rem;
    line-height: 1;
}

.ct-conv-quality .ct-conv-icon[b-rxa41ey8yq] {
    color: var(--g-info);
}

.ct-conv-interviews .ct-conv-icon[b-rxa41ey8yq] {
    color: var(--g-orange);
}

.ct-conv-closures .ct-conv-icon[b-rxa41ey8yq] {
    color: var(--g-success);
}

.ct-conv-title[b-rxa41ey8yq] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.01em;
}

/* ── Live Preview Strip ── */
.ct-preview-strip[b-rxa41ey8yq] {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.ct-preview-item[b-rxa41ey8yq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    text-align: center;
}

.ct-preview-divider[b-rxa41ey8yq] {
    width: 1px;
    background: var(--g-border-card);
    align-self: stretch;
}

.ct-preview-label[b-rxa41ey8yq] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ct-preview-num[b-rxa41ey8yq] {
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: 800;
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}

.ct-preview-unit[b-rxa41ey8yq] {
    font-size: 0.6875rem;
    color: var(--g-text-muted);
    font-weight: 500;
}

.ct-preview-highlight .ct-preview-num[b-rxa41ey8yq] {
    color: var(--g-success-text);
}

.ct-preview-highlight .ct-preview-unit[b-rxa41ey8yq] {
    color: var(--g-success-text);
}

/* ── Responsive ── */
@media (max-width: 768px) {
   .ct-header[b-rxa41ey8yq] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .ct-header-actions[b-rxa41ey8yq] {
        width: 100%;
    }

    .g-btn-cancel[b-rxa41ey8yq],
    .g-btn-primary[b-rxa41ey8yq] {
        flex: 1;
        width: 100%; 
        justify-content: center;
    }

    .ct-input-pair[b-rxa41ey8yq] {
        grid-template-columns: 1fr;
    }

    .ct-conversion-grid[b-rxa41ey8yq] {
        grid-template-columns: 1fr;
    }

    .ct-preview-strip[b-rxa41ey8yq] {
        flex-wrap: wrap;
    }

    .ct-preview-item[b-rxa41ey8yq] {
        flex: 1 1 40%;
    }

    .ct-preview-divider[b-rxa41ey8yq] {
        display: none;
    }

    .ct-card-header[b-rxa41ey8yq] {
        padding: 16px 18px;
    }

    .ct-card-body[b-rxa41ey8yq] {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .ct-preview-item[b-rxa41ey8yq] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Admin/Targets/EditTarget.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Create Target Level Page
   ═══════════════════════════════════════ */

.ct-page[b-4tb4gyl5fs] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Header ── */
.ct-header[b-4tb4gyl5fs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 65px;
    z-index: 10;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 32px;
    transition: box-shadow 0.2s ease;
}

.ct-title[b-4tb4gyl5fs] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}

.ct-subtitle[b-4tb4gyl5fs] {
    font-size: 0.8125rem;
    color: var(--g-text-secondary);
    margin: 0;
}

.ct-header-actions[b-4tb4gyl5fs] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ct-btn-cancel, ct-btn-save → uses global .g-btn-cancel, .g-btn-primary */

/* ── Alerts ── */
.ct-alert[b-4tb4gyl5fs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--g-radius-lg);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ct-alert-error[b-4tb4gyl5fs] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
    border: 1px solid var(--g-error-border);
}

.ct-alert-success[b-4tb4gyl5fs] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
    border: 1px solid var(--g-success-border);
}

/* ── Cards ── */
.ct-card[b-4tb4gyl5fs] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: hidden;
}

.ct-card-header[b-4tb4gyl5fs] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
     border-bottom: 1px solid var(--g-border-card);
}

.ct-card-icon[b-4tb4gyl5fs] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-lg);
    background: linear-gradient(310deg, rgb(33, 82, 255), rgb(33, 212, 253));
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(33, 82, 255, 0.25);
}

.ct-card-icon-green[b-4tb4gyl5fs] {
    background: linear-gradient(310deg, #059669, #34d399);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.ct-card-icon-indigo[b-4tb4gyl5fs] {
    background: linear-gradient(310deg, #6366f1, #a78bfa);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

.ct-card-title[b-4tb4gyl5fs] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 0 2px;
}

.ct-card-desc[b-4tb4gyl5fs] {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    margin: 0;
}

.ct-card-body[b-4tb4gyl5fs] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Fields ── */
.ct-field[b-4tb4gyl5fs] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ct-field-wide[b-4tb4gyl5fs] {
    max-width: 480px;
}

.ct-label[b-4tb4gyl5fs] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ct-label-icon[b-4tb4gyl5fs] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
}

.ct-req[b-4tb4gyl5fs] {
    color: var(--g-error);
}

.ct-input[b-4tb4gyl5fs],
[b-4tb4gyl5fs] .ct-input {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    color: var(--g-text-heading); 
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.ct-input[b-4tb4gyl5fs]::placeholder,
[b-4tb4gyl5fs] .ct-input::placeholder {
    color: var(--g-text-muted);
}

.ct-input:focus[b-4tb4gyl5fs],
[b-4tb4gyl5fs] .ct-input:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

[b-4tb4gyl5fs] .ct-input.invalid,
[b-4tb4gyl5fs] .ct-input.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-4tb4gyl5fs] .ct-input.modified.valid {
    border-color: var(--g-success);
}

[b-4tb4gyl5fs] .ct-field-error {
    font-size: 0.75rem;
    color: var(--g-error-text);
    margin-top: 2px;
}

.ct-hint[b-4tb4gyl5fs] {
    font-size: 0.6875rem;
    color: var(--g-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}

/* ── Input with suffix ── */
.ct-input-wrap[b-4tb4gyl5fs] {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-input-wrap .ct-input[b-4tb4gyl5fs],
.ct-input-wrap[b-4tb4gyl5fs]  .ct-input {
    padding-right: 52px;
}

.ct-input-suffix[b-4tb4gyl5fs] {
    position: absolute;
    right: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* ── Input pair (side by side) ── */
.ct-input-pair[b-4tb4gyl5fs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Toggle ── */
.ct-toggle-row[b-4tb4gyl5fs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.ct-toggle[b-4tb4gyl5fs] {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.ct-toggle input[b-4tb4gyl5fs] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ct-toggle-track[b-4tb4gyl5fs] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-gray-300);
    border-radius: 24px;
    transition: background 0.2s ease;
}

.ct-toggle-track[b-4tb4gyl5fs]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g-bg-card);
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ct-toggle input:checked + .ct-toggle-track[b-4tb4gyl5fs] {
    background: var(--g-success);
}

.ct-toggle input:checked + .ct-toggle-track[b-4tb4gyl5fs]::before {
    transform: translateX(20px);
}

.ct-toggle-text[b-4tb4gyl5fs] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-muted);
}

.ct-toggle-text.on[b-4tb4gyl5fs] {
    color: var(--g-success-text);
}

/* ── Conversion Grid ── */
.ct-conversion-grid[b-4tb4gyl5fs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ct-conv-card[b-4tb4gyl5fs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-border-card);
    background: var(--g-gray-50);
    transition: box-shadow 0.15s ease;
}

.ct-conv-card:hover[b-4tb4gyl5fs] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
 

.ct-conv-interviews[b-4tb4gyl5fs] {
    border-left: none;
}

 

.ct-conv-icon[b-4tb4gyl5fs] {
    font-size: 1.125rem;
    line-height: 1;
}

.ct-conv-quality .ct-conv-icon[b-4tb4gyl5fs] {
    color: var(--g-info);
}

.ct-conv-interviews .ct-conv-icon[b-4tb4gyl5fs] {
    color: var(--g-orange);
}

.ct-conv-closures .ct-conv-icon[b-4tb4gyl5fs] {
    color: var(--g-success);
}

.ct-conv-title[b-4tb4gyl5fs] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.01em;
}

/* ── Live Preview Strip ── */
.ct-preview-strip[b-4tb4gyl5fs] {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.ct-preview-item[b-4tb4gyl5fs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    text-align: center;
}

.ct-preview-divider[b-4tb4gyl5fs] {
    width: 1px;
    background: var(--g-border-card);
    align-self: stretch;
}

.ct-preview-label[b-4tb4gyl5fs] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ct-preview-num[b-4tb4gyl5fs] {
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: 800;
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}

.ct-preview-unit[b-4tb4gyl5fs] {
    font-size: 0.6875rem;
    color: var(--g-text-muted);
    font-weight: 500;
}

.ct-preview-highlight .ct-preview-num[b-4tb4gyl5fs] {
    color: var(--g-success-text);
}

.ct-preview-highlight .ct-preview-unit[b-4tb4gyl5fs] {
    color: var(--g-success-text);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ct-header[b-4tb4gyl5fs] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .ct-header-actions[b-4tb4gyl5fs] {
        width: 100%;
    }

    .g-btn-cancel[b-4tb4gyl5fs],
    .g-btn-primary[b-4tb4gyl5fs] {
        flex: 1;
        width: 100%;
        justify-content: center;
    }

    .ct-input-pair[b-4tb4gyl5fs] {
        grid-template-columns: 1fr;
    }

    .ct-conversion-grid[b-4tb4gyl5fs] {
        grid-template-columns: 1fr;
    }

    .ct-preview-strip[b-4tb4gyl5fs] {
        flex-wrap: wrap;
    }

    .ct-preview-item[b-4tb4gyl5fs] {
        flex: 1 1 40%;
    }

    .ct-preview-divider[b-4tb4gyl5fs] {
        display: none;
    }

    .ct-card-header[b-4tb4gyl5fs] {
        padding: 16px 18px;
    }

    .ct-card-body[b-4tb4gyl5fs] {
        padding: 18px;
    }
}

@media (max-width: 640px) {
    .et-editor-title[b-4tb4gyl5fs] {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .ct-preview-item[b-4tb4gyl5fs] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Admin/Targets/TargetsList.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Targets Level List Page
   ═══════════════════════════════════════ */

.targets-page[b-xgnxyf2t9a] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tl-header[b-xgnxyf2t9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 20px 20px;
}

.tl-title[b-xgnxyf2t9a] {
    font-size: 1.25rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.tl-subtitle[b-xgnxyf2t9a] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

/* btn-add-target → uses global .g-btn-primary */

/* ── Table ── */
.tl-table-wrap[b-xgnxyf2t9a] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: visible;
}

.tl-table[b-xgnxyf2t9a] {
    width: 100%;
    border-collapse: collapse;
}

.tl-table thead th[b-xgnxyf2t9a] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-border-light);
    background: var(--g-gray-50);
    white-space: nowrap;
    text-align: left;
}

.tl-table tbody td[b-xgnxyf2t9a] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--g-border-light);
    font-size: 0.8125rem;
    color: var(--g-text-body);
    vertical-align: middle;
}

.tl-table tbody tr:last-child td[b-xgnxyf2t9a] {
    border-bottom: none;
}

.tl-table tbody tr:hover[b-xgnxyf2t9a] {
    background: var(--g-gray-50);
}

.tl-level-name[b-xgnxyf2t9a] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.tl-metric[b-xgnxyf2t9a] {
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    font-variant-numeric: tabular-nums;
}

.tl-closures[b-xgnxyf2t9a] {
    color: var(--g-success-text);
}

/* ── Status ── */
.tl-status-badge[b-xgnxyf2t9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    padding: 3px 10px;
    border-radius: 20px;
}

.tl-status-badge.active[b-xgnxyf2t9a] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

.tl-status-badge.inactive[b-xgnxyf2t9a] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.tl-status-dot[b-xgnxyf2t9a] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.tl-status-badge.active .tl-status-dot[b-xgnxyf2t9a] {
    background: var(--g-success);
}

.tl-status-badge.inactive .tl-status-dot[b-xgnxyf2t9a] {
    background: var(--g-error);
}

.tl-default-badge[b-xgnxyf2t9a] {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    margin-left: 8px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
     vertical-align: middle;
}

/* ── Actions ── */
.tl-actions[b-xgnxyf2t9a] {
    display: flex;
    gap: 4px;
}

.tl-dropdown-wrap[b-xgnxyf2t9a] {
    position: relative;
}

/* tl-btn-icon → uses global .g-btn-icon */

.tl-action-dropdown[b-xgnxyf2t9a] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 120px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    padding: 4px 0;
    margin-top: 4px;
}

.tl-action-item[b-xgnxyf2t9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--g-text-body);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.tl-action-item:hover[b-xgnxyf2t9a] {
    background: var(--g-gray-50);
}

.tl-action-item:focus-visible[b-xgnxyf2t9a] {
    outline: 2px solid var(--g-focus-border);
    outline-offset: -2px;
    border-radius: var(--g-radius-sm);
}

.tl-action-item svg[b-xgnxyf2t9a] {
    color: var(--g-text-secondary);
    flex-shrink: 0;
}

.tl-action-delete[b-xgnxyf2t9a] {
    color: #dc2626 !important;
}

.tl-action-delete:hover[b-xgnxyf2t9a] {
    background: #fef2f2 !important;
}

.tl-action-delete svg[b-xgnxyf2t9a] {
    color: #dc2626 !important;
}

/* ── Mobile Cards (hidden on desktop) ── */
.tl-cards-wrap[b-xgnxyf2t9a] {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.tl-card[b-xgnxyf2t9a] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-lg);
    padding: 14px;
}

.tl-card-top[b-xgnxyf2t9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tl-card-top > div:first-child[b-xgnxyf2t9a] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-card-metrics[b-xgnxyf2t9a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tl-card-metric[b-xgnxyf2t9a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--g-gray-50);
    border-radius: var(--g-radius-md);
    padding: 8px 10px;
}

.tl-card-metric-label[b-xgnxyf2t9a] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tl-card-metric-value[b-xgnxyf2t9a] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    font-variant-numeric: tabular-nums;
}

.tl-card-metric-unit[b-xgnxyf2t9a] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted);
}

.tl-card-metric-highlight .tl-card-metric-value[b-xgnxyf2t9a] {
    color: var(--g-success-text);
}

/* ── Responsive: 1024–1280px ── */
@media (max-width: 1280px) {
    .tl-table-wrap[b-xgnxyf2t9a] {
        overflow-x: auto;
    }

    .tl-table thead th[b-xgnxyf2t9a],
    .tl-table tbody td[b-xgnxyf2t9a] {
        padding: 12px 12px;
        font-size: 0.75rem;
    }

    .tl-header[b-xgnxyf2t9a] {
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    .tl-title[b-xgnxyf2t9a] {
        font-size: var(--g-fs-card-title, 1rem);
    }

    .tl-subtitle[b-xgnxyf2t9a] {
        font-size: 0.75rem;
    }

    .tl-table thead th[b-xgnxyf2t9a] {
        font-size: 0.625rem;
        padding: 10px 10px;
    }

    .tl-table tbody td[b-xgnxyf2t9a] {
        font-size: 0.6875rem;
        padding: 10px 10px;
    }

    .tl-level-name[b-xgnxyf2t9a] {
        font-size: 0.75rem;
    }

    .tl-metric[b-xgnxyf2t9a] {
        font-size: 0.75rem;
    }

    .tl-status-badge[b-xgnxyf2t9a] {
        font-size: 0.625rem;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tl-header[b-xgnxyf2t9a] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .tl-table-wrap[b-xgnxyf2t9a] {
        display: none;
    }

    .tl-cards-wrap[b-xgnxyf2t9a] {
        display: flex;
    }
}

@media (max-width: 480px) {
    .tl-card-metrics[b-xgnxyf2t9a] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Delete Confirmation Modal ── */
.tl-modal-overlay[b-xgnxyf2t9a] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tl-fade-in-b-xgnxyf2t9a 0.2s ease;
}

.tl-modal[b-xgnxyf2t9a] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 32px 28px 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: tl-scale-in-b-xgnxyf2t9a 0.2s ease;
}

.tl-modal-icon[b-xgnxyf2t9a] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--g-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--g-error);
}

.tl-modal-title[b-xgnxyf2t9a] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
    font-family: var(--g-font-sans);
}

.tl-modal-text[b-xgnxyf2t9a] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-body);
    margin: 0 0 24px;
    line-height: 1.5;
    font-family: var(--g-font-sans);
}

.tl-modal-actions[b-xgnxyf2t9a] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.tl-modal-btn[b-xgnxyf2t9a] {
    padding: 9px 24px;
    border-radius: var(--g-radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--g-font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.tl-modal-btn-cancel[b-xgnxyf2t9a] {
    background: var(--g-bg-section);
    color: var(--g-text-secondary);
    border: 1.5px solid var(--g-border);
}

.tl-modal-btn-cancel:hover[b-xgnxyf2t9a] {
    background: var(--g-border-light);
}

.tl-modal-btn-delete[b-xgnxyf2t9a] {
    background: var(--g-error);
    color: #fff;
}

.tl-modal-btn-delete:hover[b-xgnxyf2t9a] {
    background: var(--g-error-text);
}

@keyframes tl-fade-in-b-xgnxyf2t9a {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tl-scale-in-b-xgnxyf2t9a {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/Pages/Admin/Users/CreateUser.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Create User Page Styles
   ═══════════════════════════════════════ */

.create-user[b-ilrez42ref] {
    font-family:  var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Page Header (sticky) ── */
.cu-header-sticky[b-ilrez42ref] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 65px;
    z-index: 10;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 32px;
    transition: box-shadow 0.2s ease;
}

.cu-title[b-ilrez42ref] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}

.cu-subtitle[b-ilrez42ref] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

.cu-header-actions[b-ilrez42ref] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* btn-cancel, btn-create → uses global .g-btn-cancel, .g-btn-primary */

/* ══════════════════════════════════
   Section Cards — bordered containers
   ══════════════════════════════════ */
.cu-section-card[b-ilrez42ref] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: hidden;
}

.cu-section-header[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
     border-bottom: 1px solid var(--g-border-card);
}

.cu-section-number[b-ilrez42ref] {
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-md); 
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cu-section-title[b-ilrez42ref] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 ;
}

.cu-section-desc[b-ilrez42ref] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    margin: 0;
}

.cu-section-body[b-ilrez42ref] {
    padding: 24px;
}

/* ══════════════════════════════════
   Form Controls
   ══════════════════════════════════ */
.cu-form-grid[b-ilrez42ref] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.cu-form-grid-single[b-ilrez42ref] {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.cu-field[b-ilrez42ref] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cu-field-spacer[b-ilrez42ref] {
    visibility: hidden;
}

.cu-label[b-ilrez42ref] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.required[b-ilrez42ref] {
    color: var(--g-error);
}

.cu-input[b-ilrez42ref],
[b-ilrez42ref] .cu-input {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.cu-input[b-ilrez42ref]::placeholder,
[b-ilrez42ref] .cu-input::placeholder {
    color: var(--g-text-muted);
}

.cu-input:focus[b-ilrez42ref],
[b-ilrez42ref] .cu-input:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.cu-input[readonly][b-ilrez42ref],
[b-ilrez42ref] .cu-input[readonly] {
    background: var(--g-gray-50);
    color: var(--g-text-label);
    font-family: var(--g-font-mono);
    letter-spacing: 0.04em;
}

[b-ilrez42ref] .cu-input.invalid,
[b-ilrez42ref] .cu-input.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-ilrez42ref] .cu-input.modified.valid {
    border-color: var(--g-success);
}

.cu-select[b-ilrez42ref],
[b-ilrez42ref] .cu-select {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
    width: 100%;
    box-sizing: border-box;
}

.cu-select:focus[b-ilrez42ref],
[b-ilrez42ref] .cu-select:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

[b-ilrez42ref] .cu-select.invalid,
[b-ilrez42ref] .cu-select.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-ilrez42ref] .cu-select.modified.valid {
    border-color: var(--g-success);
}

[b-ilrez42ref] .cu-field-error {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: 2px;
}

/* ── Input Group (password + regen) ── */
.cu-input-group[b-ilrez42ref] {
    display: flex;
    gap: 8px;
}

.cu-input-group .cu-input[b-ilrez42ref] {
    flex: 1;
}

/* btn-regen → uses global .g-btn-regen */

/* ── Toggle Switch ── */
.cu-toggle-row[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.cu-toggle[b-ilrez42ref] {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.cu-toggle input[b-ilrez42ref] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cu-toggle-slider[b-ilrez42ref] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-gray-300);
    border-radius: 24px;
    transition: background 0.2s ease;
}

.cu-toggle-slider[b-ilrez42ref]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g-bg-card);
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cu-toggle input:checked + .cu-toggle-slider[b-ilrez42ref] {
      background:var(--sidebar-active-bg);
}

.cu-toggle input:checked + .cu-toggle-slider[b-ilrez42ref]::before {
    transform: translateX(20px);
}

.cu-toggle-label[b-ilrez42ref] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
}

.cu-toggle-label.active[b-ilrez42ref] {
    color: var(--g-success-text);
}

/* ── Checkbox Cards ── */
.cu-checkbox-grid[b-ilrez42ref] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.cu-checkbox-card[b-ilrez42ref] {
    background: var(--g-gray-50);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-lg);
    padding: 16px;
    transition: border-color 0.15s ease;
}

.cu-checkbox-card:hover[b-ilrez42ref] {
    border-color: var(--g-gray-300);
}

.cu-checkbox-label[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    cursor: pointer;
    margin-bottom: 6px;
}

.cu-checkbox-label input[type="checkbox"][b-ilrez42ref] {
    width: 17px;
    height: 17px;
    accent-color: var(--g-indigo);
    cursor: pointer;
    flex-shrink: 0;
}

.cu-hint[b-ilrez42ref] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
    padding-left: 27px;
    line-height: 1.4;
}

/* ══════════════════════════════════
   Performance Targets
   ══════════════════════════════════ */
.cu-field-hint[b-ilrez42ref] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 6px 0 0;
}

.cu-metrics-row[b-ilrez42ref] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    margin-top: 20px;
    overflow: hidden;
    background: var(--g-gray-50);
    
}

.cu-metric-col[b-ilrez42ref] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 12px;
    text-align: center;
}

.cu-metric-divider[b-ilrez42ref] {
    width: 1px;
    background: var(--g-border-card);
    align-self: stretch;
}

.cu-metric-label[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.cu-metric-value[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.cu-metric-value.closures[b-ilrez42ref] {
    color: var(--g-success-text);
}

.cu-metric-sub[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

.cu-metric-sub.closures[b-ilrez42ref] {
    color: var(--g-success-text);
}

/* ══════════════════════════════════
   Upload Zones
   ══════════════════════════════════ */
.cu-upload-grid[b-ilrez42ref] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cu-upload-zone[b-ilrez42ref] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cu-dropzone[b-ilrez42ref] {
    position: relative;
    display: block;
    border: 1.5px dashed var(--g-gray-300);
    border-radius: var(--g-radius-lg);
    padding: 28px 16px;
    text-align: center;
    background: var(--g-bg-card);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.cu-dropzone:hover[b-ilrez42ref] {
    border-color: var(--g-indigo-light);
    background: var(--g-gray-50);
}

.cu-drop-icon-wrap[b-ilrez42ref] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 10px;
}

.cu-drop-text[b-ilrez42ref] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 4px;
}

.cu-drop-link[b-ilrez42ref] {
    color: var(--g-indigo);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    text-decoration: none;
}

.cu-drop-link:hover[b-ilrez42ref] {
    text-decoration: underline;
}

.cu-drop-hint[b-ilrez42ref] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
}

.cu-dropzone[b-ilrez42ref]  input[type="file"],
.cu-file-input-hidden[b-ilrez42ref] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Preview inside dropzone ── */
.cu-dropzone-preview[b-ilrez42ref] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--g-brand);
    border-radius: var(--g-radius-lg);
    padding: 12px;
    text-align: center;
    background: var(--g-bg-card);
    min-height: 160px;
    overflow: hidden;
}

.cu-preview-img[b-ilrez42ref] {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
    border-radius: var(--g-radius-md);
}

.cu-preview-overlay[b-ilrez42ref] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
    border-radius: 0 0 var(--g-radius-lg) var(--g-radius-lg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cu-dropzone-preview:hover .cu-preview-overlay[b-ilrez42ref] {
    opacity: 1;
}

.cu-preview-change[b-ilrez42ref] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: #fff;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--g-radius-sm);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.cu-preview-change:hover[b-ilrez42ref] {
    background: rgba(255,255,255,0.35);
}

.cu-preview-remove[b-ilrez42ref] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.cu-preview-remove:hover[b-ilrez42ref] {
    background: rgba(239,68,68,0.7);
}

/* ── Uploaded File Info ── */
.cu-file-info[b-ilrez42ref] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--g-success-bg);
    border: 1px solid var(--g-success-border);
    border-radius: var(--g-radius-md);
}

.cu-file-details[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cu-file-icon[b-ilrez42ref] {
    font-size: 1.25rem;
    color: var(--g-success);
}

.cu-file-name[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cu-file-size[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
}

.cu-file-remove[b-ilrez42ref] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-muted);
    font-size: var(--g-fs-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cu-file-remove:hover[b-ilrez42ref] {
    background: var(--g-error-bg);
    color: var(--g-error);
}

.cu-file-preview[b-ilrez42ref] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-sm);
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
}

/* ══════════════════════════════════
   Permissions Section
   ══════════════════════════════════ */
.cu-section-header-between[b-ilrez42ref] {
    justify-content: space-between;
}

.cu-section-header-left[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Account Status Toggle (in header) ── */
.cu-status-toggle[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--g-gray-100);
    padding: 6px 14px;
    border-radius: var(--g-radius-md);
}

.cu-status-label[b-ilrez42ref] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.cu-status-text[b-ilrez42ref] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cu-status-text.active[b-ilrez42ref] {
    color: var(--g-success-text);
}

.cu-status-text.inactive[b-ilrez42ref] {
    color: var(--g-text-muted);
}

.cu-readonly-badge[b-ilrez42ref] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--g-indigo-bg);
    color: var(--g-indigo-dark);
    border: 1px solid var(--g-indigo-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
}

.cu-permissions-list[b-ilrez42ref] {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    padding:10px 12px;
}

.cu-perm-item[b-ilrez42ref] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-light);
    border-right: 1px solid var(--g-border-light);
    transition: background 0.1s ease;
}

.cu-perm-item:nth-child(even)[b-ilrez42ref] {
    border-right: none;
}

.cu-perm-item:nth-last-child(-n+2)[b-ilrez42ref] {
    border-bottom: none;
}

.cu-perm-item:hover[b-ilrez42ref] {
    background: var(--g-gray-50);
}

.cu-perm-info[b-ilrez42ref] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cu-perm-name[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin-bottom: 2px;
}

.cu-perm-desc[b-ilrez42ref] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-normal);
}

.cu-perm-status[b-ilrez42ref] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--g-fs-xxs);
    flex-shrink: 0;
}

.cu-perm-status.denied[b-ilrez42ref] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.cu-perm-status.granted[b-ilrez42ref] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 991px) {
    .cu-permissions-list[b-ilrez42ref] {
        grid-template-columns: 1fr;
    }

    .cu-perm-item[b-ilrez42ref] {
        border-right: none;
    }

    .cu-perm-item:nth-last-child(-n+2)[b-ilrez42ref] {
        border-bottom: 1px solid var(--g-border-light);
    }

    .cu-perm-item:last-child[b-ilrez42ref] {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .cu-header-sticky[b-ilrez42ref] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .cu-header-actions[b-ilrez42ref] {
        width: 100%;
    }

    .g-btn-cancel[b-ilrez42ref],
    .g-btn-primary[b-ilrez42ref] {
        flex: 1;
         width: 100%;
        justify-content: center;
    }

    .cu-form-grid[b-ilrez42ref],
    .cu-checkbox-grid[b-ilrez42ref] {
        grid-template-columns: 1fr;
    }

    .cu-form-grid-single[b-ilrez42ref] {
        max-width: 100%;
    }

    .cu-field-spacer[b-ilrez42ref] {
        display: none;
    }

    .cu-metrics-row[b-ilrez42ref] {
        flex-wrap: wrap;
    }

    .cu-metric-col[b-ilrez42ref] {
        flex: 1 1 40%;
    }

    .cu-metric-divider[b-ilrez42ref] {
        display: none;
    }

    .cu-upload-grid[b-ilrez42ref] {
        grid-template-columns: 1fr;
    }

    .cu-section-header[b-ilrez42ref] {
        padding: 16px 18px;
    }

    .cu-section-body[b-ilrez42ref] {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .cu-metric-col[b-ilrez42ref] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Admin/Users/EditUser.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Edit User Page Styles
   (Same structure as Create User)
   ═══════════════════════════════════════ */

.create-user[b-1ha6icnulz] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Page Header (sticky) ── */
.cu-header-sticky[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 65px;
    z-index: 10;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 32px;
    transition: box-shadow 0.2s ease;
}

.cu-title[b-1ha6icnulz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}

.cu-subtitle[b-1ha6icnulz] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

.cu-header-actions[b-1ha6icnulz] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* btn-cancel, btn-create → uses global .g-btn-cancel, .g-btn-primary */

/* ══════════════════════════════════
   Section Cards
   ══════════════════════════════════ */
.cu-section-card[b-1ha6icnulz] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    overflow: hidden;
}

.cu-section-header[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
     border-bottom: 1px solid var(--g-border-card);
}

.cu-section-number[b-1ha6icnulz] {
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-md); 
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cu-section-title[b-1ha6icnulz] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 ;
}

.cu-section-desc[b-1ha6icnulz] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    margin: 0;
}

.cu-section-body[b-1ha6icnulz] {
    padding: 24px;
}

/* ══════════════════════════════════
   Form Controls
   ══════════════════════════════════ */
.cu-form-grid[b-1ha6icnulz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.cu-form-grid-single[b-1ha6icnulz] {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.cu-field[b-1ha6icnulz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cu-field-spacer[b-1ha6icnulz] {
    visibility: hidden;
}

.cu-label[b-1ha6icnulz] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.required[b-1ha6icnulz] {
    color: var(--g-error);
}

.cu-input[b-1ha6icnulz],
[b-1ha6icnulz] .cu-input {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.cu-input[b-1ha6icnulz]::placeholder,
[b-1ha6icnulz] .cu-input::placeholder {
    color: var(--g-text-muted);
}

.cu-input:focus[b-1ha6icnulz],
[b-1ha6icnulz] .cu-input:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.cu-input[readonly][b-1ha6icnulz],
[b-1ha6icnulz] .cu-input[readonly] {
    background: var(--g-gray-50);
    color: var(--g-text-label);
    font-family: var(--g-font-mono);
    letter-spacing: 0.04em;
}

[b-1ha6icnulz] .cu-input.invalid,
[b-1ha6icnulz] .cu-input.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-1ha6icnulz] .cu-input.modified.valid {
    border-color: var(--g-success);
}

.cu-select[b-1ha6icnulz],
[b-1ha6icnulz] .cu-select {
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
    width: 100%;
    box-sizing: border-box;
}

.cu-select:focus[b-1ha6icnulz],
[b-1ha6icnulz] .cu-select:focus {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

[b-1ha6icnulz] .cu-select.invalid,
[b-1ha6icnulz] .cu-select.modified.invalid {
    border-color: var(--g-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-1ha6icnulz] .cu-select.modified.valid {
    border-color: var(--g-success);
}

[b-1ha6icnulz] .cu-field-error {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: 2px;
}

/* ── Input Group ── */
.cu-input-group[b-1ha6icnulz] {
    display: flex;
    gap: 8px;
}

.cu-input-group .cu-input[b-1ha6icnulz] {
    flex: 1;
}

/* btn-regen → uses global .g-btn-regen */

/* ── Toggle Switch ── */
.cu-toggle-row[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.cu-toggle[b-1ha6icnulz] {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.cu-toggle input[b-1ha6icnulz] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.cu-toggle-slider[b-1ha6icnulz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--g-gray-300);
    border-radius: 24px;
    transition: background 0.2s ease;
}

.cu-toggle-slider[b-1ha6icnulz]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g-bg-card);
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cu-toggle input:checked + .cu-toggle-slider[b-1ha6icnulz] {
     background:var(--sidebar-active-bg);
}

.cu-toggle input:checked + .cu-toggle-slider[b-1ha6icnulz]::before {
    transform: translateX(20px);
}

.cu-toggle-label[b-1ha6icnulz] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
}

.cu-toggle-label.active[b-1ha6icnulz] {
    color: var(--g-success-text);
}

/* ── Checkbox Cards ── */
.cu-checkbox-grid[b-1ha6icnulz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.cu-checkbox-card[b-1ha6icnulz] {
    background: var(--g-gray-50);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-lg);
    padding: 16px;
    transition: border-color 0.15s ease;
}

.cu-checkbox-card:hover[b-1ha6icnulz] {
    border-color: var(--g-gray-300);
}

.cu-checkbox-label[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    cursor: pointer;
    margin-bottom: 6px;
}

.cu-checkbox-label input[type="checkbox"][b-1ha6icnulz] {
    width: 17px;
    height: 17px;
    accent-color: var(--g-indigo);
    cursor: pointer;
    flex-shrink: 0;
}

.cu-hint[b-1ha6icnulz] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
    padding-left: 27px;
    line-height: 1.4;
}

/* ══════════════════════════════════
   Performance Targets
   ══════════════════════════════════ */
.cu-field-hint[b-1ha6icnulz] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 6px 0 0;
}

.cu-metrics-row[b-1ha6icnulz] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    margin-top: 20px;
    overflow: hidden;
    background: var(--g-gray-50);
}

.cu-metric-col[b-1ha6icnulz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 12px;
    text-align: center;
}

.cu-metric-divider[b-1ha6icnulz] {
    width: 1px;
    background: var(--g-border-card);
    align-self: stretch;
}

.cu-metric-label[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.cu-metric-value[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.cu-metric-value.closures[b-1ha6icnulz] {
    color: var(--g-success-text);
}

.cu-metric-sub[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

.cu-metric-sub.closures[b-1ha6icnulz] {
    color: var(--g-success-text);
}

/* ══════════════════════════════════
   Upload Zones
   ══════════════════════════════════ */
.cu-upload-grid[b-1ha6icnulz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cu-upload-zone[b-1ha6icnulz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cu-dropzone[b-1ha6icnulz] {
    position: relative;
    display: block;
    border: 1.5px dashed var(--g-gray-300);
    border-radius: var(--g-radius-lg);
    padding: 28px 16px;
    text-align: center;
    background: var(--g-bg-card);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.cu-dropzone:hover[b-1ha6icnulz] {
    border-color: var(--g-indigo-light);
    background: var(--g-gray-50);
}

.cu-drop-icon-wrap[b-1ha6icnulz] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 10px;
}

.cu-drop-text[b-1ha6icnulz] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 4px;
}

.cu-drop-link[b-1ha6icnulz] {
    color: var(--g-indigo);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    text-decoration: none;
}

.cu-drop-link:hover[b-1ha6icnulz] {
    text-decoration: underline;
}

.cu-drop-hint[b-1ha6icnulz] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
}

.cu-dropzone[b-1ha6icnulz]  input[type="file"],
.cu-file-input-hidden[b-1ha6icnulz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Preview inside dropzone ── */
.cu-dropzone-preview[b-1ha6icnulz] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--g-brand);
    border-radius: var(--g-radius-lg);
    padding: 12px;
    text-align: center;
    background: var(--g-bg-card);
    min-height: 160px;
    overflow: hidden;
}

.cu-preview-img[b-1ha6icnulz] {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
    border-radius: var(--g-radius-md);
}

.cu-preview-overlay[b-1ha6icnulz] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
    border-radius: 0 0 var(--g-radius-lg) var(--g-radius-lg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cu-dropzone-preview:hover .cu-preview-overlay[b-1ha6icnulz] {
    opacity: 1;
}

.cu-preview-change[b-1ha6icnulz] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: #fff;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--g-radius-sm);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.cu-preview-change:hover[b-1ha6icnulz] {
    background: rgba(255,255,255,0.35);
}

.cu-preview-remove[b-1ha6icnulz] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.cu-preview-remove:hover[b-1ha6icnulz] {
    background: rgba(239,68,68,0.7);
}

/* ── Uploaded File Info ── */
.cu-file-info[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--g-success-bg);
    border: 1px solid var(--g-success-border);
    border-radius: var(--g-radius-md);
}

.cu-file-details[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cu-file-icon[b-1ha6icnulz] {
    font-size: 1.25rem;
    color: var(--g-success);
}

.cu-file-name[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cu-file-size[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
}

.cu-file-remove[b-1ha6icnulz] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-muted);
    font-size: var(--g-fs-xs);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cu-file-remove:hover[b-1ha6icnulz] {
    background: var(--g-error-bg);
    color: var(--g-error);
}

.cu-file-preview[b-1ha6icnulz] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-sm);
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
}

/* ══════════════════════════════════
   Permissions Section
   ══════════════════════════════════ */
.cu-section-header-between[b-1ha6icnulz] {
    justify-content: space-between;
}

.cu-section-header-left[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cu-readonly-badge[b-1ha6icnulz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--g-indigo-bg);
    color: var(--g-indigo-dark);
    border: 1px solid var(--g-indigo-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
}

.cu-permissions-list[b-1ha6icnulz] {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    padding: 10px 12px;
}

.cu-perm-item[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-light);
    border-right: 1px solid var(--g-border-light);
    transition: background 0.1s ease;
}

.cu-perm-item:nth-child(even)[b-1ha6icnulz] {
    border-right: none;
}

.cu-perm-item:nth-last-child(-n+2)[b-1ha6icnulz] {
    border-bottom: none;
}

.cu-perm-item:hover[b-1ha6icnulz] {
    background: var(--g-gray-50);
}

.cu-perm-info[b-1ha6icnulz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cu-perm-name[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin-bottom: 2px;
}

.cu-perm-desc[b-1ha6icnulz] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-normal);
}

.cu-perm-status[b-1ha6icnulz] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--g-fs-xxs);
    flex-shrink: 0;
}

.cu-perm-status.denied[b-1ha6icnulz] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.cu-perm-status.granted[b-1ha6icnulz] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 1024px) {
    .cu-title[b-1ha6icnulz] {
        font-size: var(--g-fs-section-title, 1.125rem);
    }

    .cu-subtitle[b-1ha6icnulz] {
        font-size: 0.75rem;
    }

    .cu-section-title[b-1ha6icnulz] {
        font-size: 0.8125rem;
    }

    .cu-section-desc[b-1ha6icnulz] {
        font-size: 0.6875rem;
    }

    .cu-label[b-1ha6icnulz] {
        font-size: 0.75rem;
    }

    .cu-input[b-1ha6icnulz],
    .cu-select[b-1ha6icnulz] {
        font-size: 0.8125rem;
    }

    .cu-header-sticky[b-1ha6icnulz] {
        padding: 18px 20px;
    }

    .cu-section-header[b-1ha6icnulz] {
        padding: 16px 18px;
    }

    .cu-section-body[b-1ha6icnulz] {
        padding: 18px;
    }

    .cu-metric-label[b-1ha6icnulz] {
        font-size: 0.625rem;
    }

    .cu-metric-value[b-1ha6icnulz] {
        font-size: 1.25rem;
    }

    .cu-metric-sub[b-1ha6icnulz] {
        font-size: 0.625rem;
    }
}

@media (max-width: 991px) {
    .cu-permissions-list[b-1ha6icnulz] {
        grid-template-columns: 1fr;
    }

    .cu-perm-item[b-1ha6icnulz] {
        border-right: none;
    }

    .cu-perm-item:nth-last-child(-n+2)[b-1ha6icnulz] {
        border-bottom: 1px solid var(--g-border-light);
    }

    .cu-perm-item:last-child[b-1ha6icnulz] {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .cu-header-sticky[b-1ha6icnulz] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .cu-header-actions[b-1ha6icnulz] {
        width: 100%;
    }

    .g-btn-cancel[b-1ha6icnulz],
    .g-btn-primary[b-1ha6icnulz] {
        flex: 1;
         width: 100%;
        justify-content: center;
    }

    .cu-form-grid[b-1ha6icnulz],
    .cu-checkbox-grid[b-1ha6icnulz] {
        grid-template-columns: 1fr;
    }

    .cu-form-grid-single[b-1ha6icnulz] {
        max-width: 100%;
    }

    .cu-field-spacer[b-1ha6icnulz] {
        display: none;
    }

    .cu-metrics-row[b-1ha6icnulz] {
        flex-wrap: wrap;
    }

    .cu-metric-col[b-1ha6icnulz] {
        flex: 1 1 40%;
    }

    .cu-metric-divider[b-1ha6icnulz] {
        display: none;
    }

    .cu-upload-grid[b-1ha6icnulz] {
        grid-template-columns: 1fr;
    }

    .cu-section-header[b-1ha6icnulz] {
        padding: 16px 18px;
    }

    .cu-section-body[b-1ha6icnulz] {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .cu-metric-col[b-1ha6icnulz] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Admin/Users/ViewUser.razor.rz.scp.css */
/* ═══════════════════════════════════════
   View User Page Styles
   ═══════════════════════════════════════ */

.view-user[b-p6qfnj8w5y] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Back Link ── */
.vu-back-link[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--g-transition);
    width: fit-content;
}

.vu-back-link:hover[b-p6qfnj8w5y] {
    color: var(--g-brand);
}

.vu-back-link:focus-visible[b-p6qfnj8w5y] {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
    border-radius: var(--g-radius-xs);
}

/* ══════════════════════════════════
   User Header Card
   ══════════════════════════════════ */
.vu-header-card[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 28px;
}

.vu-header-left[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.vu-avatar[b-p6qfnj8w5y] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    user-select: none;
}

.vu-avatar-img[b-p6qfnj8w5y] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: url('/images/avatar%20user.png') center/cover no-repeat #e2e8f0;
}

.vu-header-info[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vu-name-row[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vu-name[b-p6qfnj8w5y] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.3;
}

/* ── Badges ── */
.vu-badge-status[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vu-badge-status[b-p6qfnj8w5y]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vu-badge-status.active[b-p6qfnj8w5y] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

.vu-badge-status.active[b-p6qfnj8w5y]::before {
    background: var(--g-success);
}

.vu-badge-status.inactive[b-p6qfnj8w5y] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.vu-badge-status.inactive[b-p6qfnj8w5y]::before {
    background: var(--g-error);
}

.vu-badge-role[b-p6qfnj8w5y] {
     display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
    white-space: nowrap;
    line-height: 1;
}

/* ── Meta Row ── */
.vu-meta-row[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.vu-meta-item[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    white-space: nowrap;
}

.vu-meta-item i[b-p6qfnj8w5y] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
}

/* ── Header Actions ── */
.vu-header-actions[b-p6qfnj8w5y] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-inactive[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    height:30px;
    border-radius: var(--g-radius-md);
    background: var(--g-error);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-inactive svg[b-p6qfnj8w5y] {
    color: #fff;
}

.btn-inactive:focus-visible[b-p6qfnj8w5y] {
    outline: 2px solid var(--g-error);
    outline-offset: 2px;
}

.btn-active[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    height: 30px;
    border-radius: var(--g-radius-md);
    background: var(--g-success);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-active svg[b-p6qfnj8w5y] {
    color: #fff;
}

.btn-active:focus-visible[b-p6qfnj8w5y] {
    outline: 2px solid var(--g-success);
    outline-offset: 2px;
}

.btn-edit[b-p6qfnj8w5y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    height: 30px;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-800);
    color: #fff;
    font-size: 0.7125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-edit:hover[b-p6qfnj8w5y] {
    background: var(--g-gray-900);
}

.btn-edit:focus-visible[b-p6qfnj8w5y] {
    outline: 2px solid var(--g-gray-800);
    outline-offset: 2px;
}

/* ══════════════════════════════════
   Three Column Info Grid
   ══════════════════════════════════ */
.vu-info-grid[b-p6qfnj8w5y] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.vu-info-card[b-p6qfnj8w5y] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 310px;
}

.vu-info-title[b-p6qfnj8w5y] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 20px;
}

.vu-info-list[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vu-info-item[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vu-info-label[b-p6qfnj8w5y] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--g-text-muted);
    letter-spacing: 0.01em;
}

.vu-info-value[b-p6qfnj8w5y] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    word-break: break-word;
}

.vu-info-icon[b-p6qfnj8w5y] {
    color: var(--g-text-muted);
    flex-shrink: 0;
}

/* ── Role Highlight ── */
.vu-role-highlight[b-p6qfnj8w5y] {
    color: var(--g-brand) !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
 
}

/* ── Added On + Status row pair ── */
.vu-info-row-pair[b-p6qfnj8w5y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Onboarding Checks ── */
.vu-onboarding[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.vu-onboard-check[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 500;
   
    line-height: 1.3;
}

.vu-onboard-check svg[b-p6qfnj8w5y] {
    color: var(--g-success);
    flex-shrink: 0;
}

/* ── Permissions List ── */
.vu-perm-list[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--g-gray-200) transparent;
}

.vu-perm-list[b-p6qfnj8w5y]::-webkit-scrollbar {
    width: 4px;
}

.vu-perm-list[b-p6qfnj8w5y]::-webkit-scrollbar-track {
    background: transparent;
}

.vu-perm-list[b-p6qfnj8w5y]::-webkit-scrollbar-thumb {
    background: var(--g-gray-200);
    border-radius: 4px;
}

.vu-perm-row[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-text-body);
    padding: 10px 0;
    border-bottom: 1px solid var(--g-border-light);
}

.vu-perm-row:last-child[b-p6qfnj8w5y] {
    border-bottom: none;
}

.vu-perm-label[b-p6qfnj8w5y] {
    flex: 1;
    min-width: 0;
}

.vu-perm-check[b-p6qfnj8w5y] {
    color: var(--g-success);
    flex-shrink: 0;
}

.btn-manage-access[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--g-radius-lg);
    background: var(--g-gray-800);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: all 0.15s ease;
}

.btn-manage-access:hover[b-p6qfnj8w5y] {
    background: var(--g-gray-900);
}

.btn-manage-access:focus-visible[b-p6qfnj8w5y] {
    outline: 2px solid var(--g-gray-800);
    outline-offset: 2px;
}

/* ══════════════════════════════════
   Targets Section
   ══════════════════════════════════ */
.vu-targets-section[b-p6qfnj8w5y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vu-section-title[b-p6qfnj8w5y] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--g-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.vu-targets-grid[b-p6qfnj8w5y] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.vu-target-card[b-p6qfnj8w5y] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vu-target-card:hover[b-p6qfnj8w5y] {
    border-color: var(--g-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.vu-target-top[b-p6qfnj8w5y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vu-target-icon[b-p6qfnj8w5y] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vu-target-icon.submissions[b-p6qfnj8w5y] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--g-brand, #2c7cff);
}

.vu-target-icon.quality[b-p6qfnj8w5y] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--g-success, #22c55e);
}

.vu-target-icon.interviews[b-p6qfnj8w5y] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.vu-target-icon.closures[b-p6qfnj8w5y] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--g-brand, #2c7cff);
}

.vu-target-data[b-p6qfnj8w5y] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.vu-target-value[b-p6qfnj8w5y] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--g-text-heading);
    letter-spacing: -0.03em;
    line-height: 1;
}

.vu-target-unit[b-p6qfnj8w5y] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--g-text-muted);
}

.vu-target-label[b-p6qfnj8w5y] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-body);
}

/* ══════════════════════════════════════
   Responsive – Progressive Enhancement
   ══════════════════════════════════════ */

/* ── Desktop → Tablet (info grid 3→1 col) ── */
@media (max-width: 1100px) {
    .vu-info-grid[b-p6qfnj8w5y] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .vu-info-grid[b-p6qfnj8w5y] {
        grid-template-columns: 1fr;
    }
}

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
    .vu-header-card[b-p6qfnj8w5y] {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }

    .vu-header-left[b-p6qfnj8w5y] {
        width: 100%;
    }

    .vu-header-actions[b-p6qfnj8w5y] {
        width: 100%;
    }

    .btn-inactive[b-p6qfnj8w5y],
    .btn-active[b-p6qfnj8w5y],
    .btn-edit[b-p6qfnj8w5y] {
        flex: 1;
        justify-content: center;
    }

    .vu-targets-grid[b-p6qfnj8w5y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .vu-meta-row[b-p6qfnj8w5y] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Small tablet / large phone (≤640px) ── */
@media (max-width: 640px) {
    .view-user[b-p6qfnj8w5y] {
        gap: 14px;
    }

    .vu-header-card[b-p6qfnj8w5y] {
        padding: 16px;
        gap: 14px;
    }

    .vu-info-card[b-p6qfnj8w5y] {
        padding: 18px;
    }

    .vu-avatar[b-p6qfnj8w5y] {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .vu-header-left[b-p6qfnj8w5y] {
        gap: 14px;
    }

    .vu-name[b-p6qfnj8w5y] {
        font-size: 1.125rem;
    }

    .vu-target-card[b-p6qfnj8w5y] {
        padding: 18px 16px;
    }

    .vu-target-value[b-p6qfnj8w5y] {
        font-size: var(--g-fs-display, 1.5rem);
    }
}

/* ── Phone (≤480px) ── */
@media (max-width: 480px) {
    .vu-targets-grid[b-p6qfnj8w5y] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .vu-name-row[b-p6qfnj8w5y] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .vu-name[b-p6qfnj8w5y] {
        font-size: 1rem;
    }

    .vu-info-row-pair[b-p6qfnj8w5y] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .vu-header-actions[b-p6qfnj8w5y] {
        flex-direction: row;
    }

    .btn-inactive[b-p6qfnj8w5y],
    .btn-active[b-p6qfnj8w5y],
    .btn-edit[b-p6qfnj8w5y] {
        width: 100%;
        justify-content: center;
    }

    .vu-info-card[b-p6qfnj8w5y] {
        padding: 16px;
    }

    .vu-info-title[b-p6qfnj8w5y] {
        margin-bottom: 14px;
    }

    .vu-target-card[b-p6qfnj8w5y] {
        padding: 16px 14px;
    }

    .vu-target-value[b-p6qfnj8w5y] {
        font-size: 1.625rem;
    }
}

/* ── Very small phone (≤360px) ── */
@media (max-width: 360px) {
    .vu-header-card[b-p6qfnj8w5y] {
        padding: 14px;
    }

    .vu-avatar[b-p6qfnj8w5y] {
        width: 42px;
        height: 42px;
        font-size: 0.875rem;
    }

    .vu-header-left[b-p6qfnj8w5y] {
        gap: 10px;
    }

    .vu-targets-grid[b-p6qfnj8w5y] {
        grid-template-columns: 1fr;
    }

    .vu-info-card[b-p6qfnj8w5y] {
        padding: 14px;
    }

    .vu-target-card[b-p6qfnj8w5y] {
        padding: 14px 12px;
    }
}
/* /Components/Pages/Admin/ViewClient.razor.rz.scp.css */
/* ═══════════════════════════════════════
   View Client Profile – Page Styles
   ═══════════════════════════════════════ */

/* ── Page Shell ── */
.view-client-page[b-5xe6zkofaq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Outer Card ── */
.view-client-page[b-5xe6zkofaq]  .vc-card {
     display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ── Back Link ── */
.view-client-page[b-5xe6zkofaq]  .vc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-text-secondary);
    text-decoration: none;
    transition: color var(--g-transition);
    width: fit-content;
}

.view-client-page[b-5xe6zkofaq]  .vc-back-link:hover {
    color: var(--g-brand);
}

/* ── Profile Header Card ── */
.view-client-page[b-5xe6zkofaq]  .vc-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    padding: 20px 24px;
    background: var(--g-bg-card);
}

.view-client-page[b-5xe6zkofaq]  .vc-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.view-client-page[b-5xe6zkofaq]  .vc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    user-select: none;
    object-fit: cover;
    background: #e2e8f0;
}

.view-client-page[b-5xe6zkofaq]  .vc-header-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.view-client-page[b-5xe6zkofaq]  .vc-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.view-client-page[b-5xe6zkofaq]  .vc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ── Status Badge ── */
.view-client-page[b-5xe6zkofaq]  .vc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.view-client-page[b-5xe6zkofaq]  .vc-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.view-client-page[b-5xe6zkofaq]  .vc-status.active {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

.view-client-page[b-5xe6zkofaq]  .vc-status.active::before {
    background: var(--g-success);
}

.view-client-page[b-5xe6zkofaq]  .vc-status.inactive {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.view-client-page[b-5xe6zkofaq]  .vc-status.inactive::before {
    background: var(--g-error);
}

/* ── Industry Badge (inline with status) ── */
.view-client-page[b-5xe6zkofaq]  .vc-industry {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
    white-space: nowrap;
    line-height: 1;
}

/* ── Edit Button ── */
.btn-edit[b-5xe6zkofaq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 18px;
    height: 30px;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-800);
    color: #fff;
    font-size: 0.7125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.btn-edit:hover[b-5xe6zkofaq] {
    background: var(--g-gray-900);
}

/* ── Details Section – equal columns ── */
.view-client-page[b-5xe6zkofaq]  .vc-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* ── Section Heading ── */
.view-client-page[b-5xe6zkofaq]  .vc-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--g-text-heading);
    margin: 0;
    text-transform: uppercase;
}

/* ── Company Identity Card ── */
.view-client-page[b-5xe6zkofaq]  .vc-id-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 24px;
    background: var(--g-bg-card);
}

.view-client-page[b-5xe6zkofaq]  .vc-id-card {
    background: var(--g-bg-card);
    border: none;
    border-radius: var(--g-radius-lg);
    padding: 0;
}

.view-client-page[b-5xe6zkofaq]  .vc-id-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.view-client-page[b-5xe6zkofaq]  .vc-id-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.view-client-page[b-5xe6zkofaq]  .vc-id-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--g-brand);
    letter-spacing: 0.01em;
    line-height: 1;
}

.view-client-page[b-5xe6zkofaq]  .vc-id-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--g-text-heading);
    line-height: 1.4;
}

.view-client-page[b-5xe6zkofaq]  .vc-id-icon {
    color: var(--g-text-muted);
    flex-shrink: 0;
}

/* ── Contacts Section ── */
.view-client-page[b-5xe6zkofaq]  .vc-contacts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 24px;
    background: var(--g-bg-card);
}

.view-client-page[b-5xe6zkofaq]  .vc-contacts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.view-client-page[b-5xe6zkofaq]  .vc-btn-manage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--g-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.view-client-page[b-5xe6zkofaq]  .vc-btn-manage:hover {
    color: var(--g-brand);
}

.view-client-page[b-5xe6zkofaq]  .vc-btn-manage:focus-visible {
    outline: 2px solid var(--g-brand);
    outline-offset: 2px;
    border-radius: var(--g-radius-xs);
}

/* ── Contacts Grid ── */
.view-client-page[b-5xe6zkofaq]  .vc-contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* ── Contact Card (inner card) ── */
.view-client-page[b-5xe6zkofaq]  .vc-contact {
    display: flex;
    flex-direction: column;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 18px 20px;
    transition: box-shadow 0.15s ease;
}

.view-client-page[b-5xe6zkofaq]  .vc-contact:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--g-border);
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-gray-100);
    color: var(--g-text-label);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -0.01em;
    user-select: none;
    border: 1px solid var(--g-border);
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--g-text-heading);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--g-brand);
    line-height: 1.3;
}

.view-client-page[b-5xe6zkofaq]  .vc-contact-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Email & phone in single row */
.view-client-page[b-5xe6zkofaq]  .vc-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.view-client-page[b-5xe6zkofaq]  .vc-detail-icon {
    color: var(--g-text-muted);
    flex-shrink: 0;
}

.view-client-page[b-5xe6zkofaq]  .vc-detail-text {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--g-text-label);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-client-page[b-5xe6zkofaq]  .vc-detail-sep {
    color: var(--g-gray-300);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   Responsive – tablet & mobile (<991px)
   ══════════════════════════════════════ */

@media (max-width: 991px) {
    .view-client-page[b-5xe6zkofaq]  .vc-details {
        grid-template-columns: 1fr;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-header-card {
        padding: 16px 20px;
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .view-client-page[b-5xe6zkofaq]  .vc-card {
        padding: 16px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-header-card {
        padding: 14px;
        gap: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-title {
        font-size: 1.125rem;
        white-space: normal;
        word-break: break-word;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-title-row {
        gap: 8px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-id-section {
        padding: 16px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-id-card {
        padding: 16px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contacts {
        padding: 16px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contacts-grid {
        grid-template-columns: 1fr;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contact {
        padding: 14px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contacts-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-id-value {
        font-size: 0.8125rem;
        word-break: break-word;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-detail-sep {
        display: none;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-detail-text {
        white-space: normal;
        word-break: break-all;
    }
}

@media (max-width: 500px) {
    .view-client-page[b-5xe6zkofaq]  .vc-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-header-left {
        width: 100%;
    }

    .btn-edit[b-5xe6zkofaq] {
        align-self: flex-start;
         width: 100%;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .view-client-page[b-5xe6zkofaq]  .vc-card {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
        border-radius: var(--g-radius-lg);
    }

    .view-client-page[b-5xe6zkofaq]  .vc-header-left {
        gap: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-header-card {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-id-section {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-id-card {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contacts {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contact {
        padding: 12px;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-heading {
        font-size: 0.6875rem;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-contact-name {
        font-size: 0.8125rem;
    }

    .view-client-page[b-5xe6zkofaq]  .vc-detail-text {
        font-size: 0.75rem;
    }
}
/* /Components/Pages/Auth/ChangePassword.razor.rz.scp.css */
/* ═══════════════════════════════════════
   Change Password Page Styles
   Now uses shared auth-* classes from AuthLayout.
   ═══════════════════════════════════════ */
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword – page-specific overrides only.
   All shared auth styles live in wwwroot/css/auth.css */
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Login – page-specific overrides only.
   All shared auth styles live in wwwroot/css/auth.css */
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* ResetPassword – page-specific overrides only.
   All shared auth styles live in wwwroot/css/auth.css */
/* /Components/Pages/Auth/VerifyOtp.razor.rz.scp.css */
/* VerifyOtp – page-specific overrides only.
   All shared auth styles live in wwwroot/css/auth.css */

/* Timer row */
.otp-timer-row[b-1vb6ptfr2e] {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-body, #334155);
}
.otp-timer-icon[b-1vb6ptfr2e] {
    font-size: 1rem;
}
.otp-timer-text strong[b-1vb6ptfr2e] {
    color: var(--g-brand, #2c7cff);
    font-variant-numeric: tabular-nums;
}

/* Expired row */
.otp-expired-row[b-1vb6ptfr2e] {
    justify-content: center;
    display: flex;
    margin: 8px 0 12px;
    font-size: var(--g-fs-sm, 0.8125rem);
}
.otp-expired-text[b-1vb6ptfr2e] {
    color: var(--g-error-text, #dc2626);
    font-weight: 500;
}

/* Expired input */
.auth-field-input.expired[b-1vb6ptfr2e] {
    opacity: 0.5;
    pointer-events: none;
    background: #f1f5f9;
}

/* Resend section */
.otp-resend-section[b-1vb6ptfr2e] {
    text-align: center;
    margin-top: 16px;
}
.otp-resend-hint[b-1vb6ptfr2e] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-secondary, #64748b);
    margin-bottom: 8px;
}
.auth-btn-resend[b-1vb6ptfr2e] {
    display: inline-block;
    padding: 8px 20px;
    font-size: var(--g-fs-sm, 0.8125rem);
    font-weight: 500;
    color: var(--g-brand, #2c7cff);
    background: transparent;
    border: 1px solid var(--g-brand, #2c7cff);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.auth-btn-resend:hover:not(:disabled)[b-1vb6ptfr2e] {
    background: var(--g-brand, #2c7cff);
    color: #fff;
}
.auth-btn-resend:disabled[b-1vb6ptfr2e] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Dashboard/Candidate/ApplyJob.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Apply Job – aj- prefix
   Candidate Verification + Job Selection
   8px grid system • Responsive
   ═══════════════════════════════════════════ */

/* ── Loading Overlay ── */
.aj-loading-overlay[b-pp9lofmfea] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.aj-loading-card[b-pp9lofmfea] {
    background: var(--g-bg-section);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.aj-loading-spinner[b-pp9lofmfea] {
    animation: aj-spin-b-pp9lofmfea 1s linear infinite;
}

@keyframes aj-spin-b-pp9lofmfea {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.aj-loading-title[b-pp9lofmfea] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.aj-loading-subtitle[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* ── Page Shell ── */
.aj-page[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
}

/* ── Two Column Grid ── */
.aj-grid[b-pp9lofmfea] {
    display: grid;
    grid-template-columns: 1.5fr minmax(280px, 0.58fr);
    gap: var(--g-space-24);
    align-items: start;
}

/* ── Form Column ── */
.aj-form-col[b-pp9lofmfea] {
    min-width: 0;
}

.aj-form-card[b-pp9lofmfea] {
    background: var(--g-bg-layout);
    border-radius: var(--g-radius-3xl);
    --tw-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── Card Header ── */
.aj-form-card-header[b-pp9lofmfea] {
    margin-bottom: 28px;
    background-color: white;
    padding: var(--g-space-24) var(--g-space-32);
    border-top-left-radius: var(--g-radius-3xl);
    border-top-right-radius: var(--g-radius-3xl);
}

.aj-form-card-title[b-pp9lofmfea] {
    font-size: var(--g-fs-candidate-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.aj-form-card-subtitle[b-pp9lofmfea] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: var(--g-lh-normal);
}

/* ── Candidate Identity Card ── */
.aj-identity-card[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: var(--g-space-16) var(--g-space-20);
    background: var(--g-bg-section);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    margin-bottom: 28px;
    position: relative;
}

.aj-identity-avatar[b-pp9lofmfea] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--g-border-card);
    flex-shrink: 0;
    background: #fff;
}

.aj-identity-avatar img[b-pp9lofmfea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aj-identity-info[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.aj-identity-name[b-pp9lofmfea] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    line-height: var(--g-lh-tight);
}

.aj-identity-role[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    margin: 0;
    font-weight: var(--g-fw-medium);
}

.aj-identity-badge[b-pp9lofmfea] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-4) var(--g-space-12);
    border-radius: var(--g-radius-full);
    background: var(--g-brand-bg);
    color: var(--g-brand);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.aj-identity-badge svg[b-pp9lofmfea] {
    color: var(--g-brand);
    flex-shrink: 0;
}

/* ── Field Groups ── */
.aj-field-group[b-pp9lofmfea] {
    margin-bottom: var(--g-space-24);
    padding: 0 var(--g-space-32);
}

.aj-label[b-pp9lofmfea] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    margin-bottom: var(--g-space-8);
}

.aj-label-brand[b-pp9lofmfea] {
    color: var(--g-brand);
    margin-bottom: 0;
}

.aj-label-dark[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aj-required[b-pp9lofmfea] {
    color: var(--g-error);
}

.aj-field-error[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: 4px;
    display: block;
}

/* ── Input with Icon ── */
.aj-input-icon-wrap[b-pp9lofmfea] {
    position: relative;
    display: flex;
    align-items: center;
}

.aj-input-icon[b-pp9lofmfea] {
    position: absolute;
    left: 14px;
    color: var(--g-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.aj-linkedin-icon[b-pp9lofmfea] {
    color: #0A66C2;
}

.aj-input[b-pp9lofmfea] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.aj-input[b-pp9lofmfea]::placeholder {
    color: var(--g-text-muted);
}

.aj-input:focus[b-pp9lofmfea] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.aj-input-with-icon[b-pp9lofmfea] {
    padding-left: 42px;
}

/* ── Dropzone ── */
.aj-dropzone[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
    width: 100%;
    min-height: 160px;
    padding: 28px var(--g-space-20);
    border: 2px dashed var(--g-gray-300);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-section);
    cursor: pointer;
    transition: border-color var(--g-transition), background var(--g-transition);
    text-align: center;
    box-sizing: border-box;
}

.aj-dropzone:hover[b-pp9lofmfea],
.aj-dropzone.drag-over[b-pp9lofmfea] {
    border-color: var(--g-brand);
    background: var(--g-brand-bg);
}

.aj-dropzone-icon-wrap[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-full);
    background:var(--sidebar-active-bg);
    color: #fff;
}

.aj-dropzone-icon-wrap.aj-dropzone-icon-success[b-pp9lofmfea] {
    background: var(--g-success);
}

.aj-dropzone-text[b-pp9lofmfea] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.aj-dropzone-hint[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

/* ── Resume Header Row ── */
.aj-resume-header-row[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-8);
}

.aj-resume-age-text[b-pp9lofmfea] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.02em;
}

.aj-resume-age-text.aj-resume-age-outdated[b-pp9lofmfea] {
    color: var(--g-error-text);
}

/* ── Resume Outdated Warning ── */
.aj-resume-outdated-warn[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: var(--g-space-10) 14px;
    background: var(--g-error-bg);
    border: 1px solid var(--g-error-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    color: var(--g-error-text);
    margin-top: var(--g-space-8);
}

.aj-resume-outdated-warn svg[b-pp9lofmfea] {
    flex-shrink: 0;
    color: var(--g-error-text);
}

/* ── Resume Action Buttons ── */
.aj-resume-actions[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.aj-resume-action-btn[b-pp9lofmfea] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-6) 14px;
    border: 1px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-body);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.aj-resume-action-btn:hover[b-pp9lofmfea] {
    border-color: var(--g-brand);
    color: var(--g-brand);
    background: var(--g-brand-bg);
}

.aj-resume-action-btn svg[b-pp9lofmfea] {
    flex-shrink: 0;
}

/* ── Form Actions ── */
.aj-form-actions[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    margin-top: var(--g-space-8);
    padding: var(--g-space-24) var(--g-space-32);
    background-color: var(--bs-body-bg);
    border-bottom-right-radius: var(--g-radius-3xl);
    border-bottom-left-radius: var(--g-radius-3xl);
}

.aj-btn-clear[b-pp9lofmfea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 22px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: color var(--g-transition), background var(--g-transition);
}

.aj-btn-clear:hover[b-pp9lofmfea] {
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

.aj-btn-submit[b-pp9lofmfea] {
    min-width: 180px;
}

/* ── Cards Column ── */
.aj-cards-col[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    min-width: 0;
}

/* ── Info Card ── */
.aj-info-card[b-pp9lofmfea] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-24);
    box-shadow: var(--g-shadow-xs);
}

/* ── No Job Selected ── */
.aj-no-job-card[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    text-align: center;
    gap: var(--g-space-24);
}

.aj-no-job-content[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-12);
}

.aj-no-job-icon[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--g-brand-bg);
    color: var(--g-brand);
}

.aj-no-job-title[b-pp9lofmfea] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
}

.aj-no-job-desc[b-pp9lofmfea] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    max-width: 240px;
    line-height: 1.5;
}

/* ── Job Selector ── */
.aj-job-select-wrap[b-pp9lofmfea] {
    width: 100%;
    padding: 0 var(--g-space-20);
}

.aj-select-wrap[b-pp9lofmfea] {
    position: relative;
    width: 100%;
}

.aj-select[b-pp9lofmfea] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 36px 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.aj-select:focus[b-pp9lofmfea] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.aj-select-chevron[b-pp9lofmfea] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    pointer-events: none;
}

/* ── Job Summary ── */
.aj-job-summary[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--g-space-8);
    position: relative;
}

.aj-job-change-link[b-pp9lofmfea] {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    background: none;
    border: none;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.03em;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color var(--g-transition);
}

.aj-change-icon[b-pp9lofmfea] {
    transition: transform 0.3s ease;
}

.aj-job-change-link:hover[b-pp9lofmfea] {
    color: var(--g-brand);
}

.aj-job-change-link:hover .aj-change-icon[b-pp9lofmfea] {
    transform: rotate(180deg);
}

.aj-job-avatar-wrap[b-pp9lofmfea] {
    position: relative;
    margin-bottom: var(--g-space-8);
    margin-top: var(--g-space-4);
}

.aj-job-avatar-thumb[b-pp9lofmfea] {
    width: 72px;
    height: 72px;
    border-radius: var(--g-radius-2xl);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: var(--g-shadow-sm);
}

.aj-job-avatar-thumb img[b-pp9lofmfea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aj-job-avatar-badge[b-pp9lofmfea] {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
    background: var(--g-gray-800);
    border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.aj-job-avatar-badge img[b-pp9lofmfea] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aj-job-title-text[b-pp9lofmfea] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 4px 0 0;
    line-height: var(--g-lh-tight);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-job-company[b-pp9lofmfea] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Card Label ── */
.aj-card-label[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--g-space-10);
}

.aj-card-label-left[b-pp9lofmfea] {
    justify-content: flex-start;
}

/* ── Current Job Status Grid ── */
.aj-status-grid[b-pp9lofmfea] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.aj-status-cell[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-12) var(--g-space-8);
    background: transparent;
    border-right: 1px solid var(--g-border-light);
}

.aj-status-cell:last-child[b-pp9lofmfea] {
    border-right: none;
}

.aj-status-count[b-pp9lofmfea] {
    font-size: var(--g-fs-display);
    font-weight: var(--g-fw-extrabold);
    line-height: 1;
}

.aj-status-primary[b-pp9lofmfea] {
    color: var(--g-brand);
}

.aj-status-default[b-pp9lofmfea] {
    color: var(--g-text-heading);
}

.aj-status-dark[b-pp9lofmfea] {
    color: var(--g-text-heading);
}

.aj-status-label[b-pp9lofmfea] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Detail Rows ── */
.aj-detail-rows[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aj-detail-row[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 0;
    border-bottom: 1px solid var(--g-border-light);
    gap: var(--g-space-12);
}

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

.aj-detail-left[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    color: var(--g-text-secondary);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    min-width: 0;
}

.aj-detail-left svg[b-pp9lofmfea] {
    flex-shrink: 0;
    color: var(--g-text-muted);
}

.aj-detail-value[b-pp9lofmfea] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    text-align: right;
    flex-shrink: 0;
}

/* ── AI Thresholds ── */
.aj-ai-threshold-row[b-pp9lofmfea] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--g-gray-100);
}

.aj-ai-threshold-item[b-pp9lofmfea] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.aj-ai-threshold-item.aj-ai-approve[b-pp9lofmfea] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.aj-ai-threshold-item.aj-ai-reject[b-pp9lofmfea] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.aj-ai-threshold-item svg[b-pp9lofmfea] {
    flex-shrink: 0;
}

.aj-ai-label[b-pp9lofmfea] {
    font-weight: 500;
    white-space: nowrap;
}

.aj-ai-value[b-pp9lofmfea] {
    margin-left: auto;
    font-weight: 700;
    font-size: 13px;
}

/* ── Skills ── */
.aj-skills-list[b-pp9lofmfea] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aj-skill-row[b-pp9lofmfea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 14px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    margin-bottom: var(--g-space-8);
    gap: var(--g-space-12);
    background: var(--g-gray-50);
}

.aj-skill-row:last-child[b-pp9lofmfea] {
    margin-bottom: 0;
}

.aj-skill-name[b-pp9lofmfea] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
}

.aj-skill-years[b-pp9lofmfea] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    flex-shrink: 0;
}

/* ══════════════════════════════════
   Responsive Breakpoints
   ══════════════════════════════════ */

/* ── 1440px ── */
@media (max-width: 1440px) {
    .aj-grid[b-pp9lofmfea] {
        grid-template-columns: 1.4fr minmax(260px, 0.6fr);
        gap: var(--g-space-20);
    }
    .aj-form-card[b-pp9lofmfea] { padding: 28px; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
    .aj-grid[b-pp9lofmfea] {
        grid-template-columns: 1.2fr minmax(240px, 0.65fr);
        gap: 18px;
    }
    .aj-form-card[b-pp9lofmfea] { padding: var(--g-space-24); }
    .aj-info-card[b-pp9lofmfea] { padding: var(--g-space-20); }
    .aj-form-card-header[b-pp9lofmfea] { margin-bottom: var(--g-space-24); }
    .aj-identity-card[b-pp9lofmfea] { padding: 14px var(--g-space-16); gap: var(--g-space-12); }
}

/* ── 768px – Stack layout ── */
@media (max-width: 768px) {
    .aj-grid[b-pp9lofmfea] {
        grid-template-columns: 1fr;
        gap: var(--g-space-16);
    }
    .aj-form-card[b-pp9lofmfea] {
        padding: var(--g-space-20) var(--g-space-16);
        border-radius: var(--g-radius-lg);
    }
    .aj-info-card[b-pp9lofmfea] {
        padding: var(--g-space-20) 18px;
        border-radius: var(--g-radius-lg);
    }
    .aj-form-card-header[b-pp9lofmfea] { margin-bottom: var(--g-space-20); }
    .aj-identity-card[b-pp9lofmfea] { padding: var(--g-space-12) var(--g-space-16); }
    .aj-dropzone[b-pp9lofmfea] { min-height: 140px; padding: var(--g-space-20) var(--g-space-16); }
    .aj-status-grid[b-pp9lofmfea] { grid-template-columns: repeat(4, 1fr); }
    .aj-resume-header-row[b-pp9lofmfea] { flex-direction: column; align-items: flex-start; gap: var(--g-space-6); }
    .aj-resume-actions[b-pp9lofmfea] { width: 100%; }
}

/* ── 425px ── */
@media (max-width: 425px) {
    .aj-form-card[b-pp9lofmfea] { padding: var(--g-space-16) 14px; }
    .aj-info-card[b-pp9lofmfea] { padding: var(--g-space-16) 14px; border-radius: var(--g-radius-lg); }
    .aj-form-actions[b-pp9lofmfea] { flex-direction: column; gap: var(--g-space-10); }
    .aj-btn-clear[b-pp9lofmfea] {
        width: 100%;
        padding: var(--g-space-10) 22px;
        order: 2;
    }
    .aj-btn-submit[b-pp9lofmfea] {
        width: 100%;
        min-width: 0;
        order: 1;
    }
    .aj-identity-card[b-pp9lofmfea] {
        flex-direction: column;
        text-align: center;
    }
    .aj-identity-badge[b-pp9lofmfea] {
        align-self: center;
    }
    .aj-dropzone[b-pp9lofmfea] { min-height: 120px; padding: var(--g-space-16) var(--g-space-12); }
    .aj-dropzone-text[b-pp9lofmfea] { font-size: var(--g-fs-sm); }
    .aj-field-group[b-pp9lofmfea] { margin-bottom: var(--g-space-20); }
    .aj-status-grid[b-pp9lofmfea] { grid-template-columns: repeat(2, 1fr); }
    .aj-resume-actions[b-pp9lofmfea] { flex-direction: column; width: 100%; }
    .aj-resume-action-btn[b-pp9lofmfea] { width: 100%; justify-content: center; }
}

/* ── 375px ── */
@media (max-width: 375px) {
    .aj-form-card[b-pp9lofmfea] { padding: 14px var(--g-space-12); }
    .aj-info-card[b-pp9lofmfea] { padding: 14px var(--g-space-12); }
    .aj-form-card-title[b-pp9lofmfea] { font-size: var(--g-fs-card-title); }
    .aj-status-count[b-pp9lofmfea] { font-size: var(--g-fs-page-title); }
    .aj-job-avatar-wrap[b-pp9lofmfea] { width: 64px; height: 70px; }
    .aj-job-avatar-thumb[b-pp9lofmfea] { width: 64px; height: 64px; border-radius: 14px; }
    .aj-job-avatar-badge[b-pp9lofmfea] { width: 24px; height: 24px; }
    .aj-no-job-card[b-pp9lofmfea] { min-height: 280px; }
}

/* ── 320px ── */
@media (max-width: 320px) {
    .aj-form-card[b-pp9lofmfea] { padding: var(--g-space-12) var(--g-space-10); }
    .aj-info-card[b-pp9lofmfea] { padding: var(--g-space-12) var(--g-space-10); }
    .aj-form-card-title[b-pp9lofmfea] { font-size: var(--g-fs-body); }
    .aj-form-card-subtitle[b-pp9lofmfea] { font-size: var(--g-fs-xs); }
    .aj-identity-avatar[b-pp9lofmfea] { width: 40px; height: 40px; }
    .aj-identity-name[b-pp9lofmfea] { font-size: var(--g-fs-sm); }
    .aj-status-count[b-pp9lofmfea] { font-size: var(--g-fs-section-title); }
    .aj-detail-left[b-pp9lofmfea] { font-size: var(--g-fs-xs); }
    .aj-detail-value[b-pp9lofmfea] { font-size: var(--g-fs-xs); }
}

/* ═══════════════════════════════════════ */
/* Module 3 & 4: Modal Styles             */
/* ═══════════════════════════════════════ */

/* ── Overlay ── */
[b-pp9lofmfea] .aj-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

[b-pp9lofmfea] .aj-modal-z110 {
    z-index: 110;
}

/* ── Modal Base ── */
[b-pp9lofmfea] .aj-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    animation: aj-modal-in-b-pp9lofmfea 0.2s ease-out;
}

@keyframes aj-modal-in-b-pp9lofmfea {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

[b-pp9lofmfea] .aj-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

[b-pp9lofmfea] .aj-modal-icon-warning {
    background: #fef3c7;
    color: #f59e0b;
}

[b-pp9lofmfea] .aj-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #18181b;
    margin: 0 0 8px;
}

[b-pp9lofmfea] .aj-modal-desc {
    font-size: 14px;
    color: #71717a;
    line-height: 1.6;
    margin: 0 0 24px;
}

[b-pp9lofmfea] .aj-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

[b-pp9lofmfea] .aj-btn-modal-secondary {
    padding: 10px 24px;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    background: white;
    color: #71717a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

[b-pp9lofmfea] .aj-btn-modal-secondary:hover {
    background: #f4f4f5;
    border-color: #d4d4d8;
}

[b-pp9lofmfea] .aj-btn-modal-primary {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: #18181b;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

[b-pp9lofmfea] .aj-btn-modal-primary:hover {
    background: #27272a;
}

/* ── AI Modal ── */
[b-pp9lofmfea] .aj-ai-modal {
    max-width: 560px;
    text-align: left;
}

[b-pp9lofmfea] .aj-ai-loading {
    text-align: center;
    padding: 40px 0;
}

[b-pp9lofmfea] .aj-ai-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e4e4e7;
    border-top-color: #497cff;
    border-radius: 50%;
    animation: aj-spin-b-pp9lofmfea 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes aj-spin-b-pp9lofmfea {
    to { transform: rotate(360deg); }
}

[b-pp9lofmfea] .aj-ai-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

[b-pp9lofmfea] .aj-ai-score-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

[b-pp9lofmfea] .aj-ai-ring-svg {
    width: 72px;
    height: 72px;
}

[b-pp9lofmfea] .aj-ai-score-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

[b-pp9lofmfea] .aj-ai-header-info {
    flex: 1;
}

[b-pp9lofmfea] .aj-ai-header-info .aj-modal-title {
    text-align: left;
    margin-bottom: 4px;
}

[b-pp9lofmfea] .aj-ai-header-info .aj-modal-desc {
    text-align: left;
    margin-bottom: 0;
}

[b-pp9lofmfea] .aj-ai-score-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-pp9lofmfea] .aj-ai-candidate-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f4f4f5;
    border-radius: 10px;
    margin-bottom: 20px;
}

[b-pp9lofmfea] .aj-ai-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

[b-pp9lofmfea] .aj-ai-candidate-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-pp9lofmfea] .aj-ai-candidate-info strong {
    font-size: 14px;
    color: #18181b;
}

[b-pp9lofmfea] .aj-ai-candidate-info span {
    font-size: 12px;
    color: #71717a;
}

[b-pp9lofmfea] .aj-ai-competency {
    margin-bottom: 24px;
}

[b-pp9lofmfea] .aj-ai-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #18181b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 12px;
}

[b-pp9lofmfea] .aj-ai-skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-pp9lofmfea] .aj-ai-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
}

[b-pp9lofmfea] .aj-ai-skill-matched {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

[b-pp9lofmfea] .aj-ai-skill-missing {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

[b-pp9lofmfea] .aj-ai-skill-years {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}
/* /Components/Pages/Dashboard/Candidate/CandidateDossierReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate Dossier Review – dr- prefix
   Full-page scroll • Modern donut chart
   8px grid system • No nested scrollbars
   ═══════════════════════════════════════════ */

/* ── PAGE SHELL — natural document flow ── */
.dr-page[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--g-bg-page);
    font-family: var(--g-font-sans);
    color: var(--g-gray-800);
    padding-left: 18px;
    padding-right: 18px;
 }

@media (max-width: 1600px) {
    .dr-page[b-4qy1catjg5] {
        min-height: calc(100vh / 0.85);
    }
}

/* ── PAGE TITLE BAR — Sticky below topbar ── */
.dr-page-title-bar[b-4qy1catjg5] {
    position: sticky;
    top: var(--dr-topbar-height, 0px);
    z-index: 100;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-gray-200);
    margin: 0 0 var(--g-space-16) 0;
    padding: 0;
    height: 66px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease;
    overflow: hidden;
}

/* When JS adds this class on scroll: compact header with shadow */
.dr-page-title-bar.dr-title-bar-scrolled[b-4qy1catjg5] {
    box-shadow: var(--g-shadow-sm);
    border-bottom-color: var(--g-gray-300);
}



/* Default content — visible when NOT scrolled */
.dr-title-default[b-4qy1catjg5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: 0 var(--g-space-24);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.dr-title-bar-scrolled .dr-title-default[b-4qy1catjg5] {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Scrolled compact content — hidden by default, shown when scrolled */
.dr-title-scrolled[b-4qy1catjg5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--g-space-24);
    gap: var(--g-space-16);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.dr-title-bar-scrolled .dr-title-scrolled[b-4qy1catjg5] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dr-title-scrolled-left[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    min-width: 0;
    flex: 1;
}

.dr-scrolled-avatar[b-4qy1catjg5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.dr-scrolled-avatar-img[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dr-scrolled-fallback[b-4qy1catjg5] {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.dr-scrolled-avatar .dr-avatar-initials[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
}

.dr-scrolled-info[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dr-scrolled-name[b-4qy1catjg5] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-scrolled-subtitle[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-title-scrolled-right[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    flex-shrink: 0;
}

.dr-scrolled-job-avatar[b-4qy1catjg5] {
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 1.5px solid var(--g-gray-200);
    flex-shrink: 0;
}

.dr-scrolled-job-avatar img[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-scrolled-job-info[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dr-scrolled-job-title[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
}

.dr-scrolled-job-meta[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
}

.dr-page-heading[b-4qy1catjg5] {
       font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--g-lh-tight);
}

.dr-page-subtitle[b-4qy1catjg5] {
  font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: var(--g-space-4) 0 0;
    line-height: var(--g-lh-normal);
    text-transform: uppercase;
}

/* ── HEADER + META — Unified card container ── */
.dr-header-card-container[b-4qy1catjg5] {
    margin: 16px auto 0;
    width: 100%;
 
    overflow: hidden;
}

.dr-header[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-24);
    box-shadow: none;
    margin: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    padding: 20px 22px;
}

.dr-header-left[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.dr-back-btn[b-4qy1catjg5] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-gray-600);
    transition: background var(--g-transition), border-color var(--g-transition);
    flex-shrink: 0;
}
.dr-back-btn:hover[b-4qy1catjg5] {
    background: var(--g-gray-100);
    border-color: var(--g-gray-300);
}

.dcr-header-avatar[b-4qy1catjg5] {
    position: relative;
    flex-shrink: 0;
}
.dr-header-avatar[b-4qy1catjg5] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--g-gray-100);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.dr-header-avatar img[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.dr-header-avatar .dr-avatar-initials[b-4qy1catjg5] {
    font-size: 18px;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    text-transform: uppercase;
}
.dr-avatar-status[b-4qy1catjg5] {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--g-success);
    border: 2.5px solid var(--g-bg-card);
    border-radius: var(--g-radius-full);
    z-index: 2;
}

.dr-header-info[b-4qy1catjg5] {
    min-width: 0;
}

.dr-header-role[b-4qy1catjg5] {
        font-size: var(--g-fs-section-subtitle);
    color: var(--g-text-secondary);
    margin: 1px 0 6px;
}

.dr-header-details-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--g-space-6) var(--g-space-12);
}

.dr-header-detail[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
    white-space: nowrap;
}

.dr-header-link[b-4qy1catjg5] {
    color: var(--g-brand);
    text-decoration: none;
    cursor: pointer;
}

.dr-header-link:hover[b-4qy1catjg5] {
    text-decoration: underline;
}

.dr-header-name-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
}
.dr-header-name[b-4qy1catjg5] {
    font-size: var(--g-fs-section-title);
    font-weight: var(--g-fw-bold);
    line-height: var(--g-lh-tight);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-status-badge[b-4qy1catjg5] {
    font-size: var(--g-fs-xxxs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--g-radius-full);
    background: var(--g-success-bg);
    color: var(--g-success-text);
    border: 1px solid var(--g-success-border);
    white-space: nowrap;
}
.dr-status-badge.dr-badge-inactive[b-4qy1catjg5] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.dr-header-subtitle[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    display: block;
    margin-top: 2px;
}

.dr-header-meta[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.dr-meta-block[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
}
.dr-meta-divider[b-4qy1catjg5] {
    width: 1px;
    height: 36px;
    background: var(--g-gray-200);
    flex-shrink: 0;
}
.dr-meta-label[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .06em;
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    text-transform: uppercase;
    white-space: nowrap;
}
.dr-meta-value[b-4qy1catjg5] {
   font-size: var(--g-fs-pipeline-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    white-space: nowrap;
}
.dr-meta-sub[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin-top: 2px;
}
.dr-value-brand[b-4qy1catjg5],
.dr-meta-value.dr-value-brand[b-4qy1catjg5] {
    color: var(--g-brand);
}
.dr-meta-highlight[b-4qy1catjg5] {
    padding-left: 20px;
    padding-right: 0;
}

/* ── META ROW — inline under name info ── */
.dr-meta-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 8px 0 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.dr-meta-item[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    text-decoration: none;
}
.dr-meta-item svg[b-4qy1catjg5] {
    color: var(--g-text-muted);
    flex-shrink: 0;
}
.dr-meta-link[b-4qy1catjg5] {
    color: #0A66C2;
    font-weight: var(--g-fw-semibold);
}
.dr-meta-link:hover[b-4qy1catjg5] {
    text-decoration: underline;
}

/* ── BODY — no internal scroll ── */
.dr-body[b-4qy1catjg5] {
    margin: 16px auto;
    width: 100%;

    box-sizing: border-box;
}
.dr-content[b-4qy1catjg5] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}

/* ── MAIN COLUMN ── */
.dr-main[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    flex: 1 1 0%;
}

/* ── Equal height: main stretch ── */
.dr-content > .dr-main[b-4qy1catjg5] {
    min-height: 0;
    align-self: stretch;
}
.dr-main > :last-child[b-4qy1catjg5] {
    flex-grow: 1;
}
.dr-sidebar > :last-child[b-4qy1catjg5] {
    flex-grow: 1;
}

/* ── CARDS ── */
.dr-card[b-4qy1catjg5] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    padding: 20px 22px;
}
.dr-card-header-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dr-card-title[b-4qy1catjg5] {
    color: var(--g-gray-700);
    margin: 0 0 14px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
   font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}
.dr-card-header-row .dr-card-title[b-4qy1catjg5] {
    margin-bottom: 0;
}
.dr-title-brand[b-4qy1catjg5] {
    color: var(--g-brand);
       font-size: var(--g-fs-section-subtitle);
    font-weight: 500;
}

.dr-badge-outline[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .05em;
    color: var(--g-brand);
    border: 1px solid color-mix(in srgb, var(--g-brand) 30%, transparent);
    border-radius: var(--g-radius-full);
    padding: 3px var(--g-space-12);
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
}

.dr-summary-text[b-4qy1catjg5], .dr-remarks-text[b-4qy1catjg5] {
     font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    line-height: 1.7;
    margin: 0;
}

.dr-summary-text.dr-summary-collapsed[b-4qy1catjg5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dr-view-more-btn[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-brand, #2c7cff);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.dr-view-more-btn:hover[b-4qy1catjg5] {
    opacity: 0.8;
}

.dr-view-more-btn svg[b-4qy1catjg5] {
    transition: transform 0.2s ease;
}

.dr-view-more-btn .dr-chevron-up[b-4qy1catjg5] {
    transform: rotate(180deg);
}

/* ── SKILLS ── */
.dr-skills-wrap[b-4qy1catjg5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dr-skill-pill[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 14px;
    border-radius: 999px;
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-gray-200, #e2e8f0);
    font-size: var(--g-fs-xs, 13px);
    font-weight: 500;
    color: var(--g-text-body, #334155);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.dr-skill-pill:hover[b-4qy1catjg5] {
    background: var(--g-gray-50, #f8fafc);
}
.dr-skill-name[b-4qy1catjg5] {
    white-space: nowrap;
}
.dr-skill-years[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--g-gray-100, #f3f4f6);
    color: var(--g-text-secondary, #64748b);
    font-size: var(--g-fs-xxs, 11px);

    line-height: 1.2;
    white-space: nowrap;
}

/* ── TIMELINE — Modern style indicators ── */
.dr-timeline[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: var(--g-space-20);
    margin-left: var(--g-space-6);
    position: relative;
}
.dr-timeline-item[b-4qy1catjg5] {
    position: relative;
    padding: 0 0 var(--g-space-24) var(--g-space-20);
}
.dr-timeline-item:last-child[b-4qy1catjg5] {
    padding-bottom: 0;
}
/* Connector line between dots — only between items, not above first or below last */
.dr-timeline-item[b-4qy1catjg5]::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--g-gray-200);
}
.dr-timeline-item:last-child[b-4qy1catjg5]::before {
    display: none;
}
.dr-timeline-dot[b-4qy1catjg5],
.rp-timeline-dot[b-4qy1catjg5] {
    position: absolute;
    left: -24px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2.5px solid #cbd5e1;
    background: #fff;
    z-index: 2;
    transition: all 0.2s ease;
}
.dr-timeline-dot.blue[b-4qy1catjg5],
.rp-timeline-dot.blue[b-4qy1catjg5] {
    border-color: var(--g-brand, #2c7cff);
    background: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 4px rgba(0, 111, 249, 0.12);
}
.dr-timeline-dot.dark[b-4qy1catjg5],
.dr-timeline-dot.black[b-4qy1catjg5],
.rp-timeline-dot.dark[b-4qy1catjg5] {
    border-color: var(--g-gray-700);
    background: var(--g-gray-700);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}
.dr-timeline-body[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dr-timeline-title[b-4qy1catjg5] {
    font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}
.dr-timeline-meta[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
}
.dr-timeline-date[b-4qy1catjg5] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

/* ── TWO-COL ── */
.dr-two-col[b-4qy1catjg5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-20);
}

.dr-assess-list[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dr-assess-card-row[b-4qy1catjg5] {
   display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--g-gray-50);
    border-radius: 10px;
    font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    border: 1px solid transparent;
    transition: background 0.15s ease;
}
.dr-assess-card-row:hover[b-4qy1catjg5] {
    background: var(--g-gray-100);
}
.dr-assess-card-row strong[b-4qy1catjg5] {
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

/* Blue highlight variant — Current Co. Experience */
.dr-assess-card-blue[b-4qy1catjg5] {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.dr-assess-card-blue:hover[b-4qy1catjg5] {
    background: #dbeafe;
}
.dr-assess-card-blue strong[b-4qy1catjg5] {
    color: #1d4ed8;
}

/* Green highlight variant — Profile Completion */
.dr-assess-card-green[b-4qy1catjg5] {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.dr-assess-card-green:hover[b-4qy1catjg5] {
    background: #d1fae5;
}
.dr-assess-card-green span[b-4qy1catjg5] {
    font-weight: var(--g-fw-semibold);
    color: #047857;
}
.dr-assess-card-green strong[b-4qy1catjg5] {
    color: #047857;
    font-weight: var(--g-fw-extrabold);
}

.dr-screening-list[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dr-screening-item[b-4qy1catjg5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-12);
    background: var(--g-bg-section);
    padding: var(--g-space-30) var(--g-space-16);
    border-radius: var(--g-space-12);
    margin-bottom: 10px;
    border: none;
    flex-direction: row;

}
.dr-screening-item:last-child[b-4qy1catjg5] { border-bottom: none; }
.dr-screening-q[b-4qy1catjg5] {
    color: var(--g-gray-600);
    line-height: var(--g-lh-normal);
    flex: 1;
    font-weight: 700;
    font-size: var(--g-fs-section-subtitle);
}
.dr-screening-a[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-weight: var(--g-fw-bold);
    flex-shrink: 0;
}
.dr-screening-a.yes[b-4qy1catjg5] { color: var(--g-success-text); }
.dr-screening-a.no[b-4qy1catjg5] { color: var(--g-error); }

/* ── DOCUMENTS ── */
.dr-doc-count[b-4qy1catjg5] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: .04em;
}
.dr-doc-list[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dr-doc-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--g-space-12) 0;
    border-bottom: 1px solid var(--g-gray-100);
    transition: background var(--g-transition);
}
.dr-doc-row:last-child[b-4qy1catjg5] { border-bottom: none; }
.dr-doc-row:hover[b-4qy1catjg5] {
    background: var(--g-gray-50);
    border-radius: var(--g-radius-md);
    padding-left: var(--g-space-8);
    margin-left: -8px;
    padding-right: var(--g-space-8);
    margin-right: -8px;
}
.dr-doc-icon[b-4qy1catjg5] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.dr-doc-icon.dr-doc-red[b-4qy1catjg5] { background: var(--g-error-bg); color: var(--g-error); }
.dr-doc-icon.dr-doc-blue[b-4qy1catjg5] { background: var(--g-indigo-bg); color: var(--g-indigo-light); }
.dr-doc-info[b-4qy1catjg5] {
    flex: 1;
    min-width: 0;
}
.dr-doc-label[b-4qy1catjg5] {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    background: rgba(99, 102, 241, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dr-doc-info strong[b-4qy1catjg5] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-doc-info span[b-4qy1catjg5] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}
.dr-doc-download[b-4qy1catjg5] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background var(--g-transition);
}
.dr-doc-download:hover[b-4qy1catjg5] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}

/* ═══════ SIDEBAR ═══════ */
.dr-sidebar[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 0%;
    min-width: 0;
    max-width: 500px;
    align-self: stretch;
}

.dr-sidebar-candidate[b-4qy1catjg5] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
.dr-sidebar-avatar[b-4qy1catjg5] {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}

.dr-avatar-thumb[b-4qy1catjg5] {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dr-avatar-thumb img[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dr-avatar-badge[b-4qy1catjg5] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
    border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.dr-avatar-badge img[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dr-sidebar-title[b-4qy1catjg5] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    margin: 0 0 var(--g-space-4);
}
.dr-sidebar-company[b-4qy1catjg5] {
       display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-job);
    color: var(--sidebar-icon);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .04em;
    margin-bottom: var(--g-space-16);
}
.dr-sidebar-separator[b-4qy1catjg5] {
    width: 100%;
    height: 1px;
    background: var(--g-gray-200);
    margin: 0 0 16px;
}
.dr-sidebar-label[b-4qy1catjg5] {
   font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.09em;
    color: var(--g-brand);
    margin-bottom: var(--g-space-12);
    text-transform: uppercase;
}
.dr-status-grid[b-4qy1catjg5] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}
.dr-status-item[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--g-space-8) 16px;
    flex: 1;
}
.dr-status-divider[b-4qy1catjg5] {
    width: 1px;
    background: var(--g-gray-200);
    align-self: stretch;
    flex-shrink: 0;
}
.dr-status-num[b-4qy1catjg5] {
       font-size: var(--g-fs-job-status);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-700);
    line-height: 1;
}
.dr-num-brand[b-4qy1catjg5] { color: var(--g-brand); }
.dr-status-label[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .05em;
    color: var(--g-text-muted);
}

/* ── Sidebar Cards ── */
.dr-sidebar-card[b-4qy1catjg5] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    padding: 18px var(--g-space-20);
}
.dr-sidebar-card-title[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .06em;
    color: var(--g-brand);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    text-transform: uppercase;
}
.dr-sidebar-rows[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dr-sidebar-row[b-4qy1catjg5] {
      display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    border-bottom: 1px solid var(--g-gray-100);

}
.dr-sidebar-row:last-child[b-4qy1catjg5] { border-bottom: none; }
.dr-sidebar-row strong[b-4qy1catjg5] { font-weight: var(--g-fw-bold); color: var(--g-gray-800); }
.dr-row-left[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    color: var(--g-text-secondary);
}
.dr-row-left svg[b-4qy1catjg5] { color: var(--g-text-muted); flex-shrink: 0; }
.dr-skill-yr[b-4qy1catjg5] {
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
}

/* ── REQUIRED SKILLS — Row layout ── */
.dr-req-skills-list[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--g-gray-50);
    border-radius: 8px;
    border: 1px solid var(--g-gray-100);
    overflow: hidden;
}
.dr-req-skill-row[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    font-size: var(--g-fs-sm);
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-gray-100);
    transition: background 0.15s ease;
}
.dr-req-skill-row:first-child[b-4qy1catjg5] {
    border-radius: 8px 8px 0 0;
}
.dr-req-skill-row:last-child[b-4qy1catjg5] {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}
.dr-req-skill-row:only-child[b-4qy1catjg5] {
    border-radius: 8px;
}
.dr-req-skill-row:hover[b-4qy1catjg5] {
    background: var(--g-gray-50);
}
.dr-req-skill-name[b-4qy1catjg5] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-700);
}
.dr-req-skill-exp[b-4qy1catjg5] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    font-size: var(--g-fs-xs);
}

/* ── MODERN DONUT CHART ── */
.dr-donut-wrap[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--g-space-16);
}
.dr-donut[b-4qy1catjg5] {
    position: relative;
    width: 165px;
    height: 165px;
}
.dr-donut-svg[b-4qy1catjg5] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.dr-donut-svg circle[b-4qy1catjg5] {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dr-donut-center[b-4qy1catjg5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dr-donut-label[b-4qy1catjg5] {
    font-size: var(--g-fs-xxxs);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.04em;
}
.dr-donut-value[b-4qy1catjg5] {
    font-size: var(--g-fs-display);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-900);
    line-height: 1.1;
}
.dr-donut-grade[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    margin-top: var(--g-space-8);
    letter-spacing: .05em;
}
.dr-donut-grade.excellent[b-4qy1catjg5] { color: var(--g-success); }
.dr-donut-grade.good[b-4qy1catjg5] { color: var(--g-success); }
.dr-donut-grade.fair[b-4qy1catjg5] { color: var(--g-warning); }
.dr-donut-grade.bad[b-4qy1catjg5] { color: var(--g-error); }
.dr-donut-grade.low[b-4qy1catjg5] { color: var(--g-error); }

.dr-legend[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}
.dr-legend-dot[b-4qy1catjg5] {
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

/* ── Donut segment interaction ── */
.dr-donut-segment[b-4qy1catjg5] {
    transition: stroke-width 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    transform-origin: 50% 50%;
}
.dr-donut-segment:hover[b-4qy1catjg5] {
    stroke-width: 7;
    filter: brightness(1.1);
}
.dr-segment-active[b-4qy1catjg5] {
    filter: brightness(1.08) drop-shadow(0 0 6px rgba(0,0,0,.18));
}

/* ── Legend active item ── */
.dr-legend-item[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    padding: 8px 10px;
    border-radius: var(--g-radius-md);
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}
.dr-legend-item:hover[b-4qy1catjg5] {
    background: var(--g-gray-50);
}
.dr-legend-item.dr-legend-active[b-4qy1catjg5] {
    background: var(--g-gray-100);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    transform: scale(1.02);
}
.dr-legend-item strong[b-4qy1catjg5] {
    margin-left: auto;
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

/* ── Legend highlight (selected segment detail) ── */
.dr-legend-highlight[b-4qy1catjg5] {
    margin-top: var(--g-space-12);
    padding: 12px 14px;
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
}
.dr-legend-highlight-header[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    margin-bottom: 6px;
}
.dr-legend-highlight-dot[b-4qy1catjg5] {
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}
.dr-legend-highlight-label[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}
.dr-legend-highlight-value[b-4qy1catjg5] {
    margin-left: auto;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-extrabold);
}
.dr-legend-highlight-desc[b-4qy1catjg5] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── AI Info Box (below legend) ── */
.dr-ai-info-box[b-4qy1catjg5] {
    margin-top: var(--g-space-16);
    padding: 14px 16px;
    background: color-mix(in srgb, var(--g-brand) 4%, var(--g-bg-card));
    border: 1px solid color-mix(in srgb, var(--g-brand) 15%, transparent);
    border-radius: var(--g-radius-lg);
}
.dr-ai-info-header[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    margin-bottom: 8px;
}
.dr-ai-info-header strong[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .06em;
    color: var(--g-gray-800);
}
.dr-ai-info-text[b-4qy1catjg5] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Sidebar AI Remarks ── */
.dr-sidebar-remarks .dr-remarks-text[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    line-height: var(--g-lh-relaxed);
}

/* ═══════ FIXED BOTTOM ACTION BAR ═══════ */
.dr-bottom-bar[b-4qy1catjg5] {
    position: fixed;
    bottom: 5px;
   left: 266px;
    right: 31px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    padding: 14px 24px;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-gray-200);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
    border-radius: 6px;
    flex-wrap: wrap;
    transition: left 0.3s ease;
}

.dr-submit-error[b-4qy1catjg5] {
    display: block;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: #dc2626;
    margin-top: 4px;
}

/* Checkbox + Label */
.dr-verify-wrap[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.dr-verify-label[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.dr-verify-checkbox[b-4qy1catjg5] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dr-verify-checkmark[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--g-gray-300);
    border-radius: var(--g-radius-xs);
    background: var(--g-bg-card);
    flex-shrink: 0;
    transition: all var(--g-transition);
}
.dr-verify-checkmark svg[b-4qy1catjg5] {
    opacity: 0;
    color: #fff;
    transition: opacity .15s;
}
.dr-verify-checkbox:checked + .dr-verify-checkmark[b-4qy1catjg5] {
    background: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
}
.dr-verify-checkbox:checked + .dr-verify-checkmark svg[b-4qy1catjg5] {
    opacity: 1;
}
.dr-verify-checkbox:focus-visible + .dr-verify-checkmark[b-4qy1catjg5] {
    box-shadow: 0 0 0 3px rgba(0, 111, 249, .2);
}
.dr-verify-text[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
    line-height: 1.4;
}

/* Bar Buttons */
.dr-bar-actions[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    flex-shrink: 0;
}
.dr-btn-draft[b-4qy1catjg5] {
    padding: 5px 22px;
    height: 30px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .04em;
    border: 1.5px solid var(--g-gray-300);
    border-radius: 10px;
    background: var(--g-bg-card);
    color: var(--g-gray-700);
    cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition);
    font-family: inherit;
    text-transform: uppercase;
}
.dr-btn-draft:hover[b-4qy1catjg5] {
    background: var(--g-gray-100);
    border-color: var(--g-gray-400);
}
.dr-btn-draft:disabled[b-4qy1catjg5] {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--g-bg-card);
    border-color: var(--g-gray-300);
}
.dr-btn-submit[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: 5px 22px;
    height: 30px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .04em;
    border: none;
    border-radius: 10px;
   background:var(--sidebar-active-bg);
    color: #fff;
    cursor: pointer;
    transition: background var(--g-transition), box-shadow var(--g-transition), opacity var(--g-transition);
    font-family: inherit;
    text-transform: uppercase;
}
.dr-btn-submit:hover:not(:disabled)[b-4qy1catjg5] {
    background: color-mix(in srgb, var(--g-brand, #2c7cff) 85%, #000);
    box-shadow: 0 2px 8px rgba(0, 111, 249, .25);
}
.dr-btn-submit:disabled[b-4qy1catjg5] {
    opacity: .45;
    cursor: not-allowed;
}

/* ═══════ RESPONSIVE ═══════ */

/* ── 1440px and below ── */
@media (max-width: 1440px) {
    .dr-page[b-4qy1catjg5] {
        padding-left: 0;
        padding-right: 0;
    }
    .dr-body[b-4qy1catjg5] {
        max-width: 1100px;
    }
    .dr-content[b-4qy1catjg5] {
        gap: 24px;
    }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
    .dr-content[b-4qy1catjg5] {
        flex-direction: column;
        gap: 20px;
    }
    .dr-sidebar[b-4qy1catjg5] {
        flex: none;
        width: 100%;
    }
    .dr-two-col[b-4qy1catjg5] {
        grid-template-columns: 1fr;
    }
    .dr-bottom-bar[b-4qy1catjg5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        left: 0;
        right: 0;
    }
    .dr-bar-actions[b-4qy1catjg5] {
        justify-content: flex-end;
    }
    /* Header: stack metrics below */
    .dr-header[b-4qy1catjg5] {
        flex-wrap: wrap;
    }
    .dr-header-meta[b-4qy1catjg5] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--g-gray-100);
    }
    .dr-meta-block:first-child[b-4qy1catjg5] {
        padding-left: 0;
    }
    /* Sticky header 1024 */
    .dr-scrolled-name[b-4qy1catjg5] {
        font-size: 13px;
    }
    .dr-scrolled-job-title[b-4qy1catjg5] {
        font-size: 12px;
    }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
    .dr-page[b-4qy1catjg5] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .dr-page-title-bar[b-4qy1catjg5] {
        margin-left: -8px;
        margin-right: -8px;
    }
    .dr-title-default[b-4qy1catjg5],
    .dr-title-scrolled[b-4qy1catjg5] {
        padding: 0 12px;
    }
    .dr-header-card-container[b-4qy1catjg5] {
        margin: 12px auto 0;
        border-radius: 12px;
    }
    .dr-header[b-4qy1catjg5] {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px 14px;
    }
    .dr-header-left[b-4qy1catjg5] {
        flex-direction: column;
        align-items: flex-start;
    }
    .dr-header-meta[b-4qy1catjg5] {
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--g-gray-100);
        padding-top: 12px;
        margin-top: 4px;
    }
    .dr-meta-row[b-4qy1catjg5] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .dr-body[b-4qy1catjg5] {
        padding: 16px 0;
    }
    .dr-bottom-bar[b-4qy1catjg5] {
        padding: 12px 16px;
        left: 0;
        right: 0;
    }
    .dr-bar-actions[b-4qy1catjg5] {
        width: 100%;
    }
    .dr-btn-draft[b-4qy1catjg5],
    .dr-btn-submit[b-4qy1catjg5] {
        flex: 1;
        justify-content: center;
    }
    .dr-donut[b-4qy1catjg5] {
        width: 130px;
        height: 130px;
        margin: 0 auto;
    }
    .dr-donut-value[b-4qy1catjg5] {
        font-size: var(--g-fs-page-title, 1.25rem);
    }
    /* Sticky header 768 — compact horizontal, smaller fonts */
    .dr-scrolled-name[b-4qy1catjg5] {
        font-size: 13px;
    }
    .dr-scrolled-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-avatar[b-4qy1catjg5] {
        width: 32px;
        height: 32px;
    }
    .dr-scrolled-avatar .dr-avatar-initials[b-4qy1catjg5] {
        font-size: 12px;
    }
    .dr-scrolled-job-avatar[b-4qy1catjg5] {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
    .dr-scrolled-job-title[b-4qy1catjg5] {
        font-size: 12px;
    }
    .dr-scrolled-job-meta[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
}

/* ── 425px and below — vertical stack ── */
@media (max-width: 425px) {
    .dr-page[b-4qy1catjg5] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .dr-page-title-bar[b-4qy1catjg5] {
        margin-left: -8px;
        margin-right: -8px;
        height: 48px;
    }
    .dr-title-default[b-4qy1catjg5],
    .dr-title-scrolled[b-4qy1catjg5] {
        padding: 0 8px;
    }
    .dr-page-heading .dr-page-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-header-card-container[b-4qy1catjg5] {
        margin: 10px auto 0;
        border-radius: 10px;
    }
    .dr-header[b-4qy1catjg5] {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    .dr-header-left[b-4qy1catjg5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .dr-header-name[b-4qy1catjg5] {
        font-size: var(--g-fs-body, 0.875rem);
    }
    .dr-header-meta[b-4qy1catjg5] {
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
        justify-content: space-between;
    }
    .dr-meta-divider[b-4qy1catjg5] {
        display: none;
    }
    .dr-meta-block[b-4qy1catjg5] {
        padding: 8px 0;
        flex: 1;
        min-width: calc(33% - 8px);
    }
    .dr-meta-row[b-4qy1catjg5] {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
    .dr-body[b-4qy1catjg5] {
        padding: 12px 0;
        margin: 12px auto;
    }
    .dr-content[b-4qy1catjg5] {
        gap: 14px;
    }
    .dr-card[b-4qy1catjg5] {
        padding: 16px;
        border-radius: 12px;
    }
    .dr-sidebar-card[b-4qy1catjg5] {
        padding: 14px;
        border-radius: 12px;
    }
    .dr-sidebar-candidate[b-4qy1catjg5] {
        padding: 16px;
        border-radius: 12px;
    }
    /* Status grid: 2x2 */
    .dr-status-grid[b-4qy1catjg5] {
        flex-wrap: wrap;
    }
    .dr-status-item[b-4qy1catjg5] {
        flex: 0 0 calc(50% - 1px);
        padding: 8px 12px;
    }
    .dr-status-divider[b-4qy1catjg5] {
        display: none;
    }
    .dr-bottom-bar[b-4qy1catjg5] {
        padding: 10px 12px;
        flex-direction: column;
        gap: 10px;
    }
    .dr-verify-text[b-4qy1catjg5] {
        font-size: 12px;
    }
    .dr-bar-actions[b-4qy1catjg5] {
        flex-direction: column;
        width: 100%;
    }
    .dr-btn-draft[b-4qy1catjg5],
    .dr-btn-submit[b-4qy1catjg5] {
        width: 100%;
        justify-content: center;
    }
    .dr-donut[b-4qy1catjg5] {
        width: 110px;
        height: 110px;
    }
    .dr-donut-value[b-4qy1catjg5] {
        font-size: var(--g-fs-page-title, 1.25rem);
    }
    .dr-legend-item[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-two-col[b-4qy1catjg5] {
        gap: 14px;
    }
    .dr-skills-wrap[b-4qy1catjg5] {
        gap: 6px;
    }
    /* Sticky header 425 — keep single row */
    .dr-title-scrolled[b-4qy1catjg5] {
        gap: 6px;
    }
    .dr-title-bar-scrolled .dr-title-scrolled[b-4qy1catjg5] {
        flex-direction: row;
        align-items: center;
    }
    .dr-title-scrolled-left[b-4qy1catjg5] {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }
    .dr-title-scrolled-right[b-4qy1catjg5] {
        flex-shrink: 0;
        padding-left: 0;
    }
    .dr-scrolled-avatar[b-4qy1catjg5] {
        width: 30px;
        height: 30px;
    }
    .dr-scrolled-avatar .dr-avatar-initials[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-scrolled-name[b-4qy1catjg5] {
        font-size: 12px;
    }
    .dr-scrolled-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-job-avatar[b-4qy1catjg5] {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }
    .dr-scrolled-job-title[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-scrolled-job-meta[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
}

/* ── 375px and below ── */
@media (max-width: 375px) {
    .dr-page-title-bar[b-4qy1catjg5] {
        margin-left: -6px;
        margin-right: -6px;
        height: 44px;
    }
    .dr-title-default[b-4qy1catjg5],
    .dr-title-scrolled[b-4qy1catjg5] {
        padding: 0 6px;
    }
    .dr-page-heading .dr-page-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-page-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-name[b-4qy1catjg5] {
        font-size: 12px;
    }
    .dr-scrolled-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-job-title[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-scrolled-job-meta[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-card[b-4qy1catjg5] {
        padding: 14px;
    }
    .dr-sidebar-card[b-4qy1catjg5] {
        padding: 12px;
    }
    .dr-sidebar-candidate[b-4qy1catjg5] {
        padding: 14px;
    }
    .dr-header-card-container[b-4qy1catjg5] {
        border-radius: 8px;
    }
}

/* ── 320px and below — minimal ── */
@media (max-width: 320px) {
    .dr-page[b-4qy1catjg5] {
        padding-left: 4px;
        padding-right: 4px;
    }
    .dr-page-title-bar[b-4qy1catjg5] {
        margin-left: -4px;
        margin-right: -4px;
        height: 40px;
    }
    .dr-title-default[b-4qy1catjg5],
    .dr-title-scrolled[b-4qy1catjg5] {
        padding: 0 4px;
    }
    .dr-page-heading .dr-page-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-scrolled-avatar[b-4qy1catjg5] {
        width: 26px;
        height: 26px;
    }
    .dr-scrolled-avatar .dr-avatar-initials[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-name[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dr-scrolled-subtitle[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-job-avatar[b-4qy1catjg5] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .dr-scrolled-job-title[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-scrolled-job-meta[b-4qy1catjg5] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dr-header-card-container[b-4qy1catjg5] {
        border-radius: 8px;
    }
    .dr-card[b-4qy1catjg5] {
        padding: 12px;
        border-radius: 10px;
    }
    .dr-sidebar-card[b-4qy1catjg5] {
        padding: 10px;
        border-radius: 10px;
    }
    .dr-header[b-4qy1catjg5] {
        padding: 10px;
        gap: 12px;
    }
    .dr-header-name[b-4qy1catjg5] {
        font-size: var(--g-fs-body, 0.875rem);
    }
    .dr-bottom-bar[b-4qy1catjg5] {
        padding: 8px;
    }
}

/* ═══ Personal Info / Submission Rate Grid ═══ */
.dr-info-grid[b-4qy1catjg5] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--g-space-16) var(--g-space-20);
}

.dr-info-item[b-4qy1catjg5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dr-info-label[b-4qy1catjg5] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dr-info-value[b-4qy1catjg5] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-gray-900);
    word-break: break-word;
}

.dr-info-value a[b-4qy1catjg5] {
    color: var(--g-brand);
    text-decoration: none;
}

.dr-info-value a:hover[b-4qy1catjg5] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .dr-info-grid[b-4qy1catjg5] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 425px) {
    .dr-info-grid[b-4qy1catjg5] {
        grid-template-columns: 1fr;
    }
}

/* ═══ Draft Saved Success Modal ═══ */
.dr-overlay[b-4qy1catjg5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9990;
    animation: drFadeIn-b-4qy1catjg5 0.2s ease;
}

.dr-success-popup[b-4qy1catjg5] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 9991;
    width: 90%;
    max-width: 420px;
    animation: drPopIn-b-4qy1catjg5 0.25s ease;
}

.dr-success-icon-wrap[b-4qy1catjg5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--g-success-bg);
    color: var(--g-success);
    margin: 0 auto 20px;
}

.dr-success-title[b-4qy1catjg5] {
    font-size: var(--g-fs-page-title, 1.25rem);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

.dr-success-message[b-4qy1catjg5] {
    font-size: 0.875rem;
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.dr-btn-success-ok[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 40px;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--sidebar-active-bg);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 5px -1px rgba(54, 54, 54, 0.2),
                0 5px 12px -4px rgba(209, 209, 209, 0.3);
}

.dr-btn-success-ok:hover[b-4qy1catjg5] {
    opacity: 0.92;
}

.dr-btn-outline[b-4qy1catjg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 28px;
    border: 1px solid var(--sidebar-active-bg);
    border-radius: var(--g-radius-md);
    background: #fff;
    color: var(--sidebar-active-bg);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dr-btn-outline:hover[b-4qy1catjg5] {
    background: #d6d6d6;
}

@keyframes drFadeIn-b-4qy1catjg5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes drPopIn-b-4qy1catjg5 {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* /Components/Pages/Dashboard/Candidate/CandidateFeedbackPage.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   CandidateFeedbackPage.razor.css  (scoped — cfp-* prefix)
   Page-specific layout + Track Profile workflow + Activity timeline.
   Shared analysis-card visuals come from /css/feedback-shared.css (fb-*)
   ════════════════════════════════════════════════════════════════ */

/* ===== PAGE SHELL ===== */
.cfp-page[b-8jcnb28z0e] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--g-topbar-h, 56px));
    background: var(--g-bg-page);
    position: relative;
}

/* ===== HEADER ===== */
.cfp-header[b-8jcnb28z0e] {
    position: sticky;
    top: 52px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    padding: var(--g-space-10) var(--g-space-20);
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-border);
    min-height: 52px;
}
.cfp-header-left[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-16); min-width: 0; }

/* Breadcrumb shown by default, compact shown on scroll */
.cfp-hdr-compact[b-8jcnb28z0e] { display: none; }
.cfp-hdr-breadcrumb[b-8jcnb28z0e] { display: flex; }

.cfp-hdr-divider[b-8jcnb28z0e] {
    width: 1px;
    height: 32px;
    background: var(--g-border);
    flex-shrink: 0;
}
.cfp-hdr-thumb-wrap[b-8jcnb28z0e] {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.cfp-hdr-thumb-wrap .cfp-hdr-thumb[b-8jcnb28z0e] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    object-fit: cover;
}
.cfp-hdr-client-badge[b-8jcnb28z0e] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    background: #fff;
}
.cfp-brand-logo[b-8jcnb28z0e] {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
}

.cfp-btn-icon[b-8jcnb28z0e] {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    color: var(--g-text-secondary);
    cursor: pointer;
    transition: var(--g-transition);
}
.cfp-btn-icon:hover[b-8jcnb28z0e] { color: var(--g-brand); border-color: var(--g-brand-border); background: var(--g-brand-bg); }

.cfp-breadcrumb[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-6); font-size: var(--g-fs-sm); }
.cfp-bc-link[b-8jcnb28z0e] { color: var(--g-brand); text-decoration: none; font-weight: var(--g-fw-medium); }
.cfp-bc-link:hover[b-8jcnb28z0e] { text-decoration: underline; }
.cfp-bc-sep[b-8jcnb28z0e] { color: var(--g-text-muted); }
.cfp-bc-current[b-8jcnb28z0e] { color: var(--g-text-heading); font-weight: var(--g-fw-semibold); }

.cfp-hdr-info[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-8); min-width: 0; }
.cfp-hdr-thumb[b-8jcnb28z0e] {
    width: 36px; height: 36px; border-radius: var(--g-radius-md);
    object-fit: cover; background: var(--g-bg-page); flex-shrink: 0;
}
.cfp-hdr-avatar[b-8jcnb28z0e] {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; background: var(--g-bg-page); flex-shrink: 0;
}
.cfp-hdr-stack[b-8jcnb28z0e] { display: flex; flex-direction: column; min-width: 0; }
.cfp-hdr-title[b-8jcnb28z0e] {
    font-size: var(--g-fs-table-header); font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.cfp-hdr-sub[b-8jcnb28z0e] {
    font-size: var(--g-fs-xs); color: var(--g-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cfp-header-right[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-10); }
.cfp-brand[b-8jcnb28z0e] {
    display: inline-flex; align-items: center; gap: var(--g-space-6);
    padding: 4px var(--g-space-10); 
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
 }

/* ===== BODY ===== */
.cfp-body[b-8jcnb28z0e] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--g-space-16);
    padding: var(--g-space-16) var(--g-space-20);
    align-items: start;
}
.cfp-left[b-8jcnb28z0e]  { display: flex; flex-direction: column; gap: var(--g-space-12); min-width: 0; position: sticky; top: 68px; }
.cfp-right[b-8jcnb28z0e] { display: flex; flex-direction: column; gap: var(--g-space-12); min-width: 0; position: sticky; top: 68px; }

/* ===== TRACK PROFILE CARD ===== */
.cfp-track[b-8jcnb28z0e] { padding: var(--g-space-16) var(--g-space-20) var(--g-space-12); }
.cfp-track-head[b-8jcnb28z0e] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--g-space-10);
    padding-bottom: var(--g-space-12);
    border-bottom: 1px solid var(--g-border);
    margin-bottom: var(--g-space-12);
}
.cfp-track-title[b-8jcnb28z0e] { margin: 0; font-size: var(--g-fs-card-title); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }
.cfp-track-sub[b-8jcnb28z0e] { margin: 2px 0 0; font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.cfp-btn-glider[b-8jcnb28z0e] {
    display: inline-flex; align-items: center; gap: var(--g-space-6);
    padding: 6px var(--g-space-10);
    background: var(--g-info, #14b8a6);
    color: var(--g-bg-card);
    border: 1px solid transparent;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: var(--g-transition);
}
.cfp-btn-glider:hover[b-8jcnb28z0e] { filter: brightness(0.95); }

/* ===== DROPDOWN ROW ===== */
.cfp-track-dropdowns[b-8jcnb28z0e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-10);
    margin-bottom: var(--g-space-12);
}
.cfp-field[b-8jcnb28z0e] { display: flex; flex-direction: column; gap: 4px; }
.cfp-label[b-8jcnb28z0e] { font-size: var(--g-fs-xs); font-weight: var(--g-fw-semibold); color: var(--g-text-label); }
.cfp-required[b-8jcnb28z0e] { color: var(--g-error); }
.cfp-select-wrap[b-8jcnb28z0e] { position: relative; }
.cfp-stage-dot[b-8jcnb28z0e] {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%; background: var(--g-text-muted);
    pointer-events: none; z-index: 1;
}
.cfp-select-wrap .cfp-select[b-8jcnb28z0e] { padding-left: 26px; }
.cfp-dot-gray[b-8jcnb28z0e]   { background: var(--g-text-muted); }
.cfp-dot-amber[b-8jcnb28z0e]  { background: var(--g-warning); }
.cfp-dot-violet[b-8jcnb28z0e] { background: #8b5cf6; }
.cfp-dot-teal[b-8jcnb28z0e]   { background: #14b8a6; }
.cfp-dot-green[b-8jcnb28z0e]  { background: var(--g-success); }
.cfp-dot-blue[b-8jcnb28z0e]   { background: var(--g-brand); }

.cfp-select[b-8jcnb28z0e], .cfp-input[b-8jcnb28z0e], .cfp-textarea[b-8jcnb28z0e] {
    width: 100%;
    padding: 8px var(--g-space-10);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    font-family: inherit;
    transition: var(--g-transition);
}
.cfp-select:focus[b-8jcnb28z0e], .cfp-input:focus[b-8jcnb28z0e], .cfp-textarea:focus[b-8jcnb28z0e] {
    outline: none;
    border-color: var(--g-brand);
    box-shadow: 0 0 0 3px var(--g-brand-bg);
}
.cfp-select:disabled[b-8jcnb28z0e] { background: var(--g-gray-50); color: var(--g-text-muted); cursor: not-allowed; }
.cfp-textarea[b-8jcnb28z0e] { resize: vertical; min-height: 80px; line-height: var(--g-lh-relaxed); }

/* ===== FORM HEAD (badge row) ===== */
.cfp-track-form[b-8jcnb28z0e] { display: flex; flex-direction: column; gap: var(--g-space-12); }
.cfp-form-head[b-8jcnb28z0e] {
    display: flex; align-items: center; gap: var(--g-space-10);
    padding: var(--g-space-8) var(--g-space-10);
    background: var(--g-gray-50);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
}
.cfp-form-icon[b-8jcnb28z0e] {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--g-brand-bg); color: var(--g-brand);
    border-radius: var(--g-radius-sm);
    flex-shrink: 0;
}
.cfp-form-icon-warn[b-8jcnb28z0e] { background: var(--g-warning-bg); color: var(--g-warning-text); }
.cfp-form-icon-star[b-8jcnb28z0e] { background: transparent; color: var(--g-success); }
.cfp-form-head-plain[b-8jcnb28z0e] { background: transparent; border-color: transparent; padding-left: 0; }
.cfp-form-head-text[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-8); flex: 1; min-width: 0; }
.cfp-form-stage-name[b-8jcnb28z0e] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }
.cfp-form-options-pill[b-8jcnb28z0e] {
    padding: 2px 8px;
    background: var(--g-brand-bg);
    color: var(--g-brand);
    border: 1px solid var(--g-brand-border);
    border-radius: var(--g-radius-full);
    font-size: 9px;
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.04em;
}
.cfp-pill-warn[b-8jcnb28z0e] { background: var(--g-warning-bg); color: var(--g-warning-text); border-color: var(--g-warning-border); }
.cfp-btn-undo[b-8jcnb28z0e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: var(--g-radius-sm);
    color: #0069ff;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    cursor: pointer;
}
.cfp-btn-undo:hover[b-8jcnb28z0e] { color: var(--g-brand); border-color: var(--g-brand-border); }
.cfp-btn-undo-mt[b-8jcnb28z0e] { margin-top: 10px; }

/* ===== ONBOARDED WORKFLOW ===== */
.cfp-onboard-yn[b-8jcnb28z0e] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-12);
    margin-left: auto;
}
.cfp-radio[b-8jcnb28z0e] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    cursor: pointer;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    position: relative;
}
.cfp-radio input[b-8jcnb28z0e] { position: absolute; opacity: 0; pointer-events: none; }
.cfp-radio-circle[b-8jcnb28z0e] {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--g-border);
    background: var(--g-bg-card);
    transition: var(--g-transition);
    flex-shrink: 0;
}
.cfp-radio:hover .cfp-radio-circle[b-8jcnb28z0e] { border-color: var(--g-text-muted); }
.cfp-radio-yes-active .cfp-radio-circle[b-8jcnb28z0e] {
    border-color: var(--g-success);
    background: var(--g-success);
    box-shadow: inset 0 0 0 3px var(--g-bg-card);
}
.cfp-radio-no-active .cfp-radio-circle[b-8jcnb28z0e] {
    border-color: var(--g-text-heading);
    background: var(--g-text-heading);
    box-shadow: inset 0 0 0 3px var(--g-bg-card);
}
.cfp-radio-label-yes[b-8jcnb28z0e] { color: var(--g-success-text); }
.cfp-radio-label-no[b-8jcnb28z0e]  { color: var(--g-error-text); }

.cfp-onboard-grid[b-8jcnb28z0e] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--g-space-10);
    transition: opacity 180ms var(--g-ease, ease);
}
.cfp-onboard-grid .cfp-input[b-8jcnb28z0e],
.cfp-onboard-grid .cfp-select[b-8jcnb28z0e] {
    background: var(--g-gray-50);
}
.cfp-onboard-grid .cfp-input:focus[b-8jcnb28z0e],
.cfp-onboard-grid .cfp-select:focus[b-8jcnb28z0e] {
    background: var(--g-bg-card);
}
.cfp-onboard-grid-disabled[b-8jcnb28z0e] { opacity: 0.6; }
.cfp-onboard-grid-disabled .cfp-input[b-8jcnb28z0e],
.cfp-onboard-grid-disabled .cfp-select[b-8jcnb28z0e] {
    background: var(--g-gray-50);
    color: var(--g-text-muted);
    cursor: not-allowed;
}
.cfp-onboard-grid-disabled .cfp-label[b-8jcnb28z0e] { color: var(--g-text-muted); }

@media (max-width: 768px) {
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: 1fr; }
}

/* ===== SCHEDULE SECTION ===== */
.cfp-schedule-section[b-8jcnb28z0e] {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.cfp-schedule-head[b-8jcnb28z0e] {
    display: flex; align-items: center; gap: var(--g-space-6);
    color: var(--g-text-heading);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    margin-bottom: var(--g-space-8);
}
.cfp-schedule-head svg[b-8jcnb28z0e] { color: var(--g-brand); }
.cfp-schedule-grid[b-8jcnb28z0e] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-space-8); }

/* ===== TEXTAREA + INLINE FOOT (AI Improve inside) ===== */
.cfp-textarea-wrap[b-8jcnb28z0e] {
    display: flex;
    flex-direction: column;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    transition: var(--g-transition);
    overflow: hidden;
}
.cfp-textarea-wrap:focus-within[b-8jcnb28z0e] {
    border-color: var(--g-brand);
    box-shadow: 0 0 0 3px var(--g-brand-bg);
}
.cfp-textarea-bare[b-8jcnb28z0e] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    resize: none;
    min-height: 50px;
}
.cfp-textarea-bare:focus[b-8jcnb28z0e] { outline: none; box-shadow: none !important; }
.cfp-textarea-foot[b-8jcnb28z0e] {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: var(--g-space-8);
    padding: 4px var(--g-space-10) var(--g-space-8);
    background: transparent;
}
.cfp-char-count[b-8jcnb28z0e] { display: block; text-align: right; margin-top: 4px; font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.cfp-link-ai[b-8jcnb28z0e] {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; border: 0;
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    cursor: pointer;
    padding: 0;
}
.cfp-link-ai:hover[b-8jcnb28z0e] { text-decoration: underline; }
.cfp-link-ai:disabled[b-8jcnb28z0e] { opacity: .6; cursor: not-allowed; text-decoration: none; }
.cfp-ai-spinner[b-8jcnb28z0e] { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cfp-spin-b-8jcnb28z0e .6s linear infinite; }
.cfp-btn-spinner[b-8jcnb28z0e] { display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cfp-spin-b-8jcnb28z0e .6s linear infinite; }
@keyframes cfp-spin-b-8jcnb28z0e { to { transform: rotate(360deg); } }

/* ===== ONBOARD LOCKED BANNER ===== */
.cfp-onboard-locked[b-8jcnb28z0e] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    padding: 10px;
    background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03));
    border: 1px solid rgba(34,197,94,0.28);
    border-radius: var(--g-radius-md);
    margin-bottom: var(--g-space-4);
}
.cfp-onboard-locked-icon[b-8jcnb28z0e] {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--g-success);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(34,197,94,0.25);
}
.cfp-onboard-locked-body[b-8jcnb28z0e] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfp-onboard-locked-title[b-8jcnb28z0e] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}
.cfp-onboard-locked-text[b-8jcnb28z0e] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-relaxed);
}

/* Reject variant */
.cfp-onboard-locked-reject[b-8jcnb28z0e] {
    background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.03));
    border-color: rgba(239,68,68,0.28);
}
.cfp-onboard-locked-reject .cfp-onboard-locked-icon[b-8jcnb28z0e] {
    background: var(--g-error);
    box-shadow: 0 2px 6px rgba(239,68,68,0.25);
}

/* Hold variant */
.cfp-onboard-locked-hold[b-8jcnb28z0e] {
    background: linear-gradient(180deg, rgba(245,158,11,0.08), rgba(245,158,11,0.03));
    border-color: rgba(245,158,11,0.28);
}
.cfp-onboard-locked-hold .cfp-onboard-locked-icon[b-8jcnb28z0e] {
    background: #f59e0b;
    box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}

/* ===== ONBOARD ACTIVITY CARD ===== */
.cfp-tl-invite.cfp-tl-onboard .cfp-tl-onboard-grid[b-8jcnb28z0e] { grid-template-columns: 1fr 1fr; }
.cfp-invite-icon-amber[b-8jcnb28z0e] { background: rgba(245,158,11,0.12); color: #b45309; border: 1px solid rgba(245,158,11,0.3); }
.cfp-invite-icon-violet[b-8jcnb28z0e] { background: rgba(139,92,246,0.12); color: #6d28d9; border: 1px solid rgba(139,92,246,0.3); }

/* ===== DECISION BUTTONS ===== */
.cfp-decision-row[b-8jcnb28z0e] { display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.cfp-decision-btn[b-8jcnb28z0e] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 6px var(--g-space-12);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-body);
    cursor: pointer;
    transition: var(--g-transition);
    box-shadow: var(--g-shadow-xs);
}
.cfp-decision-btn:hover[b-8jcnb28z0e] { background: var(--g-gray-50); border-color: var(--g-text-muted); }
.cfp-decision-dot[b-8jcnb28z0e] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--g-gray-300, #d1d5db);
    flex-shrink: 0;
    transition: var(--g-transition);
}
.cfp-decision-name[b-8jcnb28z0e] { line-height: 1; }

.cfp-decision-approve:hover .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-success); }
.cfp-decision-reject:hover  .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-error); }
.cfp-decision-hold:hover    .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-warning); }

.cfp-decision-approve.cfp-decision-active[b-8jcnb28z0e] {
    background: var(--g-success-bg);
    border-color: var(--g-success);
    color: var(--g-success-text);
}
.cfp-decision-approve.cfp-decision-active .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-success); }

.cfp-decision-reject.cfp-decision-active[b-8jcnb28z0e] {
    background: var(--g-error-bg);
    border-color: var(--g-error);
    color: var(--g-error-text);
}
.cfp-decision-reject.cfp-decision-active .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-error); }

.cfp-decision-hold.cfp-decision-active[b-8jcnb28z0e] {
    background: var(--g-warning-bg);
    border-color: var(--g-warning);
    color: var(--g-warning-text);
}
.cfp-decision-hold.cfp-decision-active .cfp-decision-dot[b-8jcnb28z0e] { background: var(--g-warning); }

/* ===== ACTION BAR ===== */
.cfp-action-bar[b-8jcnb28z0e] { display: flex; gap: var(--g-space-8); justify-content: flex-end; padding-top: var(--g-space-8); border-top: 1px dashed var(--g-border); }
.cfp-btn-clear[b-8jcnb28z0e] {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 16px;
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: var(--g-transition);
}
.cfp-btn-clear:hover[b-8jcnb28z0e] { background: var(--g-gray-50); color: var(--g-text-heading); }

/* ===== CHARACTER COUNTER ===== */
.cfp-char-count[b-8jcnb28z0e] {
    display: block;
    text-align: right;
    margin-top: 4px;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    white-space: nowrap;
}

/* ===== VALIDATION / ERROR STATES ===== */
.cfp-required[b-8jcnb28z0e] { color: var(--g-error); font-weight: var(--g-fw-semibold); margin-left: 2px; }
.cfp-field-err[b-8jcnb28z0e] {
    display: block;
    margin-top: 4px;
    font-size: var(--g-fs-xxs);
    color: var(--g-error);
    line-height: 1.3;
}
.cfp-input-error[b-8jcnb28z0e],
.cfp-input-error:focus[b-8jcnb28z0e],
.cfp-input.cfp-input-error[b-8jcnb28z0e],
.cfp-select.cfp-input-error[b-8jcnb28z0e] {
    border-color: var(--g-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.cfp-textarea-wrap-error[b-8jcnb28z0e] {
    border-color: var(--g-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.cfp-decision-row-error[b-8jcnb28z0e] {
    padding: 4px;
    border: 1px solid var(--g-error);
    border-radius: var(--g-radius-md);
    background: rgba(239, 68, 68, 0.04);
}

/* ===== ACTIVITY HISTORY (timeline) ===== */
.cfp-activity[b-8jcnb28z0e] { margin-top: var(--g-space-16); padding-top: var(--g-space-12); border-top: 1px solid var(--g-border); }
.cfp-activity-title[b-8jcnb28z0e] {
    display: flex; align-items: center; gap: var(--g-space-6);
    margin: 0 0 var(--g-space-12);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}
.cfp-timeline[b-8jcnb28z0e] { list-style: none; margin: 0; padding: 0; }
.cfp-tl-item[b-8jcnb28z0e] {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--g-space-10);
    padding-bottom: var(--g-space-12);
}
.cfp-tl-item[b-8jcnb28z0e]::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: var(--g-border);
}
.cfp-tl-last[b-8jcnb28z0e]::before { display: none; }
.cfp-tl-icon[b-8jcnb28z0e] {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--g-bg-card);
    border: 2px solid var(--g-text-muted);
    color: var(--g-text-muted);
    flex-shrink: 0;
    z-index: 1;
}
.cfp-tl-approve[b-8jcnb28z0e] { border-color: var(--g-success); color: var(--g-success); }
.cfp-tl-submitted[b-8jcnb28z0e] { border-color: var(--g-text-muted); color: var(--g-text-muted); }
.cfp-tl-reject[b-8jcnb28z0e]  { border-color: var(--g-error); color: var(--g-error); }
.cfp-tl-hold[b-8jcnb28z0e]    { border-color: var(--g-warning); color: var(--g-warning); }
.cfp-tl-scheduled[b-8jcnb28z0e] { border-color: #14b8a6; background: #14b8a6; color: var(--g-bg-card); }
.cfp-tl-ai[b-8jcnb28z0e]      { /* item modifier: handled below */ }
.cfp-tl-icon.cfp-tl-ai[b-8jcnb28z0e] { border-color: var(--g-brand); background: var(--g-brand); color: var(--g-bg-card); }

.cfp-tl-content[b-8jcnb28z0e] { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cfp-tl-header[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-8); }
.cfp-tl-heading[b-8jcnb28z0e] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); flex: 1; }
.cfp-tl-edit[b-8jcnb28z0e] {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-secondary);
    cursor: pointer;
}
.cfp-tl-edit:hover[b-8jcnb28z0e] { color: var(--g-brand); border-color: var(--g-brand-border); }
.cfp-tl-by[b-8jcnb28z0e] { display: flex; align-items: center; gap: 6px; font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.cfp-tl-avatar[b-8jcnb28z0e] { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.cfp-tl-avatar-initials[b-8jcnb28z0e] { 
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 8px;
    font-weight: var(--g-fw-semibold); 
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-transform: uppercase;
 }
.cfp-tl-user[b-8jcnb28z0e] { font-weight: var(--g-fw-semibold); color: var(--g-text-body); }
.cfp-tl-dot[b-8jcnb28z0e] { color: var(--g-text-muted); }
.cfp-tl-msg[b-8jcnb28z0e] {
    margin: 7px 0 7px;
    padding: var(--g-space-8) var(--g-space-10);
    background: var(--g-gray-50);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    color: var(--g-text-body);
    line-height: var(--g-lh-relaxed);
}
.cfp-tl-msg-ai[b-8jcnb28z0e] {
    background: var(--g-brand-bg);
    border-color: var(--g-brand-border);
    border-left: 3px solid var(--g-brand);
}

/* ===== INVITE CARD (timeline scheduled) ===== */
.cfp-tl-invite[b-8jcnb28z0e] {
    margin-top: 4px; 
    border: 1px solid var(--g-brand-border);
    border-radius: var(--g-radius-md);
    padding: var(--g-space-10);
    display: flex; flex-direction: column; gap: var(--g-space-8);
}
.cfp-tl-invite-grid[b-8jcnb28z0e] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-space-10); }
.cfp-invite-item[b-8jcnb28z0e] { display: flex; align-items: center; gap: var(--g-space-8); }
.cfp-invite-icon[b-8jcnb28z0e] {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--g-radius-sm);
    flex-shrink: 0;
}
.cfp-invite-icon-blue[b-8jcnb28z0e] { background: var(--g-brand-bg); color: var(--g-brand); border: 1px solid var(--g-brand-border); }
.cfp-invite-icon-teal[b-8jcnb28z0e] { background: rgba(20, 184, 166, 0.12); color: #0d9488; border: 1px solid rgba(20, 184, 166, 0.3); }
.cfp-invite-label[b-8jcnb28z0e] { display: block; font-size: var(--g-fs-xxs); color: var(--g-text-muted); font-weight: var(--g-fw-medium); }
.cfp-invite-value[b-8jcnb28z0e] { display: block; font-size: var(--g-fs-sm); color: var(--g-text-heading); font-weight: var(--g-fw-semibold); }
.cfp-invite-actions[b-8jcnb28z0e] { display: flex; gap:15px; justify-content: flex-end; }

/* ===== FOOTER ===== */
.cfp-footer[b-8jcnb28z0e] {
    position: sticky;
    bottom: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    padding: var(--g-space-10) var(--g-space-20);
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.cfp-footer-meta[b-8jcnb28z0e] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }

/* ===== TOAST ===== */
.cfp-toast[b-8jcnb28z0e] {
    position: fixed;
    right: var(--g-space-20);
    bottom: 72px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: var(--g-space-10) var(--g-space-16);
    background: var(--g-text-heading);
    color: var(--g-bg-card);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    animation: cfpToastIn-b-8jcnb28z0e 220ms var(--g-ease, cubic-bezier(.4,0,.2,1));
}
@keyframes cfpToastIn-b-8jcnb28z0e {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1440px) {
    .cfp-body[b-8jcnb28z0e] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1280px) {
    .cfp-body[b-8jcnb28z0e] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
    .cfp-body[b-8jcnb28z0e] { grid-template-columns: 1fr; gap: var(--g-space-12); }
    .cfp-right[b-8jcnb28z0e] { position: static; }
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .fb-context[b-8jcnb28z0e] { grid-template-columns: 1fr; }
    .fb-match-divider[b-8jcnb28z0e] { flex-direction: row; padding: var(--g-space-6) 0; }
    .fb-match-line[b-8jcnb28z0e] { width: auto; height: 1px; flex: 1; }
    .fb-meta-end[b-8jcnb28z0e] { text-align: left; }
    .fb-icon-row[b-8jcnb28z0e] { justify-content: flex-start; }
    .fb-status-grid[b-8jcnb28z0e] { grid-template-columns: repeat(3, 1fr); row-gap: var(--g-space-12); }
    .fb-status-cell:nth-child(3n)[b-8jcnb28z0e] { border-right: none; }
    .fb-rate-row[b-8jcnb28z0e] { flex-direction: column; align-items: stretch; gap: var(--g-space-10); }
    .fb-rate-bar[b-8jcnb28z0e] { display: none; }
    .fb-rate-col-end[b-8jcnb28z0e] { align-items: flex-start; text-align: left; }
    .fb-skills-row[b-8jcnb28z0e] { flex-direction: column; }
    .fb-skill-score[b-8jcnb28z0e] { align-items: flex-start; }
    .fb-fit-row[b-8jcnb28z0e] { flex-direction: column; align-items: stretch; }
    .fb-fit-legend[b-8jcnb28z0e] { min-width: 0; }
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .cfp-body[b-8jcnb28z0e] { padding: var(--g-space-12); }
    .cfp-header[b-8jcnb28z0e] { padding: var(--g-space-8) var(--g-space-12); }
    .cfp-footer[b-8jcnb28z0e] { padding: var(--g-space-8) var(--g-space-12); }
    .cfp-track[b-8jcnb28z0e] { padding: var(--g-space-12); }
    .cfp-track-head[b-8jcnb28z0e] { flex-direction: column; align-items: flex-start; }
    .cfp-track-dropdowns[b-8jcnb28z0e] { grid-template-columns: 1fr; }
    .cfp-schedule-grid[b-8jcnb28z0e] { grid-template-columns: 1fr; }
    .cfp-form-head[b-8jcnb28z0e] { flex-wrap: wrap; }
    .cfp-onboard-yn[b-8jcnb28z0e] { margin-left: 0; }
    .cfp-tl-invite-grid[b-8jcnb28z0e] { grid-template-columns: 1fr; }
    .cfp-invite-actions[b-8jcnb28z0e] { flex-direction: column; }
    .cfp-invite-actions > *[b-8jcnb28z0e] { width: 100%; }
    .cfp-action-bar[b-8jcnb28z0e] { flex-direction: column-reverse; }
    .cfp-action-bar > *[b-8jcnb28z0e] { width: 100%; }
}
@media (max-width: 560px) {
    .fb-status-grid[b-8jcnb28z0e] { grid-template-columns: repeat(2, 1fr); }
    .fb-status-cell[b-8jcnb28z0e] { border-right: none; border-bottom: 1px solid var(--g-border); padding-bottom: var(--g-space-8); }
    .fb-status-cell:nth-last-child(-n+2)[b-8jcnb28z0e] { border-bottom: none; padding-bottom: 0; }
    .cfp-onboard-grid[b-8jcnb28z0e] { grid-template-columns: 1fr; }
    .cfp-decision-row[b-8jcnb28z0e] { flex-direction: column; }
    .cfp-decision-btn[b-8jcnb28z0e] { width: 100%; justify-content: center; }
}

/* ===== RESUME VIEWER MODAL ===== */
.cfp-resume-backdrop[b-8jcnb28z0e] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfp-resume-modal[b-8jcnb28z0e] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 1024px;
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cfp-resume-modal-head[b-8jcnb28z0e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-16) var(--g-space-24);
    border-bottom: 1px solid var(--g-border);
    flex-shrink: 0;
}
.cfp-resume-modal-title[b-8jcnb28z0e] {
    margin: 0;
    font-size: 15px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}
.cfp-resume-modal-close[b-8jcnb28z0e] {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--g-radius-full);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: var(--g-transition);
}
.cfp-resume-modal-close:hover[b-8jcnb28z0e] { background: var(--g-gray-100); color: var(--g-text-heading); }
.cfp-resume-modal-body[b-8jcnb28z0e] {
    flex: 1;
    background: var(--g-bg-section);
    overflow-y: auto;
}
.cfp-spinner[b-8jcnb28z0e] {
    width: 32px; height: 32px;
    border: 3px solid var(--g-gray-200);
    border-top-color: var(--g-brand);
    border-radius: 50%;
    animation: cfp-spin-b-8jcnb28z0e 0.7s linear infinite;
}
@keyframes cfp-spin-b-8jcnb28z0e { to { transform: rotate(360deg); } }

/* Warning banner */
.cfp-warning-banner[b-8jcnb28z0e] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #92400e;
}
.cfp-warning-close[b-8jcnb28z0e] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: #92400e;
    cursor: pointer;
    line-height: 1;
}

/* Resume modal states */
.cfp-resume-loading[b-8jcnb28z0e] {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0;
}
.cfp-resume-loading-text[b-8jcnb28z0e] {
    color: var(--g-text-muted); font-size: 14px; margin: 0;
}
.cfp-resume-iframe[b-8jcnb28z0e] {
    width: 100%; height: 100%; border: none; border-radius: 8px;
}
.cfp-resume-docx[b-8jcnb28z0e] {
    width: 100%; height: 100%; overflow: auto; background: #fff; border-radius: 8px; padding: 16px;
}
.cfp-resume-error[b-8jcnb28z0e] {
    text-align: center; padding: 48px 0; color: #dc2626;
}
.cfp-resume-error svg[b-8jcnb28z0e] { margin-bottom: 12px; }
.cfp-resume-error-text[b-8jcnb28z0e] { font-weight: 500; margin: 0; }
.cfp-resume-empty[b-8jcnb28z0e] {
    text-align: center; padding: 48px 0; color: var(--g-text-muted);
}

@media (max-width: 480px) {
    .cfp-brand-name[b-8jcnb28z0e] { display: none; }
    .cfp-bc-link[b-8jcnb28z0e], .cfp-bc-sep[b-8jcnb28z0e] { display: none; }
    .cfp-footer[b-8jcnb28z0e] { flex-direction: column-reverse; align-items: stretch; gap: var(--g-space-8); }
    .cfp-footer .g-btn-cancel[b-8jcnb28z0e] { width: 100%; }
    .cfp-footer-meta[b-8jcnb28z0e] { text-align: center; }
    .cfp-toast[b-8jcnb28z0e] { right: var(--g-space-12); left: var(--g-space-12); bottom: 80px; justify-content: center; }
}
/* /Components/Pages/Dashboard/Candidate/CandidateList.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate List – cl- prefix
   Card-based layout · Responsive · GOrecruitAI
   ═══════════════════════════════════════════ */

/* ── Page Shell ── */
.cl-page[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
}

/* ── Sticky Top Container (header + tabs + toolbar) ── */
.cl-sticky-top[b-jlqz27pxax] {
    position: sticky;
    top: 58px;
    z-index: 50;
    background: var(--g-bg-card, #fff);
    flex-shrink: 0;
    padding: 20px 24px 10px;
    border-bottom: 1px solid var(--g-gray-100);
}

/* ── Header ── */
.cl-header[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-12);
    margin-bottom: var(--g-space-20);
    flex-shrink: 0;
}

.cl-header-left[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-title[b-jlqz27pxax] {
    font-size: var(--g-fs-page-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cl-subtitle[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: var(--g-space-4) 0 0;
    line-height: 1.5;
}

.cl-add-btn[b-jlqz27pxax] {
    height: 30px;
    padding: var(--g-space-6) var(--g-space-20);
    font-size: var(--g-fs-xxs);
}

/* ── Pipeline Tabs (rounded pill style) ── */
.cl-tabs-wrap[b-jlqz27pxax] {
    margin-bottom: var(--g-space-16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}

.cl-tabs-wrap[b-jlqz27pxax]::-webkit-scrollbar {
    display: none;
}

.cl-tabs[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    white-space: nowrap;
    min-width: min-content;
}

.cl-tab[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 7px var(--g-space-16);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-card);
    color: var(--g-gray-600);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.cl-tab:hover:not(.active)[b-jlqz27pxax] {
    background: var(--g-gray-50);
    border-color: var(--g-gray-300);
}

.cl-tab.active[b-jlqz27pxax] {
    color: var(--g-brand);
    border-color: var(--g-brand);
    background: var(--g-brand-bg, #eef7ff);
}

.cl-tab-count[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 var(--g-space-6);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    transition: all var(--g-transition);
}

.cl-tab.active .cl-tab-count[b-jlqz27pxax] {
    color: var(--g-brand);
    background: color-mix(in srgb, var(--g-brand) 12%, transparent);
}

/* ── Toolbar (search + results + sort) ── */
.cl-toolbar[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    padding-bottom: var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-200);
    min-height: 48px;
}

.cl-search-wrap[b-jlqz27pxax] {
    position: relative;
    flex: 0 1 clamp(180px, 30%, 380px);
    min-width: 140px;
}

.cl-search-icon[b-jlqz27pxax] {
    position: absolute;
    left: var(--g-space-12);
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    pointer-events: none;
}

.cl-search-input[b-jlqz27pxax] {
    width: 100%;
    padding: 9px var(--g-space-12) 9px 38px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-800);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
}

.cl-search-input[b-jlqz27pxax]::placeholder {
    color: var(--g-text-muted);
}

.cl-search-input:focus[b-jlqz27pxax] {
    border-color: var(--g-brand);
    box-shadow: var(--g-focus-shadow);
}

.cl-toolbar-right[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.cl-result-count[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted);
    white-space: nowrap;
}

.cl-sort-wrap[b-jlqz27pxax] {
    position: relative;
    z-index: 60;
}

.cl-sort-btn[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 7px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    font-size: var(--g-fs-xs);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    white-space: nowrap;
}

.cl-sort-btn:hover[b-jlqz27pxax] {
    border-color: var(--g-gray-300);
    box-shadow: var(--g-shadow-xs);
}

.cl-sort-btn strong[b-jlqz27pxax] {
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

.cl-sort-dropdown[b-jlqz27pxax] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-lg);
    z-index: 200;
    min-width: 200px;
    padding: var(--g-space-6);
    animation: cl-fadeIn-b-jlqz27pxax 0.12s ease-out;
}

.cl-sort-option[b-jlqz27pxax] {
    display: block;
    width: 100%;
    padding: var(--g-space-8) 14px;
    border: none;
    background: transparent;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    text-align: left;
    cursor: pointer;
    border-radius: var(--g-radius-sm);
    transition: background 0.1s, color 0.1s;
}

.cl-sort-option:hover[b-jlqz27pxax] {
    background: var(--g-gray-50);
}

.cl-sort-option.active[b-jlqz27pxax] {
    color: var(--g-brand);
    font-weight: var(--g-fw-semibold);
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
}

.cl-overlay[b-jlqz27pxax] {
    position: fixed;
    inset: 0;
    z-index: 110;
}

/* ── Scrollable list area (bg + scroll) ── */
.cl-scroll-area[b-jlqz27pxax] {
    flex: 1;
    background: var(--g-bg-section, #f8fafc);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-8) var(--g-space-4);
    margin: 0 -4px;
    min-height: 0;
}

/* ── Sticky pagination below scroll area ── */
.cl-pagination-sticky[b-jlqz27pxax] {
    flex-shrink: 0;
    border-top: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
}

/* ── Column Headers ── */
.cl-col-headers[b-jlqz27pxax] {
    display: grid;
    grid-template-columns: 40px minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 2fr);
    gap: var(--g-space-16);
    padding: var(--g-space-12) var(--g-space-20);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.06em;
    color: var(--g-text-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--g-gray-100);
    margin-bottom: var(--g-space-4);
}

.cl-col-headers.cl-draft-headers[b-jlqz27pxax] {
    grid-template-columns: 40px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
}

.cl-col-scores[b-jlqz27pxax] {
    text-align: right;
}

/* ── Card List ── */
.cl-list[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    margin: 0 var(--g-space-10);
}

/* ── Candidate Card ── */
.cl-card[b-jlqz27pxax] {
    display: grid;
    grid-template-columns: 40px minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 2fr);
    gap: var(--g-space-16);
    align-items: center;
    padding: var(--g-space-16) var(--g-space-20);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    position: relative;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cl-card:hover[b-jlqz27pxax] {
    box-shadow: var(--g-shadow-sm);
    border-color: var(--g-gray-300);
    transform: translateY(-1px);
}

.cl-draft-card[b-jlqz27pxax] {
    grid-template-columns: 40px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
}

.cl-row-num[b-jlqz27pxax] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-align: center;
}

/* ── Candidate Column ── */
.cl-card-candidate[b-jlqz27pxax] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    min-width: 0;
}

.cl-avatar[b-jlqz27pxax] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

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

.cl-avatar span[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cl-candidate-info[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cl-candidate-name[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--g-transition);
}

.cl-candidate-name:hover[b-jlqz27pxax] {
    text-decoration: underline;
    color: var(--g-indigo-dark, #1d6ae5);
}

.cl-candidate-role[b-jlqz27pxax] {
    font-size: var(--g-fs-xs);
    color: var(--g-gray-800);
    font-weight: var(--g-fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-candidate-meta[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cl-candidate-icons[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    margin-top: 3px;
}

.cl-candidate-icons svg[b-jlqz27pxax] {
    transition: stroke var(--g-transition);
    cursor: pointer;
}

.cl-candidate-icons svg:hover[b-jlqz27pxax] {
    stroke: var(--g-brand);
}

/* ── Job Column ── */
.cl-card-job[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cl-job-title[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-job-meta[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

.cl-client-badge[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: 1px var(--g-space-8);
    border-radius: var(--g-radius-xs);
    background: var(--g-gray-100);
    border: 1px solid var(--g-gray-200);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-600);
    white-space: nowrap;
}

.cl-meta-dot[b-jlqz27pxax] {
    color: var(--g-text-muted);
    font-weight: var(--g-fw-bold);
}

.cl-job-status-dot[b-jlqz27pxax] {
    width: 7px;
    height: 7px;
    border-radius: var(--g-radius-full);
    background: var(--g-gray-800);
    flex-shrink: 0;
}

.cl-job-submitter[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

/* ── Skills Column ── */
.cl-card-skills[b-jlqz27pxax] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.cl-skills-inline[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cl-skill-dropdown-wrap[b-jlqz27pxax] {
    position: relative;
    display: inline-flex;
    z-index: 120;
}

.cl-skill-dropdown[b-jlqz27pxax] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-md);
    z-index: 130;
    padding: var(--g-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
    animation: cl-fadeIn-b-jlqz27pxax 0.12s ease-out;
}

.cl-skill-more[b-jlqz27pxax] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
}

.cl-skill-arrow[b-jlqz27pxax] {
    transition: transform 0.3s ease;
}

.cl-skill-arrow.cl-arrow-up[b-jlqz27pxax] {
    transform: rotate(180deg);
}

.cl-skill-toggle[b-jlqz27pxax] {
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.cl-skill-toggle:hover[b-jlqz27pxax] {
    color: color-mix(in srgb, var(--g-brand) 75%, #000);
}

/* ── End Column (Scores + Hover Actions) ── */
.cl-card-end[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--g-space-6);
    min-width: 0;
    min-height: 58px;
    position: relative;
}

.cl-card-scores[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--g-space-6);
    position: relative;
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.cl-card-scores.hidden[b-jlqz27pxax] {
    opacity: 0;
    pointer-events: none;
}

/* CSS-only hover: hide scores and show actions on card hover */
.cl-card:hover .cl-card-scores[b-jlqz27pxax] {
    opacity: 0;
    pointer-events: none;
}
/* Keep scores visible when directly hovering the scores area (for tooltips) */
.cl-card .cl-card-scores:hover[b-jlqz27pxax] {
    opacity: 1;
    pointer-events: auto;
}
.cl-card:hover .cl-hover-actions[b-jlqz27pxax] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
/* Hide actions when scores are being hovered (tooltip visible) */
.cl-card .cl-card-scores:hover ~ .cl-hover-actions[b-jlqz27pxax] {
    opacity: 0;
    pointer-events: none;
}

.cl-scores-box[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-100);
    padding: var(--g-space-8);
    border-radius: var(--g-radius-xl);
    transition: background var(--g-transition), border-color var(--g-transition);
}

.cl-card:hover .cl-scores-box[b-jlqz27pxax] {
    background: var(--g-bg-card);
    border-color: var(--g-gray-200);
}

.cl-score-item[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-4);
    min-width: 56px;
    position: relative;
}

.cl-score-ring[b-jlqz27pxax] {
    width: 40px;
    height: 40px;
    transform: rotate(0deg);
}

.cl-score-value[b-jlqz27pxax] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
}

.cl-score-pct[b-jlqz27pxax] {
    font-size: var(--g-fs-xxs, 0.625rem);
    color: var(--g-text-muted, #94a3b8);
}

.cl-score-label[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-secondary, #64748b);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cl-score-divider[b-jlqz27pxax] {
    width: 1px;
    height: 32px;
    background: var(--g-gray-200);
    border-radius: var(--g-radius-full);
    margin: 0 2px;
    flex-shrink: 0;
}

.cl-score-date[b-jlqz27pxax] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted, #94a3b8);
    margin-right: var(--g-space-8);
    white-space: nowrap;
}

/* ── Hover Actions ── */
.cl-hover-actions[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: var(--g-space-6) var(--g-space-10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    position: absolute;
    inset: 0;
    justify-content: flex-end;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-md);
    transform: translateX(4px);
}

.cl-hover-actions.visible[b-jlqz27pxax] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.cl-action-btn[b-jlqz27pxax] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: all var(--g-transition);
}

.cl-action-btn:hover[b-jlqz27pxax] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}

.cl-action-link[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-6) 14px;
    border-radius: var(--g-radius-md);
 background:var(--sidebar-active-bg);
    color: #fff;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--g-transition), box-shadow var(--g-transition);
    box-shadow: 0 3px 5px -1px var(--g-primary-shadow),
                0 5px 12px -4px var(--g-primary-shadow-deep);
}

.cl-action-link svg[b-jlqz27pxax] {
    flex-shrink: 0;
}

.cl-action-link:hover[b-jlqz27pxax] {
    opacity: 0.92;
    box-shadow: 0 4px 8px -1px var(--g-primary-shadow-hover),
                0 6px 16px -4px var(--g-primary-shadow-deep-hover);
}

/* ── Pagination ── */
.cl-pagination[b-jlqz27pxax] {
    padding: var(--g-space-12) var(--g-space-20);
    border-top: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    flex-shrink: 0;
}

/* ═══════ DRAFT CARD STYLES ═══════ */
.cl-draft-candidate[b-jlqz27pxax] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    min-width: 0;
}

.cl-avatar-draft[b-jlqz27pxax] {
    width: 38px;
    height: 38px;
}

.cl-draft-details[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
}

.cl-draft-icon-box[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.cl-draft-location[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
}

.cl-draft-added[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-right: 40px;
}

.cl-draft-date[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-error);
}

.cl-draft-by[b-jlqz27pxax] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cl-draft-actions[b-jlqz27pxax] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
}

.cl-dots-btn[b-jlqz27pxax] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted);
    transition: background var(--g-transition), color var(--g-transition);
}

.cl-dots-btn:hover[b-jlqz27pxax] {
    background: var(--g-gray-100);
    color: var(--g-gray-600);
}

.cl-draft-menu[b-jlqz27pxax] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-md);
    z-index: 130;
    min-width: 140px;
    padding: var(--g-space-6);
    animation: cl-fadeIn-b-jlqz27pxax 0.12s ease-out;
}

.cl-draft-menu-item[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    width: 100%;
    padding: var(--g-space-8) var(--g-space-12);
    border: none;
    background: transparent;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    border-radius: var(--g-radius-sm);
    transition: background 0.1s;
}

.cl-draft-menu-item:hover[b-jlqz27pxax] {
    background: var(--g-gray-50);
}

.cl-menu-feedback[b-jlqz27pxax] {
    color: var(--g-error);
}

.cl-menu-feedback:hover[b-jlqz27pxax] {
    background: var(--g-error-bg);
}

/* ── Mobile section label (hidden on desktop) ── */
.cl-mobile-label[b-jlqz27pxax] {
    display: none;
}

/* ── Mobile row layout (job + skills side by side) ── */
.cl-mobile-row[b-jlqz27pxax] {
    display: contents;
}

/* ── Mobile tab dropdown (hidden on desktop, visible at 768px) ── */
.cl-tab-mobile[b-jlqz27pxax] {
    display: none;
}

.cl-tab-mobile-toggle[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    width: 100%;
    padding: var(--g-space-10) 14px;
    border: 1.5px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    color: var(--g-gray-800);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--g-transition);
}

.cl-tab-mobile-toggle:hover[b-jlqz27pxax] { border-color: var(--g-gray-300); }

.cl-tab-mobile-selected[b-jlqz27pxax] { flex: 1; text-align: left; }

.cl-tab-mobile-count[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 var(--g-space-6);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    background: var(--g-brand);
    color: #fff;
}

.cl-tab-mobile-toggle svg[b-jlqz27pxax] {
    color: var(--g-text-muted);
    transition: transform 0.2s;
}

.cl-tab-mobile-menu[b-jlqz27pxax] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-md);
    z-index: 120;
    padding: var(--g-space-4);
    display: flex;
    flex-direction: column;
    animation: cl-fadeIn-b-jlqz27pxax 0.12s ease-out;
}

.cl-tab-mobile-item[b-jlqz27pxax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    border-radius: var(--g-radius-md);
    transition: background var(--g-transition);
}

.cl-tab-mobile-item:hover[b-jlqz27pxax] { background: var(--g-gray-50); }
.cl-tab-mobile-item.active[b-jlqz27pxax] { color: var(--g-brand); font-weight: var(--g-fw-semibold); background: var(--g-brand-bg); }

.cl-tab-mobile-item-count[b-jlqz27pxax] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
}

.cl-tab-mobile-item.active .cl-tab-mobile-item-count[b-jlqz27pxax] {
    color: var(--g-brand);
}

/* Legacy mobile btn (kept for backwards compat) */
.cl-tab-mobile-btn[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-8) var(--g-space-16);
    border: 1.5px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--g-transition);
}

.cl-tab-mobile-btn:hover:not(.active)[b-jlqz27pxax] {
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
}

.cl-tab-mobile-btn.active[b-jlqz27pxax] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}

.cl-tab-mobile-btn .cl-tab-count[b-jlqz27pxax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
}

.cl-tab-mobile-btn.active .cl-tab-count[b-jlqz27pxax] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ═══════ ANIMATIONS ═══════ */
@keyframes cl-fadeIn-b-jlqz27pxax {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════ RESPONSIVE ═══════ */

/* ── 1440px ── */
@media (max-width: 1440px) {
    .cl-card[b-jlqz27pxax],
    .cl-col-headers[b-jlqz27pxax] {
        grid-template-columns: 36px minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 2fr);
        gap: var(--g-space-12);
    }
    .cl-draft-card[b-jlqz27pxax],
    .cl-col-headers.cl-draft-headers[b-jlqz27pxax] {
        grid-template-columns: 36px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
        gap: var(--g-space-12);
    }
    .cl-card[b-jlqz27pxax] {
        padding: var(--g-space-16) var(--g-space-16);
    }
    .cl-col-headers[b-jlqz27pxax] {
        padding: var(--g-space-12) var(--g-space-16);
    }
    .cl-toolbar[b-jlqz27pxax] {
        gap: var(--g-space-12);
    }
}

/* ── 1366px (common laptop) ── */
@media (max-width: 1366px) {
    .cl-card[b-jlqz27pxax],
    .cl-col-headers[b-jlqz27pxax] {
        grid-template-columns: 34px minmax(0, 2.5fr) minmax(0, 2.4fr) minmax(0, 1.9fr) minmax(0, 1.9fr);
        gap: var(--g-space-12);
        padding: 14px var(--g-space-12);
    }
    .cl-col-headers[b-jlqz27pxax] {
        padding: var(--g-space-10) var(--g-space-12);
    }
}

/* ── 1280px (laptop) ── */
@media (max-width: 1280px) {
    .cl-card[b-jlqz27pxax],
    .cl-col-headers[b-jlqz27pxax] {
        grid-template-columns: 30px minmax(0, 2.5fr) minmax(0, 2.2fr) minmax(0, 1.8fr) minmax(0, 1.8fr);
        gap: var(--g-space-10);
        padding: 12px var(--g-space-10);
    }
    .cl-col-headers[b-jlqz27pxax] {
        padding: var(--g-space-8) var(--g-space-10);
    }
    .cl-sort-btn[b-jlqz27pxax] {
        padding: 6px 10px;
        font-size: var(--g-fs-xxs);
    }
    .cl-avatar[b-jlqz27pxax] {
        width: 36px;
        height: 36px;
    }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
    .cl-card[b-jlqz27pxax],
    .cl-col-headers[b-jlqz27pxax] {
        grid-template-columns: 26px minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1.6fr);
        padding: 10px var(--g-space-8);
        gap: var(--g-space-6);
    }
    .cl-score-ring[b-jlqz27pxax] {
        width: 34px;
        height: 34px;
    }
    .cl-scores-box[b-jlqz27pxax] {
        padding: var(--g-space-4);
    }
    .cl-score-item[b-jlqz27pxax] {
        min-width: 44px;
    }
    .cl-score-value[b-jlqz27pxax] {
        top: 9px;
        font-size: var(--g-fs-xxxs, 0.625rem);
    }
    .cl-candidate-role[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-candidate-meta[b-jlqz27pxax] {
        display: none;
    }
    .cl-job-title[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .cl-job-meta[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-job-submitter[b-jlqz27pxax] {
        display: none;
    }
    .cl-toolbar-right[b-jlqz27pxax] {
        gap: var(--g-space-6);
    }
    .cl-result-count[b-jlqz27pxax] {
        display: none;
    }
    .cl-avatar[b-jlqz27pxax] {
        width: 34px;
        height: 34px;
    }
    .cl-list[b-jlqz27pxax] {
        margin: 0 var(--g-space-4);
    }
}

/* ── 992px (tablet landscape) ── */
@media (max-width: 992px) {
    .cl-card[b-jlqz27pxax],
    .cl-col-headers[b-jlqz27pxax] {
        grid-template-columns: 24px minmax(0, 2.5fr) minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
        padding: 10px var(--g-space-8);
        gap: var(--g-space-6);
    }
    .cl-score-ring[b-jlqz27pxax] {
        width: 32px;
        height: 32px;
    }
    .cl-score-value[b-jlqz27pxax] {
        top: 8px;
    }
    .cl-score-divider[b-jlqz27pxax] {
        height: 24px;
    }
    .cl-candidate-name[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .cl-candidate-icons[b-jlqz27pxax] {
        display: none;
    }
    .cl-client-badge[b-jlqz27pxax] {
        display: none;
    }
    .cl-tab[b-jlqz27pxax] {
        padding: 6px var(--g-space-10);
        font-size: var(--g-fs-xs);
    }
    .cl-tab-count[b-jlqz27pxax] {
        min-width: 18px;
        height: 18px;
        font-size: var(--g-fs-xxxs, 0.625rem);
    }
}

/* ── 768px — Stacked mobile card + tab dropdown ── */
@media (max-width: 768px) {
    /* Tab: hide desktop pills, show mobile dropdown */
    .cl-tabs[b-jlqz27pxax] {
        display: none !important;
    }
    .cl-tabs-wrap[b-jlqz27pxax] {
        overflow: visible;
    }
    .cl-tab-mobile[b-jlqz27pxax] {
        display: block;
        position: relative;
        margin-bottom: var(--g-space-12);
    }

    .cl-col-headers[b-jlqz27pxax] {
        display: none;
    }
    .cl-card[b-jlqz27pxax] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--g-space-16);
        align-items: flex-start;
    }
    .cl-card:hover[b-jlqz27pxax] {
        transform: none;
    }
    .cl-row-num[b-jlqz27pxax] {
        display: none;
    }

    /* Mobile section labels */
    .cl-mobile-label[b-jlqz27pxax] {
        display: block;
        font-size: var(--g-fs-xxs);
        font-weight: var(--g-fw-bold);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--g-text-muted);
        padding: var(--g-space-10) 0 var(--g-space-6);
        margin-top: var(--g-space-8);
        text-align: left;
    }

    /* Mobile row: job + skills side by side */
    .cl-mobile-row[b-jlqz27pxax] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--g-space-12);
        width: 100%;
    }
    .cl-mobile-col[b-jlqz27pxax] {
        min-width: 0;
    }

    .cl-card-candidate[b-jlqz27pxax],
    .cl-card-end[b-jlqz27pxax] {
        width: 100%;
        text-align: left;
    }
    .cl-card-job[b-jlqz27pxax],
    .cl-card-skills[b-jlqz27pxax] {
        width: 100%;
        text-align: left;
    }
    .cl-card-end[b-jlqz27pxax] {
        justify-content: center;
        align-items: flex-start;
        order: 10;
        text-align: center;
    }
    /* Always show scores on mobile */
    .cl-card-scores[b-jlqz27pxax] {
        align-items: center;
        justify-content: center;
        display: flex !important;
        opacity: 1 !important;
    }
    .cl-card-scores.hidden[b-jlqz27pxax] {
        display: flex !important;
        opacity: 1 !important;
    }
    .cl-scores-box[b-jlqz27pxax] {
        gap: 0;
    }
    .cl-score-date[b-jlqz27pxax] {
        margin-right: 0;
        text-align: center;
    }

    /* Hover actions: only show on active card (hover/touch), centered */
    .cl-hover-actions[b-jlqz27pxax] {
        padding: var(--g-space-6) 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        justify-content: center;
        width: 100%;
        transform: none;
    }
    .cl-card:hover .cl-hover-actions[b-jlqz27pxax],
    .cl-card:active .cl-hover-actions[b-jlqz27pxax],
    .cl-hover-actions.visible[b-jlqz27pxax] {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .cl-header[b-jlqz27pxax] {
        margin-bottom: var(--g-space-16);
    }

    /* Font sizes */
    .cl-title[b-jlqz27pxax] {
        font-size: var(--g-fs-page-title);
    }
    .cl-subtitle[b-jlqz27pxax] {
        font-size: var(--g-fs-sm);
    }
    .cl-candidate-name[b-jlqz27pxax] {
        font-size: var(--g-fs-body);
    }
    .cl-candidate-role[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .cl-job-title[b-jlqz27pxax] {
        font-size: var(--g-fs-sm);
    }
    .cl-job-meta[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .g-skill-badge[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
        padding: 3px var(--g-space-8);
    }

    /* Draft */
    .cl-draft-card[b-jlqz27pxax] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--g-space-16);
        align-items: flex-start;
    }
    .cl-draft-candidate[b-jlqz27pxax] {
        width: 100%;
    }
    .cl-draft-details[b-jlqz27pxax],
    .cl-draft-location[b-jlqz27pxax],
    .cl-draft-added[b-jlqz27pxax] {
        width: 100%;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }
    .cl-draft-added[b-jlqz27pxax] {
        align-items: flex-start;
    }
    .cl-draft-actions[b-jlqz27pxax] {
        position: absolute;
        top: var(--g-space-12);
        right: var(--g-space-12);
    }

    /* Toolbar: keep search + right in same row */
    .cl-toolbar[b-jlqz27pxax] {
        flex-direction: row;
        align-items: center;
        gap: var(--g-space-10);
        flex-wrap: nowrap;
    }
    .cl-search-wrap[b-jlqz27pxax] {
        flex: 1;
        min-width: 0;
    }
    .cl-toolbar-right[b-jlqz27pxax] {
        flex-shrink: 0;
    }
    .cl-result-count[b-jlqz27pxax] {
        display: inline;
        font-size: var(--g-fs-xxs);
    }

    .cl-scroll-area[b-jlqz27pxax] {
        border-radius: var(--g-radius-md);
        padding: var(--g-space-6) var(--g-space-4);
    }

    .cl-list[b-jlqz27pxax] {
        margin: 0 var(--g-space-4);
    }

    /* Tab mobile btn sizing (legacy) */
    .cl-tab-mobile-btn[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
        padding: 7px var(--g-space-12);
    }
}

/* ── 425px ── */
@media (max-width: 425px) {
    .cl-header[b-jlqz27pxax] {
        flex-direction: column;
        align-items: stretch;
    }
    .cl-header-right[b-jlqz27pxax] {
        width: 100%;
    }
    .cl-header-right .cl-add-btn[b-jlqz27pxax] {
        width: 100%;
        justify-content: center;
    }
    .cl-title[b-jlqz27pxax] {
        font-size: var(--g-fs-section-title);
    }
    .cl-subtitle[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .cl-card[b-jlqz27pxax] {
        padding: var(--g-space-12) var(--g-space-10);
        border-radius: var(--g-radius-lg);
    }
    .cl-candidate-name[b-jlqz27pxax] {
        font-size: var(--g-fs-sm);
    }
    .cl-candidate-role[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-candidate-meta[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-job-title[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
    }
    .cl-job-meta[b-jlqz27pxax],
    .cl-job-submitter[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .g-skill-badge[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: 2px var(--g-space-6);
    }
    .cl-skill-more[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-add-btn[b-jlqz27pxax] {
        padding: var(--g-space-6) 14px;
        font-size: var(--g-fs-xxs);
        height: 30px;
    }
    .cl-score-ring[b-jlqz27pxax] {
        width: 34px;
        height: 34px;
    }
    .cl-score-value[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        top: 11px;
    }
    .cl-mobile-label[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: var(--g-space-8) 0 var(--g-space-4);
    }
    .cl-search-input[b-jlqz27pxax] {
        font-size: var(--g-fs-xs);
        padding: var(--g-space-8) var(--g-space-10) var(--g-space-8) 34px;
    }
    .cl-tab-mobile-btn[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: var(--g-space-6) var(--g-space-10);
    }
    .cl-result-count[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    /* Mobile row single column on small screens */
    .cl-mobile-row[b-jlqz27pxax] {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* Toolbar stays on one row */
    .cl-toolbar[b-jlqz27pxax] {
        flex-direction: row;
        flex-wrap: nowrap;
    }
}

/* ── 375px ── */
@media (max-width: 375px) {
    .cl-title[b-jlqz27pxax] {
        font-size: var(--g-fs-card-title);
    }
    .cl-header[b-jlqz27pxax] {
        gap: var(--g-space-8);
        margin-bottom: var(--g-space-12);
    }
    .cl-card[b-jlqz27pxax] {
        padding: var(--g-space-12) var(--g-space-10);
    }
    .cl-avatar[b-jlqz27pxax] {
        width: 36px;
        height: 36px;
    }
    .cl-avatar span[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-score-ring[b-jlqz27pxax] {
        width: 32px;
        height: 32px;
    }
    .cl-tab-mobile-btn[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: 5px var(--g-space-8);
    }
}

/* ── 320px ── */
@media (max-width: 320px) {
    .cl-title[b-jlqz27pxax] {
        font-size: var(--g-fs-body);
    }
    .cl-subtitle[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-card[b-jlqz27pxax] {
        padding: var(--g-space-10) var(--g-space-8);
        border-radius: var(--g-radius-md);
    }
    .cl-avatar[b-jlqz27pxax] {
        width: 32px;
        height: 32px;
    }
    .cl-avatar span[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-add-btn[b-jlqz27pxax] {
        padding: 5px var(--g-space-10);
        font-size: var(--g-fs-xxs);
        height: 30px;
    }
    .cl-candidate-name[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-candidate-role[b-jlqz27pxax],
    .cl-candidate-meta[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-job-title[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .cl-job-meta[b-jlqz27pxax],
    .cl-job-submitter[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
    }
    .g-skill-badge[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: 2px 5px;
    }
    .cl-tab-mobile-btn[b-jlqz27pxax] {
        font-size: var(--g-fs-xxs);
        padding: var(--g-space-4) 7px;
    }
}

/* ═══════ Loading State ═══════ */
.cl-loading[b-jlqz27pxax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-12);
    padding: 64px 0;
    min-height: 300px;
}

.cl-loading-spinner[b-jlqz27pxax] {
    width: 36px;
    height: 36px;
    border: 3px solid #e4e4e7;
    border-top-color: var(--g-brand, #2c7cff);
    border-radius: 50%;
    animation: cl-spin-b-jlqz27pxax 0.7s linear infinite;
}

@keyframes cl-spin-b-jlqz27pxax {
    to { transform: rotate(360deg); }
}

.cl-loading-text[b-jlqz27pxax] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-medium);
}
/* /Components/Pages/Dashboard/Candidate/CandidateListNew.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   CandidateListNew – gr-cl- prefix
   Enterprise Recruiter Dashboard · Premium SaaS
   Responsive CSS Grid · GOrecruitAI Design System
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   1. PAGE ROOT & LAYOUT CONTAINERS
   ──────────────────────────────────────────────────────── */
.gr-cl-page-root[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    font-family: var(--g-font-sans);
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
}

.gr-cl-sticky-top[b-hl3xod5ed2] {
    position: sticky;
    top: 58px;
    z-index: 50;
    background: var(--g-bg-card, #fff);
    flex-shrink: 0;
    padding: 20px 24px 10px;
    border-bottom: 1px solid var(--g-gray-100);
}

.gr-cl-sticky-top .g-page-header[b-hl3xod5ed2] {
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0 0 16px;
}

.gr-cl-content-area[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    min-height: 0;
    flex: 1;
}

/* ────────────────────────────────────────────────────────
   2. ADD CANDIDATE BUTTON
   ──────────────────────────────────────────────────────── */
.gr-cl-add-btn[b-hl3xod5ed2] {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--g-btn-height-sm);
    padding: 5px 22px;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--sidebar-active-bg);
    color: #fff;
    font-size: var(--g-btn-font-size);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 5px -1px var(--g-primary-shadow), 0 5px 12px -4px var(--g-primary-shadow-deep);
    transition: opacity var(--g-transition), box-shadow var(--g-transition);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    text-decoration: none;

}

.gr-cl-add-btn:hover[b-hl3xod5ed2] {
    background: #09090b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.gr-cl-add-btn:active[b-hl3xod5ed2] {
    transform: translateY(0);
}

/* ────────────────────────────────────────────────────────
   3. TAB NAVIGATION
   ──────────────────────────────────────────────────────── */
.gr-cl-tabs-section[b-hl3xod5ed2] {
   
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    margin-top: 12px;
    margin-bottom: 18px;
}

.gr-cl-tabs-section[b-hl3xod5ed2]::-webkit-scrollbar {
    display: none;
}

.gr-cl-tabs-desktop[b-hl3xod5ed2] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gr-cl-tab[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--g-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--g-gray-600);
    font-size: var(--g-fs-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.gr-cl-tab:hover:not(.gr-cl-tab--active)[b-hl3xod5ed2] {
    background: var(--g-gray-50);
    border-color: var(--g-gray-300);
}

.gr-cl-tab--active[b-hl3xod5ed2] {
    color: #fff;
    border-color: var(--sidebar-active-bg);
    background: var(--sidebar-active-bg);
}

.gr-cl-tab--rejected:not(.gr-cl-tab--active)[b-hl3xod5ed2] {
    color: #ef4444;
    border-color: #fca5a5;
}

.gr-cl-tab--rejected.gr-cl-tab--active[b-hl3xod5ed2] {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.gr-cl-tab-badge[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    background: var(--g-gray-100);
    color: var(--g-gray-600);
    line-height: 1;
}

.gr-cl-tab--active .gr-cl-tab-badge[b-hl3xod5ed2] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.gr-cl-tab-badge--red[b-hl3xod5ed2] {
    background: #fee2e2;
    color: #ef4444;
}

.gr-cl-tab--rejected.gr-cl-tab--active .gr-cl-tab-badge--red[b-hl3xod5ed2] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.gr-cl-tab-award[b-hl3xod5ed2] {
    width: 14px;
    height: 14px;
}

/* Mobile tab dropdown */
.gr-cl-tabs-mobile[b-hl3xod5ed2] {
    display: none;
    position: relative;
}

.gr-cl-tab-mobile-toggle[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--g-space-12) var(--g-space-16);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
}

.gr-cl-tab-mobile-menu[b-hl3xod5ed2] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
     z-index: 9999;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: var(--g-space-8);
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.15s ease;
}

.gr-cl-tab-mobile-item[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--g-space-10) var(--g-space-12);
    background: none;
    border: none;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.gr-cl-tab-mobile-item:hover[b-hl3xod5ed2] {
    background: var(--g-gray-50);
}

.gr-cl-tab-mobile-item--active[b-hl3xod5ed2] {
    background: #18181b;
    color: #fff;
}

.gr-cl-tab-mobile-item--active:hover[b-hl3xod5ed2] {
    background: #27272a;
}

/* ────────────────────────────────────────────────────────
   4. SEARCH + SORT TOOLBAR
   ──────────────────────────────────────────────────────── */
.gr-cl-toolbar-section[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: none;
    gap: 16px;
}

.gr-cl-search-wrap[b-hl3xod5ed2] {
    position: relative;
    width: 20%;
    min-width: 200px;
}

.gr-cl-search-icon[b-hl3xod5ed2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-gray-400);
    pointer-events: none;
}

.gr-cl-search-input[b-hl3xod5ed2] {
    width: 100%;
      padding: 7px 5px 7px 30px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-gray-700);
    background: var(--g--heading-bg);
    outline: none;
    transition: border-color 0.2s ease;
}

.gr-cl-search-input[b-hl3xod5ed2]::placeholder {
    color: var(--g-gray-400);
}

.gr-cl-search-input:focus[b-hl3xod5ed2] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(44, 124, 255, 0.1);
}

.gr-cl-toolbar-right[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.gr-cl-result-count[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-primary, #2563eb);
    white-space: nowrap;
}

.gr-cl-sort-wrap[b-hl3xod5ed2] {
    position: relative;
}

.gr-cl-sort-btn[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: #fff;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    white-space: nowrap;
}

.gr-cl-sort-btn:hover[b-hl3xod5ed2] {
    border-color: var(--g-gray-300);
    background: var(--g-gray-50);
}

.gr-cl-sort-btn strong[b-hl3xod5ed2] {
    color: var(--g-text-primary);
}

.gr-cl-sort-dropdown[b-hl3xod5ed2] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 70;
    min-width: 260px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: var(--g-space-6);
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.15s ease;
}

.gr-cl-sort-option[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--g-space-10) var(--g-space-12);
    background: none;
    border: none;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.gr-cl-sort-option:hover[b-hl3xod5ed2] {
    background: var(--g-gray-50);
}

.gr-cl-sort-option--active[b-hl3xod5ed2] {
    color: #3b82f6;
    background: #eff6ff;
    font-weight: var(--g-fw-semibold);
}

.gr-cl-sort-option--active:hover[b-hl3xod5ed2] {
    background: #dbeafe;
}

/* ────────────────────────────────────────────────────────
   5. TABLE GRID LAYOUT (STANDARD VIEW)
   ──────────────────────────────────────────────────────── */
.gr-cl-table-section[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gr-cl-table-grid[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: 48px 2.2fr 1.8fr 0.9fr 1.4fr 1.1fr 1fr 1.1fr 56px;
    align-items: center;
    gap: 0 var(--g-space-12);
}

.gr-cl-table-headers[b-hl3xod5ed2] {
    padding: var(--g-space-12) var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-200);
}

.gr-cl-th[b-hl3xod5ed2] {
   font-size: var(--g-fs-xxs);
    font-weight: 700;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.gr-cl-th--num[b-hl3xod5ed2] {
    text-align: center;
}

.gr-cl-th--center[b-hl3xod5ed2] {
    text-align: left;
}
#gr-cl-th-interview[b-hl3xod5ed2]{
    margin:0 10px;
}

.gr-cl-th--skill[b-hl3xod5ed2] {
    margin-left: 30px;
}

.gr-cl-th--overall[b-hl3xod5ed2] {
margin-left: 45px;
}



.gr-cl-th--end[b-hl3xod5ed2] {
    text-align: end;
}

.gr-cl-th--status[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    position: relative;
}

.gr-cl-table-body[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    padding-top: var(--g-space-12);
}

/* ────────────────────────────────────────────────────────
   6. CANDIDATE ROW
   ──────────────────────────────────────────────────────── */
.gr-cl-candidate-row[b-hl3xod5ed2] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-24) var(--g-space-16);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gr-cl-candidate-row:hover[b-hl3xod5ed2] {
    border-color: var(--g-gray-200);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.gr-cl-row-num[b-hl3xod5ed2] {
    text-align: center;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted);
}

/* ────────────────────────────────────────────────────────
   7. CANDIDATE NAME CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-candidate[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    min-width: 0;
}

.gr-cl-avatar[b-hl3xod5ed2] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-full);
    border: 1px solid var(--g-gray-200);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-gray-50);
}

.gr-cl-avatar img[b-hl3xod5ed2],
.gr-cl-avatar-img[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--g-radius-full);
}

.gr-cl-avatar-initials[b-hl3xod5ed2] {
   
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
    font-size: 14px !important;

}

.gr-cl-submitter-default[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--g-gray-400);
}

.gr-cl-candidate-details[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gr-cl-candidate-name[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    text-transform: capitalize;
}

.gr-cl-candidate-name:hover[b-hl3xod5ed2] {
    color: var(--g-brand, #2c7cff);

}

.gr-cl-candidate-role[b-hl3xod5ed2] {
    font-size: 11px;
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.gr-cl-contact-icons[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    margin-top: 2px;
}

.gr-cl-contact-btn[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--g-gray-100, #f1f5f9);
    border: none;
    padding: 4px;
    border-radius: var(--g-radius-md);
    cursor: pointer;
    color: var(--g-gray-500, #64748b);
    transition: color 0.15s, background 0.15s;
    position: relative;
    text-decoration: none;
}

.gr-cl-contact-btn:hover[b-hl3xod5ed2] {
    color: #3b82f6;
    background: #eff6ff;
}

.gr-cl-contact-btn svg[b-hl3xod5ed2] {
    display: block;
    width: 12px;
    height: 12px;
}

.gr-cl-contact-icons svg[b-hl3xod5ed2] {
    color: #94a3b8;
    transition: color 0.15s;
    cursor: pointer;
}

.gr-cl-contact-icons svg:hover[b-hl3xod5ed2] {
    color: #3b82f6;
}

.gr-cl-candidate-rate[b-hl3xod5ed2] {
    font-size: 11px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
    margin-top: 1px;
}

/* ────────────────────────────────────────────────────────
   8. JOB & DETAILS CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-job[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gr-cl-job-details-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gr-cl-job-icon[b-hl3xod5ed2] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--g-text-muted);
}

.gr-cl-job-info[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gr-cl-job-title-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gr-cl-job-title[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: 700;
    color: var(--g-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.gr-cl-job-link[b-hl3xod5ed2] {
    color: inherit;
    text-decoration: none;
}
.gr-cl-job-link:hover[b-hl3xod5ed2] {
    color: var(--g-brand, #2c7cff);
  
}

.gr-cl-status-dot[b-hl3xod5ed2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gr-cl-status-dot--high[b-hl3xod5ed2] { background: var(--g-error, #ef4444); }
.gr-cl-status-dot--medium[b-hl3xod5ed2] { background: var(--g-warning, #f59e0b); }
.gr-cl-status-dot--low[b-hl3xod5ed2] { background: var(--g-gray-700, #374151); }

.gr-cl-job-sub[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 3px;
}

.gr-cl-loc-icon[b-hl3xod5ed2] {
    width: 11px;
    height: 11px;
    color: var(--g-text-muted);
    flex-shrink: 0;
    margin-left: 1px;
}

.gr-cl-created-by[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin-top: 2px;
}

.gr-cl-created-by svg[b-hl3xod5ed2] {
    color: var(--g-text-muted);
    flex-shrink: 0;
}

.gr-cl-priority-badge[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--g-radius-sm);
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    margin-left: 4px;
}

.gr-cl-priority--high[b-hl3xod5ed2] {
    background: #fef2f2;
    color: #dc2626;
}

.gr-cl-priority--medium[b-hl3xod5ed2] {
    background: #fefce8;
    color: #ca8a04;
}

.gr-cl-priority--low[b-hl3xod5ed2] {
    background: #f0fdf4;
    color: #16a34a;
}

/* ────────────────────────────────────────────────────────
   8b. CLIENT CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-client[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gr-cl-client-name[b-hl3xod5ed2] {
    font-size: 13px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────
   9. LOCATION CELL (draft)
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-location[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: 12px;
    color: var(--g-text-secondary);
    margin-left: 20px;
}

/* ────────────────────────────────────────────────────────
   10. RESUME CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-resume[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.gr-cl-resume-btn[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    transition: all 0.15s;
}

.gr-cl-resume-btn:hover[b-hl3xod5ed2] {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.gr-cl-doc-icon[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

/* ────────────────────────────────────────────────────────
   11. SKILL MATCH DONUT CHART
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-skills[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
}

.gr-cl-skill-chart-wrap[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
}

.gr-cl-score-chart[b-hl3xod5ed2] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}
.gr-cl-score-charts[b-hl3xod5ed2] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    right:18px;
}

.gr-cl-donut-svg[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
}

.gr-cl-donut-value[b-hl3xod5ed2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-primary);
}

.gr-cl-skill-pills[b-hl3xod5ed2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.gr-cl-skill-pill[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding:2px 7px;
    border: none;
    border-radius: var(--g-radius-sm);
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    cursor: pointer;
    background: #eff6ff;
    color: #1d4ed8;
    transition: all 0.15s;
    font-family: inherit;
}

.gr-cl-skill-more[b-hl3xod5ed2] {
    font-size: 10px;
    font-weight: var(--g-fw-medium);
    color: #3b82f6;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
}

.gr-cl-skill-more:hover[b-hl3xod5ed2] {
    color: #1d4ed8;
    text-decoration: underline;
}

.gr-cl-skill-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    position: relative;
    right: 11px;
}


.gr-cl-skill-match[b-hl3xod5ed2] {
    color: #3b82f6;
    font-weight: var(--g-fw-bold);
}

.gr-cl-skill-more-btn[b-hl3xod5ed2] {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-family: inherit;
    color: #3b82f6;
    cursor: pointer;
    font-weight: var(--g-fw-medium);
    transition: color 0.15s;
}

.gr-cl-skill-more-btn:hover[b-hl3xod5ed2] {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ────────────────────────────────────────────────────────
   12. SKILL POPOVER
   ──────────────────────────────────────────────────────── */
.gr-cl-skill-popover[b-hl3xod5ed2] {
    position: absolute;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    min-width: 220px;
    max-width: 320px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: var(--g-space-16);
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.2s ease;
}

.gr-cl-skill-popover-header[b-hl3xod5ed2] {
    font-size: 10px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em; 
     border-bottom: 1px solid var(--g-gray-100);
}

.gr-cl-skill-popover-list[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--g-gray-200) transparent;
}

.gr-cl-skill-popover-list[b-hl3xod5ed2]::-webkit-scrollbar {
    width: 4px;
}

.gr-cl-skill-popover-list[b-hl3xod5ed2]::-webkit-scrollbar-track {
    background: transparent;
}

.gr-cl-skill-popover-list[b-hl3xod5ed2]::-webkit-scrollbar-thumb {
    background: var(--g-gray-200);
    border-radius: 4px;
}

.gr-cl-skill-popover-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 0;
    border-bottom: 1px solid var(--g-gray-50);
}

.gr-cl-skill-popover-row:last-child[b-hl3xod5ed2] {
    border-bottom: none;
}

.gr-cl-skill-popover-name[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-primary);
}

.gr-cl-skill-popover-yrs[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted);
}

/* ────────────────────────────────────────────────────────
   13. OVERALL SCORE CHART
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-overall[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gr-cl-overall-wrap[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
}

.gr-cl-overall-chart[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.gr-cl-overall-chart .gr-cl-score-chart[b-hl3xod5ed2] {
    width: 64px;
    height: 64px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.gr-cl-overall-chart .gr-cl-donut-svg[b-hl3xod5ed2] {
    width: 64px;
    height: 64px;
}

.gr-cl-overall-chart .gr-cl-donut-value[b-hl3xod5ed2] {
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--g-fw-bold);
}

.gr-cl-recommendation[b-hl3xod5ed2] {
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
    text-align: center;
}

/* ────────────────────────────────────────────────────────
   14. SCORE TOOLTIP
   ──────────────────────────────────────────────────────── */
.gr-cl-score-tooltip[b-hl3xod5ed2] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    z-index: 90;
    min-width: 260px;
    max-width: 320px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--g-space-16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.gr-cl-score-tooltip--visible[b-hl3xod5ed2],
.gr-cl-cell-overall:hover .gr-cl-score-tooltip[b-hl3xod5ed2] {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
    animation: gr-cl-tooltip-in-b-hl3xod5ed2 0.2s ease;
}

@keyframes gr-cl-tooltip-in-b-hl3xod5ed2 {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.95) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

.gr-cl-tooltip-header[b-hl3xod5ed2] {
    font-size: 11px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;  
    border-bottom: 1px solid var(--g-gray-100);
}

.gr-cl-tooltip-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-6) 0;
    font-size: 12px;
    color: var(--g-text-secondary);
}

.gr-cl-tooltip-row + .gr-cl-tooltip-row[b-hl3xod5ed2] {
    border-top: 1px solid var(--g-gray-50);
}

.gr-cl-tooltip-row strong[b-hl3xod5ed2] {
    color: var(--g-text-primary);
    font-weight: var(--g-fw-semibold);
}

/* ────────────────────────────────────────────────────────
   15. STATUS CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-status[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.gr-cl-status-badge[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: 12px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}

.gr-cl-status-badge:hover[b-hl3xod5ed2] {
    color: var(--g-brand, #3b82f6);
}

.gr-cl-status-text[b-hl3xod5ed2] {
    font-size: 12px;
      font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
    text-transform: capitalize;
}

.gr-cl-status-badge:hover .gr-cl-status-text[b-hl3xod5ed2] {
    color: var(--g-brand, #3b82f6);
}

.gr-cl-status-updated[b-hl3xod5ed2] {
    font-size: 10px;
    color: var(--g-text-muted);
    margin: 0;
    padding-left: 14px;
}

.gr-cl-status-dot[b-hl3xod5ed2] {
    width: 7px;
    height: 7px;
    border-radius: var(--g-radius-full);
    background: #3b82f6;
    flex-shrink: 0;
}

.gr-cl-filter-icon-btn[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.gr-cl-filter-icon-btn:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-filter-icon-btn--active[b-hl3xod5ed2] {
    color: #3b82f6;
}

.gr-cl-filter-dot[b-hl3xod5ed2] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: var(--g-radius-full);
    background: #3b82f6;
}

/* Status filter dropdown */
.gr-cl-status-filter-dropdown[b-hl3xod5ed2] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 150px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: var(--g-space-6);
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.15s ease;
}

.gr-cl-status-filter-item[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--g-space-8) var(--g-space-12);
    background: none;
    border: none;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.gr-cl-status-filter-item:hover[b-hl3xod5ed2] {
    background: var(--g-gray-50);
}

.gr-cl-status-filter-item--active[b-hl3xod5ed2] {
    color: #3b82f6;
    background: #eff6ff;
    font-weight: var(--g-fw-semibold);
}

.gr-cl-status-filter-item--active:hover[b-hl3xod5ed2] {
    background: #dbeafe;
}

/* ────────────────────────────────────────────────────────
   16. SUBMITTED BY CELL
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-submitter[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--g-space-8);
}

.gr-cl-submitter-avatar[b-hl3xod5ed2] {
       width: 28px;
    height: 28px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--g-gray-200);
    background: var(--g-gray-100);
    display: flex;
    justify-content: center;
    align-items: center;
}

.gr-cl-submitter-avatar img[b-hl3xod5ed2],
.gr-cl-submitter-img[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gr-cl-submitter-info[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.gr-cl-submitter-name[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.gr-cl-submitter-date[b-hl3xod5ed2] {
    font-size: 10px;
    color: var(--g-text-muted);
}

/* ────────────────────────────────────────────────────────
   17. ACTION MENU
   ──────────────────────────────────────────────────────── */
.gr-cl-cell-action[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: -1;
}

.gr-cl-dots-btn[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--g-radius-md);
   color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.gr-cl-dots-btn:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-action-menu[b-hl3xod5ed2] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    min-width: 120px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    padding: 4px;
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.12s ease;
    overflow: visible;
}

.gr-cl-action-menu-item[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-body);
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}

.gr-cl-action-menu-item:hover[b-hl3xod5ed2] {
    background: var(--g-gray-50);
    color: var(--g-text-heading);
}

.gr-cl-action-menu-item:disabled[b-hl3xod5ed2] {
    color: var(--g-gray-400);
    background: transparent;
    cursor: not-allowed;
    pointer-events: auto;
}

.gr-cl-action-menu-item--blocked:disabled[b-hl3xod5ed2] {
    position: relative;
}

.gr-cl-action-block-icon[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
}

.gr-cl-action-menu-item--danger[b-hl3xod5ed2] {
    color: #ef4444;
}

.gr-cl-action-menu-item--danger:hover[b-hl3xod5ed2] {
    background: #fef2f2;
}

.gr-cl-action-menu-divider[b-hl3xod5ed2] {
    height: 1px;
    background: var(--g-gray-100);
    margin: 4px 0;
}

/* ────────────────────────────────────────────────────────
   18. TOP MATCHING PROFILES VIEW
   ──────────────────────────────────────────────────────── */
.gr-cl-top-matching-section[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gr-cl-top-col-headers[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: 2.3fr 1fr 1.4fr 1fr 1.3fr 1.1fr 48px;
    align-items: center;
    gap: 0 var(--g-space-12);
    padding: var(--g-space-12) var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-200);
}

.gr-cl-top-list[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    padding-top: var(--g-space-12);
}

.gr-cl-top-row[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: 2.3fr 1fr 1.4fr 1fr 1.3fr 1.1fr 48px;
    align-items: center;
    gap: 0 var(--g-space-12);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-100);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-14) var(--g-space-16);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gr-cl-top-row:hover[b-hl3xod5ed2] {
    border-color: var(--g-gray-200);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.gr-cl-top-candidate[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    min-width: 0;
}

.gr-cl-top-exp[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
}

.gr-cl-top-skills[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.gr-cl-top-overall[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
}

.gr-cl-top-status[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
}

.gr-cl-top-submitter[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gr-cl-top-action[b-hl3xod5ed2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ────────────────────────────────────────────────────────
   19. DRAFT SECTION
   ──────────────────────────────────────────────────────── */
.gr-cl-draft-section[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gr-cl-draft-grid[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: 48px 2.2fr 1.2fr 1.2fr 1fr 56px;
    align-items: center;
    gap: 0 var(--g-space-12);
}

.gr-cl-draft-list[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    padding-top: var(--g-space-12);
}

.gr-cl-cell-details[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: 12px;
    color: var(--g-text-secondary);
}

.gr-cl-details-icon[b-hl3xod5ed2] {
    width: 28px;
    height: 28px;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.gr-cl-details-icon:hover[b-hl3xod5ed2] {
    background: #dbeafe;
    color: #3b82f6;
}

.gr-cl-cell-added[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: end;
}

.gr-cl-date[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-primary);
}

.gr-cl-by[b-hl3xod5ed2] {
    font-size: 10px;
    color: var(--g-text-muted);
}

/* ────────────────────────────────────────────────────────
   20. MOBILE CARD (hidden on desktop)
   ──────────────────────────────────────────────────────── */
.gr-cl-mobile-card[b-hl3xod5ed2] {
    display: none;
}

.gr-cl-mobile-card-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    padding-bottom: var(--g-space-12);
    border-bottom: 1px solid var(--g-gray-100);
    margin-bottom: var(--g-space-12);
}

.gr-cl-mobile-card-header .gr-cl-candidate-details[b-hl3xod5ed2] {
    flex: 1;
    min-width: 0;
}

.gr-cl-mobile-card-body[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
}

.gr-cl-mobile-card-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-4) 0;
}

.gr-cl-mobile-label[b-hl3xod5ed2] {
    display: none;
    font-size: 11px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gr-cl-mobile-value[b-hl3xod5ed2] {
    font-size: 13px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-primary);
}

.gr-cl-action-menu--mobile[b-hl3xod5ed2] {
    position: relative;
    top: auto;
    right: auto;
    margin-top: var(--g-space-12);
    border-top: 1px solid var(--g-gray-100);
    padding-top: var(--g-space-8);
    box-shadow: none;
    border: none;
    border-radius: 0;
}

/* ────────────────────────────────────────────────────────
   21. PAGINATION
   ──────────────────────────────────────────────────────── */
.gr-cl-pagination[b-hl3xod5ed2] {
    margin-top: 20px;
    border-top: none;
}

.gr-cl-pagination .g-pg-nav[b-hl3xod5ed2] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: var(--g-fs-xxs);
    font-weight: 500;
    color: var(--g-gray-600);
    border: 1px solid var(--g-gray-200);
}

.gr-cl-pagination-info[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: 500;
    color: var(--g-text-muted);
    margin: 0;
}

.gr-cl-pagination-bold[b-hl3xod5ed2] {
    font-weight: 600;
    color: var(--g-text-primary, #18181b);
}

.gr-cl-pagination-controls[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gr-cl-pg-btn[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: var(--g-radius-lg);
}

.gr-cl-pg-nav[b-hl3xod5ed2] {
    padding: 6px 12px;
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary, #52525b);
}

.gr-cl-pg-nav:hover:not(.gr-cl-pg-btn--disabled)[b-hl3xod5ed2] {
    background: var(--g-gray-50);
    border-color: var(--g-gray-300);
}

.gr-cl-pg-num[b-hl3xod5ed2] {
    width: 32px;
    height: 32px;
    color: var(--g-text-secondary, #52525b);
}

.gr-cl-pg-num:hover:not(.gr-cl-pg-num--active)[b-hl3xod5ed2] {
    background: var(--g-gray-100);
}

.gr-cl-pg-num--active[b-hl3xod5ed2] {
    background: #18181b;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.gr-cl-pg-btn--disabled[b-hl3xod5ed2] {
    color: var(--g-gray-300, #d4d4d8);
    cursor: default;
    pointer-events: none;
}

.gr-cl-pg-ellipsis[b-hl3xod5ed2] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--g-text-muted);
}

/* ────────────────────────────────────────────────────────
   22. LOADING STATE
   ──────────────────────────────────────────────────────── */
.gr-cl-loading[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.gr-cl-loading img[b-hl3xod5ed2] {
    width: 100px;
    height: auto;
}

/* ────────────────────────────────────────────────────────
   23. BACKDROP / OVERLAY
   ──────────────────────────────────────────────────────── */
.gr-cl-backdrop[b-hl3xod5ed2] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: transparent;
}

/* ────────────────────────────────────────────────────────
   24. ANIMATIONS
   ──────────────────────────────────────────────────────── */
@keyframes gr-cl-fade-in-b-hl3xod5ed2 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ────────────────────────────────────────────────────────
   25. RESUME MODAL
   ──────────────────────────────────────────────────────── */
.gr-cl-resume-modal[b-hl3xod5ed2] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.15s ease;
}

.gr-cl-resume-modal-backdrop[b-hl3xod5ed2] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.gr-cl-resume-modal-content[b-hl3xod5ed2] {
    position: relative;
    width: min(90vw, 800px);
    height: min(85vh, 700px);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gr-cl-resume-modal-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-14) var(--g-space-20);
    border-bottom: 1px solid var(--g-gray-100);
    flex-shrink: 0;
}

.gr-cl-resume-modal-title[b-hl3xod5ed2] {
    font-size: 14px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-primary);
}

.gr-cl-resume-modal-close[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background 0.15s;
}

.gr-cl-resume-modal-close:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-resume-modal-body[b-hl3xod5ed2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gr-cl-resume-iframe[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
    border: none;
}

.gr-cl-resume-empty[b-hl3xod5ed2] {
    font-size: 14px;
    color: var(--g-text-muted);
    text-align: center;
    padding: 40px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════ */
   @media(max-width:1440px){
    .gr-cl-col-headers[b-hl3xod5ed2]{
        display: grid;
    grid-template-columns: 40px 2fr 2fr 1fr 1.2fr 0.8fr 1.6fr 48px;
    }
      .gr-cl-card[b-hl3xod5ed2]{
    display: grid;
       grid-template-columns: 40px 1.9fr 2fr 1fr 1fr 1.1fr 1.1fr 48px;
    }
    #gr-cl-th-interview[b-hl3xod5ed2]{
        position: relative;
    left: -13%;
    margin:0;
    }
    .gr-cl-th--skill[b-hl3xod5ed2]{
        margin-left: -29px;
    }
    .gr-cl-th--overall[b-hl3xod5ed2] {
       margin-left: 12px;
        }
        .gr-cl-th--submitter[b-hl3xod5ed2]{
           margin-left: -17px;
        }
        .gr-cl-th--status[b-hl3xod5ed2]{
            margin-left: -6px;
        }
        .gr-cl-card--interview .gr-cl-cell-skills[b-hl3xod5ed2]{
            left: 18px;
        }
        .gr-cl-col-headers--interview .gr-cl-th--submitter[b-hl3xod5ed2]{
        text-align: left;
        justify-self: start;
        margin-left: -15%;
            }
            .gr-cl-card--interview .gr-cl-cell-submitter[b-hl3xod5ed2]{
                    justify-content: flex-start;
                justify-self: start;
                position: relative;
                left: 14%;
            }
   }

/* ── 1366px and below (compact laptop) ── */
@media (max-width: 1366px) {
    .gr-cl-table-grid[b-hl3xod5ed2] {
        grid-template-columns: 40px 2fr 1.6fr 0.8fr 1.3fr 1fr 0.9fr 1fr 48px;
        gap: 0 var(--g-space-8);
    }

    .gr-cl-candidate-row[b-hl3xod5ed2] {
        padding: var(--g-space-12) var(--g-space-12);
    }
    .gr-cl-card[b-hl3xod5ed2]{
    display: grid;
    grid-template-columns: 40px 1.9fr 2fr 1fr 1fr 1.1fr 1.1fr 48px;
    }

    .gr-cl-avatar[b-hl3xod5ed2] {
        width: 36px;
        height: 36px;
    }

    .gr-cl-score-chart[b-hl3xod5ed2] {
        width: 42px;
        height: 42px;
    }
     .gr-cl-th--status[b-hl3xod5ed2]{
        margin-left: -16px;
        }
}

/* ── 1280px and below ── */
@media (max-width: 1280px) {
    .gr-cl-table-grid[b-hl3xod5ed2] {
        grid-template-columns: 36px 2fr 1.4fr 0.7fr 1.2fr 1fr 0.8fr 0.9fr 44px;
        gap: 0 var(--g-space-6);
    }

    .gr-cl-top-col-headers[b-hl3xod5ed2],
    .gr-cl-top-row[b-hl3xod5ed2] {
        grid-template-columns: 2fr 0.8fr 1.3fr 1fr 1.1fr 1fr 44px;
    }

    .gr-cl-candidate-name[b-hl3xod5ed2] {
        font-size: 12px;
    }

    .gr-cl-th[b-hl3xod5ed2] {
        font-size: 10px;
    }
    .gr-cl-th--submitter[b-hl3xod5ed2]{
    margin-left: -16px;
    }
    .gr-cl-th--overall[b-hl3xod5ed2] {
        margin-left: 7px;
    }
    .gr-cl-th--skill[b-hl3xod5ed2] {
           margin-left: -47px;
    }
    .gr-cl-th--overall[b-hl3xod5ed2]{
        margin-left: -4px;
    }
    .gr-cl-th--submitter[b-hl3xod5ed2]{
        margin-left: -34px;
    }
}

/* ── 1024px and below (small laptop / tablet landscape) ── */
@media (max-width: 1024px) {
    .gr-cl-table-grid[b-hl3xod5ed2] {
        grid-template-columns: 32px 1.8fr 1.2fr 1.2fr 0.9fr 0.7fr 44px;
    }

    /* Hide resume and submitted by columns */
    .gr-cl-table-headers .gr-cl-th:nth-child(4)[b-hl3xod5ed2],
    .gr-cl-candidate-row .gr-cl-cell-resume[b-hl3xod5ed2],
    .gr-cl-table-headers .gr-cl-th:nth-child(8)[b-hl3xod5ed2],
    .gr-cl-candidate-row .gr-cl-cell-submitter[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-top-col-headers[b-hl3xod5ed2],
    .gr-cl-top-row[b-hl3xod5ed2] {
        grid-template-columns: 2fr 0.8fr 1.2fr 1fr 1fr 44px;
    }

    .gr-cl-top-col-headers .gr-cl-th:nth-child(6)[b-hl3xod5ed2],
    .gr-cl-top-row .gr-cl-top-submitter[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-score-chart[b-hl3xod5ed2] {
        width: 38px;
        height: 38px;
    }
}

/* ── 992px and below ── */
@media (max-width: 992px) {
    .gr-cl-table-grid[b-hl3xod5ed2] {
        grid-template-columns: 1.8fr 0.7fr 1.2fr 0.9fr 0.7fr 44px;
    }

    /* hide S.NO and location */
    .gr-cl-table-headers .gr-cl-th:nth-child(1)[b-hl3xod5ed2],
    .gr-cl-candidate-row .gr-cl-row-num[b-hl3xod5ed2],
    .gr-cl-table-headers .gr-cl-th:nth-child(4)[b-hl3xod5ed2],
    .gr-cl-candidate-row .gr-cl-cell-location[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-draft-grid[b-hl3xod5ed2] {
        grid-template-columns: 2fr 1.2fr 1fr;
    }

    .gr-cl-draft-grid .gr-cl-th:nth-child(1)[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-row-num[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-th:nth-child(4)[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-cell-location[b-hl3xod5ed2] {
        display: none;
    }

    /* Show tabs as dropdown on tablet and mobile */
    .gr-cl-tabs-desktop[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-tabs-mobile[b-hl3xod5ed2] {
        display: block;
         position: relative;
    }

    /* Compact add button for tablet */
  
}

/* ── 768px and below (tablet portrait) ── */
@media (max-width: 768px) {
    .gr-cl-sticky-top[b-hl3xod5ed2] {
        padding: 16px 16px 8px;
    }

    .gr-cl-cell-location[b-hl3xod5ed2]{
     margin-left: 0px;
    }
    
    .gr-cl-tabs-desktop[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-tabs-mobile[b-hl3xod5ed2] {
        display: block;
         position: relative;
    }

    .gr-cl-toolbar-section[b-hl3xod5ed2] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--g-space-10);
    }

    .gr-cl-search-wrap[b-hl3xod5ed2] {
        flex: 1;
        max-width: 100%;
    }

    .gr-cl-toolbar-right[b-hl3xod5ed2] {
        justify-content: space-between;
    }
    .gr-cl-cell-interview[b-hl3xod5ed2]{
    display: none;
    }

    /* Switch to mobile card layout */
    .gr-cl-table-section .gr-cl-table-headers[b-hl3xod5ed2],
    .gr-cl-candidate-row.gr-cl-table-grid[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-mobile-card[b-hl3xod5ed2] {
        display: block;
        background: var(--g-bg-card);
        border: 1px solid var(--g-gray-100);
        border-radius: var(--g-radius-lg);
        padding: var(--g-space-16);
        transition: box-shadow 0.2s;
    }

    .gr-cl-mobile-card:hover[b-hl3xod5ed2] {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* Top matching view */
    .gr-cl-top-col-headers[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-top-row[b-hl3xod5ed2] {
        grid-template-columns: 1fr;
        gap: var(--g-space-10);
    }

    .gr-cl-top-row > *[b-hl3xod5ed2] {
        padding: var(--g-space-4) 0;
    }

    /* Draft grid */
    .gr-cl-draft-grid[b-hl3xod5ed2] {
        grid-template-columns: 1fr;
    }

    .gr-cl-draft-grid .gr-cl-th:not(:nth-child(2))[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-row-num[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-cell-details[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-cell-location[b-hl3xod5ed2],
    .gr-cl-draft-grid .gr-cl-cell-added[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-draft-section .gr-cl-table-headers[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-draft-list .gr-cl-candidate-row[b-hl3xod5ed2] {
        display: flex;
        flex-direction: column;
        gap: var(--g-space-8);
    }

    .gr-cl-draft-list .gr-cl-cell-candidate[b-hl3xod5ed2] {
        width: 100%;
    }

    .gr-cl-draft-list .gr-cl-row-num[b-hl3xod5ed2],
    .gr-cl-draft-list .gr-cl-cell-details[b-hl3xod5ed2],
    .gr-cl-draft-list .gr-cl-cell-location[b-hl3xod5ed2],
    .gr-cl-draft-list .gr-cl-cell-added[b-hl3xod5ed2] {
        display: flex;
    }
}

/* ── 425px and below (mobile) ── */
@media (max-width: 425px) {
    .gr-cl-sticky-top[b-hl3xod5ed2] {
        padding: 14px 12px 8px;
    }

    .gr-cl-add-btn[b-hl3xod5ed2] {
               width: 100%;
        justify-content: center;
    }

  
    .gr-cl-cell-submitter[b-hl3xod5ed2]{
        margin-left: 33px !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--g-space-10);
    }
    .gr-cl-mobile-card[b-hl3xod5ed2] {
        padding: var(--g-space-12);
    }

    .gr-cl-card[b-hl3xod5ed2],
    .gr-cl-card--interview[b-hl3xod5ed2] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--g-space-8);
    }

    /* Row 1: Candidate Name full width + Action top-right */
    .gr-cl-cell-candidate[b-hl3xod5ed2] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .gr-cl-cell-status[b-hl3xod5ed2] {
        position: absolute;
        top: var(--g-space-12);
        right: 44px;
    }

    .gr-cl-cell-action[b-hl3xod5ed2] {
        position: absolute;
        top: var(--g-space-12);
        right: var(--g-space-12);
    }

    /* Row 2: Job & Details + Matching Skill */
    .gr-cl-cell-job[b-hl3xod5ed2] {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .gr-cl-cell-skills[b-hl3xod5ed2] {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }

    /* Row 3: Overall + Submitted By */
    .gr-cl-cell-overall[b-hl3xod5ed2] {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }

    .gr-cl-cell-submitter[b-hl3xod5ed2] {
        grid-column: 2;
        grid-row: 3;
        width: 100%;
    }

    .gr-cl-card[b-hl3xod5ed2] {
        position: relative;
           overflow: visible !important;
    }

    .gr-cl-avatar[b-hl3xod5ed2] {
        width: 34px;
        height: 34px;
    }

    .gr-cl-score-chart[b-hl3xod5ed2] {
        width: 36px;
        height: 36px;
    }

    .gr-cl-action-menu[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        padding: var(--g-space-16) var(--g-space-12);
        max-height: 60vh;
        overflow-y: auto;
    }

    .gr-cl-skill-popover[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        max-height: 50vh;
        overflow-y: auto;
    }

    .gr-cl-score-tooltip[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        z-index: 99999;
    }

    .gr-cl-backdrop[b-hl3xod5ed2] {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* ── 375px and below ── */
@media (max-width: 375px) {
    .gr-cl-candidate-name[b-hl3xod5ed2] {
        font-size: 12px;
    }

    .gr-cl-candidate-role[b-hl3xod5ed2] {
        font-size: 10px;
    }

     .gr-cl-cell-submitter[b-hl3xod5ed2]{
        margin-left: 14px !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--g-space-10);
    }
    .gr-cl-sort-btn[b-hl3xod5ed2] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .gr-cl-search-input[b-hl3xod5ed2] {
        font-size: 13px;
        padding: 8px 10px 8px 34px;
    }
}

/* ── 320px and below ── */
@media (max-width: 320px) {
    .gr-cl-add-btn[b-hl3xod5ed2] {
        padding: var(--g-space-4) var(--g-space-8);
        font-size: 11px;
    }

    .gr-cl-add-btn svg[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-mobile-card-row[b-hl3xod5ed2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .gr-cl-tab-mobile-toggle[b-hl3xod5ed2] {
        font-size: 13px;
        padding: var(--g-space-10) var(--g-space-12);
    }
}

/* ════════════════════════════════════════════════════════
   26. SCROLL AREA & TABLE CONTAINER
   ════════════════════════════════════════════════════════ */
.gr-cl-scroll-area[b-hl3xod5ed2] {
    flex: 1;
    overflow-y:visible;
    padding: var(--g-space-16) 0;
    min-height: 0;
}

.gr-cl-table-container[b-hl3xod5ed2] {
    
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
    overflow: visible;
}

/* ════════════════════════════════════════════════════════
   27. COLUMN HEADERS
   ════════════════════════════════════════════════════════ */
.gr-cl-col-headers[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: 40px 1.8fr 2fr 0.9fr 0.8fr 1.1fr 1.2fr 46px;
    align-items: center;
    gap: 0 var(--g-space-8);
 
    padding: var(--g-space-12) var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-200);
    background: var(--g--heading-bg);
}

.gr-cl-col-headers--interview[b-hl3xod5ed2] {
    grid-template-columns: 40px 1.8fr 1.6fr 0.8fr 0.9fr 1.2fr 1.1fr 1.1fr 48px;
}

.gr-cl-col-headers--draft[b-hl3xod5ed2] {
    grid-template-columns: 40px 2.2fr 1.2fr 1.2fr 1fr;
}


/* ════════════════════════════════════════════════════════
   28. CARD / ROW
   ════════════════════════════════════════════════════════ */
.gr-cl-list[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
  
}


.gr-cl-empty-state[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}

.gr-cl-empty-title[b-hl3xod5ed2] {
    font-size: 15px;
    font-weight: 600;
    color: var(--g-text-primary, #1e293b);
    margin: 0;
}

.gr-cl-empty-subtitle[b-hl3xod5ed2] {
    font-size: 13px;
    color: var(--g-text-muted, #64748b);
    margin: 0;
}
.gr-cl-submitter-initial-badge[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}
.gr-cl-card[b-hl3xod5ed2] {
    display: grid;
  grid-template-columns: 40px 1.9fr 2fr 1fr 1fr 1.1fr 1.1fr 48px;
    align-items: center;
    gap: 0 var(--g-space-8);
    padding: var(--g-space-16) var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-100);
    transition: background 0.15s ease;
    min-height: 80px;
}

.gr-cl-card:hover[b-hl3xod5ed2]{
  background: var(--g-bg-section);

}

.gr-cl-card:last-child[b-hl3xod5ed2] {
    border-bottom: none;
}

.gr-cl-card--interview[b-hl3xod5ed2] {
    grid-template-columns: 40px 1.8fr 1.6fr 0.8fr 0.9fr 1.2fr 1.1fr 1.1fr 48px;
}

.gr-cl-col-headers--interview .gr-cl-th--status[b-hl3xod5ed2] {
   
   
   
   left: -15%;
}

.gr-cl-card--interview .gr-cl-cell-status[b-hl3xod5ed2] {
    align-items: flex-start;
    justify-self: start;
}

.gr-cl-card--interview .gr-cl-status-updated[b-hl3xod5ed2] {
    padding-left: 0;
    text-align: left;
}

.gr-cl-col-headers--interview .gr-cl-th--overall[b-hl3xod5ed2] {
        text-align: center;
    justify-self: center;
    margin-left: -44px;
}


.gr-cl-card--interview .gr-cl-cell-overall[b-hl3xod5ed2] {
    justify-self: center;
}

.gr-cl-col-headers--interview .gr-cl-th--submitter[b-hl3xod5ed2] {
        text-align: left;
    justify-self: start;
    margin-left: -15%;
}

.gr-cl-card--interview .gr-cl-cell-submitter[b-hl3xod5ed2] {
    justify-content: flex-start;
    justify-self: start;
}

.gr-cl-card--draft[b-hl3xod5ed2] {
    grid-template-columns: 40px 2.2fr 1.2fr 1.2fr 1fr;
    position: relative;
}

.gr-cl-row-num[b-hl3xod5ed2] {
    text-align: center;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
}

/* ════════════════════════════════════════════════════════
   29. CELL SUBMITTER + ACTION COMBINED
   ════════════════════════════════════════════════════════ */
.gr-cl-cell-submitter-action[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-8);
}

/* ════════════════════════════════════════════════════════
   30. JOB CELL ENHANCEMENTS
   ════════════════════════════════════════════════════════ */
.gr-cl-job-icon[b-hl3xod5ed2] {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.gr-cl-job-icon-img[b-hl3xod5ed2] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-lg);
    object-fit: cover;
    border: 1px solid var(--g-gray-200);
}

.gr-cl-job-icon-default[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-lg);
    background: var(--g-gray-100);
    border: 1px solid var(--g-gray-200);
    color: var(--g-gray-400);
}

.gr-cl-job-client-badge-img[b-hl3xod5ed2] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: var(--g-radius-full);
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--g-shadow-xs);
}

.gr-cl-job-meta-row[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    flex-wrap: wrap;
}

.gr-cl-job-client[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.gr-cl-job-client[b-hl3xod5ed2]  svg {
    width: 12px;
    height: 12px;
    color: var(--g-gray-300, );
    flex-shrink: 0;
}

.gr-cl-priority-indicator[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
}

.gr-cl-priority-dot[b-hl3xod5ed2] {
    width: 6px;
    height: 6px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   31. STATUS CELL
   ════════════════════════════════════════════════════════ */
.gr-cl-status-text[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
       color: var(--g-text-heading);
    transition: color 0.15s;
}

.gr-cl-status-badge:hover .gr-cl-status-text[b-hl3xod5ed2] {
    color: var(--g-brand);
}

.gr-cl-status-updated[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin-top: 2px;
    padding-left: 14px;
}

/* ════════════════════════════════════════════════════════
   32. INTERVIEW CELL
   ════════════════════════════════════════════════════════ */
.gr-cl-cell-interview[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-6);
}

.gr-cl-interview-date[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.gr-cl-interview-time[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.gr-cl-interview-badge[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: 2px 8px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    border-radius: var(--g-radius-full);
}

.gr-cl-interview-badge--pending[b-hl3xod5ed2] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.gr-cl-interview-badge--live[b-hl3xod5ed2] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.gr-cl-interview-badge--done[b-hl3xod5ed2] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.gr-cl-interview-pulse[b-hl3xod5ed2] {
    width: 8px;
    height: 8px;
    border-radius: var(--g-radius-full);
    background: #22c55e;
    animation: gr-cl-pulse-b-hl3xod5ed2 1.5s infinite;
}

@keyframes gr-cl-pulse-b-hl3xod5ed2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ════════════════════════════════════════════════════════
   33. SKILL PILLS
   ════════════════════════════════════════════════════════ */
.gr-cl-pill--green[b-hl3xod5ed2] {
    background: #ecfdf5;
    color: #059669;
   
}

.gr-cl-pill--green:hover[b-hl3xod5ed2] { background: #d1fae5; }

.gr-cl-pill--red[b-hl3xod5ed2] {
    background: #fef2f2;
    color: #dc2626;

}

.gr-cl-pill--red:hover[b-hl3xod5ed2] { background: #fee2e2; }

.gr-cl-pill--blue[b-hl3xod5ed2] {
    background: #eff6ff;
    color: #2563eb;
  
}

.gr-cl-pill--blue:hover[b-hl3xod5ed2] { background: #dbeafe; }

.gr-cl-pill--orange[b-hl3xod5ed2] {
    background: #fffbeb;
    color: #d97706;
}

.gr-cl-pill--orange:hover[b-hl3xod5ed2] { background: #fef3c7; }

/* ════════════════════════════════════════════════════════
   34. SCORE TOOLTIP VISIBLE STATE
   ════════════════════════════════════════════════════════ */
.gr-cl-score-tooltip--visible[b-hl3xod5ed2] {
    display: block;
}

.gr-cl-tooltip-text[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-relaxed);
}

/* ════════════════════════════════════════════════════════
   35. ICON UTILITIES
   ════════════════════════════════════════════════════════ */
.gr-cl-icon-xxs[b-hl3xod5ed2] { width: 10px; height: 10px; }
.gr-cl-icon-xs[b-hl3xod5ed2] { width: 12px !important; height: 12px !important; }
.gr-cl-icon-sm[b-hl3xod5ed2] { width: 16px; height: 16px; }
.gr-cl-icon-md[b-hl3xod5ed2] { width: 20px; height: 20px; }
.gr-cl-icon-lg[b-hl3xod5ed2] { width: 28px; height: 28px; }
.gr-cl-icon-xl[b-hl3xod5ed2] { width: 64px; height: 64px; }
.gr-cl-icon-muted[b-hl3xod5ed2] { color: var(--g-text-muted) !important; }

/* ════════════════════════════════════════════════════════
   36. SORT CHEVRON
   ════════════════════════════════════════════════════════ */
.gr-cl-sort-chevron[b-hl3xod5ed2] {
    width: 12px;
    height: 12px;
    color: var(--g-text-muted);
    transition: transform 0.2s ease;
}

.gr-cl-sort-chevron--open[b-hl3xod5ed2] {
    transform: rotate(180deg);
}

.gr-cl-sort-label[b-hl3xod5ed2] {
    color: var(--g-text-muted);
    font-size: var(--g-fs-xs);
}

.gr-cl-sort-value[b-hl3xod5ed2] {
    color: var(--g-text-primary);
    font-size: var(--g-fs-xs);
}

/* ════════════════════════════════════════════════════════
   37. DRAWER STYLES
   ════════════════════════════════════════════════════════ */
.gr-cl-drawer-backdrop[b-hl3xod5ed2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1050;
    animation: gr-cl-fade-in-b-hl3xod5ed2 0.2s ease;
}

.gr-cl-drawer-panel[b-hl3xod5ed2] {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100%, 860px);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    background: var(--g-bg-section);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
    animation: gr-cl-drawer-slide-in-b-hl3xod5ed2 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes gr-cl-drawer-slide-in-b-hl3xod5ed2 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.gr-cl-drawer-header[b-hl3xod5ed2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-gray-200);
    padding: var(--g-space-16) var(--g-space-24);
}

.gr-cl-drawer-header-info[b-hl3xod5ed2] { min-width: 0; }

.gr-cl-drawer-title[b-hl3xod5ed2] {
    font-size: 15px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-drawer-subtitle[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0;
}

.gr-cl-drawer-close-btn[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: var(--g-radius-full);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin-left: var(--g-space-16);
}

.gr-cl-drawer-close-btn:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-drawer-body[b-hl3xod5ed2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--g-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-20);
}

.gr-cl-drawer-card[b-hl3xod5ed2] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-20);
    box-shadow: var(--g-shadow-xs);
}

.gr-cl-drawer-card--flush[b-hl3xod5ed2] { padding: 0; }

.gr-cl-drawer-card-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--g-space-12);
}

.gr-cl-drawer-card-header--bordered[b-hl3xod5ed2] {
    padding: var(--g-space-16) var(--g-space-20) var(--g-space-4);
    border-bottom: 1px solid var(--g-gray-100);
    margin-bottom: 0;
}

.gr-cl-drawer-card-title[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-drawer-card-title--icon[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
}

.gr-cl-drawer-card-count[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

/* Drawer Context Card */
.gr-cl-drawer-context-card[b-hl3xod5ed2] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-20);
    display: flex;
    align-items: stretch;
    gap: var(--g-space-16);
    box-shadow: var(--g-shadow-xs);
}

.gr-cl-drawer-context-left[b-hl3xod5ed2],
.gr-cl-drawer-context-right[b-hl3xod5ed2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.gr-cl-drawer-context-top[b-hl3xod5ed2] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    margin-bottom: var(--g-space-12);
}

.gr-cl-drawer-job-avatar[b-hl3xod5ed2],
.gr-cl-drawer-job-img[b-hl3xod5ed2] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-md);
    object-fit: cover;
    border: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.gr-cl-drawer-job-info[b-hl3xod5ed2] { min-width: 0; }

.gr-cl-drawer-job-title[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-cl-drawer-job-meta[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.gr-cl-drawer-tags[b-hl3xod5ed2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-6);
}

.gr-cl-drawer-tag[b-hl3xod5ed2] {
    padding: 4px 10px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

.gr-cl-drawer-meta-footer[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin-top: var(--g-space-16);
}

.gr-cl-drawer-meta-name[b-hl3xod5ed2] {
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.gr-cl-drawer-context-divider[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 32px;
    align-self: stretch;
    padding: var(--g-space-8) 0;
}

.gr-cl-drawer-divider-line[b-hl3xod5ed2] {
    flex: 1;
    width: 1px;
    background: var(--g-gray-200);
}

.gr-cl-drawer-divider-icon[b-hl3xod5ed2] {
    margin: var(--g-space-8) 0;
    padding: 6px;
    border-radius: var(--g-radius-full);
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    box-shadow: var(--g-shadow-xs);
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-cl-drawer-candidate-avatar[b-hl3xod5ed2] {
    width: 40px;
    height: 40px;
    border-radius: var(--g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    border: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.gr-cl-drawer-candidate-info[b-hl3xod5ed2] { min-width: 0; }

.gr-cl-drawer-candidate-name[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-cl-drawer-candidate-meta[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-cl-drawer-contact-icons[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.gr-cl-drawer-contact-btn[b-hl3xod5ed2] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-full);
    background: none;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.gr-cl-drawer-contact-btn:hover[b-hl3xod5ed2] {
    color: var(--g-text-secondary);
    background: var(--g-gray-50);
}

.gr-cl-drawer-contact-btn--resume:hover[b-hl3xod5ed2] {
    color: var(--g-brand);
    border-color: var(--g-brand-border);
    background: var(--g-brand-bg);
}

/* Drawer Pipeline */
.gr-cl-drawer-pipeline-grid[b-hl3xod5ed2] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.gr-cl-drawer-pipeline-item[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-8) var(--g-space-4);
}

.gr-cl-drawer-pipeline-item--bordered[b-hl3xod5ed2] {
    border-right: 1px solid var(--g-gray-100);
}

.gr-cl-drawer-pipeline-value[b-hl3xod5ed2] {
    font-size: 20px;
    font-weight: var(--g-fw-extrabold);
    line-height: 1;
}

.gr-cl-pipeline-blue[b-hl3xod5ed2] { color: #0a66c2; }
.gr-cl-pipeline-default[b-hl3xod5ed2] { color: var(--g-text-secondary); }
.gr-cl-pipeline-muted[b-hl3xod5ed2] { color: var(--g-text-muted); }
.gr-cl-pipeline-red[b-hl3xod5ed2] { color: var(--g-error); }
.gr-cl-pipeline-green[b-hl3xod5ed2] { color: var(--g-success); }

.gr-cl-drawer-pipeline-label[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxxs);
    color: var(--g-text-muted);
    margin-top: var(--g-space-4);
    text-align: center;
    line-height: 1.2;
}

/* Drawer Rate */
.gr-cl-drawer-rate-compare[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gr-cl-drawer-rate-item[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
}

.gr-cl-drawer-rate-item--end[b-hl3xod5ed2] {
    align-items: flex-end;
}

.gr-cl-drawer-rate-label[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    margin-bottom: var(--g-space-4);
}

.gr-cl-drawer-rate-value[b-hl3xod5ed2] {
    font-size: 1.75rem;
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    line-height: 1;
}

.gr-cl-drawer-rate-value--over[b-hl3xod5ed2] {
    color: var(--g-error);
}

.gr-cl-drawer-rate-unit[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-muted);
}

.gr-cl-drawer-rate-divider[b-hl3xod5ed2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 var(--g-space-16);
    position: relative;
}

.gr-cl-drawer-rate-line[b-hl3xod5ed2] {
    position: absolute;
    inset: 0;
    height: 1px;
    background: #fca5a5;
    top: 50%;
}

.gr-cl-drawer-rate-diff[b-hl3xod5ed2] {
    position: relative;
    z-index: 1;
    background: var(--g-bg-card);
    padding: 0 var(--g-space-8);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-error);
}

.gr-cl-drawer-divider-hr[b-hl3xod5ed2] {
    border: none;
    border-top: 1px solid var(--g-gray-100);
    margin: var(--g-space-16) 0;
}

.gr-cl-drawer-rate-footer[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gr-cl-drawer-rtr-btn[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.gr-cl-drawer-rtr-btn:hover[b-hl3xod5ed2] { color: var(--g-indigo-dark); }

.gr-cl-drawer-inclusive[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
}

.gr-cl-drawer-inclusive-label[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

.gr-cl-drawer-toggle-group[b-hl3xod5ed2] {
    display: flex;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    overflow: hidden;
}

.gr-cl-drawer-toggle-btn[b-hl3xod5ed2] {
    padding: 6px 16px;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    border: none;
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.gr-cl-drawer-toggle-btn--active[b-hl3xod5ed2] {
    background: var(--g-success);
    color: #fff;
}

.gr-cl-drawer-toggle-btn + .gr-cl-drawer-toggle-btn[b-hl3xod5ed2] {
    border-left: 1px solid var(--g-gray-200);
}

/* Drawer Skills */
.gr-cl-drawer-skills-content[b-hl3xod5ed2] {
    display: flex;
    gap: var(--g-space-16);
}

.gr-cl-drawer-skills-list[b-hl3xod5ed2] {
    flex: 1;
    min-width: 0;
}

.gr-cl-drawer-skills-pills[b-hl3xod5ed2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-8);
}

.gr-cl-drawer-skill-pill[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 6px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-full);
    background: var(--g-bg-card);
    font-size: 13px;
    white-space: nowrap;
}

.gr-cl-drawer-skill-name[b-hl3xod5ed2] {
    font-weight: var(--g-fw-semibold);
    color: #0a66c2;
}

.gr-cl-drawer-skill-yrs[b-hl3xod5ed2] {
    color: var(--g-text-muted);
    font-size: var(--g-fs-xxs);
}

.gr-cl-drawer-no-skills[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
}

.gr-cl-drawer-skills-toggle[b-hl3xod5ed2] {
    margin-top: var(--g-space-10);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.gr-cl-drawer-skills-toggle:hover[b-hl3xod5ed2] { color: var(--g-text-heading); }

.gr-cl-drawer-skills-score[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    min-width: 140px;
}

.gr-cl-drawer-skills-pct[b-hl3xod5ed2] {
    font-size: 2.5rem;
    font-weight: var(--g-fw-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.gr-cl-drawer-skills-match-label[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
    margin-top: 6px;
}

.gr-cl-drawer-skills-match-status[b-hl3xod5ed2] {
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-secondary);
    margin-top: 2px;
}

/* Drawer Fit Analysis */
.gr-cl-drawer-fit-content[b-hl3xod5ed2] {
    padding: var(--g-space-20);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
}

.gr-cl-drawer-fit-chart-area[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
}

.gr-cl-drawer-fit-chart[b-hl3xod5ed2] {
    width: 50%;
    display: flex;
    justify-content: center;
}

.gr-cl-drawer-seg[b-hl3xod5ed2] { cursor: pointer; }

.gr-cl-drawer-fit-legend[b-hl3xod5ed2] {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: var(--g-space-8);
}

.gr-cl-drawer-fit-legend-btn[b-hl3xod5ed2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--g-radius-lg);
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.gr-cl-drawer-fit-legend-btn:hover[b-hl3xod5ed2] { background: rgba(248, 250, 252, 0.8); }
.gr-cl-drawer-fit-legend-btn--active[b-hl3xod5ed2] { background: var(--g-gray-100); box-shadow: var(--g-shadow-xs); }

.gr-cl-drawer-fit-legend-left[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gr-cl-drawer-fit-legend-dot[b-hl3xod5ed2] {
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
    transition: transform 0.15s;
}

.gr-cl-drawer-fit-legend-dot--active[b-hl3xod5ed2] { transform: scale(1.25); }

.gr-cl-drawer-fit-legend-label[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-cl-drawer-fit-legend-score[b-hl3xod5ed2] {
    font-size: 13px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    flex-shrink: 0;
    margin-left: var(--g-space-12);
}

.gr-cl-drawer-fit-ai-summary[b-hl3xod5ed2] {
    padding-top: 6px;
    padding-left: 12px;
}

.gr-cl-drawer-fit-ai-btn[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.gr-cl-drawer-fit-ai-btn:hover[b-hl3xod5ed2],
.gr-cl-drawer-fit-ai-btn--active[b-hl3xod5ed2] { color: var(--g-brand); }

.gr-cl-drawer-fit-detail[b-hl3xod5ed2] {
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-gray-200);
    overflow: hidden;
    padding: var(--g-space-16);
}

.gr-cl-drawer-fit-detail-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    margin-bottom: var(--g-space-10);
}

.gr-cl-drawer-fit-detail-left[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gr-cl-drawer-fit-detail-dot[b-hl3xod5ed2] {
    width: 10px;
    height: 10px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

.gr-cl-drawer-fit-detail-title[b-hl3xod5ed2] {
    font-size: 13.5px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-drawer-fit-detail-badge[b-hl3xod5ed2] {
    font-size: 12px;
    font-weight: var(--g-fw-bold);
    padding: 2px 10px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

.gr-cl-badge-blue[b-hl3xod5ed2] { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.gr-cl-badge-emerald[b-hl3xod5ed2] { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.gr-cl-badge-amber[b-hl3xod5ed2] { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.gr-cl-badge-red[b-hl3xod5ed2] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.gr-cl-drawer-fit-detail-text[b-hl3xod5ed2] {
    font-size: 12px;
    color: var(--g-text-secondary);
    line-height: var(--g-lh-relaxed);
    margin: 0;
}

/* Drawer History */
.gr-cl-drawer-history-item[b-hl3xod5ed2] {
    display: flex;
    gap: var(--g-space-12);
}

.gr-cl-drawer-history-timeline[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
}

.gr-cl-drawer-history-icon-wrap[b-hl3xod5ed2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.gr-cl-drawer-history-icon[b-hl3xod5ed2] {
    width: 28px;
    height: 28px;
    border-radius: var(--g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
}

.gr-cl-drawer-history-icon--approve[b-hl3xod5ed2] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #3b82f6;
}

.gr-cl-drawer-history-icon--hold[b-hl3xod5ed2] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #f59e0b;
}

.gr-cl-drawer-history-line[b-hl3xod5ed2] {
    flex: 1;
    width: 1px;
    background: var(--g-gray-200);
    margin: var(--g-space-4) 0;
}

.gr-cl-drawer-history-content[b-hl3xod5ed2] {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--g-space-20);
}

.gr-cl-drawer-history-title[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-drawer-history-author[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 8px;
}

.gr-cl-drawer-history-avatar[b-hl3xod5ed2] {
    width: 20px;
    height: 20px;
    border-radius: var(--g-radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gr-cl-drawer-history-name[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
}

.gr-cl-drawer-history-sep[b-hl3xod5ed2] {
    color: var(--g-gray-300);
    font-size: var(--g-fs-xs);
}

.gr-cl-drawer-history-time[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.gr-cl-drawer-history-comment[b-hl3xod5ed2] {
    padding: 14px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-relaxed);
    box-shadow: var(--g-shadow-xs);
}

.gr-cl-drawer-loading-text[b-hl3xod5ed2],
.gr-cl-drawer-empty-text[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
    padding: var(--g-space-12) 0;
}

/* Drawer Footer */
.gr-cl-drawer-footer[b-hl3xod5ed2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-12) var(--g-space-24);
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-gray-200);
}

.gr-cl-drawer-footer-info[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: 12px;
    color: var(--g-text-muted);
}

.gr-cl-drawer-footer-bold[b-hl3xod5ed2] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.gr-cl-drawer-footer-sep[b-hl3xod5ed2] { color: var(--g-gray-300); }

.gr-cl-drawer-feedback-btn[b-hl3xod5ed2] {
    padding: 8px 20px;
    background: var(--g-brand);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-lg);
    font-size: 13px;
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background 0.15s;
    box-shadow: 0 2px 8px rgba(44, 124, 255, 0.35);
}

.gr-cl-drawer-feedback-btn:hover[b-hl3xod5ed2] { background: var(--g-indigo-dark); }

/* Drawer Resume Modal */
.gr-cl-drawer-resume-overlay[b-hl3xod5ed2] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-16);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.gr-cl-drawer-resume-content[b-hl3xod5ed2] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 1024px;
    height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gr-cl-drawer-resume-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-16) var(--g-space-24);
    border-bottom: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.gr-cl-drawer-resume-title[b-hl3xod5ed2] {
    font-size: 15px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-drawer-resume-body[b-hl3xod5ed2] {
    flex: 1;
    background: var(--g-gray-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-32);
    gap: var(--g-space-16);
}

.gr-cl-drawer-resume-name[b-hl3xod5ed2] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
}

.gr-cl-drawer-resume-hint[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
    margin-top: var(--g-space-4);
}

/* ════════════════════════════════════════════════════════
   38. RESUME MODAL (Main page)
   ════════════════════════════════════════════════════════ */
.gr-cl-resume-modal[b-hl3xod5ed2] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-cl-resume-modal-backdrop[b-hl3xod5ed2] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
}

.gr-cl-resume-modal-content[b-hl3xod5ed2] {
    position: relative;
    width: 700px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.gr-cl-resume-modal-header[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-16) var(--g-space-24);
    border-bottom: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}



.gr-cl-resume-modal-title[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
}

.gr-cl-resume-modal-subtitle[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    margin: 2px 0 0;
}

.gr-cl-resume-modal-actions[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.gr-cl-btn-download[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--g-gray-900);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-lg);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background 0.15s;
}

.gr-cl-btn-download:hover[b-hl3xod5ed2] { background: var(--g-gray-700); }

.gr-cl-btn-icon-close[b-hl3xod5ed2] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-lg);
    border: none;
    background: none;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.gr-cl-btn-icon-close:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-resume-modal-body[b-hl3xod5ed2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--g-space-24);
}

.gr-cl-resume-frame[b-hl3xod5ed2] {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    background: var(--g-gray-50);
}

.gr-cl-resume-placeholder[b-hl3xod5ed2] {
    background: var(--g-gray-50);
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-gray-200);
    padding: 40px;
    min-height: 384px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-16);
}

.gr-cl-resume-placeholder-icon[b-hl3xod5ed2] {
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-2xl);
    background: var(--g-brand-bg);
    border: 1px solid var(--g-brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-brand);
}

.gr-cl-resume-placeholder-text[b-hl3xod5ed2] { text-align: center; }

.gr-cl-resume-placeholder-name[b-hl3xod5ed2] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
}

.gr-cl-resume-placeholder-hint[b-hl3xod5ed2] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    margin-top: var(--g-space-4);
}

.gr-cl-resume-placeholder-lines[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    width: 224px;
    margin-top: var(--g-space-8);
}

.gr-cl-placeholder-line[b-hl3xod5ed2] {
    height: 10px;
    background: var(--g-gray-200);
    border-radius: var(--g-radius-full);
}

/* ════════════════════════════════════════════════════════
   39. MOBILE LABEL (hidden on desktop)
   ════════════════════════════════════════════════════════ */
.gr-cl-mobile-label[b-hl3xod5ed2] {
    display: none;
}

/* ════════════════════════════════════════════════════════
   40. RESPONSIVE OVERRIDE: 768px and below (card layout)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gr-cl-col-headers[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-card[b-hl3xod5ed2],
    .gr-cl-card--interview[b-hl3xod5ed2] {
      display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--g-space-10) var(--g-space-12);
        padding: var(--g-space-16);
        align-items: center;
    }

    .gr-cl-card--draft[b-hl3xod5ed2] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--g-space-10) var(--g-space-12);
        padding: var(--g-space-16);
        align-items: center;
    }

    .gr-cl-card:hover[b-hl3xod5ed2] {
        transform: none;
    }

    .gr-cl-row-num[b-hl3xod5ed2] {
        display: none;
    }

    /* Hide sibling mobile-labels completely */
    .gr-cl-mobile-label[b-hl3xod5ed2] {
        display: none;
    }

    /* Hide Overall section on mobile */
    .gr-cl-cell-overall[b-hl3xod5ed2] {
        display: none;
    }

    /* ── Row 1: Candidate Name + Status + Action ── */
    .gr-cl-cell-candidate[b-hl3xod5ed2] {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: var(--g-space-8);
    }

    .gr-cl-cell-status[b-hl3xod5ed2] {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        align-self: center;
    }

    .gr-cl-cell-action[b-hl3xod5ed2] {
              grid-column: 3;
        grid-row: 1;
        width: auto;
        align-self: center;
        justify-content: end;
    }

    /* ── Row 2: Job & Details + Matching Skill + Submitted By ── */
    .gr-cl-cell-job[b-hl3xod5ed2] {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .gr-cl-cell-skills[b-hl3xod5ed2] {
       display: none;
    }

    .gr-cl-cell-submitter[b-hl3xod5ed2] {
        grid-column: 3;
        grid-row: 2;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--g-space-10);
    }

    .gr-cl-cell-submitter-action[b-hl3xod5ed2] {
        display: none;
    }

    /* No ::before labels — clean layout */
    .gr-cl-cell-job[b-hl3xod5ed2]::before,
    .gr-cl-cell-skills[b-hl3xod5ed2]::before,
    .gr-cl-cell-overall[b-hl3xod5ed2]::before,
    .gr-cl-cell-submitter[b-hl3xod5ed2]::before {
        display: none;
    }

    /* Prevent overflow */
    .gr-cl-candidate-name[b-hl3xod5ed2] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .gr-cl-job-title[b-hl3xod5ed2] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .gr-cl-score-chart[b-hl3xod5ed2] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .gr-cl-skill-pill[b-hl3xod5ed2] {
        font-size: 11px;
        padding: 3px 8px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gr-cl-skill-more[b-hl3xod5ed2] {
        font-size: 10px;
    }

    /* Toolbar responsive — search full width */
    .gr-cl-toolbar-section[b-hl3xod5ed2] {
       flex-direction: row;
        align-items: center;
        gap: var(--g-space-10);
        margin-top: 30px;
    }

    .gr-cl-search-wrap[b-hl3xod5ed2] {
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }

    .gr-cl-search-input[b-hl3xod5ed2] {
        width: 100%;
    }

    .gr-cl-toolbar-right[b-hl3xod5ed2] {
        justify-content: space-between;
    }

    .gr-cl-tabs-desktop[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-tabs-mobile[b-hl3xod5ed2] {
        display: block;
         position: relative;
    }

    .gr-cl-tabs-section[b-hl3xod5ed2] {
        display: block;
    }

    /* Drawer responsive */
    .gr-cl-drawer-context-card[b-hl3xod5ed2] {
        flex-direction: column;
    }

    .gr-cl-drawer-context-divider[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-drawer-fit-chart-area[b-hl3xod5ed2] {
        flex-direction: column;
        gap: var(--g-space-16);
    }

    .gr-cl-drawer-fit-chart[b-hl3xod5ed2],
    .gr-cl-drawer-fit-legend[b-hl3xod5ed2] {
        width: 100%;
        padding-left: 0;
    }

    .gr-cl-drawer-skills-content[b-hl3xod5ed2] {
        flex-direction: column;
    }

    .gr-cl-drawer-skills-score[b-hl3xod5ed2] {
        min-width: 0;
        flex-direction: row;
        gap: var(--g-space-12);
        align-items: center;
    }

    .gr-cl-pagination[b-hl3xod5ed2] {
        flex-direction: column;
        gap: var(--g-space-10);
        align-items: center;
    }
}

@media (max-width: 425px) {
    .gr-cl-toolbar-section[b-hl3xod5ed2] {
        flex-direction: column;
    }
    .gr-cl-toolbar-right[b-hl3xod5ed2]{
        width:100%;
    }
    .gr-cl-scroll-area[b-hl3xod5ed2] {
        padding: var(--g-space-8);
    }

    .gr-cl-drawer-body[b-hl3xod5ed2] {
        padding: var(--g-space-16);
    }

    .gr-cl-drawer-pipeline-grid[b-hl3xod5ed2] {
        grid-template-columns: repeat(3, 1fr);
    }

    .gr-cl-drawer-rate-compare[b-hl3xod5ed2] {
        flex-direction: column;
        gap: var(--g-space-12);
        align-items: flex-start;
    }

    .gr-cl-drawer-rate-divider[b-hl3xod5ed2] {
        display: none;
    }

    .gr-cl-drawer-rate-footer[b-hl3xod5ed2] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-space-12);
    }

    .gr-cl-action-menu[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        padding: var(--g-space-16) var(--g-space-12);
        max-height: 60vh;
        overflow-y: auto;
    }

    .gr-cl-skill-popover[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        max-height: 50vh;
        overflow-y: auto;
    }

    .gr-cl-pagination-controls[b-hl3xod5ed2] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gr-cl-pg-nav[b-hl3xod5ed2] {
        padding: 6px 10px;
        font-size: 11px;
    }

    .gr-cl-score-tooltip[b-hl3xod5ed2] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        min-width: auto;
        max-width: none;
    }
}

/* ════════════════════════════════════════════════════════
   41. TOAST NOTIFICATION
   ════════════════════════════════════════════════════════ */
.gr-cl-toast[b-hl3xod5ed2] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: 12px 20px;
    background: #18181b;
    color: #fff;
    border-radius: var(--g-radius-lg);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.gr-cl-toast--show[b-hl3xod5ed2] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.gr-cl-toast[b-hl3xod5ed2]  svg {
    width: 16px;
    height: 16px;
    color: #4ade80;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   42. RESUME MODAL ENHANCEMENTS
   ════════════════════════════════════════════════════════ */
.gr-cl-resume-modal-info[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gr-cl-resume-modal-subtitle[b-hl3xod5ed2] {
    font-size: 12px;
    color: var(--g-text-muted);
    margin: 0;
}

.gr-cl-resume-modal-actions[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
}

.gr-cl-btn-download[b-hl3xod5ed2] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 8px 16px;
    background: var(--g-gray-900);
    border: 1px solid var(--g-gray-900);
    border-radius: var(--g-radius-lg);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.gr-cl-btn-download:hover[b-hl3xod5ed2] {
    background: var(--g-gray-800);
    border-color: var(--g-gray-800);
}

.gr-cl-btn-icon-close[b-hl3xod5ed2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.gr-cl-btn-icon-close:hover[b-hl3xod5ed2] {
    background: var(--g-gray-100);
    color: var(--g-text-primary);
}

.gr-cl-icon-md[b-hl3xod5ed2] { width: 20px; height: 20px; }
.gr-cl-icon-lg[b-hl3xod5ed2] { width: 40px; height: 40px; }

.gr-cl-resume-placeholder[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-16);
    padding: 60px 40px;
    width: 100%;
}

.gr-cl-resume-placeholder-icon[b-hl3xod5ed2] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border-radius: var(--g-radius-xl);
    color: #3b82f6;
}

.gr-cl-resume-placeholder-text[b-hl3xod5ed2] {
    text-align: center;
}

.gr-cl-resume-placeholder-name[b-hl3xod5ed2] {
    font-size: 15px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-primary);
    margin: 0 0 4px;
}

.gr-cl-resume-placeholder-hint[b-hl3xod5ed2] {
    font-size: 13px;
    color: var(--g-text-muted);
    margin: 0;
}

.gr-cl-resume-placeholder-lines[b-hl3xod5ed2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60%;
    max-width: 320px;
}

.gr-cl-placeholder-line[b-hl3xod5ed2] {
    height: 10px;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 6px;
    opacity: 0.7;
}
/* /Components/Pages/Dashboard/Candidate/CandidateSubmission.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate Submission – cs- prefix
   Self-contained scoped styles
   8px grid system • Responsive
   ═══════════════════════════════════════════ */

/* ── Loading Overlay ── */
.cs-loading-overlay[b-9pgx6zhbxj] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.cs-loading-card[b-9pgx6zhbxj] {
    background: var(--g-bg-section);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cs-loading-spinner[b-9pgx6zhbxj] {
    animation: cs-spin-b-9pgx6zhbxj 1s linear infinite;
}

@keyframes cs-spin-b-9pgx6zhbxj {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cs-loading-title[b-9pgx6zhbxj] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cs-loading-subtitle[b-9pgx6zhbxj] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* ── Page Shell ── */
.cs-page[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
}

/* ── Page Header ── */
.cs-header[b-9pgx6zhbxj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-12);
}

.cs-subtitle[b-9pgx6zhbxj] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

.cs-header-left[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-title[b-9pgx6zhbxj] {
    font-size: var(--g-fs-page-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--g-lh-tight);
}

/* ── Two Column Grid ── */
.cs-grid[b-9pgx6zhbxj] {
    display: grid;
    grid-template-columns: 1.5fr minmax(280px, 0.58fr);
    gap: var(--g-space-24);
    
    align-items: start;
    margin: var(--g-space-24) clamp(0px, 5vw, 104px) 0px;
}

/* ── Form Column ── */
.cs-form-col[b-9pgx6zhbxj] {
    min-width: 0;
}

.cs-form-card[b-9pgx6zhbxj] {
    background: var(--g-bg-layout);
    border-radius: var(--g-radius-3xl);
    --tw-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cs-form-card-header[b-9pgx6zhbxj] {
    margin-bottom: 28px;
    background-color: white;
    padding: var(--g-space-24) var(--g-space-32);
     border-top-left-radius:var(--g-radius-3xl); 
    border-top-right-radius: var(--g-radius-3xl);
   
}

.cs-form-card-title[b-9pgx6zhbxj] {
 font-size: var(--g-fs-candidate-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.cs-form-card-subtitle[b-9pgx6zhbxj] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: var(--g-lh-normal);
}

/* ── Field Groups ── */
.cs-field-group[b-9pgx6zhbxj] {
      margin-bottom: var(--g-space-24);
    padding: 0 var(--g-space-32);
}

.cs-label[b-9pgx6zhbxj] {
    display: block;
    font-size: var(--g-space-12);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    margin-bottom: var(--g-space-8);
}

.cs-required[b-9pgx6zhbxj] {
    color: var(--g-error);
}

.cs-field-error[b-9pgx6zhbxj] {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: 4px;
    display: block;
}

.cs-resume-error-alert[b-9pgx6zhbxj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: var(--g-radius-md);
    background: #fef2f2;
    color: #b91c1c;
    line-height: 1.4;
}

.cs-resume-error-alert svg[b-9pgx6zhbxj] {
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Input with Icon ── */
.cs-input-icon-wrap[b-9pgx6zhbxj] {
    position: relative;
    display: flex;
    align-items: center;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: var(--g-radius-md);
}
.cs-input-icon-wrapping[b-9pgx6zhbxj]{
     position: absolute;
    top: 5px;
    background: var(--g-border-light);
    width: 30px;
    height: 30px;
    left: 7px;
    border-radius: var(--g-radius-xs);
}

.cs-input-icon[b-9pgx6zhbxj] {
   position: absolute;
    left: 8px;
    color: var(--g-text-muted);
    pointer-events: none;
    flex-shrink: 0;
    height: auto;
    top: 7px;
}

.cs-input-icon:hover[b-9pgx6zhbxj] {
    color: var(--g-brand);
}

.cs-input[b-9pgx6zhbxj] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.cs-input[b-9pgx6zhbxj]::placeholder {
    color: var(--g-text-muted);
}

.cs-input:focus[b-9pgx6zhbxj] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.cs-input-with-icon[b-9pgx6zhbxj] {
    padding-left: 42px;
}

/* ── Dropzone ── */
.cs-dropzone[b-9pgx6zhbxj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
    width: 100%;
    min-height: 180px;
    padding: 40px var(--g-space-20);
    border: 1px dashed var(--g-gray-200, #e5e7eb);
    border-radius: var(--g-radius-2xl, 1rem);
    background: white;
    cursor: pointer;
    transition: border-color var(--g-transition), background var(--g-transition), transform 0.2s;
    text-align: center;
    box-sizing: border-box;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cs-dropzone-disabled[b-9pgx6zhbxj] {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

.cs-dropzone:hover[b-9pgx6zhbxj],
.cs-dropzone.drag-over[b-9pgx6zhbxj] {
    border-color: var(--g-brand);
    background: var(--g-bg-section);
}

.cs-dropzone-icon-wrap[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-xl, 0.75rem);
       background: var(--sidebar-active-bg);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    transition: transform 0.2s;
}

.cs-dropzone:hover .cs-dropzone-icon-wrap[b-9pgx6zhbxj] {
    transform: scale(1.1);
}

.cs-dropzone-icon-success[b-9pgx6zhbxj] {
    color: var(--g-success);
}

.cs-dropzone-text[b-9pgx6zhbxj] {
    font-size: var(--g-space-16);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cs-dropzone-hint[b-9pgx6zhbxj] {
       font-size: var(--g-space-12);
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-medium);
}

.cs-dropzone-filename[b-9pgx6zhbxj] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    word-break: break-all;
}

.cs-dropzone-change[b-9pgx6zhbxj] {
    font-size: var(--g-fs-xs);
    color: var(--g-brand);
    font-weight: var(--g-fw-medium);
}

/* ── Form Actions ── */
.cs-form-actions[b-9pgx6zhbxj] {
       display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    margin-top: var(--g-space-8);
    padding-top: var(--g-space-24);
    padding-bottom: var(--g-space-24);
    /* border-top: 1px solid var(--g-border-light); */
    background-color: var(--bs-body-bg);
    border-bottom-right-radius: var(--g-radius-3xl);
    border-bottom-left-radius: var(--g-radius-3xl);
    padding: var(--g-space-24) var(--g-space-32);
}


.cs-btn-clear[b-9pgx6zhbxj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 22px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: color var(--g-transition), background var(--g-transition);
}

.cs-btn-clear:hover[b-9pgx6zhbxj] {
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

.cs-btn-clear:disabled[b-9pgx6zhbxj] {
    cursor: not-allowed;
    opacity: 0.5;
}

.cs-btn-clear:disabled:hover[b-9pgx6zhbxj] {
    color: var(--g-text-secondary);
    background: transparent;
}

.cs-btn-submit[b-9pgx6zhbxj] {
    min-width: 180px;
}

/* ── Cards Column ── */
.cs-cards-col[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    min-width: 0;
}

/* ── Info Card ── */
.cs-info-card[b-9pgx6zhbxj] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-24);
    box-shadow: var(--g-shadow-xs);
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

/* ── Job Summary ── */
.cs-job-summary[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--g-space-8);
    position: relative;
}

.cs-job-change-link[b-9pgx6zhbxj] {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    transition: color var(--g-transition);
}

.cs-job-change-link:hover[b-9pgx6zhbxj] {
    color: var(--g-indigo-dark);
}

/* ── Rotate Icon Animation ── */
.cs-change-icon[b-9pgx6zhbxj] {
    transition: transform 0.3s ease;
}

.cs-job-change-link:hover .cs-change-icon[b-9pgx6zhbxj] {
    transform: rotate(180deg);
}

/* ── Status Divider ── */
.cs-status-divider[b-9pgx6zhbxj] {
    width: 100%;
    border: none;
    height: 1px;
       background: var(--sidebar-icon);
    margin: var(--g-space-4) 0 var(--g-space-10);
}

/* ── Job Selector Inline Card ── */
.cs-job-selector-content[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--g-space-6);
    padding: var(--g-space-12) 0 var(--g-space-20);
}

.cs-job-selector-icon[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-2xl);
    background: var(--g-brand-bg);
    color: var(--g-brand);
    margin-bottom: var(--g-space-4);
}

.cs-job-selector-title[b-9pgx6zhbxj] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
}

.cs-job-selector-subtitle[b-9pgx6zhbxj] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.cs-job-selector-list[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-8);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d8 transparent;
}

.cs-job-selector-list[b-9pgx6zhbxj]::-webkit-scrollbar {
    width: 5px;
}

.cs-job-selector-list[b-9pgx6zhbxj]::-webkit-scrollbar-track {
    background: transparent;
}

.cs-job-selector-list[b-9pgx6zhbxj]::-webkit-scrollbar-thumb {
    background: #e4e4e7;
    border-radius: 10px;
}

.cs-job-selector-list[b-9pgx6zhbxj]::-webkit-scrollbar-thumb:hover {
    background: #d4d4d8;
}

.cs-job-option[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    padding: var(--g-space-10) 14px;
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border-card);
    background: var(--g-bg-card);
    cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition), box-shadow var(--g-transition);
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.cs-job-option:hover[b-9pgx6zhbxj] {
    background: var(--g-brand-bg);
    border-color: var(--g-brand);
    box-shadow: var(--g-shadow-sm);
}

.cs-job-option-img[b-9pgx6zhbxj] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--g-border-card);
}

.cs-job-option-img img[b-9pgx6zhbxj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-job-option-info[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cs-job-option-title[b-9pgx6zhbxj] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-job-option-company[b-9pgx6zhbxj] {
       font-size: var(--g-fs-xxxs);
    color: var(--g-dark-light);
    font-weight: var(--g-fw-medium);
}

.cs-job-avatar-wrap[b-9pgx6zhbxj] {
    position: relative;
    margin-bottom: var(--g-space-8);
    margin-top: var(--g-space-4);
}

.cs-job-avatar-thumb[b-9pgx6zhbxj] {
    width: 72px;
    height: 72px;
    border-radius: var(--g-radius-2xl);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: var(--g-shadow-sm);
}

.cs-job-avatar-thumb img[b-9pgx6zhbxj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-job-avatar-badge[b-9pgx6zhbxj] {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-full);
    overflow: hidden; 
    border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.cs-job-avatar-badge img[b-9pgx6zhbxj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-job-title[b-9pgx6zhbxj] {
      font-size: var(--g-fs-sidejob-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
   margin: var(--g-space-6) 0;
    line-height: var(--g-lh-tight);
}

.cs-job-company[b-9pgx6zhbxj] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cs-job-status-label[b-9pgx6zhbxj] {
     font-size: var(--g-fs-job);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-brand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: var(--g-space-10);
    margin-bottom: var(--g-space-4);
}

.cs-job-status-grid[b-9pgx6zhbxj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    margin-top: var(--g-space-8);
}

.cs-status-item[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--g-space-8) var(--g-space-4);
    position: relative;
}

.cs-status-item:not(:last-child)[b-9pgx6zhbxj]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--g-border-light, #e2e8f0);
}

.cs-status-num[b-9pgx6zhbxj] {
    font-size: var(--g-fs-job-status);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
    line-height: 1;
}

.cs-status-brand[b-9pgx6zhbxj] {
    color: var(--g-brand);
}

.cs-status-text[b-9pgx6zhbxj] {
     font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Card Label ── */
.cs-card-label[b-9pgx6zhbxj] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--g-space-16);
}

/* ── Detail Rows ── */
.cs-detail-rows[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cs-detail-row[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 0;
    border-bottom: 1px solid var(--g-border-light);
    gap: var(--g-space-12);
}

.cs-detail-row:last-child[b-9pgx6zhbxj] {
    border-bottom: none;
}

.cs-detail-left[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    color: var(--g-text-secondary);
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-medium);
    min-width: 0;
}

.cs-detail-left svg[b-9pgx6zhbxj] {
    flex-shrink: 0;
    color: var(--g-text-muted);
}

.cs-detail-value[b-9pgx6zhbxj] {
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    text-align: right;
    flex-shrink: 0;
}

.cs-detail-value-brand[b-9pgx6zhbxj] {
    color: var(--g-brand);
}

/* ── AI Thresholds ── */
.cs-ai-threshold-row[b-9pgx6zhbxj] {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    padding-top: 14px;
    border-top: 1px solid var(--g-gray-100);
}

.cs-ai-threshold-item[b-9pgx6zhbxj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.cs-ai-threshold-item.cs-ai-approve[b-9pgx6zhbxj] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.cs-ai-threshold-item.cs-ai-reject[b-9pgx6zhbxj] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.cs-ai-threshold-item svg[b-9pgx6zhbxj] {
    flex-shrink: 0;
}

.cs-ai-label[b-9pgx6zhbxj] {
    font-weight: 500;
    white-space: nowrap;
}

.cs-ai-value[b-9pgx6zhbxj] {
    margin-left: auto;
    font-weight: 700;
    font-size: 13px;
}
        
/* ── Modal ── */
.cs-modal-overlay[b-9pgx6zhbxj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--g-space-16);
    animation: g-fadeIn 0.2s ease-out;
}

.cs-eval-modal[b-9pgx6zhbxj] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 36px var(--g-space-40);
    max-width: 700px;
    width: 100%;
    box-shadow: var(--g-shadow-lg);
    animation: g-slideDown 0.25s ease-out;
    position: relative;
}

/* ── Loading ── */
.loading-overlay[b-9pgx6zhbxj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* ── Eval Header ── */
.cs-eval-header[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    gap: var(--g-space-32);
    margin-bottom: 28px;
}

.cs-eval-score[b-9pgx6zhbxj] {
    position: relative;
    width: 136px;
    height: 136px;
    flex-shrink: 0;
}

.cs-score-ring[b-9pgx6zhbxj] {
    width: 100%;
    height: 100%;
}

.cs-score-progress[b-9pgx6zhbxj] {
    transition: stroke-dashoffset 1s ease-out;
}

.cs-score-text[b-9pgx6zhbxj] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cs-score-value[b-9pgx6zhbxj] {
    font-size: 2rem;
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    line-height: 1;
    letter-spacing: -0.02em;
}

.cs-score-label[b-9pgx6zhbxj] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.cs-eval-job[b-9pgx6zhbxj] {
    flex: 1;
    min-width: 0;
}

.cs-eval-title[b-9pgx6zhbxj] {
    font-size: var(--g-fs-page-title);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0 0 var(--g-space-16);
    letter-spacing: -0.01em;
    line-height: var(--g-lh-tight);
}

.cs-eval-job-card[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--g-bg-card);
    padding: 14px 18px;
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--g-border-card);
}

.cs-eval-job-info[b-9pgx6zhbxj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cs-eval-job-name[b-9pgx6zhbxj] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    line-height: var(--g-lh-tight);
}

.cs-eval-job-meta[b-9pgx6zhbxj] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cs-eval-summary[b-9pgx6zhbxj] {
    background: var(--g-bg-section);
    border: none;
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-20) var(--g-space-24);
    margin-bottom: var(--g-space-20);
}

.cs-eval-summary p[b-9pgx6zhbxj] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: 1.6;
    margin: 0;
}

.cs-eval-db-status[b-9pgx6zhbxj] {
      display: flex;
    align-items: center;
    gap: var(--g-space-10);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin-bottom: var(--g-space-24);
    border-radius: var(--g-radius-sm);
}

.cs-eval-db-status svg[b-9pgx6zhbxj] {
    flex-shrink: 0;
    color: var(--g-info);
    width: 18px;
    height: 18px;
}

.cs-eval-actions[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--g-space-16);
    padding-top: var(--g-space-20);
    border-top: 1px solid var(--g-border);
}

.cs-eval-continue-btn[b-9pgx6zhbxj] {
    padding: 0 28px;
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
   @media (max-width:1440px){
    .cs-grid[b-9pgx6zhbxj]{
        margin: var(--g-space-24) 0px;
    }
   }
@media (max-width: 1280px) {
    .cs-form-card[b-9pgx6zhbxj] { padding: var(--g-space-24); }
    .cs-info-card[b-9pgx6zhbxj] { padding: var(--g-space-20); }
}

@media (max-width: 991px) {
    .cs-grid[b-9pgx6zhbxj] {
        grid-template-columns: 1fr;
        gap: var(--g-space-20);
    }
    .cs-header[b-9pgx6zhbxj] { padding: var(--g-space-12) var(--g-space-16); }
    .cs-title[b-9pgx6zhbxj] { font-size: var(--g-fs-section-title); }
    .cs-form-card[b-9pgx6zhbxj] { padding: var(--g-space-24) var(--g-space-20); }
    .cs-info-card[b-9pgx6zhbxj] { padding: var(--g-space-20) 18px; }
}

@media (max-width: 768px) {
    .cs-header[b-9pgx6zhbxj] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cs-grid[b-9pgx6zhbxj] { margin-top: var(--g-space-16); gap: var(--g-space-16); }
    .cs-form-card[b-9pgx6zhbxj] {
        padding: var(--g-space-20) var(--g-space-16);
        border-radius: var(--g-radius-lg);
    }
    .cs-form-card-header[b-9pgx6zhbxj] { margin-bottom: var(--g-space-20); }
    .cs-dropzone[b-9pgx6zhbxj] { min-height: 140px; padding: var(--g-space-20) var(--g-space-16); }
    .cs-eval-modal[b-9pgx6zhbxj] {
        padding: 28px var(--g-space-24);
        margin: var(--g-space-16);
        max-width: 100%;
        border-radius: var(--g-radius-xl);
    }
    .cs-eval-header[b-9pgx6zhbxj] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--g-space-20);
    }
    .cs-eval-score[b-9pgx6zhbxj] { width: 116px; height: 116px; }
    .cs-score-value[b-9pgx6zhbxj] { font-size: 1.625rem; }
    .cs-eval-job-card[b-9pgx6zhbxj] { justify-content: center; }
    .cs-eval-summary[b-9pgx6zhbxj] { padding: var(--g-space-16) var(--g-space-20); }
}

@media (max-width: 480px) {
    .cs-header[b-9pgx6zhbxj] { padding: var(--g-space-10) var(--g-space-12); }
    .cs-title[b-9pgx6zhbxj] { font-size: var(--g-fs-card-title); }
    .cs-form-card[b-9pgx6zhbxj] { padding: var(--g-space-16) var(--g-space-12); }
    .cs-form-card-title[b-9pgx6zhbxj] { font-size: var(--g-fs-card-title); }
    .cs-info-card[b-9pgx6zhbxj] {
        padding: var(--g-space-16) 14px;
        border-radius: var(--g-radius-lg);
    }
    .cs-form-actions[b-9pgx6zhbxj] {
        flex-direction: column;
        gap: var(--g-space-10);
    }
    .cs-btn-clear[b-9pgx6zhbxj] {
        width: 100%;
        padding: var(--g-space-10) 22px;
        order: 2;
    }
    .cs-btn-submit[b-9pgx6zhbxj] {
        width: 100%;
        min-width: 0;
        order: 1;
    }
    .cs-dropzone[b-9pgx6zhbxj] { min-height: 120px; padding: var(--g-space-16) var(--g-space-12); }
    .cs-dropzone-text[b-9pgx6zhbxj] { font-size: var(--g-fs-sm); }
    .cs-field-group[b-9pgx6zhbxj] { margin-bottom: var(--g-space-20); }
    .cs-eval-modal[b-9pgx6zhbxj] { padding: var(--g-space-24) 18px; }
    .cs-eval-actions[b-9pgx6zhbxj] {
        flex-direction: column;
        width: 100%;
    }
    .cs-eval-actions .g-btn-cancel[b-9pgx6zhbxj],
    .cs-eval-actions .g-btn-primary[b-9pgx6zhbxj] {
        width: 100%;
    }
    .cs-eval-header[b-9pgx6zhbxj] { gap: var(--g-space-16); }
    .cs-eval-score[b-9pgx6zhbxj] { width: 104px; height: 104px; }
    .cs-score-value[b-9pgx6zhbxj] { font-size: var(--g-fs-display); }
    .cs-eval-summary[b-9pgx6zhbxj] { padding: var(--g-space-16); }
    .cs-detail-left span[b-9pgx6zhbxj] { font-size: var(--g-fs-xs); }
    .cs-detail-value[b-9pgx6zhbxj] { font-size: var(--g-fs-xs); }
    .cs-job-option[b-9pgx6zhbxj] { padding: var(--g-space-8) var(--g-space-10); }
    .cs-job-option-img[b-9pgx6zhbxj] { width: 36px; height: 36px; }
    .cs-job-selector-icon[b-9pgx6zhbxj] { width: 40px; height: 40px; }
    .cs-job-selector-title[b-9pgx6zhbxj] { font-size: var(--g-fs-body); }
}

@media (max-width: 375px) {
    .cs-form-card[b-9pgx6zhbxj] { padding: 14px var(--g-space-10); }
    .cs-info-card[b-9pgx6zhbxj] { padding: 14px var(--g-space-12); }
}

/* ── Evaluation overlay (blocks page during AI eval) ── */
.cs-evaluation-overlay[b-9pgx6zhbxj] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.cs-evaluation-overlay-content[b-9pgx6zhbxj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}
/* /Components/Pages/Dashboard/Candidate/CandidateVerification.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate Verification – cv- prefix
   Self-contained scoped styles
   8px grid system • Responsive
   ═══════════════════════════════════════════ */

/* ── Loading Overlay ── */
.cv-loading-overlay[b-bjxncfaa7m] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.cv-loading-card[b-bjxncfaa7m] {
    background: var(--g-bg-section);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cv-loading-spinner[b-bjxncfaa7m] {
    animation: cv-spin-b-bjxncfaa7m 1s linear infinite;
}

@keyframes cv-spin-b-bjxncfaa7m {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cv-loading-title[b-bjxncfaa7m] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cv-loading-subtitle[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* ── Page Shell ── */
.cv-page[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
}

/* ── Two Column Grid ── */
.cv-grid[b-bjxncfaa7m] {
    display: grid;
    grid-template-columns: 1.5fr minmax(280px, 0.58fr);
    gap: var(--g-space-24);
    align-items: start;
    margin: var(--g-space-24) clamp(0px, 5vw, 104px) 0px;
}

/* ── Form Column ── */
.cv-form-col[b-bjxncfaa7m] {
    min-width: 0;
}

.cv-form-card[b-bjxncfaa7m] {
    background: var(--g-bg-layout);
    border-radius: var(--g-radius-3xl);
    --tw-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── Card Header ── */
.cv-form-card-header[b-bjxncfaa7m] {
    margin-bottom: 28px;
    background-color: white;
    padding: var(--g-space-24) var(--g-space-32);
    border-top-left-radius: var(--g-radius-3xl);
    border-top-right-radius: var(--g-radius-3xl);
}

.cv-form-card-title[b-bjxncfaa7m] {
    font-size: var(--g-fs-candidate-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.cv-form-card-subtitle[b-bjxncfaa7m] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: var(--g-lh-normal);
}

/* ── Candidate Identity Card ── */
.cv-identity-card[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: var(--g-space-16) var(--g-space-20);
    background: var(--g-bg-section);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-lg);
    margin-bottom: 28px;
    margin-left: var(--g-space-32);
    margin-right: var(--g-space-32);
    position: relative;
}

.cv-identity-avatar[b-bjxncfaa7m] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--g-border-card);
    flex-shrink: 0;
    background: #fff;
}

.cv-identity-avatar img[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cv-identity-info[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cv-identity-name[b-bjxncfaa7m] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    line-height: var(--g-lh-tight);
}

.cv-identity-role[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    margin: 0;
    font-weight: var(--g-fw-medium);
}

.cv-identity-badge[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-4) var(--g-space-12);
    border-radius: var(--g-radius-full);
    background: color-mix(in srgb, var(--g-brand, #2c7cff) 8%, transparent);
    color: var(--g-brand);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.cv-identity-badge svg[b-bjxncfaa7m] {
    color: var(--g-brand);
    flex-shrink: 0;
}

/* ── Field Groups ── */
.cv-field-group[b-bjxncfaa7m] {
    margin-bottom: var(--g-space-24);
    padding: 0 var(--g-space-32);
}

.cv-label[b-bjxncfaa7m] {
    display: block;
    font-size: var(--g-space-12);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    margin-bottom: var(--g-space-8);
}

.cv-label-brand[b-bjxncfaa7m] {
    color: var(--g-brand);
    margin-bottom: 0;
}

.cv-label-dark[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cv-required[b-bjxncfaa7m] {
    color: var(--g-error);
}

.cv-field-error[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: var(--g-space-4);
    display: block;
}

/* ── Input with Icon ── */
.cv-input-icon-wrap[b-bjxncfaa7m] {
    position: relative;
    display: flex;
    align-items: center;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: var(--g-radius-md);
}

.cv-input-icon[b-bjxncfaa7m] {
    position: absolute;
    left: 14px;
    color: var(--g-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.cv-linkedin-icon[b-bjxncfaa7m] {
    color: #0A66C2;
}

.cv-input[b-bjxncfaa7m] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.cv-input[b-bjxncfaa7m]::placeholder {
    color: var(--g-text-muted);
}

.cv-input:focus[b-bjxncfaa7m] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.cv-input-with-icon[b-bjxncfaa7m] {
    padding-left: 42px;
}

/* ── Dropzone ── */
.cv-dropzone[b-bjxncfaa7m] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
    width: 100%;
    min-height: 180px;
    padding: 40px var(--g-space-20);
    border: 1px dashed var(--g-gray-200, #e5e7eb);
    border-radius: var(--g-radius-2xl, 1rem);
    background: white;
    cursor: pointer;
    transition: border-color var(--g-transition), background var(--g-transition), transform 0.2s;
    text-align: center;
    box-sizing: border-box;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cv-dropzone:hover[b-bjxncfaa7m],
.cv-dropzone.drag-over[b-bjxncfaa7m] {
    border-color: var(--g-brand);
    background: var(--g-bg-section);
}

.cv-dropzone-icon-wrap[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-xl, 0.75rem);
    background: var(--sidebar-active-bg);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    transition: transform 0.2s;
}

.cv-dropzone:hover .cv-dropzone-icon-wrap[b-bjxncfaa7m] {
    transform: scale(1.1);
}

.cv-dropzone-icon-wrap.cv-dropzone-icon-success[b-bjxncfaa7m] {
    color: var(--g-success);
}

.cv-dropzone-text[b-bjxncfaa7m] {
    font-size: var(--g-space-16);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.cv-dropzone-hint[b-bjxncfaa7m] {
    font-size: var(--g-space-12);
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-medium);
}

.cv-dropzone-filename[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-heading);
    font-weight: var(--g-fw-medium);
    word-break: break-all;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Resume Header Row (label + age + actions) ── */
.cv-resume-header-row[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-8); 
    margin-bottom: var(--g-space-10);
}

.cv-resume-meta-row[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
}

.cv-resume-age-text[b-bjxncfaa7m] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.02em;
}

.cv-resume-age-text.cv-resume-age-outdated[b-bjxncfaa7m] {
    color: var(--g-error-text);
}

/* ── Resume Outdated Warning ── */
.cv-resume-outdated-warn[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: var(--g-space-10) 14px;
    background: var(--g-error-bg);
    border: 1px solid var(--g-error-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    color: var(--g-error-text);
    margin-top: var(--g-space-8);
}

.cv-resume-outdated-warn svg[b-bjxncfaa7m] {
    flex-shrink: 0;
    color: var(--g-error-text);
}

/* ── Resume Action Buttons ── */
.cv-resume-actions[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.cv-resume-action-btn[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-6) 14px;
    border: 1px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-brand);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cv-resume-action-btn:hover[b-bjxncfaa7m] {
    border-color: var(--g-brand);
    color: var(--g-brand);
    background: var(--g-brand-bg);
}

.cv-resume-action-btn svg[b-bjxncfaa7m] {
    flex-shrink: 0;
}

/* ── Resume Preview Modal ── */
.cv-resume-modal-overlay[b-bjxncfaa7m] {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-16);
}

.cv-resume-modal[b-bjxncfaa7m] {
    width: min(1100px, 96vw);
    height: min(88vh, 900px);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cv-resume-modal-header[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    padding: var(--g-space-16) var(--g-space-20);
    border-bottom: 1px solid var(--g-border-card);
    background: var(--g-bg-layout);
}

.cv-resume-modal-title[b-bjxncfaa7m] {
    margin: 0;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
}

.cv-resume-modal-actions[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8);
}

.cv-resume-modal-close[b-bjxncfaa7m] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--g-transition);
}

.cv-resume-modal-close:hover[b-bjxncfaa7m] {
    color: var(--g-text-heading);
    border-color: var(--g-brand);
    background: var(--g-brand-bg);
}

.cv-resume-modal-body[b-bjxncfaa7m] {
    flex: 1;
    min-height: 0;
    background: #f8fafc;
}

.cv-resume-modal-empty[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
}

/* ── Resume Warning Banner ── */
/* (kept for when needed but hidden by default via code) */

/* ── Form Actions ── */
.cv-form-actions[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    margin-top: var(--g-space-8);
    padding-top: var(--g-space-24);
    padding-bottom: var(--g-space-24);
    background-color: var(--bs-body-bg);
    border-bottom-right-radius: var(--g-radius-3xl);
    border-bottom-left-radius: var(--g-radius-3xl);
    padding: var(--g-space-24) var(--g-space-32);
}

.cv-btn-clear[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 22px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: color var(--g-transition), background var(--g-transition);
}

.cv-btn-clear:hover[b-bjxncfaa7m] {
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

.cv-btn-clear:disabled[b-bjxncfaa7m] {
    color: var(--g-text-muted);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

.cv-btn-submit[b-bjxncfaa7m] {
    min-width: 180px;
}

/* ── Cards Column ── */
.cv-cards-col[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    min-width: 0;
}

/* ── Info Card ── */
.cv-info-card[b-bjxncfaa7m] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-24);
    box-shadow: var(--g-shadow-xs);
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

/* ── No Job Selected ── */
.cv-no-job-card[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    text-align: center;
    gap: var(--g-space-24);
}

.cv-no-job-content[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-12);
}

.cv-no-job-icon[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-2xl);
    background: var(--g-brand-bg);
    color: var(--g-brand);
}

.cv-no-job-title[b-bjxncfaa7m] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
}

.cv-no-job-desc[b-bjxncfaa7m] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    max-width: 240px;
    line-height: 1.5;
}

/* ── Job Selector ── */
.cv-job-select-wrap[b-bjxncfaa7m] {
    width: 100%;
    padding: 0 20px;
}

/* ── Select Dropdown (native) ── */
.cv-select-wrap[b-bjxncfaa7m] {
    position: relative;
    width: 100%;
}

.cv-select[b-bjxncfaa7m] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 36px 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.cv-select:focus[b-bjxncfaa7m] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.cv-select-chevron[b-bjxncfaa7m] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    pointer-events: none;
}

/* ── Job Summary ── */
.cv-job-summary[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    position: relative;
}

.cv-job-change-link[b-bjxncfaa7m] {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    background: none;
    border: none;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.03em;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color var(--g-transition);
}

.cv-change-icon[b-bjxncfaa7m] {
    transition: transform 0.3s ease;
}

.cv-job-change-link:hover[b-bjxncfaa7m] {
    color: var(--g-brand);
}

.cv-job-change-link:hover .cv-change-icon[b-bjxncfaa7m] {
    transform: rotate(180deg);
}

.cv-job-avatar-wrap-lg[b-bjxncfaa7m] {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
    margin-top: 4px;
}

.cv-job-avatar-thumb-lg[b-bjxncfaa7m] {
    width: 72px;
    height: 72px;
    border-radius: var(--g-radius-2xl);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: var(--g-shadow-sm);
}

.cv-job-avatar-thumb-lg img[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cv-job-avatar-badge-lg[b-bjxncfaa7m] {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
     border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.cv-job-avatar-badge-lg img[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cv-job-title-text[b-bjxncfaa7m] {
    font-size: var(--g-fs-sidejob-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
  margin: var(--g-space-6) 0;
    line-height: var(--g-lh-tight);
}

.cv-job-company[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Card Label ── */
.cv-card-label[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
     margin: 0 0 10px;
      font-size: var(--g-fs-job);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-brand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: var(--g-space-10);
    margin-bottom: var(--g-space-4);
}

.cv-status-divider[b-bjxncfaa7m] {
    width: 100%;
    border: none;
    height: 1px;
       background: var(--sidebar-icon);
    margin: var(--g-space-4) 0 var(--g-space-10);
}

/* ── Current Job Status Grid ── */
.cv-status-grid[b-bjxncfaa7m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.cv-status-cell[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-12) var(--g-space-8);
    background: transparent;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--g-border-light);
}

.cv-status-cell:last-child[b-bjxncfaa7m] {
    border-right: none;
}

.cv-status-count[b-bjxncfaa7m] {
       font-size: var(--g-fs-job-status);
    font-weight: var(--g-fw-extrabold);
    line-height: 1;
    color: var(--g-text-heading);
}

.cv-status-submitted[b-bjxncfaa7m] { color: var(--g-brand) }
.cv-status-screening[b-bjxncfaa7m] { color: var(--g-brand) }
.cv-status-interview[b-bjxncfaa7m] { color: var(--g-brand) }
.cv-status-offered[b-bjxncfaa7m] { color: var(--g-success-text) }

.cv-status-label[b-bjxncfaa7m] {
       font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Detail Rows ── */
.cv-detail-rows[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cv-detail-row[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 0;
    border-bottom: 1px solid var(--g-border-light);
    gap: var(--g-space-12);
}

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

.cv-detail-left[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    color: var(--g-text-secondary);
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-medium);
    min-width: 0;
}

.cv-detail-left svg[b-bjxncfaa7m] {
    flex-shrink: 0;
    color: var(--g-text-muted);
}

.cv-detail-value[b-bjxncfaa7m] {
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    text-align: right;
    flex-shrink: 0;
}

.cv-detail-value-brand[b-bjxncfaa7m] {
    color: var(--g-brand);
}

/* ── AI Thresholds ── */
.cv-ai-threshold-row[b-bjxncfaa7m] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--g-gray-100);
}

.cv-ai-threshold-item[b-bjxncfaa7m] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.cv-ai-threshold-item.cv-ai-approve[b-bjxncfaa7m] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.cv-ai-threshold-item.cv-ai-reject[b-bjxncfaa7m] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.cv-ai-threshold-item svg[b-bjxncfaa7m] {
    flex-shrink: 0;
}

.cv-ai-label[b-bjxncfaa7m] {
    font-weight: 500;
    white-space: nowrap;
}

.cv-ai-value[b-bjxncfaa7m] {
    margin-left: auto;
    font-weight: 700;
    font-size: 13px;
}

/* ── Modal ── */
.cv-modal-overlay[b-bjxncfaa7m] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--g-space-16);
    animation: g-fadeIn 0.2s ease-out;
}

.cv-eval-modal[b-bjxncfaa7m] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 36px 40px;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: g-slideDown 0.25s ease-out;
    position: relative;
}

/* ── Loading ── */
.cv-loading-overlay[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* ── Eval Header ── */
.cv-eval-header[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-32);
    margin-bottom: 28px;
}

.cv-eval-score[b-bjxncfaa7m] {
    position: relative;
    width: 136px;
    height: 136px;
    flex-shrink: 0;
}

.cv-score-ring[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
}

.cv-score-progress[b-bjxncfaa7m] {
    transition: stroke-dashoffset 1s ease-out;
}

.cv-score-text[b-bjxncfaa7m] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cv-score-value[b-bjxncfaa7m] {
    font-size: 2rem;
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    line-height: 1;
    letter-spacing: -0.02em;
}

.cv-score-label-text[b-bjxncfaa7m] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.cv-eval-job[b-bjxncfaa7m] {
    flex: 1;
    min-width: 0;
}

.cv-eval-title[b-bjxncfaa7m] {
    font-size: var(--g-fs-page-title);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    margin: 0 0 var(--g-space-16);
    letter-spacing: -0.01em;
    line-height: var(--g-lh-tight);
}

.cv-eval-job-card[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--g-bg-card);
    padding: 14px 18px;
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-xs);
    border: 1px solid var(--g-border-card);
}

.cv-eval-job-logo[b-bjxncfaa7m] {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    border: 1px solid var(--g-border-card);
    flex-shrink: 0;
    background: var(--g-bg-section);
}

.cv-eval-job-logo img[b-bjxncfaa7m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cv-eval-job-info[b-bjxncfaa7m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cv-eval-job-name[b-bjxncfaa7m] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    line-height: var(--g-lh-tight);
}

.cv-eval-job-meta[b-bjxncfaa7m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cv-eval-summary[b-bjxncfaa7m] {
    background: var(--g-gray-100);
    border: none;
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-20) var(--g-space-24);
    margin-bottom: var(--g-space-20);
}

.cv-eval-summary p[b-bjxncfaa7m] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: 1.6;
    margin: 0;
}

.cv-eval-db-status[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin-bottom: var(--g-space-24);
    padding: 0 var(--g-space-4);
}

.cv-eval-db-status svg[b-bjxncfaa7m] {
    flex-shrink: 0;
    color: var(--g-info);
    width: 18px;
    height: 18px;
}

.cv-eval-actions[b-bjxncfaa7m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--g-space-16);
    padding-top: var(--g-space-20);
    border-top: 1px solid var(--g-gray-200);
}

.cv-eval-continue-btn[b-bjxncfaa7m] {
    padding: 0 28px;
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */
@media (max-width: 1440px) {
    .cv-grid[b-bjxncfaa7m] {
        margin: var(--g-space-24) 0px;
    }
}

@media (max-width: 1280px) {
    .cv-form-card[b-bjxncfaa7m] { padding: var(--g-space-24); }
    .cv-info-card[b-bjxncfaa7m] { padding: var(--g-space-20); }
}

@media (max-width: 991px) {
    .cv-grid[b-bjxncfaa7m] {
        grid-template-columns: 1fr;
        gap: var(--g-space-20);
    }
    .cv-form-card[b-bjxncfaa7m] { padding: var(--g-space-24) var(--g-space-20); }
    .cv-info-card[b-bjxncfaa7m] { padding: var(--g-space-20) 18px; }
    .cv-status-grid[b-bjxncfaa7m] { grid-template-columns: repeat(2, 1fr); }
    .cv-resume-modal[b-bjxncfaa7m] {
        width: 96vw;
        height: 84vh;
    }
}

@media (max-width: 768px) {
    .cv-grid[b-bjxncfaa7m] { margin-top: var(--g-space-16); gap: var(--g-space-16); }
    .cv-form-card[b-bjxncfaa7m] {
        padding: var(--g-space-20) var(--g-space-16);
        border-radius: var(--g-radius-lg);
    }
    .cv-form-card-header[b-bjxncfaa7m] { margin-bottom: var(--g-space-20); }
    .cv-identity-card[b-bjxncfaa7m] { padding: 12px 16px; }
    .cv-dropzone[b-bjxncfaa7m] { min-height: 140px; padding: var(--g-space-20) var(--g-space-16); }
    .cv-eval-modal[b-bjxncfaa7m] {
        padding: 28px 24px;
        margin: 16px;
        max-width: 100%;
        border-radius: var(--g-radius-xl);
    }
    .cv-eval-header[b-bjxncfaa7m] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .cv-eval-score[b-bjxncfaa7m] { width: 116px; height: 116px; }
    .cv-score-value[b-bjxncfaa7m] { font-size: 1.625rem; }
    .cv-eval-job-card[b-bjxncfaa7m] { justify-content: center; }
    .cv-eval-summary[b-bjxncfaa7m] { padding: 16px 20px; }
}

@media (max-width: 480px) {
    .cv-form-card[b-bjxncfaa7m] { padding: 16px 12px; }
    .cv-info-card[b-bjxncfaa7m] {
        padding: 16px 14px;
        border-radius: var(--g-radius-lg);
    }
    .cv-form-actions[b-bjxncfaa7m] {
        flex-direction: column;
        gap: 10px;
    }
    .cv-btn-clear[b-bjxncfaa7m] {
        width: 100%;
        padding: 10px 22px;
        order: 2;
    }
    .cv-btn-submit[b-bjxncfaa7m] {
        width: 100%;
        min-width: 0;
        order: 1;
    }
    .cv-identity-card[b-bjxncfaa7m] {
        flex-direction: column;
        text-align: center;
    }
    .cv-dropzone[b-bjxncfaa7m] { min-height: 120px; padding: 16px 12px; }
    .cv-dropzone-text[b-bjxncfaa7m] { font-size: var(--g-fs-sm); }
    .cv-field-group[b-bjxncfaa7m] { margin-bottom: 20px; }
    .cv-eval-modal[b-bjxncfaa7m] { padding: 24px 18px; }
    .cv-eval-actions[b-bjxncfaa7m] {
        flex-direction: column;
        width: 100%;
    }
    .cv-status-grid[b-bjxncfaa7m] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cv-resume-actions[b-bjxncfaa7m] { flex-direction: column; width: 100%; }
    .cv-resume-action-btn[b-bjxncfaa7m] { width: 100%; justify-content: center; }
    .cv-resume-modal[b-bjxncfaa7m] {
        width: 98vw;
        height: 82vh;
    }
    .cv-resume-modal-header[b-bjxncfaa7m] {
        padding: var(--g-space-12);
    }
    .cv-resume-modal-title[b-bjxncfaa7m] {
        font-size: var(--g-fs-sm);
    }
    .cv-resume-modal-actions .g-btn-primary[b-bjxncfaa7m] {
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* ── Module 4: Resume Outdated Warning Modal (FSD §9) ── */
.cv-warn-overlay[b-bjxncfaa7m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    animation: cv-fade-in-b-bjxncfaa7m 200ms ease-out;
}

.cv-warn-modal[b-bjxncfaa7m] {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: calc(100% - 40px);
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: cv-zoom-in-b-bjxncfaa7m 200ms ease-out;
}

.cv-warn-icon-wrap[b-bjxncfaa7m] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fffbeb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.cv-warn-title[b-bjxncfaa7m] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.cv-warn-subtitle[b-bjxncfaa7m] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px 0;
}

.cv-warn-content-box[b-bjxncfaa7m] {
    background: #f8f9fa;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 16px;
}

.cv-warn-content-header[b-bjxncfaa7m] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.cv-warn-content-header .cv-required[b-bjxncfaa7m] {
    color: #ef4444;
    margin-left: 2px;
}

.cv-warn-age-msg[b-bjxncfaa7m] {
    font-size: 13px;
    color: #475569;
    margin: 0 0 6px 0;
}

.cv-warn-age-highlight[b-bjxncfaa7m] {
    color: #2563eb;
    font-weight: 700;
}

.cv-warn-instruction[b-bjxncfaa7m] {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 12px 0;
}

.cv-warn-footer-row[b-bjxncfaa7m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.cv-warn-exact-date[b-bjxncfaa7m] {
    font-size: 11px;
    color: #475569;
    font-weight: 500;
}

.cv-warn-actions[b-bjxncfaa7m] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cv-warn-btn-cancel[b-bjxncfaa7m],
.cv-warn-btn-proceed[b-bjxncfaa7m] {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.cv-warn-btn-cancel[b-bjxncfaa7m] {
    background: #fff;
    color: #64748b;
    border-color: #e2e8f0;
}

.cv-warn-btn-cancel:hover[b-bjxncfaa7m] {
    background: #f8fafc;
    color: #334155;
}

.cv-warn-btn-proceed[b-bjxncfaa7m] {
    background: #f59e0b;
    color: #fff;
}

.cv-warn-btn-proceed:hover[b-bjxncfaa7m] {
    background: #d97706;
}

@keyframes cv-fade-in-b-bjxncfaa7m {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cv-zoom-in-b-bjxncfaa7m {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/Pages/Dashboard/Candidate/CandidateView.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate View – cv- prefix
   Full profile page · Responsive · GOrecruitAI
   ═══════════════════════════════════════════ */

   .text-blue-500[b-v5tljx1ecl]
 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}
.border-slate-200[b-v5tljx1ecl] {
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

.cv-page[b-v5tljx1ecl] {
    font-family: var(--g-font-sans);
    background: var(--g-bg-page);
    padding: 0 0 var(--g-space-40);
    min-height: 100vh;
}

@media (max-width: 1600px) {
    .cv-page[b-v5tljx1ecl] {
        min-height: calc(100vh / 0.85);
    }
    .cv-sidebar[b-v5tljx1ecl] {
        max-height: calc(100vh / 0.85 - 120px);
    }
}

/* ═══════ SCROLL-AWARE TITLE BAR ═══════ */
.cv-title-bar[b-v5tljx1ecl] {
    position: sticky;
    top: var(--cv-topbar-height, 56px);
    z-index: 899;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-gray-200);
    margin: 0 0 var(--g-space-16) 0;
    padding: 0;
    height: 66px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease;
    overflow: hidden;
}

.cv-title-bar.cv-scrolled[b-v5tljx1ecl] {
    box-shadow: var(--g-shadow-sm);
    border-bottom-color: var(--g-gray-300);
}

.cv-title-inner[b-v5tljx1ecl] {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* ── Default Breadcrumb State ── */
.cv-title-default[b-v5tljx1ecl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: 0 var(--g-space-24);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.cv-title-bar.cv-scrolled .cv-title-default[b-v5tljx1ecl] {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* ── Compact Profile State (on scroll) ── */
.cv-title-scrolled[b-v5tljx1ecl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    padding: 0 var(--g-space-24);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.cv-page-heading[b-v5tljx1ecl] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--g-lh-tight);
}

.cv-page-subtitle[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: var(--g-space-4) 0 0;
    line-height: var(--g-lh-normal);
    text-transform: uppercase;
}

.cv-title-bar.cv-scrolled .cv-title-scrolled[b-v5tljx1ecl] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Accent bar on scrolled state ── */


/* ── Compact header elements ── */
.cv-compact-left[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    min-width: 0;
}

.cv-compact-avatar-wrap[b-v5tljx1ecl] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.cv-compact-avatar[b-v5tljx1ecl] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.cv-compact-fallback[b-v5tljx1ecl] {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.cv-compact-info[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.cv-compact-name[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-compact-role[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-compact-right[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    flex-shrink: 0;
}

.cv-compact-salary[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    white-space: nowrap;
}

.cv-compact-divider[b-v5tljx1ecl] {
    width: 1px;
    height: 20px;
    background: var(--g-gray-200);
}

.cv-compact-match[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    white-space: nowrap;
}

/* ── Back Button ── */
.cv-back-btn[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    flex-shrink: 0;
    transition: all var(--g-transition);
}

.cv-back-btn:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100);
    color: var(--g-gray-800);
}

/* ── Breadcrumb ── */
.cv-breadcrumb[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
}

.cv-breadcrumb a[b-v5tljx1ecl] {
    color: var(--g-text-muted);
    text-decoration: none;
}

.cv-breadcrumb a:hover[b-v5tljx1ecl] {
    color: var(--g-brand);
    text-decoration: underline;
}

.cv-breadcrumb span:last-child[b-v5tljx1ecl] {
    color: var(--g-gray-800);
    font-weight: var(--g-fw-semibold);
}

/* ═══════ HERO ═══════ */
.cv-hero[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-20);
    flex-wrap: wrap;

    border-radius: var(--g-radius-2xl);
    padding: var(--g-space-24);
    margin-bottom: var(--g-space-20);
}

.cv-hero-left[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
}

.cv-avatar[b-v5tljx1ecl] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--g-radius-full);
    overflow: visible;
    background: var(--g-gray-200);
    flex-shrink: 0;
    border: 3px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.cv-avatar img[b-v5tljx1ecl] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cv-avatar-fallback[b-v5tljx1ecl] {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

/* Pencil icon overlay on avatar hover/click */
.cv-avatar-pencil[b-v5tljx1ecl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    opacity: 0;
    z-index: 3;
    cursor: pointer;
    transition: opacity 0.2s ease;
    color: #fff;
}

.cv-avatar:hover .cv-avatar-pencil[b-v5tljx1ecl] {
    opacity: 1;
}

.cv-avatar-fallback:hover ~ .cv-avatar-pencil[b-v5tljx1ecl] {
    opacity: 1;
}

/* Hide pencil when status tooltip is active */
.cv-avatar:has(.cv-avatar-status:hover) .cv-avatar-pencil[b-v5tljx1ecl] {
    opacity: 0 !important;
    pointer-events: none;
}

.cv-avatar-status[b-v5tljx1ecl] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: var(--g-radius-full);
    background: var(--g-success);
    border: 2.5px solid var(--g-bg-card);
    z-index: 2;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.cv-avatar-status:hover[b-v5tljx1ecl] {
    transform: scale(1.3);
}

/* Tooltip for avatar status */
.cv-avatar-status-tooltip[b-v5tljx1ecl] {
    display: none;
    position: absolute;
    bottom:32%;
    background: var(--g-gray-800);
    color: #fff;
    border-radius: var(--g-radius-sm);
    padding: var(--g-space-6) var(--g-space-10);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
    z-index: 200;
    box-shadow: var(--g-shadow-md);
    pointer-events: none;
}

.cv-avatar-status:hover + .cv-avatar-status-tooltip[b-v5tljx1ecl],
.cv-avatar:hover .cv-avatar-status-tooltip[b-v5tljx1ecl] {
    display: block;
}

.cv-avatar-edit[b-v5tljx1ecl] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: var(--g-radius-full);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--g-shadow-xs);
    transition: all var(--g-transition);
}

.cv-avatar-edit:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100);
}

.cv-hero-info[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-name-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.cv-name[b-v5tljx1ecl] {
    font-size: var(--g-fs-display);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    margin: 0;
    line-height: 1.2;
}

.cv-edit-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--g-gray-200);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    transition: all 0.2s ease;
}

.cv-edit-btn:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100);
    color: var(--g-gray-800);
    border-color: var(--g-gray-300);
}

.cv-role[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    color: var(--g-text-secondary);
}

/* ── Hero Metrics ── */
.cv-hero-metrics[b-v5tljx1ecl] {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    align-items: stretch;
}

.cv-metric[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--g-space-8) var(--g-space-24);
    border: none;
    border-radius: 0;
    background: transparent;
    min-width: 100px;
    text-align: center;
    border-right: 1px solid var(--g-gray-200);
}

.cv-metric:last-child[b-v5tljx1ecl] {
    border-right: none;
}

.cv-metric-label[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-metric-value[b-v5tljx1ecl] {
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
    line-height: 1.2;
}

.cv-metric-sub[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cv-val-brand[b-v5tljx1ecl] {
    color: var(--g-brand) !important;
}

/* ═══════ META ROW (inside hero-info, below role) ═══════ */
.cv-meta-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    flex-wrap: wrap;
    padding: var(--g-space-8) 0 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.cv-meta-item[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary) !important;
    white-space: nowrap;
}

.cv-meta-link[b-v5tljx1ecl] {
    color: var(--g-gray-800);
    font-weight: var(--g-fw-medium);
    text-decoration: none;
    cursor: pointer;
}

.cv-meta-clickable[b-v5tljx1ecl] {
    cursor: pointer;
    border-radius: var(--g-radius-md);
    padding: 2px 6px;
    transition: background 0.15s;
}
.cv-meta-clickable:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100);
    color: var(--g-gray-800);
}

.cv-meta-link:hover[b-v5tljx1ecl] {
    color: var(--g-brand);
}

/* ═══════ BODY LAYOUT ═══════ */
.cv-body[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: var(--g-space-24);
    padding: 0 35px;
    align-items: start;
}

.cv-body-full[b-v5tljx1ecl] {
    grid-template-columns: 1fr;
}

.cv-main[b-v5tljx1ecl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cv-main > :last-child[b-v5tljx1ecl] { flex: 1; }

.cv-sidebar[b-v5tljx1ecl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-top: 28px;
    position: sticky;
    top: 140px;
    max-height: calc(79vh - 132px);
    align-self: start;
    overflow-y: scroll;
}

.cv-sidebar[b-v5tljx1ecl]::-webkit-scrollbar { width: 5px; }
.cv-sidebar[b-v5tljx1ecl]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.cv-sidebar[b-v5tljx1ecl]::-webkit-scrollbar-track { background: transparent; }

/* ── Sidebar header (APPLIED JOBS) stays pinned at top ── */
.cv-sidebar-header[b-v5tljx1ecl] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--g-bg-page, #f8fafc);
    flex-shrink: 0;
}

/* ── Sidebar scrollable content (job cards scroll) ── */
.cv-sidebar-scroll[b-v5tljx1ecl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
}

.cv-sidebar-scroll[b-v5tljx1ecl]::-webkit-scrollbar { width: 5px; }
.cv-sidebar-scroll[b-v5tljx1ecl]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.cv-sidebar-scroll[b-v5tljx1ecl]::-webkit-scrollbar-track { background: transparent; }


/* ═══════ TABS (desktop) ═══════ */
.cv-tabs-wrap[b-v5tljx1ecl] {
      display: flex;
    gap: 0;
    border-bottom: 1px solid var(--g-gray-200);
    margin-bottom: var(--g-space-24);
}

.cv-tab[b-v5tljx1ecl] {
    padding: var(--g-space-10) 18px;
    border: none;
    background: transparent;
   font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
    cursor: pointer;
    position: relative;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    transition: color var(--g-transition);
    margin-bottom: var(--g-space-10);
}

.cv-tab[b-v5tljx1ecl]::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
}

.cv-tab:hover[b-v5tljx1ecl] { color: var(--g-gray-800); }
.cv-tab.active[b-v5tljx1ecl] {     color: rgb(15 23 42 / var(--tw-text-opacity)); font-weight: var(--g-fw-medium);
    --tw-text-opacity: 1; }
.cv-tab.active[b-v5tljx1ecl]::after { background: var(--g-gray-800); }

/* ── Tab mobile pills (hidden on desktop, visible ≤768px) ── */
.cv-tab-mobile[b-v5tljx1ecl] { display: none; }

/* ── Tab dropdown (hidden by default, visible ≤425px) ── */
.cv-tab-dropdown[b-v5tljx1ecl] { display: none; }

.cv-tab-dropdown-toggle[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--g-space-10) 14px;
    border: 1.5px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    color: var(--g-gray-800);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--g-transition);
}

.cv-tab-dropdown-toggle:hover[b-v5tljx1ecl] { border-color: var(--g-gray-300); }

.cv-tab-dropdown-toggle svg[b-v5tljx1ecl] {
    transition: transform 0.2s;
    color: var(--g-text-muted);
}

.cv-tab-dropdown-menu[b-v5tljx1ecl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-md);
    z-index: 120;
    padding: var(--g-space-4);
    display: flex;
    flex-direction: column;
}
.cv-verify-complete-wrap[b-v5tljx1ecl]{
    display: flex;
    align-items: center;
}
.cv-tab-dropdown-item[b-v5tljx1ecl] {
    padding: var(--g-space-10) 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    border-radius: var(--g-radius-md);
    transition: background var(--g-transition);
}

.cv-tab-dropdown-item:hover[b-v5tljx1ecl] { background: var(--g-gray-50); }
.cv-tab-dropdown-item.active[b-v5tljx1ecl] { color: var(--g-brand); font-weight: var(--g-fw-semibold); background: var(--g-brand-bg); }

/* Active mcard value */
.cv-ah-mcard-active[b-v5tljx1ecl] {
    color: var(--g-success-text, #059669);
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cv-tab-mobile-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-8) var(--g-space-16);
    border: 1.5px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--g-transition);
}

.cv-tab-mobile-btn:hover:not(.active)[b-v5tljx1ecl] {
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
}

.cv-tab-mobile-btn.active[b-v5tljx1ecl] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}

/* ═══════ CARDS ═══════ */
.cv-section[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-20);
}

.cv-card[b-v5tljx1ecl] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-2xl);
    padding: var(--g-space-24);
}

.cv-card-title[b-v5tljx1ecl] {
   font-size: var(--g-fs-pipeline-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    margin-bottom: var(--g-space-12);
   
}

.cv-card-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--g-space-16);
}

.cv-card-header .cv-card-title[b-v5tljx1ecl] { margin: 0; }

.cv-card-count[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-brand);
}

.cv-card-text[b-v5tljx1ecl] {
    font-size: var(--g-fs-candidate-subtitle);
    color: var(--g-gray-600);
    line-height: 1.7;
    margin: 0;
}

.cv-truncated[b-v5tljx1ecl] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cv-readmore[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    border: none;
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    padding: var(--g-space-8) 0 0;
    font-family: inherit;
}

.cv-readmore:hover[b-v5tljx1ecl] { color: var(--g-brand); }

/* Arrow rotation animation */
.cv-readmore-arrow[b-v5tljx1ecl] {
    transition: transform 0.3s ease;
}

.cv-readmore-arrow.cv-arrow-up[b-v5tljx1ecl] {
    transform: rotate(180deg);
}

/* Extended content animation */
.cv-card-text-wrap[b-v5tljx1ecl] {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.cv-card-text-extra[b-v5tljx1ecl] {
    animation: cv-fadeIn-b-v5tljx1ecl 0.3s ease forwards;
    margin-top: 12px;
}

@keyframes cv-fadeIn-b-v5tljx1ecl {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cv-icon-btn[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
}

/* ═══════ SKILL PILLS ═══════ */
.cv-pills[b-v5tljx1ecl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-8);
}

.cv-pill[b-v5tljx1ecl] {
      display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 5px 11px;
    border: 1px solid #d1d9e6;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    color: var(--g-brand);
    background: #eef2f7;
    font-weight: var(--g-fw-medium);
}

.cv-pill strong[b-v5tljx1ecl] {
    color: var(--g-text-secondary, #64748b);
    font-weight: var(--g-fw-normal);
    font-size: var(--g-fs-xxs);
}

/* ═══════ WORK EXP + EDU/CERT LAYOUT ═══════ */
.cv-exp-edu-cert[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.cv-exp-edu-cert > .cv-card[b-v5tljx1ecl] {
    /* Work Exp card stretches to match right column height */
    align-self: stretch;
}

.cv-edu-cert-stack[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cv-edu-cert-stack > .cv-card[b-v5tljx1ecl] {
    flex: 1;
}

/* ═══════ TWO-COLUMN ═══════ */
.cv-two-col[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ═══════ TIMELINE ═══════ */
.cv-timeline[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: var(--g-space-16);
    border-left: 2px solid var(--g-gray-200);
}

.cv-timeline-item[b-v5tljx1ecl] {
    display: flex;
    gap: var(--g-space-12);
    padding: var(--g-space-12) 0;
    position: relative;
}

.cv-timeline-dot[b-v5tljx1ecl] {
       position: absolute;
    left: -25px;
    top: 12px;
    width: 16px;
    height: 16px;
    border-radius: var(--g-radius-full);
    background: var(--g-gray-300);
    border: 2px solid var(--g-bg-card);
}

.cv-timeline-dot.current[b-v5tljx1ecl] { background: var(--g-gray-800); }
.cv-timeline-dot.highlight[b-v5tljx1ecl] { background: var(--g-brand); }
.cv-timeline-dot.active-cert[b-v5tljx1ecl] { background: #14b8a6; }

.cv-timeline-content[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-timeline-content strong[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-800);
}

.cv-tl-role[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

.cv-tl-date[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ═══════ EMPTY STATE MESSAGE ═══════ */
.cv-empty-message[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted, #94a3b8);
    padding: var(--g-space-16) 0;
    margin: 0;
    text-align: center;
}

/* ═══════ VERIFICATION / EVALUATION ═══════ */
.cv-verify-list[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cv-verify-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-10) 0;
    border-bottom: 1px solid var(--g-gray-100);
    
}

.cv-verify-row:last-child[b-v5tljx1ecl] { border-bottom: none; }

.cv-verify-label[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
}

.cv-verify-value[b-v5tljx1ecl] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-gray-800); }
.cv-verify-badge[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); letter-spacing: 0.04em; padding: 2px var(--g-space-8); border-radius: var(--g-radius-xs); }
.cv-badge-green[b-v5tljx1ecl] { background: var(--g-success-bg); color: var(--g-success-text); }

.cv-verify-bar[b-v5tljx1ecl] {
    flex: 0 0 80px;
    height: 6px;
    background: var(--g-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 var(--g-space-8);
}

.cv-bar-fill[b-v5tljx1ecl] { display: block; height: 100%; background: var(--g-error); border-radius: 3px; }
.cv-verify-pct[b-v5tljx1ecl] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-bold); }
.cv-pct-red[b-v5tljx1ecl] { color: var(--g-error); }
.cv-eval-yes[b-v5tljx1ecl] { color: var(--g-success); font-weight: var(--g-fw-semibold); font-size: var(--g-fs-sm); display: inline-flex; align-items: center; gap: var(--g-space-4); }
.cv-eval-no[b-v5tljx1ecl] { color: #f87171; font-weight: var(--g-fw-semibold); font-size: var(--g-fs-sm); display: inline-flex; align-items: center; gap: var(--g-space-4); }

/* ═══════ RESUME FILE ROW ═══════ */
.cv-file-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    padding: var(--g-space-12) var(--g-space-16);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-12);
}

.cv-file-icon[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    flex-shrink: 0;
}

.cv-icon-red[b-v5tljx1ecl] { background: var(--g-error-bg); }
.cv-file-info[b-v5tljx1ecl] { flex: 1; min-width: 0; }
.cv-file-info strong[b-v5tljx1ecl] { display: block; font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.cv-file-info span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.cv-file-info small[b-v5tljx1ecl] { display: block; font-size: var(--g-fs-xxs); color: var(--g-text-muted); margin-top: 2px; }

.cv-file-actions[b-v5tljx1ecl] { display: flex; gap: var(--g-space-8); flex-shrink: 0; }

.cv-file-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-6) var(--g-space-12);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.cv-file-btn:hover[b-v5tljx1ecl] { border-color: var(--g-brand); color: var(--g-brand); }

/* ═══════ UPLOAD AREA ═══════ */
.cv-upload-area[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: var(--g-space-16);
    border: 1px dashed var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    transition: border-color 0.2s, background 0.2s;
}

.cv-upload-area.drag-over[b-v5tljx1ecl] {
    border-color: var(--g-brand, #2c7cff);
    background: rgba(44, 124, 255, 0.06);
}

.cv-upload-text[b-v5tljx1ecl] { flex: 1; }
.cv-upload-text strong[b-v5tljx1ecl] { display: block; font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.cv-upload-text span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.cv-upload-loader-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-upload-inline-error[b-v5tljx1ecl] {
    font-size: 11px;
    color: #ef4444;
    font-weight: 500;
    white-space: nowrap;
}

.cv-upload-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    padding: var(--g-space-12) var(--g-space-16);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
}

.cv-upload-row span[b-v5tljx1ecl] { font-size: var(--g-fs-sm); color: var(--g-gray-700); }
.cv-upload-row small[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

/* ═══════ AI ANALYSIS CHART ═══════ */
.cv-ai-chart[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 192px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: 100%;
}

.cv-bar[b-v5tljx1ecl] {
    flex: 1;
    background: #bfdbfe;
    border-radius: 3px 3px 0 0;
    min-width: 8px;
    transition: background 0.2s ease, height 0.3s ease;
    cursor: pointer;
    position: relative;
}

.cv-bar:hover[b-v5tljx1ecl] {
    background: var(--g-brand, #2c7cff);
}

/* Custom bar tooltip */
.cv-bar-tooltip[b-v5tljx1ecl] {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--g-brand, #2c7cff);
    color: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.cv-bar-tooltip strong[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    font-weight: 700;
}

.cv-bar-tooltip span[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    opacity: 0.85;
}

.cv-bar-tooltip[b-v5tljx1ecl]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--g-brand, #2c7cff);
}

.cv-bar:hover .cv-bar-tooltip[b-v5tljx1ecl] {
    display: flex;
}

/* ═══════ RESUME TAB ═══════ */
.cv-resume-layout[b-v5tljx1ecl] {
   display: grid;
    grid-template-columns: 68% 31%;
    gap: 16px;
}

.cv-resume-preview[b-v5tljx1ecl] { min-width: 0; }
.cv-resume-right[b-v5tljx1ecl] { min-width: 0; }

.cv-pdf-placeholder[b-v5tljx1ecl] {
    height: 500px;
    overflow: auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Upload row with icon */
.cv-upload-row-left[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cv-upload-icon-wrap[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: color-mix(in srgb, var(--g-brand, #2c7cff) 8%, transparent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Resume history card */
.cv-resume-history-card[b-v5tljx1ecl] {
    margin-top: var(--g-space-16);
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-16);
}

.cv-resume-hist-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--g-space-12);
}

.cv-resume-hist[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cv-hist-item[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    padding: var(--g-space-10) var(--g-space-12);
    border-radius: var(--g-radius-md);
    position: relative;
}

.cv-hist-item div[b-v5tljx1ecl] { flex: 1; min-width: 0; }
.cv-hist-item div strong[b-v5tljx1ecl] { display: block; font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.cv-hist-item div span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.cv-hist-active[b-v5tljx1ecl] {
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
    border: 1px solid var(--g-brand);
}

/* Previous versions hover actions */
.cv-hist-hoverable[b-v5tljx1ecl] {
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--g-gray-100);
}

.cv-hist-hoverable:last-child[b-v5tljx1ecl] {
    border-bottom: none;
}

.cv-hist-hoverable:hover[b-v5tljx1ecl] {
    background: var(--g-gray-50);
}

.cv-hist-hover-actions[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cv-hist-hoverable:hover .cv-hist-hover-actions[b-v5tljx1ecl] {
    opacity: 1;
}

.cv-hist-action-btn[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-muted);
    transition: all var(--g-transition);
}

.cv-hist-action-btn:hover[b-v5tljx1ecl] {
    color: var(--g-brand);
    border-color: var(--g-brand);
}

.cv-badge-latest[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    color: var(--g-error, #ef4444);
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cv-prev-title[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 700;
    color: var(--g-text-muted, #94a3b8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 16px 0 8px;
    margin: 0;
}

/* ═══════ DOCUMENT TAB ═══════ */
.cv-doc-card[b-v5tljx1ecl] {
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-border-card, #e2e8f0);
    border-radius: var(--g-radius-xl, 16px);
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.cv-doc-card-title[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    margin: 0;
    padding: var(--g-space-16) var(--g-space-20) 0;
}

.cv-doc-card-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-12);
    padding: var(--g-space-16) var(--g-space-20) 0;
}

.cv-doc-card-header .cv-doc-card-title[b-v5tljx1ecl] { padding: 0; }

.cv-doc-card-header .cv-ah-header-left[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
}

.cv-doc-count[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

.cv-doc-table-wrap[b-v5tljx1ecl] { overflow-x: auto; }

/* Fix tooltip/menu clipping in Applied History & Apply Job tables */
.cv-doc-table-wrap.cv-ah-desktop[b-v5tljx1ecl],
.cv-doc-table-wrap.cv-aj-desktop[b-v5tljx1ecl] {
    overflow: visible;
}

.cv-doc-table[b-v5tljx1ecl] {
   
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
       font-size: var(--g-fs-sm);
    border: 1px solid var(--g-gray-200);
}

.cv-doc-table thead th[b-v5tljx1ecl] {
       font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--g-space-12) var(--g-space-20);
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-gray-100);
    white-space: nowrap;
}

.cv-doc-th-action[b-v5tljx1ecl] { text-align: right !important; padding-right: 25px !important; }

.cv-doc-table tbody td[b-v5tljx1ecl] {
    padding: 14px var(--g-space-20);
    border-bottom: 1px solid var(--g-gray-100);
    color: var(--g-gray-600);
    vertical-align: middle;
    font-size: var(--g-fs-xxs);
}

.cv-doc-table tbody tr:last-child td[b-v5tljx1ecl] { border-bottom: none; }

.cv-doc-table tbody tr:hover[b-v5tljx1ecl] { background: var(--g-gray-50); }

.cv-doc-name-cell[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
}

.cv-doc-icon[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-md);
    background: var(--g-gray-100);
    color: var(--g-text-muted);
    flex-shrink: 0;
}

.cv-doc-icon-blue[b-v5tljx1ecl] { background: var(--g-brand-bg); color: var(--g-brand); }
.cv-doc-icon-green[b-v5tljx1ecl] { background: var(--g-success-bg); color: var(--g-success); }

.cv-doc-filename[b-v5tljx1ecl] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.cv-doc-actions-cell[b-v5tljx1ecl] {
    text-align: right;
    white-space: nowrap;
    padding-right: 20px;
}

.cv-doc-action-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    border: none;
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    cursor: pointer;
    font-family: inherit;
    padding: var(--g-space-4) var(--g-space-8);
    border-radius: var(--g-radius-xs);
    transition: color var(--g-transition), background var(--g-transition);
}

.cv-doc-action-btn:hover[b-v5tljx1ecl] {
    color: var(--g-brand);
    background: var(--g-brand-bg);
}

.cv-type-badge[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold); padding: 2px var(--g-space-10); border-radius: var(--g-radius-xs); white-space: nowrap; }
.cv-type-resume[b-v5tljx1ecl] { background: var(--g-brand-bg); color: var(--g-brand, #2c7cff); }
.cv-type-id[b-v5tljx1ecl] { background: var(--g-success-bg); color: var(--g-success-text); }
.cv-type-rtr[b-v5tljx1ecl] { background: #ede9fe; color: #7c3aed; }

.cv-badge-latest[b-v5tljx1ecl] {
    display: inline-block;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    padding: 2px var(--g-space-8);
    border-radius: var(--g-radius-xs);
    background: var(--g-brand-bg);
    color: var(--g-brand, #2c7cff);
    letter-spacing: 0.04em;
}

.cv-doc-version[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

/* Document desktop / mobile toggle */
.cv-doc-desktop[b-v5tljx1ecl] { display: block;
    padding: var(--g-space-8) 18px;
  
    margin: 13px 0px;}
.cv-doc-mobile[b-v5tljx1ecl]  { display: none; }

/* Document mobile cards */
.cv-doc-mcard[b-v5tljx1ecl] {
    padding: 14px var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-100);
}

.cv-doc-mcard:last-child[b-v5tljx1ecl] { border-bottom: none; }

.cv-doc-mcard-top[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-10);
    flex-wrap: wrap;
}

.cv-doc-mcard-top strong[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-800);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-doc-mcard-body[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    gap: var(--g-space-6) var(--g-space-12);
    margin-bottom: var(--g-space-10);
}

.cv-doc-mcard-row[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-doc-mcard-label[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cv-doc-mcard-row > span:last-child[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
}

.cv-doc-mcard-actions[b-v5tljx1ecl] {
    display: flex;
    gap: var(--g-space-8);
}

/* Legacy link btn (kept for Resume tab) */
.cv-link-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    border: none;
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    cursor: pointer;
    font-family: inherit;
    padding: var(--g-space-4) var(--g-space-6);
}

.cv-link-btn:hover[b-v5tljx1ecl] { color: var(--g-brand); }

/* ═══════ PIPELINE METRICS ═══════ */
.cv-pipeline-metrics[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-2xl);
    padding: 0;
    margin-bottom: var(--g-space-20);
}

.cv-pm-item[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-8) var(--g-space-16);
    border-right: 1px solid var(--g-gray-200);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: background 0.2s ease;
    border-right: 1px solid var(--g-gray-200);
}

.cv-pm-item:first-child[b-v5tljx1ecl] { border-radius: var(--g-radius-2xl) 0 0 var(--g-radius-2xl); }
.cv-pm-item:last-child[b-v5tljx1ecl] { border-right: none; border-radius: 0 var(--g-radius-2xl) var(--g-radius-2xl) 0; }
.cv-pm-item:hover[b-v5tljx1ecl] { background: var(--g-gray-50); }
.cv-pm-item.cv-pm-selected[b-v5tljx1ecl] { background: var(--g-brand); }
.cv-pm-item.cv-pm-selected .cv-pm-label[b-v5tljx1ecl] { color: rgba(255,255,255,0.7); }
.cv-pm-item.cv-pm-selected .cv-pm-value[b-v5tljx1ecl] { color: #fff !important; }

.cv-pm-label[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); color: var(--g-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.cv-pm-value[b-v5tljx1ecl] { font-size: var(--g-fs-display); font-weight: var(--g-fw-extrabold); color: var(--g-brand); }

/* Pipeline metric – color accents per tile */


.cv-pm-item.cv-pm-active     .cv-pm-value[b-v5tljx1ecl] { color: var(--g-brand); }
.cv-pm-item.cv-pm-applied    .cv-pm-value[b-v5tljx1ecl] { color: var(--g-gray-800); }
.cv-pm-item.cv-pm-interview  .cv-pm-value[b-v5tljx1ecl] { color: var(--g-warning); }
.cv-pm-item.cv-pm-rejected   .cv-pm-value[b-v5tljx1ecl] { color: var(--g-error); }
.cv-pm-item.cv-pm-closure    .cv-pm-value[b-v5tljx1ecl] { color: var(--g-success); }

.cv-pm-item.cv-pm-selected .cv-pm-value[b-v5tljx1ecl] { color: #fff !important; }
.cv-pm-item.cv-pm-selected[b-v5tljx1ecl] { border-bottom-color: transparent; }

/* ═══════ INLINE TOOLBAR ═══════ */
.cv-inline-toolbar[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cv-mini-search[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-6) var(--g-space-12);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
}

.cv-mini-search input[b-v5tljx1ecl] {
    border: none;
    outline: none;
    font-size: var(--g-fs-xs);
    font-family: inherit;
    width: 100px;
    color: var(--g-gray-800);
    background: transparent;
}

.cv-mini-search input[b-v5tljx1ecl]::placeholder { color: var(--g-text-muted); }

.cv-sort-btn-mini[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-6) var(--g-space-12);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    font-size: var(--g-fs-xs);
    color: var(--g-gray-600);
    cursor: pointer;
    font-family: inherit;
}

.cv-sort-btn-mini:hover[b-v5tljx1ecl] { border-color: var(--g-gray-300); }

/* ═══════ SCORE / STATUS ═══════ */
.cv-match-pill[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-extrabold);
}

.cv-score-circle[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 3px solid;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
}

.cv-status-dot[b-v5tljx1ecl] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

.gr-cl-status-badge[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    line-height: 1.4;
}

.gr-cl-status-dot[b-v5tljx1ecl] {
    width: 7px;
    height: 7px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

.gr-cl-status-text[b-v5tljx1ecl] {
    font-size: 12px;
    font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
    text-transform: capitalize;
}

.gr-cl-status-updated[b-v5tljx1ecl] {
    font-size: 10px;
    color: var(--g-text-muted);
    margin: 0;
    padding-left: 14px;
}

.cv-ah-stage-cell[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.cv-stage-badge[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); padding: 2px var(--g-space-10); border-radius: var(--g-radius-xs); color: var(--g-text-secondary); font-weight: var(--g-fw-semibold); }
.cv-stage-interview[b-v5tljx1ecl] {  color: var(--g-brand, #2c7cff); }
.cv-rate-col[b-v5tljx1ecl] { white-space: nowrap; }
.cv-rate-col small[b-v5tljx1ecl] { color: var(--g-text-muted); }
.cv-dots-btn[b-v5tljx1ecl] { border: none; background: transparent; cursor: pointer; font-size: var(--g-fs-section-title, 1.125rem); color: var(--g-text-muted); padding: var(--g-space-4) var(--g-space-8); border-radius: var(--g-radius-sm); }
.cv-dots-btn:hover[b-v5tljx1ecl] { background: var(--g-gray-100); }
.cv-priority[b-v5tljx1ecl] { font-size: var(--g-space-8); font-weight: var(--g-fw-bold); padding: 2px var(--g-space-8); border-radius: var(--g-radius-xs); letter-spacing: 0.04em; }
.cv-priority-high[b-v5tljx1ecl] { background: var(--g-error-bg); color: var(--g-error-text,#dc2626); }
.cv-priority-medium[b-v5tljx1ecl] { background: var(--g-warning-bg); color: var(--g-warning, #f59e0b); }
.cv-priority-low[b-v5tljx1ecl] { background: var(--g-brand-bg); color: var(--g-brand, #2c7cff); }
.cv-ai-wrap[b-v5tljx1ecl]{ display: flex; align-items: center; gap: var(--g-space-6);}
.cv-apply-link[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
}

.cv-apply-link:hover[b-v5tljx1ecl] { color: var(--g-brand); }

/* ═══════ APPLY JOB – MOBILE CARDS ═══════ */
.cv-aj-desktop[b-v5tljx1ecl] { display: block; }
.cv-aj-mobile[b-v5tljx1ecl]  { display: none; }

.cv-aj-mcard[b-v5tljx1ecl] {
    padding: 14px var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-100);
}
.cv-aj-mcard:last-child[b-v5tljx1ecl] { border-bottom: none; }

.cv-aj-mcard-top[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-10);
    margin-bottom: var(--g-space-12);
}

.cv-aj-mcard-job strong[b-v5tljx1ecl] {
    display: block;
    font-size: var(--g-fs-body);
    color: var(--g-gray-800);
    margin-bottom: var(--g-space-4);
}

.cv-aj-mcard-meta[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.cv-aj-mcard-body[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-10) var(--g-space-16);
    margin-bottom: var(--g-space-12);
}

.cv-aj-mcard-row[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-aj-mcard-label[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-aj-mcard-row span[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
}

.cv-aj-mcard-footer[b-v5tljx1ecl] {
    padding-top: var(--g-space-10);
    border-top: 1px solid var(--g-gray-100);
    display: flex;
    justify-content: flex-end;
}

/* ═══════ APPLIED HISTORY ═══════ */
.cv-ah-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--g-space-12);
    margin-bottom: var(--g-space-16);
}

.cv-ah-title-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    flex-wrap: wrap;
}

.cv-ah-chip[b-v5tljx1ecl] {
     display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: 3px var(--g-space-10) 3px var(--g-space-12);
  
    border: 1px solid var(--g-brand);
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-bg-card);
    background: var(--g-brand);
}

.cv-ah-chip-x[b-v5tljx1ecl] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--g-fs-body, 0.875rem);
    color: var(--g-gray-50);
    padding: 0;
    line-height: 1;
}

.cv-ah-chip-x:hover[b-v5tljx1ecl] { color: var(--g-error); }

.cv-ah-toolbar[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cv-sort-wrap[b-v5tljx1ecl] { position: relative; }

.cv-sort-dropdown[b-v5tljx1ecl] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    z-index: 120;
    overflow: hidden;
}

.cv-sort-option[b-v5tljx1ecl] {
    display: flex;
    width: 100%;
    padding: var(--g-space-10) var(--g-space-16);
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
}

.cv-sort-option:hover[b-v5tljx1ecl] { background: var(--g-gray-50); }
.cv-sort-option.active[b-v5tljx1ecl] { color: var(--g-brand); font-weight: var(--g-fw-semibold); background: var(--g-brand-bg); }

/* ── Table Job Cell ── */
.cv-ah-table[b-v5tljx1ecl] {
    table-layout: fixed;
    overflow: visible;
}

/* Border-radius for first/last cells since overflow:visible removes table rounding */
.cv-ah-table thead tr th:first-child[b-v5tljx1ecl] { border-top-left-radius: 10px; }
.cv-ah-table thead tr th:last-child[b-v5tljx1ecl] { border-top-right-radius: 10px; }
.cv-ah-table tbody tr:last-child td:first-child[b-v5tljx1ecl] { border-bottom-left-radius: 10px; }
.cv-ah-table tbody tr:last-child td:last-child[b-v5tljx1ecl] { border-bottom-right-radius: 10px; }

.cv-ah-th-job[b-v5tljx1ecl] { width: 23%; }
.cv-ah-th-skill[b-v5tljx1ecl] { width: 13%; }
.cv-ah-th-score[b-v5tljx1ecl] { width: 11%; }
.cv-ah-th-status[b-v5tljx1ecl] { width: 10%; }
.cv-ah-th-stage[b-v5tljx1ecl] { width: 13%; }
.cv-ah-th-submit[b-v5tljx1ecl] { width: 12%; }
.cv-ah-th-rate[b-v5tljx1ecl] { width: 12%; }

#cv-applied-table .cv-ah-th-stage[b-v5tljx1ecl],
#cv-applied-table .cv-ah-td-stage[b-v5tljx1ecl] {
    padding-left: 20px;
    padding-right: 20px;
}

.cv-ah-job-cell[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cv-ah-job-avatar-wrap[b-v5tljx1ecl] {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 48px;
}

.cv-ah-job-avatar-thumb[b-v5tljx1ecl] {
    width: 42px;
    height: 42px;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: var(--g-shadow-xs);
}

.cv-ah-job-avatar-thumb img[b-v5tljx1ecl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-ah-job-avatar-badge[b-v5tljx1ecl] {
    position: absolute;
    bottom: 0;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
     border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-xs);
}

.cv-ah-job-avatar-badge img[b-v5tljx1ecl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-ah-job-info[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cv-ah-job-name[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-primary, #2563eb);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    text-decoration: none;
    cursor: pointer;
}



.cv-ah-job-meta[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    line-height: 1.4;
    display: block;
}

.cv-ah-job-client[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    line-height: 1.4;
}

.cv-ah-job-client svg[b-v5tljx1ecl] { flex-shrink: 0; color: var(--g-text-muted); }

/* ── Chart Cell — unified layout for Matching Skill & Overall Score ── */
.cv-ah-chart-cell[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}
.cv-ah-chart-cell .cv-ah-donut-svg[b-v5tljx1ecl] {
    width: var(--g-donut-size, 64px);
    height: var(--g-donut-size, 64px);
    flex-shrink: 0;
}
td:has(.cv-ah-chart-cell)[b-v5tljx1ecl] { vertical-align: middle; }

/* ── Skill labels row (pill + more button) ── */
.cv-ah-skill-labels[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xxs);
}

/* ── Skill Pill ── */
.cv-ah-skill-pill[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: none;
    border-radius: var(--g-radius-sm);
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    background: #eff6ff;
    color: #1d4ed8;
    transition: all 0.15s;
    font-family: inherit;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-ah-pill--green[b-v5tljx1ecl] { background: #ecfdf5; color: #059669; }
.cv-ah-pill--green:hover[b-v5tljx1ecl] { background: #d1fae5; }
.cv-ah-pill--blue[b-v5tljx1ecl] { background: #eff6ff; color: #2563eb; }
.cv-ah-pill--blue:hover[b-v5tljx1ecl] { background: #dbeafe; }
.cv-ah-pill--orange[b-v5tljx1ecl] { background: #fffbeb; color: #d97706; }
.cv-ah-pill--orange:hover[b-v5tljx1ecl] { background: #fef3c7; }
.cv-ah-pill--red[b-v5tljx1ecl] { background: #fef2f2; color: #dc2626; }
.cv-ah-pill--red:hover[b-v5tljx1ecl] { background: #fee2e2; }

/* ── Matching Jobs: show full pill text when no "more" ── */
.cv-aj-skill-pill[b-v5tljx1ecl] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.cv-ah-score-label-text[b-v5tljx1ecl] {
    font-size: 10px;
    font-weight: var(--g-fw-semibold);
    white-space: nowrap;
}

.cv-ah-tooltip-dot[b-v5tljx1ecl] {
    width: 7px;
    height: 7px;
    border-radius: var(--g-radius-full);
    flex-shrink: 0;
}

.cv-ah-tooltip-skill-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.cv-ah-tooltip-skill-name[b-v5tljx1ecl] { font-weight: 500; }
.cv-ah-tooltip-skill-year[b-v5tljx1ecl] { font-size: 11px; color: #94a3b8; white-space: nowrap; }

.cv-ah-tooltip--open[b-v5tljx1ecl] {
    display: flex !important;
}

.cv-ah-score-cell:hover .cv-ah-tooltip[b-v5tljx1ecl] {
    display: flex;
}

/* Score breakdown tooltip on hover */
.cv-ah-score-group[b-v5tljx1ecl] {
    cursor: pointer;
}
.cv-ah-score-tooltip[b-v5tljx1ecl] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-gray-200, #e2e8f0);
    color: var(--g-text-body, #334155);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 190px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cv-ah-score-group:hover .cv-ah-score-tooltip[b-v5tljx1ecl] {
    opacity: 1;
    pointer-events: auto;
}
.cv-ah-tooltip-header[b-v5tljx1ecl] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--g-text-muted, #94a3b8);
    margin-bottom: 2px;
}
.cv-ah-tooltip-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--g-text-body, #334155);
}
.cv-ah-tooltip-row span:last-child[b-v5tljx1ecl] {
    font-weight: 600;
    color: #0a66c2;
}
.cv-ah-tooltip-caret[b-v5tljx1ecl] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--g-bg-card, #fff);
    border-right: 1px solid var(--g-gray-200, #e2e8f0);
    border-bottom: 1px solid var(--g-gray-200, #e2e8f0);
}

.cv-ah-skill-more-btn[b-v5tljx1ecl] {
    background: none;
    border: none;
    padding: 0;
    font-size: 10px;
    font-family: inherit;
    color: #3b82f6;
    cursor: pointer;
    font-weight: var(--g-fw-medium);
    white-space: nowrap;
    transition: color 0.15s;
}
.cv-ah-skill-more-btn:hover[b-v5tljx1ecl] {
    color: #1d4ed8;
    text-decoration: underline;
}

.cv-ah-skill-popover[b-v5tljx1ecl] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    min-width: 230px;
    max-width: 280px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    animation: cv-fade-in-b-v5tljx1ecl 0.15s ease;
}
.cv-ah-skill-popover-header[b-v5tljx1ecl] {
    font-size: 10px;
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
     padding-bottom: 6px;
    border-bottom: 1px solid var(--g-gray-100, #f1f5f9);
}
.cv-ah-skill-popover-list[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar {
    width: 4px;
}
.cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar-track {
    background: transparent;
}
.cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.cv-ah-skill-popover-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}
.cv-ah-skill-popover-row:last-child[b-v5tljx1ecl] {
    border-bottom: none;
}
.cv-ah-skill-popover-name[b-v5tljx1ecl] {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
}
.cv-ah-skill-popover-val[b-v5tljx1ecl] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.cv-ah-skill-popover-yrs[b-v5tljx1ecl] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.cv-ah-backdrop[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

@keyframes cv-fade-in-b-v5tljx1ecl {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.gr-cl-backdrop[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    z-index: 89;
}

/* ── Global Skill Popover Overlay ── */
.cv-skill-popover-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    animation: cv-fade-in-b-v5tljx1ecl 0.1s ease;
}

.cv-skill-popover-global[b-v5tljx1ecl] {
    min-width: 240px;
    max-width: 340px;
    max-height: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 16px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cv-skill-popover-global .cv-ah-skill-popover-list[b-v5tljx1ecl] {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.cv-skill-popover-global .cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar {
    width: 4px;
}

.cv-skill-popover-global .cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar-track {
    background: transparent;
}

.cv-skill-popover-global .cv-ah-skill-popover-list[b-v5tljx1ecl]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Ensure tooltip is visible above table rows */
.cv-ah-table tbody tr[b-v5tljx1ecl] {
    position: relative;
}
.cv-ah-table tbody tr:hover[b-v5tljx1ecl] {
    z-index: 10;
}

.cv-ah-empty-row td[b-v5tljx1ecl] {
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 20px 16px;
}

.cv-ah-empty-row:hover[b-v5tljx1ecl] {
    background: transparent;
}

/* ── Apply Job table — tooltip must escape table overflow ── */
#cv-applyjob-table[b-v5tljx1ecl] {
    overflow: visible;
}
#cv-applyjob-table tbody tr[b-v5tljx1ecl] {
    position: relative;
}
#cv-applyjob-table tbody tr:hover[b-v5tljx1ecl] {
    z-index: 10;
}
#cv-applyjob-card[b-v5tljx1ecl] {
    overflow: visible;
}

/* ── Clickable helper ── */
.cv-clickable[b-v5tljx1ecl] {
    cursor: pointer;
    transition: color 0.2s;
}
.cv-clickable:hover[b-v5tljx1ecl] {
    color: var(--g-brand);
    text-decoration: underline;
}

.cv-ah-td-status[b-v5tljx1ecl] { white-space: nowrap;
    font-weight: var(--g-fw-bold) !important; }
.cv-ah-td-status small[b-v5tljx1ecl] { color: var(--g-text-muted); }

/* ── Submitter cell with avatar ── */
.cv-submitter-cell[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cv-submitter-avatar[b-v5tljx1ecl] {
    width: 24px;
    height: 24px;
    border-radius: var(--g-radius-full);
    object-fit: cover;
    border: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.cv-ah-td-submitter small[b-v5tljx1ecl] { color: var(--g-text-muted); }
.cv-ah-td-rate[b-v5tljx1ecl] { white-space: nowrap; color: var(--g-text-secondary); padding: 14px var(--g-space-30); }
.cv-ah-td-rate small[b-v5tljx1ecl] { color: var(--g-text-secondary); }
.cv-td-matching-skill[b-v5tljx1ecl]{ padding: 14px var(--g-space-4);vertical-align: middle; }

/* ── Stage Badges ── */
.cv-stage-submitted[b-v5tljx1ecl] { color: rgb(29 78 216); }
.cv-stage-interview[b-v5tljx1ecl] {  color: rgb(4 120 87); }
.cv-stage-hold[b-v5tljx1ecl] {  color: #ca8a04; }
.cv-stage-rejected[b-v5tljx1ecl] {  color: rgb(220 38 38); }
.cv-stage-withdrawn[b-v5tljx1ecl] {  color: rgb(100 116 139); }
.cv-stage-declined[b-v5tljx1ecl] {  color: rgb(37 99 235); }
.cv-stage-offer-declined[b-v5tljx1ecl] { color: rgb(37 99 235); }

/* ── Action Menu ── */
.cv-ah-action-wrap[b-v5tljx1ecl] { position: relative; }

.cv-ah-action-menu[b-v5tljx1ecl] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-lg);
    z-index: 120;
    overflow: hidden;
    padding: var(--g-space-4);
}

.cv-ah-menu-item[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    width: 100%;
    padding: var(--g-space-10) 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-600);
    cursor: pointer;
    border-radius: var(--g-radius-md);
}

.cv-ah-menu-item:hover[b-v5tljx1ecl] { background: var(--g-gray-50); color: var(--g-gray-800); }
.cv-ah-menu-item.cv-ah-menu-feedback[b-v5tljx1ecl] { color: var(--g-gray-600); }
.cv-ah-menu-item.cv-ah-menu-feedback:hover[b-v5tljx1ecl] { background: var(--g-gray-50); color: var(--g-gray-800); }
.cv-ah-menu-item:disabled[b-v5tljx1ecl] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cv-ah-menu-divider[b-v5tljx1ecl] {
    height: 1px;
    background: var(--g-gray-200);
    margin: var(--g-space-4) var(--g-space-8);
}

/* ── Mobile Cards (hidden on desktop) ── */
.cv-ah-mobile[b-v5tljx1ecl] { display: none; }

.cv-ah-mcard[b-v5tljx1ecl] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-16);
    margin-bottom: var(--g-space-12);
}

@keyframes cv-rj-shimmer-b-v5tljx1ecl {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.cv-rj-skeleton-line[b-v5tljx1ecl],
.cv-rj-skeleton-pill[b-v5tljx1ecl],
.cv-rj-skeleton-dot[b-v5tljx1ecl],
.cv-rj-skeleton-ring[b-v5tljx1ecl],
.cv-rj-skeleton-avatar[b-v5tljx1ecl],
.cv-rj-skeleton-btn[b-v5tljx1ecl] {
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 400% 100%;
    animation: cv-rj-shimmer-b-v5tljx1ecl 1.4s ease-in-out infinite;
}

.cv-rj-skeleton-line[b-v5tljx1ecl] {
    height: 12px;
    border-radius: 999px;
}

.cv-rj-skeleton-line-lg[b-v5tljx1ecl] { width: 72%; }
.cv-rj-skeleton-line-sm[b-v5tljx1ecl] { width: 58%; }
.cv-rj-skeleton-line-xs[b-v5tljx1ecl] { width: 46%; }

.cv-rj-skeleton-pill[b-v5tljx1ecl] {
    width: 52px;
    height: 14px;
    border-radius: 999px;
}

.cv-rj-skeleton-dot[b-v5tljx1ecl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cv-rj-skeleton-ring[b-v5tljx1ecl] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}

.cv-rj-skeleton-avatar[b-v5tljx1ecl] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.cv-rj-skeleton-btn[b-v5tljx1ecl] {
    width: 54px;
    height: 18px;
    border-radius: 999px;
}

.cv-rj-skeleton-status-wrap[b-v5tljx1ecl],
.cv-rj-skeleton-skill-wrap[b-v5tljx1ecl],
.cv-rj-skeleton-user-wrap[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cv-rj-skeleton-skill-wrap .cv-rj-skeleton-line-sm[b-v5tljx1ecl] {
    width: 64px;
}

/* Sidebar skeleton sizing (Applied Jobs + Matching Jobs) */
.cv-sidebar-skel-count[b-v5tljx1ecl] {
    width: 90px;
    height: 12px;
}

.cv-sidebar-skel-avatar.cv-rj-skeleton-avatar[b-v5tljx1ecl] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-xl);
}

.cv-sidebar-skel-title[b-v5tljx1ecl] {
    height: 15px;
    width: 150px;
}

.cv-sidebar-skel-meta[b-v5tljx1ecl] {
    height: 12px;
    width: 165px;
}

.cv-sidebar-skel-rate[b-v5tljx1ecl] {
    height: 12px;
    width: 132px;
}

.cv-sidebar-skel-user[b-v5tljx1ecl] {
    height: 12px;
    width: 140px;
}

.cv-sidebar-skel-status[b-v5tljx1ecl] {
    height: 11px;
    width: 96px;
}

.cv-sidebar-skel-ring.cv-rj-skeleton-ring[b-v5tljx1ecl] {
    width: 58px;
    height: 58px;
}

.cv-sidebar-skel-ring-label[b-v5tljx1ecl] {
    width: 40px;
    height: 10px;
}

.cv-rj-skeleton-row td[b-v5tljx1ecl] {
    vertical-align: middle;
}

/* Candidate View Toast (bottom-right, black) */
.cv-toast[b-v5tljx1ecl] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--g-radius-xl);
    background: var(--g-gray-900, #111827);
    color: #fff;
    box-shadow: var(--g-shadow-lg);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    animation: cv-fade-in-b-v5tljx1ecl 0.2s ease;
}

.cv-aj-mcard-skeleton[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cv-aj-empty[b-v5tljx1ecl] {
    color: #94a3b8;
    font-size: 0.9rem;
    text-align: center;
    padding: 16px;
}

.cv-ah-mcard-meta[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.cv-ah-mcard-skill[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8);
}

.cv-ah-mchart[b-v5tljx1ecl] {
    --pct: 0;
    --chart-color: #3b82f6;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: conic-gradient(var(--chart-color) calc(var(--pct) * 1%), #e4e4e7 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.cv-ah-mchart[b-v5tljx1ecl]::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--g-bg-card);
}

.cv-ah-mchart-val[b-v5tljx1ecl] {
    position: relative;
    z-index: 1;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    color: var(--chart-color);
}

.cv-ah-mcard-top[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-12);
    padding-bottom: var(--g-space-12);
    border-bottom: 1px solid var(--g-gray-100);
}

.cv-ah-mcard-job strong[b-v5tljx1ecl] { display: block; font-size: var(--g-fs-body); color: var(--g-gray-800); margin-bottom: 2px; }
.cv-ah-mcard-job span[b-v5tljx1ecl] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }

.cv-ah-mcard-body[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cv-ah-mcard-row[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cv-ah-mcard-label[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Pagination ── */
.cv-ah-pagination[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--g-space-16);
    border-top: 1px solid var(--g-gray-100);
    margin-top: var(--g-space-16);
}

.cv-ah-page-info[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.cv-ah-page-btns[b-v5tljx1ecl] {
    display: flex;
    gap: var(--g-space-4);
}

.cv-ah-page-btn[b-v5tljx1ecl] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-border);
    border-radius: 50%;
    background: var(--g-bg-card);
    font-size: 10px;
    font-weight: 600;
    color: var(--g-gray-800);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--g-transition);
}

.cv-ah-page-btn:disabled[b-v5tljx1ecl] { opacity: 0.4; cursor: default; }
.cv-ah-page-btn:hover:not(:disabled)[b-v5tljx1ecl] { background: var(--g-gray-100); border-color: var(--g-gray-400); }
.cv-ah-page-active[b-v5tljx1ecl] { background:var(--sidebar-active-bg); color: var(--g-bg-card); border-color: transparent; box-shadow: 0 3px 8px -2px var(--g-primary-shadow-deep); }
.cv-ah-page-active:hover[b-v5tljx1ecl] { color: var(--g-bg-card); }

/* ═══════ SIDEBAR ═══════ */
/* cv-sidebar-header sticky rules are defined near .cv-sidebar above */
.cv-sidebar-header[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--g-space-12);
    padding-bottom: var(--g-space-8);
}

.cv-sidebar-title[b-v5tljx1ecl] {
       font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    letter-spacing: 0.1em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
}

/* ── AI Recommended Card (sidebar fallback) ── */
.cv-ai-rec-card[b-v5tljx1ecl] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: 14px;
    margin-bottom: var(--g-space-10);
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.cv-ai-rec-card:hover[b-v5tljx1ecl] {
    box-shadow: var(--g-shadow-sm);
    border-color: var(--g-gray-300);
}

.cv-ai-rec-card-top[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.cv-ai-rec-left[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.cv-ai-rec-thumb[b-v5tljx1ecl] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.cv-ai-rec-card-info[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cv-ai-rec-card-info strong[b-v5tljx1ecl] {
        font-size: var(--g-fs-candidate-subtitle);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-ai-rec-card-meta[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cv-ai-rec-card-rate[b-v5tljx1ecl] {
   font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cv-ai-rec-card-match[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-shrink: 0;
}

.cv-ai-rec-chart[b-v5tljx1ecl] {
    --pct: 0;
    --chart-color: #3b82f6;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--chart-color) calc(var(--pct) * 1%), #e5e7eb 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cv-ai-rec-chart[b-v5tljx1ecl]::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--g-bg-card);
}

.cv-ai-rec-pct[b-v5tljx1ecl] {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

.cv-rec-wrap[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
     border-top: 1px solid var(--g-gray-100);
}

.cv-ai-rec-card-bottom[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    margin-top: var(--g-space-8);
    padding-top: var(--g-space-8);
   
}

.cv-ai-rec-skill[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-medium);
    max-width: 78px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════ JOB CARD ═══════ */
.cv-job-card[b-v5tljx1ecl] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-2xl);
    padding: var(--g-space-16);
    margin-bottom: var(--g-space-12);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    overflow: visible;
}

.cv-job-card:hover[b-v5tljx1ecl] {
    box-shadow: var(--g-shadow-sm);
    border-color: var(--g-gray-300);
}

.cv-job-card.expanded[b-v5tljx1ecl] {
    border-color: var(--g-brand);
    box-shadow: 0 4px 20px rgba(0,111,249,0.08);
}

.cv-job-card-top[b-v5tljx1ecl] {
    display: flex;
    gap: 12px;
}

.cv-job-avatar-wrap[b-v5tljx1ecl] {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 50px;
}

.cv-job-avatar-thumb[b-v5tljx1ecl] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: var(--g-shadow-xs);
}

.cv-job-avatar-thumb img[b-v5tljx1ecl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-job-avatar-badge[b-v5tljx1ecl] {
    position: absolute;
    bottom: 0;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
     border: 2px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-xs);
}

.cv-job-avatar-badge img[b-v5tljx1ecl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-job-info[b-v5tljx1ecl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-job-title-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cv-job-title-row strong[b-v5tljx1ecl] { font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.cv-job-title-link[b-v5tljx1ecl] { text-decoration: none; color: inherit; cursor: pointer; }
.cv-job-title-link:hover strong[b-v5tljx1ecl] { color: var(--g-brand, #2c7cff); }
.cv-job-detail[b-v5tljx1ecl] {     font-size: var(--g-fs-xxs);    color: var(--g-text-muted);    display: flex;    align-items: center; }

.cv-job-status-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xxs);
    color: var(--g-gray-600);
    margin-top: 2px;
}

.cv-view-more-link[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 600;
    color: var(--g-brand);
    cursor: pointer;
    margin-left: 4px;
    text-decoration: none;
}

.cv-job-score-ring[b-v5tljx1ecl] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.cv-job-score-ring svg[b-v5tljx1ecl] { width: 100%; height: 100%; }

.cv-ring-label[b-v5tljx1ecl] {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
}

.cv-ring-value[b-v5tljx1ecl] {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
}

/* ═══════ SCORE RING TOOLTIP ═══════ */
.cv-score-tooltip[b-v5tljx1ecl] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 8px 10px;
    white-space: nowrap;
    z-index: 9999;
    font-size: var(--g-fs-xxs, 0.675rem);
    min-width: 140px;
}

.cv-job-score-ring:hover .cv-score-tooltip[b-v5tljx1ecl] {
    display: flex;
}

.cv-score-tooltip-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cv-score-tooltip-dot[b-v5tljx1ecl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cv-score-tooltip-label[b-v5tljx1ecl] {
    color: var(--g-text-body);
    font-weight: var(--g-fw-medium);
    flex: 1;
}

.cv-score-tooltip-value[b-v5tljx1ecl] {
    font-weight: var(--g-fw-bold);
}

/* ── Per-segment ring tooltips ── */
.cv-ring-segment-tooltip[b-v5tljx1ecl] {
    position: absolute;
    left: -10%;
    top: calc(100% );
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 10px;
    white-space: nowrap;
    z-index: 9999;
    font-size: var(--g-fs-xxs, 0.675rem);
}

/* SVG segments highlight on hover */
.cv-ring-segment[b-v5tljx1ecl] {
    cursor: pointer;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
}

.cv-ring-segment:hover[b-v5tljx1ecl] {
    stroke-width: 4.5;
    filter: brightness(1.1);
}

/* Show individual tooltip on segment hover */
.cv-job-score-ring svg circle.cv-ring-segment:nth-of-type(2):hover ~ .cv-ring-tooltip-ai[b-v5tljx1ecl],
.cv-job-score-ring:has(svg circle.cv-ring-segment:nth-of-type(2):hover) .cv-ring-tooltip-ai[b-v5tljx1ecl] {
    display: flex;
}

.cv-job-score-ring:has(svg circle.cv-ring-segment:nth-of-type(3):hover) .cv-ring-tooltip-linkedin[b-v5tljx1ecl] {
    display: flex;
}

.cv-job-score-ring:has(svg circle.cv-ring-segment:nth-of-type(4):hover) .cv-ring-tooltip-skills[b-v5tljx1ecl] {
    display: flex;
}

.cv-job-score-ring:has(svg circle.cv-ring-segment:nth-of-type(5):hover) .cv-ring-tooltip-assess[b-v5tljx1ecl] {
    display: flex;
}

/* ═══════ JOB EXPANDED ═══════ */
.cv-job-expanded[b-v5tljx1ecl] {
    margin-top: var(--g-space-16);
    padding-top: var(--g-space-16);
    border-top: 1px solid var(--g-gray-200);
    cursor: default;
}

.cv-section-label[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: var(--g-space-16) 0 var(--g-space-12);
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
}

.cv-cjs-metrics[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.cv-cjs-item[b-v5tljx1ecl] {
    text-align: center;
    padding: var(--g-space-12) var(--g-space-4);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
}

.cv-cjs-val[b-v5tljx1ecl] {
    display: block;
    font-size: var(--g-fs-display);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
}

.cv-cjs-lbl[b-v5tljx1ecl] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ═══════ AI DONUT ═══════ */
.cv-donut-wrap[b-v5tljx1ecl] {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 8px;
}

.cv-donut[b-v5tljx1ecl] { width: 100%; height: 100%; }

.cv-donut-center[b-v5tljx1ecl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cv-donut-center span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.cv-donut-center strong[b-v5tljx1ecl] { font-size: var(--g-fs-display, 1.5rem); font-weight: var(--g-fw-extrabold); color: var(--g-gray-800); }

.cv-ai-good[b-v5tljx1ecl] {
    display: block;
    text-align: center;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-success);
    margin-bottom: var(--g-space-16);
}

/* ═══════ RATINGS ═══════ */
.cv-ratings-list[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

.cv-rating-row[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: var(--g-space-8) 0;
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
    border-bottom: 1px solid var(--g-gray-100);
}

.cv-rating-row:last-child[b-v5tljx1ecl] { border-bottom: none; }
.cv-rating-row strong[b-v5tljx1ecl] { margin-left: auto; color: var(--g-gray-800); }
.cv-rating-dot[b-v5tljx1ecl] { width: 8px; height: 8px; border-radius: var(--g-radius-full); flex-shrink: 0; }

/* ═══════ AI REC BOX ═══════ */
.cv-ai-rec-box[b-v5tljx1ecl] {
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    padding: 14px;
    margin: var(--g-space-12) 0;
}

.cv-ai-rec-box strong[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    font-size: var(--g-fs-xs);
    color: var(--g-gray-800);
    margin-bottom: var(--g-space-6);
}

.cv-ai-rec-box p[b-v5tljx1ecl] { font-size: var(--g-fs-xs); color: var(--g-gray-600); line-height: 1.6; margin: 0; }

/* ═══════ JOB DETAILS GRID ═══════ */
.cv-job-details-grid[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 12px 0;
}

.cv-jd-row[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    padding: var(--g-space-8) 0;
    border-bottom: 1px solid var(--g-gray-100);
    font-size: var(--g-fs-sm);
}

.cv-jd-row:last-child[b-v5tljx1ecl] { border-bottom: none; }
.cv-jd-row span[b-v5tljx1ecl] { color: var(--g-text-secondary); }
.cv-jd-row strong[b-v5tljx1ecl] { color: var(--g-gray-800); }

.cv-job-status-bar[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--g-space-12) 0;
    margin: var(--g-space-4) 0 var(--g-space-12);
    border-top: 1px solid var(--g-gray-100);
}

/* ═══════ FEEDBACK BUTTONS ═══════ */
.cv-feedback-btns[b-v5tljx1ecl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cv-feedback-btn[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-6);
    padding: var(--g-space-10);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--g-transition);
}

.cv-feedback-btn:hover[b-v5tljx1ecl] { border-color: var(--g-gray-800); }
.cv-feedback-view[b-v5tljx1ecl] { color: var(--g-brand); }
.cv-feedback-view:hover[b-v5tljx1ecl] { border-color: var(--g-brand); }

/* ═══════ FEEDBACK MODAL ═══════ */
.cv-modal-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
   z-index: 1200;
    display: grid;
    place-items: center;
    padding: var(--g-space-16);
}

.cv-feedback-modal[b-v5tljx1ecl] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--g-shadow-lg);
    overflow: hidden;
}

.cv-modal-header[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--g-space-20) var(--g-space-24) var(--g-space-12);
}

.cv-modal-title[b-v5tljx1ecl] { font-size: var(--g-fs-section-title); font-weight: var(--g-fw-bold); color: var(--g-gray-800); margin: 0; }
.cv-modal-subtitle[b-v5tljx1ecl] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }

.cv-modal-close[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted);
    border-radius: var(--g-radius-md);
}

.cv-modal-close:hover[b-v5tljx1ecl] { background: var(--g-gray-100); color: var(--g-gray-800); }
.cv-modal-body[b-v5tljx1ecl] { padding: 0 var(--g-space-24) var(--g-space-16); }

.cv-existing-fb[b-v5tljx1ecl] {
    background: var(--g-gray-50);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    padding: 14px;
}

.cv-existing-fb p[b-v5tljx1ecl] { font-size: var(--g-fs-sm); color: var(--g-gray-600); line-height: 1.6; margin: 0 0 6px; }
.cv-existing-fb span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.cv-fb-textarea[b-v5tljx1ecl] {
    width: 100%;
    padding: var(--g-space-12);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-gray-800);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.cv-fb-textarea:focus[b-v5tljx1ecl] {
    border-color: var(--g-brand);
    box-shadow: var(--g-focus-shadow);
}

.cv-modal-footer[b-v5tljx1ecl] {
    display: flex;
    justify-content: flex-end;
    gap: var(--g-space-10);
    padding: var(--g-space-12) var(--g-space-24) var(--g-space-20);
}

.cv-modal-cancel[b-v5tljx1ecl] {
    padding: var(--g-space-8) var(--g-space-20);
    border: none;
    background: transparent;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.cv-modal-cancel:hover[b-v5tljx1ecl] { color: var(--g-gray-800); }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1440px) {
    .cv-body[b-v5tljx1ecl] { grid-template-columns: 1fr 380px; gap: var(--g-space-20); }
    .cv-body-full[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-doc-th-action[b-v5tljx1ecl] { text-align: right; padding-right: 25px; }
}

@media (max-width: 1200px) {
    .cv-body[b-v5tljx1ecl] { grid-template-columns: 1fr 340px; gap: var(--g-space-20); }
    .cv-body-full[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-compact-right[b-v5tljx1ecl] { gap: var(--g-space-12); }
}

@media (max-width: 1024px) {
    .cv-body[b-v5tljx1ecl] { grid-template-columns: 1fr 370px; gap: var(--g-space-16); }
    .cv-body-full[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-hero-metrics[b-v5tljx1ecl] { flex-wrap: wrap; }
    .cv-metric[b-v5tljx1ecl] { padding: var(--g-space-8) 14px; min-width: 80px; }
    .cv-metric-value[b-v5tljx1ecl] { font-size: 1.5rem; }
    .cv-donut-wrap[b-v5tljx1ecl] { width: 140px; height: 140px; }
    .cv-title-bar[b-v5tljx1ecl] { margin-left: -10px; margin-right: -10px; }
    .cv-resume-layout[b-v5tljx1ecl] { grid-template-columns: 65% 35%; }
    .cv-doc-th-action[b-v5tljx1ecl] { text-align: right; padding-right: 25px; }
}

@media (max-width: 768px) {
    .cv-upload-area[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: var(--g-space-16);
    padding: var(--g-space-16);
    border: 1px dashed var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    text-align: center;
}
.cv-doc-mcard-wrap[b-v5tljx1ecl]{
        display: contents;
}

.cv-mini-search[b-v5tljx1ecl]{
    width:90%;
}

.cv-upload-row[b-v5tljx1ecl]{flex-direction: column;display: flex; align-items: center;}
    .cv-body[b-v5tljx1ecl] { grid-template-columns: 1fr; padding: 0 10px; }
    .cv-sidebar[b-v5tljx1ecl] { order: 2; }
    /* Show tabs like desktop at 768px */
    .cv-tabs-wrap[b-v5tljx1ecl] { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cv-tab-mobile[b-v5tljx1ecl] { display: none; }
    .cv-tab-dropdown[b-v5tljx1ecl] { display: none; }
    .cv-hero[b-v5tljx1ecl] { flex-direction: column; border-radius: var(--g-radius-2xl) var(--g-radius-2xl) 0 0; }
    .cv-hero-metrics[b-v5tljx1ecl] { width: 100%; justify-content: space-between; }
    .cv-metric[b-v5tljx1ecl] { flex: 1; min-width: 0; padding: var(--g-space-8); }
    .cv-metric-value[b-v5tljx1ecl] { font-size: 1.25rem; }
    .cv-meta-row[b-v5tljx1ecl] { gap: var(--g-space-10); border-radius: 0 0 var(--g-radius-2xl) var(--g-radius-2xl); padding: var(--g-space-12) 0px; }
    .cv-meta-item[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-two-col[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-resume-layout[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-exp-edu-cert[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-ai-chart[b-v5tljx1ecl]{overflow-x: scroll;}
    /* Pipeline metrics: 3 + 2 centered */
    .cv-pipeline-metrics[b-v5tljx1ecl] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cv-pm-item[b-v5tljx1ecl] {
        flex: 0 0 calc(33.333% - 1px);
        border-radius: 0;
        border-right: 1px solid var(--g-gray-200);
    }
    .cv-pm-item:nth-child(3)[b-v5tljx1ecl] { border-right: none; }
    .cv-pm-item:nth-child(n+4)[b-v5tljx1ecl] {
        flex: 0 0 calc(50% - 1px);
        border-top: 1px solid var(--g-gray-200);
    }
    .cv-pm-item:nth-child(5)[b-v5tljx1ecl] { border-right: none; }
    .cv-pm-item:first-child[b-v5tljx1ecl] { border-radius: var(--g-radius-2xl) 0 0 0; }
    .cv-pm-item:nth-child(3)[b-v5tljx1ecl] { border-radius: 0 var(--g-radius-2xl) 0 0; }
    .cv-pm-item:nth-child(4)[b-v5tljx1ecl] { border-radius: 0 0 0 var(--g-radius-2xl); }
    .cv-pm-item:last-child[b-v5tljx1ecl] { border-radius: 0 0 var(--g-radius-2xl) 0; }
    .cv-card[b-v5tljx1ecl] { padding: var(--g-space-16); border-radius: var(--g-radius-xl); }
    .cv-name[b-v5tljx1ecl] { font-size: 1.25rem; }
    .cv-feedback-modal[b-v5tljx1ecl] { max-width: 100%; margin: 0 var(--g-space-12); }
    .cv-inline-toolbar[b-v5tljx1ecl] { flex-wrap: wrap; gap: var(--g-space-6); }
    .cv-donut-wrap[b-v5tljx1ecl] { width: 140px; height: 140px; }
    .cv-cjs-metrics[b-v5tljx1ecl] { grid-template-columns: repeat(2, 1fr); }
    .cv-title-bar[b-v5tljx1ecl] { margin-left: -12px; margin-right: -12px; padding: 0 var(--g-space-16); }
    .cv-compact-salary[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-compact-match[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-compact-name[b-v5tljx1ecl] { font-size: var(--g-fs-sm); }
    .cv-compact-role[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-hist-hover-actions[b-v5tljx1ecl] { opacity: 1;justify-content: end; }
    .cv-doc-table[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-doc-table thead th[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); padding: var(--g-space-8) var(--g-space-10); }
    .cv-doc-table tbody td[b-v5tljx1ecl] { padding: var(--g-space-12) var(--g-space-10); }
    .cv-doc-th-action[b-v5tljx1ecl] { text-align: right; padding-right: 25px; }
    .cv-doc-desktop[b-v5tljx1ecl] { display: none; }
    .cv-doc-mobile[b-v5tljx1ecl]  { display: block; }
    .cv-doc-card-title[b-v5tljx1ecl] { font-size: var(--g-fs-body); padding: 14px var(--g-space-16) 0; }
    .cv-doc-card-header[b-v5tljx1ecl] { padding: 14px var(--g-space-16) 0; }
    /* Applied History responsive */
    .cv-ah-desktop[b-v5tljx1ecl] { display: none; }
    .cv-ah-mobile[b-v5tljx1ecl] { display: block; }
    .cv-ah-header[b-v5tljx1ecl] { flex-direction: column; align-items: stretch; }
    .cv-ah-toolbar[b-v5tljx1ecl] { width: 100%; }
    .cv-ah-pagination[b-v5tljx1ecl] { flex-direction: column; gap: var(--g-space-10); align-items: center; }
    /* Stage badge smaller on mobile */
    .cv-stage-badge[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); padding: 2px var(--g-space-8); max-width: 100px; overflow: hidden; }
    /* mcard-body font + row colors */
    .cv-ah-mcard-body[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-ah-mcard-row span[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-ah-mcard-active[b-v5tljx1ecl] { color: var(--g-success-text, #059669); font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); }
    .cv-ah-score-val[b-v5tljx1ecl] { display:none; color: var(--g-success-text, #059669); font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); }
    .cv-ah-mcard-label[b-v5tljx1ecl] { color: var(--g-text-muted); }
    .cv-ah-mchart[b-v5tljx1ecl] {
        width: 46px;
        height: 46px;
    }
    .cv-ah-mchart[b-v5tljx1ecl]::before {
        inset: 5px;
    }
    .cv-ah-mchart-val[b-v5tljx1ecl] {
        font-size: 10px;
    }
    /* Apply Job responsive */
    .cv-aj-desktop[b-v5tljx1ecl] { display: none; }
    .cv-aj-mobile[b-v5tljx1ecl]  { display: block; }
    /* Contact popup responsive */
    .cv-contact-popup[b-v5tljx1ecl] { max-width: calc(100vw - 32px); }
    .cv-ah-mcard-body[b-v5tljx1ecl] { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 425px) {
    /* Tab dropdown visible, hide tabs-wrap */
    .cv-tabs-wrap[b-v5tljx1ecl] { display: none !important; }
    .cv-tab-mobile[b-v5tljx1ecl] { display: none !important; }
    .cv-tab-dropdown[b-v5tljx1ecl] { display: block; position: relative; margin-bottom: var(--g-space-16); }
    .cv-name[b-v5tljx1ecl] { font-size: 1.1rem; }
    .cv-role[b-v5tljx1ecl] { font-size: var(--g-fs-xs); }
    .cv-avatar[b-v5tljx1ecl] { width: 56px; height: 56px; }
    .cv-metric[b-v5tljx1ecl] { padding: var(--g-space-6); }
    .cv-metric-value[b-v5tljx1ecl] { font-size: 1.1rem; }
    .cv-metric-label[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-meta-item[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-card[b-v5tljx1ecl] { padding: 14px; }
    .cv-card-title[b-v5tljx1ecl] { font-size: var(--g-fs-sm); }
    .cv-pill[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); padding: var(--g-space-6) var(--g-space-12); }
    .cv-doc-mcard-body[b-v5tljx1ecl] { grid-template-columns: 1fr 1fr 1fr; }
    .cv-doc-th-action[b-v5tljx1ecl] { text-align: right; padding-right: 25px; }
    .cv-hero-left[b-v5tljx1ecl] { gap: var(--g-space-10); }
    .cv-feedback-btns[b-v5tljx1ecl] { grid-template-columns: 1fr; }
    .cv-donut-wrap[b-v5tljx1ecl] { width: 120px; height: 120px; }
    .cv-cjs-val[b-v5tljx1ecl] { font-size: 1.1rem; }
    .cv-title-bar[b-v5tljx1ecl] { margin-left: -8px; margin-right: -8px; padding: 0 var(--g-space-12); }
    .cv-title-inner[b-v5tljx1ecl] { height: 48px; }
    .cv-compact-right[b-v5tljx1ecl] { gap: var(--g-space-8); }
    .cv-compact-salary[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-compact-match[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); }
    .cv-compact-avatar[b-v5tljx1ecl] { width: 28px; height: 28px; }
    .cv-compact-divider[b-v5tljx1ecl] { height: 16px; }
    /* Pipeline metrics: 3 + 2 centered */
    .cv-pipeline-metrics[b-v5tljx1ecl] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cv-pm-item[b-v5tljx1ecl] {
        flex: 0 0 calc(33.333% - 1px);
        padding: 14px var(--g-space-10);
        border-radius: 0;
        border-right: 1px solid var(--g-gray-200);
    }
    .cv-pm-value[b-v5tljx1ecl] { font-size: var(--g-fs-page-title, 1.25rem); }
    .cv-pm-item:nth-child(3)[b-v5tljx1ecl] { border-right: none; }
    .cv-pm-item:nth-child(n+4)[b-v5tljx1ecl] {
        flex: 0 0 calc(50% - 1px);
        border-top: 1px solid var(--g-gray-200);
    }
    .cv-pm-item:nth-child(5)[b-v5tljx1ecl] { border-right: none; }
    .cv-pm-item:first-child[b-v5tljx1ecl] { border-radius: var(--g-radius-2xl) 0 0 0; }
    .cv-pm-item:nth-child(3)[b-v5tljx1ecl] { border-radius: 0 var(--g-radius-2xl) 0 0; }
    .cv-pm-item:nth-child(4)[b-v5tljx1ecl] { border-radius: 0 0 0 var(--g-radius-2xl); }
    .cv-pm-item:last-child[b-v5tljx1ecl] { border-radius: 0 0 var(--g-radius-2xl) 0; }
    .cv-ah-mcard-body[b-v5tljx1ecl] { grid-template-columns: 1fr 1fr; }
    .cv-ah-mchart[b-v5tljx1ecl] {
        width: 42px;
        height: 42px;
    }
    .cv-ah-mchart[b-v5tljx1ecl]::before {
        inset: 5px;
    }
    .cv-aj-mcard-body[b-v5tljx1ecl] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 375px) {
    .cv-doc-th-action[b-v5tljx1ecl] { text-align: right; padding-right: 25px; }
    .cv-name[b-v5tljx1ecl] { font-size: 1rem; }
    .cv-avatar[b-v5tljx1ecl] { width: 48px; height: 48px; }
    .cv-hero-metrics[b-v5tljx1ecl] { gap: 0; }
    .cv-metric-value[b-v5tljx1ecl] { font-size: 1rem; }
    .cv-card[b-v5tljx1ecl] { padding: var(--g-space-12); }
    .cv-pill[b-v5tljx1ecl] { font-size: var(--g-fs-xxs); padding: var(--g-space-4) var(--g-space-10); }
    .cv-meta-row[b-v5tljx1ecl] { gap: var(--g-space-8); }
    .cv-compact-right[b-v5tljx1ecl] { display: none; }
}

@media (max-width: 320px) {
    .cv-name[b-v5tljx1ecl] { font-size: var(--g-fs-body); }
    .cv-avatar[b-v5tljx1ecl] { width: 44px; height: 44px; }
    .cv-back-btn[b-v5tljx1ecl] { width: 28px; height: 28px; }
    .cv-card[b-v5tljx1ecl] { padding: var(--g-space-10); border-radius: var(--g-radius-lg); }
    .cv-metric[b-v5tljx1ecl] { padding: var(--g-space-4); }
    .cv-metric-value[b-v5tljx1ecl] { font-size: var(--g-fs-body, 0.875rem); }
    .cv-doc-mcard[b-v5tljx1ecl] { padding: var(--g-space-12); }
    .cv-compact-right[b-v5tljx1ecl] { display: none; }
}

/* ═══════ UPLOAD RESUME MODAL ═══════ */
.cv-upload-modal-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    animation: cvUploadFadeIn-b-v5tljx1ecl 0.2s ease-out;
}

@keyframes cvUploadFadeIn-b-v5tljx1ecl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cvUploadSlideDown-b-v5tljx1ecl {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.cv-upload-modal[b-v5tljx1ecl] {
    background: #fff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: cvUploadSlideDown-b-v5tljx1ecl 0.25s ease-out;
    overflow: hidden;
}

.cv-upload-modal-header[b-v5tljx1ecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--g-gray-200);
}

.cv-upload-modal-title[b-v5tljx1ecl] {
    font-size: var(--g-fs-lg, 1.05rem);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    margin: 0;
}

.cv-upload-close-btn[b-v5tljx1ecl] {
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-md, 8px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted, #94a3b8);
    display: grid;
    place-items: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.cv-upload-close-btn:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100, #f1f5f9);
    color: var(--g-gray-800, #334155);
}

.cv-upload-modal-body[b-v5tljx1ecl] {
    padding: 24px;
}

.cv-upload-dropzone[b-v5tljx1ecl] {
    border: 2px dashed var(--g-gray-300);
    border-radius: var(--g-radius-xl);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}

.cv-upload-dropzone:hover[b-v5tljx1ecl] {
    border-color: var(--g-brand, #2c7cff);
    background: rgba(44, 124, 255, 0.03);
}

.cv-upload-dropzone.drag-over[b-v5tljx1ecl] {
    border-color: var(--g-brand, #2c7cff);
    background: rgba(44, 124, 255, 0.08);
}

.cv-upload-dropzone-text[b-v5tljx1ecl] {
    margin: 0;
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
}

.cv-upload-dropzone-text strong[b-v5tljx1ecl] {
    color: var(--g-brand, #2c7cff);
}

.cv-upload-dropzone-hint[b-v5tljx1ecl] {
    margin: 0;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.cv-upload-file-info[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f0fdf4;
    border-radius: var(--g-radius-md);
}

.cv-upload-file-name[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    word-break: break-all;
}

.cv-upload-error[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #fef2f2;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: #ef4444;
}

.cv-upload-modal-footer[b-v5tljx1ecl] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--g-gray-200);
}

.cv-upload-continue-btn[b-v5tljx1ecl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    justify-content: center;
}

.cv-upload-continue-btn:disabled[b-v5tljx1ecl] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Upload Spinner (rotating icon) ── */
@keyframes cvSpinRotate-b-v5tljx1ecl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cv-upload-spinner[b-v5tljx1ecl] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cvSpinRotate-b-v5tljx1ecl 0.7s linear infinite;
    flex-shrink: 0;
}

/* ═══════ RESUME PREVIEW MODAL ═══════ */
.cv-resume-modal-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    padding: 16px;
}

.cv-resume-modal[b-v5tljx1ecl] {
    background: #fff;
    border-radius: 14px;
    width: min(1100px, 95vw);
    height: min(86vh, 860px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cv-resume-modal-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--g-gray-200);
}

.cv-resume-modal-title[b-v5tljx1ecl] {
    margin: 0;
    font-size: var(--g-fs-md, 1rem);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

.cv-resume-modal-actions[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cv-resume-modal-body[b-v5tljx1ecl] {
    flex: 1;
    min-height: 0;
    padding: 10px;
    background: #f8fafc;
}

.cv-resume-skeleton[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.cv-resume-skeleton-preview[b-v5tljx1ecl] {
    height: 420px;
    border-radius: 10px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 400% 100%;
    animation: cv-rj-shimmer-b-v5tljx1ecl 1.4s ease-in-out infinite;
}

/* ═══════ CONTACT INFO POPUP ═══════ */
.cv-contact-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 16px;
    animation: cvContactFadeIn-b-v5tljx1ecl 0.2s ease;
}

@keyframes cvContactFadeIn-b-v5tljx1ecl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cvContactScaleIn-b-v5tljx1ecl {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.cv-contact-popup[b-v5tljx1ecl] {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    animation: cvContactScaleIn-b-v5tljx1ecl 0.2s ease;
    
}

.cv-contact-header[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.cv-contact-name[b-v5tljx1ecl] {
    font-size: var(--g-fs-section-title);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
}

.cv-contact-close[b-v5tljx1ecl] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted);
    border-radius: var(--g-radius-md);
    transition: background 0.15s;
}
.cv-contact-close:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100);
    color: var(--g-gray-800);
}

.cv-contact-section-label[b-v5tljx1ecl] {
    display: block;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 8px 0 18px;
}

.cv-contact-items[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cv-contact-item[b-v5tljx1ecl] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cv-contact-copy-btn[b-v5tljx1ecl] {
    margin-left: auto;
    background: none;
    border: 1px solid var(--g-gray-200, #e2e8f0);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--g-text-muted, #64748b);
    transition: all 0.15s;
    align-self: center;
}
.cv-contact-copy-btn:hover[b-v5tljx1ecl] {
    background: var(--g-gray-100, #f1f5f9);
    color: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
}

.cv-contact-icon-box[b-v5tljx1ecl] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: var(--g-gray-100);
    border-radius: var(--g-radius-lg);
    display: grid;
    place-items: center;
}

.cv-contact-text[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.cv-contact-label[b-v5tljx1ecl] {
   font-size: var(--g-fs-xs);
    color: var(--g-text-heading);
    font-weight: 500;
}

.cv-contact-value[b-v5tljx1ecl] {
    font-size: var(--g-fs-xs);
    font-weight: 500;
    color: var(--g-gray-800);
    word-break: break-word;
}

.cv-contact-value-brand[b-v5tljx1ecl] {
    color: var(--g-brand);
}

.cv-contact-link[b-v5tljx1ecl] {
    color: var(--g-brand);
    text-decoration: none;
    font-size: var(--g-fs-sm);
    font-weight: 400;
    word-break: break-all;
    transition: color 0.15s;
}
.cv-contact-link:hover[b-v5tljx1ecl] {
    text-decoration: underline;
}

/* ID Verified Card */
.cv-contact-verified-card[b-v5tljx1ecl] {
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cv-contact-verified-icon[b-v5tljx1ecl] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 2px solid var(--g-brand);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    flex-shrink: 0;
    margin-top: 1px;
}

.cv-contact-verified-icon svg[b-v5tljx1ecl] {
    stroke: var(--g-brand);
}

.cv-contact-verified-body[b-v5tljx1ecl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cv-contact-verified-title[b-v5tljx1ecl] {
    font-size: var(--g-fs-body);
    font-weight: 700;
    color: var(--g-text-heading);
}

.cv-contact-verified-desc[b-v5tljx1ecl] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.cv-contact-verified-highlight[b-v5tljx1ecl] {
    color: var(--g-brand);
    font-weight: 700;
}

/* Inline DOCX viewer modal (Documents tab) */
.cv-doc-modal-overlay[b-v5tljx1ecl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 24px;
}
.cv-doc-modal[b-v5tljx1ecl] {
    background: #fff;
    border-radius: 12px;
    width: min(900px, 100%);
    height: min(90vh, 100%);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.cv-doc-modal-head[b-v5tljx1ecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex: 0 0 auto;
}
.cv-doc-modal-title[b-v5tljx1ecl] {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-doc-modal-close[b-v5tljx1ecl] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0 4px;
}
.cv-doc-modal-close:hover[b-v5tljx1ecl] { color: #0f172a; }
.cv-doc-modal-body[b-v5tljx1ecl] {
    flex: 1 1 auto;
    overflow: auto;
    background: #f1f5f9;
    padding: 16px;
}
/* /Components/Pages/Dashboard/Candidate/ReviewPipeline.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   ReviewPipeline – Scoped CSS
   Prefix: rp-
   ═══════════════════════════════════════════════════════ */

/* ── Loader ── */
.rp-loader-overlay[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
}

.rp-loader-spinner[b-cvkrxrumsx] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--g-primary, #2563eb);
    border-radius: 50%;
    animation: rp-spin-b-cvkrxrumsx 0.8s linear infinite;
}

@keyframes rp-spin-b-cvkrxrumsx {
    to { transform: rotate(360deg); }
}

.rp-loader-text[b-cvkrxrumsx] {
    font-size: var(--g-fs-sm, 0.875rem);
    color: var(--g-text-secondary, #64748b);
    font-weight: 500;
}

/* ── Page Shell ── */
/* ── Wrapper ── */
.rp-wrapper[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    height: calc(90vh - 60px);
    overflow: hidden;
}


@media (max-width: 1600px) {
    .rp-wrapper[b-cvkrxrumsx] {
        height: calc(90vh / 0.85 - 60px);
    }
}

.rp-page[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--g-bg, #f1f5f9);
    overflow: hidden;
    position: relative;
    border-top-left-radius: var(--g-radius-3xl);
}

.rp-sticky-footer[b-cvkrxrumsx] {
    /* Pinned to the viewport bottom (matches Job Creation / Candidate Preview action bars),
       offset for the sidebar so it spans the content area only. */
    position: fixed;
    bottom: 5px;
    left: 257px;
    right: 20px;
    z-index: 50;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-gray-200);
    padding: var(--g-space-20) var(--g-space-32);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
    border-radius: 6px;
    transition: left 0.3s ease;
}

/* ── Draft Saved Popup ── */
.rp-draft-overlay[b-cvkrxrumsx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9990;
    animation: rp-draft-fade-in-b-cvkrxrumsx 0.2s ease;
}
.rp-draft-success-popup[b-cvkrxrumsx] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 9991;
    width: 90%;
    max-width: 420px;
    animation: rp-draft-pop-in-b-cvkrxrumsx 0.25s ease;
}
.rp-draft-success-icon[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #22c55e;
    margin: 0 auto 20px;
}
.rp-draft-success-title[b-cvkrxrumsx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}
.rp-draft-success-msg[b-cvkrxrumsx] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}
.rp-draft-btn-outline[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 28px;
    border: 2px solid #1e293b;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.rp-draft-btn-outline:hover[b-cvkrxrumsx] {
    background: #f1f5f9;
}
.rp-draft-btn-primary[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 32px;
    border: none;
    border-radius: 8px;
    background: var(--sidebar-active-bg);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
 
}
.rp-draft-btn-primary:hover[b-cvkrxrumsx] {
    opacity: 0.92;
}
@keyframes rp-draft-fade-in-b-cvkrxrumsx {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rp-draft-pop-in-b-cvkrxrumsx {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Two-Panel Split ── */
.rp-split[b-cvkrxrumsx] {
    display: flex;
    flex: 1;
    overflow: visible;
    gap: 0;
    min-height: 0;
    position: relative;
}

.rp-viewer-col[b-cvkrxrumsx] {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: flex 0.35s ease, max-width 0.35s ease;
     border-top-left-radius: var(--g-radius-3xl);
}

.rp-viewer-col[b-cvkrxrumsx]::-webkit-scrollbar { width: 5px; }
.rp-viewer-col[b-cvkrxrumsx]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.rp-viewer-col[b-cvkrxrumsx]::-webkit-scrollbar-track { background: transparent; }

.rp-data-panel[b-cvkrxrumsx] {
    flex: 0 0 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex 0.35s ease, max-width 0.35s ease;
}

/* Expanded state: viewer hidden, data full width */
.rp-expanded .rp-viewer-col[b-cvkrxrumsx] {
    flex: 0 0 0%;
    max-width: 0%;
    padding: 0;
    overflow: hidden;
}

.rp-expanded .rp-data-panel[b-cvkrxrumsx] {
    flex: 0 0 100%;
    max-width: 100%;
}

.rp-expanded .rp-breadcrumb-bar[b-cvkrxrumsx] {
    border-top-left-radius: var(--g-radius-3xl);
    border-top-right-radius: var(--g-radius-3xl);
}

/* ── Toggle Panel Button ── */
.rp-toggle-panel[b-cvkrxrumsx] {
    position: relative;
    z-index: 25;
    align-self: center;
    flex-shrink: 0;
    margin: 0 -18px;
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-gray-200);
    cursor: pointer;
    box-shadow: var(--g-shadow-sm);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, width 0.2s, height 0.2s, border-radius 0.2s;
    padding: 0;
    line-height: 1;
}

/* Expand state: circle */
.rp-toggle-expand[b-cvkrxrumsx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* Collapse state: pill */
.rp-toggle-collapse[b-cvkrxrumsx] {
    width: 28px;
    height: 56px;
    border-radius: 8px;
}

.rp-toggle-panel:hover[b-cvkrxrumsx] {
    background: var(--g-gray-50);
    color: var(--g-gray-700);
    box-shadow: var(--g-shadow-md);
}

/* Toggle panel in expanded/collapse state — keep visible */
.rp-expanded .rp-toggle-panel[b-cvkrxrumsx] {
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    border-color: var(--g-gray-200);
    margin: 0;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
}

.rp-expanded .rp-toggle-panel:hover[b-cvkrxrumsx] {
    background: var(--g-gray-50);
    color: var(--g-gray-700);
}

/* ── Breadcrumb Bar ── */
.rp-breadcrumb-bar[b-cvkrxrumsx] {
           padding: var(--g-space-18) var(--g-space-24);
    flex-shrink: 0;
    background: var(--g-bg-card);
    z-index: 12;
    display: flex;
  
    width: 100%;
}

/* ── Data Body (flex container for form + sidebar) ── */
.rp-data-body[b-cvkrxrumsx] {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: var(--g-bg-page);
}

.rp-form-col[b-cvkrxrumsx] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--g-space-16) var(--g-space-20) 20px var(--g-space-20);
}

/* In expanded mode: form-col narrower, sidebar wider */
.rp-expanded .rp-form-col[b-cvkrxrumsx] {
       flex: 0 0 73%;
    max-width: 70%;
    padding: 20px 146px 20px;
}

/* Draft mode: form column takes full width, no sidebar */
.rp-draft-mode .rp-expanded .rp-form-col[b-cvkrxrumsx] {
    flex: 1;
    max-width: 100%;
}

/* Draft mode: hide viewer, data panel full width */
.rp-draft-mode .rp-viewer-col[b-cvkrxrumsx] {
    display: none;
}

.rp-draft-mode .rp-toggle-panel[b-cvkrxrumsx] {
    display: none;
}

.rp-draft-mode .rp-data-panel[b-cvkrxrumsx] {
    flex: 0 0 100%;
    max-width: 100%;
}

.rp-draft-mode .rp-form-col[b-cvkrxrumsx] {
    flex: 1;
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

/* Draft mode: remove card wrappers, show only content */
.rp-draft-mode .rp-card[b-cvkrxrumsx] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 18px;
}

.rp-draft-mode .rp-header-card[b-cvkrxrumsx] {
    display: none;
}

/* hide scrollbar on form column */
.rp-form-col[b-cvkrxrumsx]::-webkit-scrollbar { width: 5px; }
.rp-form-col[b-cvkrxrumsx]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.rp-form-col[b-cvkrxrumsx]::-webkit-scrollbar-track { background: transparent; }

/* ═══ SIDEBAR ═══ */
.rp-sidebar[b-cvkrxrumsx] {
   flex: 0 0 30%;
    max-width: 34%;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    overflow-y: auto;
    margin: 0 auto;
    padding: var(--g-space-16) 30px;
}

.rp-sidebar[b-cvkrxrumsx]::-webkit-scrollbar { width: 4px; }
.rp-sidebar[b-cvkrxrumsx]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: 3px; }

/* ═══ LEFT: Resume Viewer ═══ */
.rp-viewer-card[b-cvkrxrumsx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--g-bg-card);
  
    box-shadow: var(--g-shadow-xs);
    overflow: hidden;
}

.rp-viewer-toolbar[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    z-index: 10;
    border-top-left-radius: var(--g-radius-3xl);
}

.rp-viewer-file-info[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
      font-size: var(--g-fs-section-subtitle);
    font-weight: 700;
    color: #344767;
    min-width: 0;
}

.rp-viewer-filename[b-cvkrxrumsx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-viewer-controls[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rp-toolbar-btn[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #f3f4f6;
    background: #ffffff;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 8px;
    transition: box-shadow 0.2s, color 0.2s;
}

.rp-toolbar-btn:hover[b-cvkrxrumsx] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: #3b82f6;
}

.rp-zoom-level[b-cvkrxrumsx] {
    font-size: 12px;
    font-weight: 700;
    color: #344767;
    min-width: 36px;
    text-align: center;
    padding: 0 12px;
}

.rp-toolbar-divider[b-cvkrxrumsx] {
    width: 1px;
    height: 20px;
    background: var(--g-gray-200);
    margin: 0 var(--g-space-4);
}

.rp-zoom-group[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3f4f6;
    height: 32px;
    overflow: hidden;
}

.rp-zoom-btn[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 100%;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s;
}

.rp-zoom-btn:first-child[b-cvkrxrumsx] {
    border-right: 1px solid #e5e7eb;
}

.rp-zoom-btn:last-child[b-cvkrxrumsx] {
    border-left: 1px solid #e5e7eb;
}

.rp-zoom-btn:hover[b-cvkrxrumsx] {
    background: #f3f4f6;
}

.rp-viewer-body[b-cvkrxrumsx] {
    flex: 1;
    overflow: hidden;
    background: var(--g-bg-page);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--g-space-24);
}

.rp-resume-preview[b-cvkrxrumsx] {
    transform-origin: top center;
    transition: transform 0.15s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rp-resume-iframe[b-cvkrxrumsx] {
    width: 100%;
    height: 100%;
    border: none;
}

.rp-resume-placeholder[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    color: var(--g-text-muted);
    gap: var(--g-space-10);
    font-size: var(--g-fs-body);
}

/* ═══ CARDS ═══ */
.rp-card[b-cvkrxrumsx] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 22px var(--g-space-24);
    margin-bottom: 18px;
    box-shadow: var(--g-shadow-xs);
 
    margin: 0px auto 18px;
}



.rp-card-header[b-cvkrxrumsx] {
        display: flex;
    align-items: center;
    gap: var(--g-space-10);
    margin-bottom: var(--g-fs-sidejob-title);
    color: var(--g-brand);
    border-bottom: 1px solid var(--g-bg-page);
    padding-bottom: var(--g-fs-pipeline-title);
}

.rp-card-title[b-cvkrxrumsx] {
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    margin: 0;
    flex: 1;
    color: var(--g-brand);
    text-transform: uppercase;
}

.rp-assess-section-label[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    color: var(--g-brand);
    text-transform: uppercase;
    margin: 16px 0 8px;
}

/* ═══ HEADER CARD ═══ */
.rp-header-card[b-cvkrxrumsx] {
    flex-shrink: 0;
    padding: 1px 18px 17px 37px;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-border-card);
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Hide header card when expanded */
.rp-expanded .rp-header-card[b-cvkrxrumsx] {
    max-height: 0;
    opacity: 0;
    padding: 0 24px;
    pointer-events: none;
}

.rp-breadcrumb[b-cvkrxrumsx] {
  display: flex;
    align-items: center;
 
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    color: var(--g-text-muted);
    margin-bottom: 0;
    justify-content: space-between;
    width: 100%;
}

.rp-breadcrumb a[b-cvkrxrumsx] {
    color: var(--g-text-secondary);
    text-decoration: none;
    transition: color var(--g-transition);
}

.rp-breadcrumb a:hover[b-cvkrxrumsx] { color: var(--g-brand); }

.rp-breadcrumb-sep[b-cvkrxrumsx] { color: var(--g-gray-300); }
.rp-breadcrumb-active[b-cvkrxrumsx] { color: var(--g-brand);     margin-right: auto;}

.rp-header-date[b-cvkrxrumsx] {
       margin-right: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
    text-align: right;
   
    display: flex;
    align-items: center;
    gap: 4px;
}

.rp-header-card-top[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    margin-bottom: 0;
}

.rp-header-left-block[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Job+Client Avatar Structure */
.rp-job-avatar-wrap[b-cvkrxrumsx] {
    position: relative;
    flex-shrink: 0;
}

.rp-job-avatar-thumb[b-cvkrxrumsx] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.rp-job-avatar-thumb img[b-cvkrxrumsx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-job-avatar-badge[b-cvkrxrumsx] {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
     border: 2.5px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.rp-job-avatar-badge img[b-cvkrxrumsx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sidebar larger avatar */
.rp-sidebar .rp-job-avatar-wrap[b-cvkrxrumsx] {
    margin: 0 auto 10px;
}

.rp-sidebar .rp-job-avatar-thumb[b-cvkrxrumsx] {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    border: 2px solid var(--g-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    left: 41%;
}

.rp-sidebar .rp-job-avatar-badge[b-cvkrxrumsx] {
   width: 40px;
    height: 40px;
    bottom: -4px;
    /* right: 4px; */
    border: 2.5px solid var(--g-bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    position: absolute;
    left: 57%;
}

.rp-candidate-name[b-cvkrxrumsx] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    margin: 0 0 3px;
    color: var(--g-gray-800);
    line-height: var(--g-lh-tight);
}

.rp-candidate-company[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 var(--g-space-6);
    letter-spacing: .3px;
}

/* Match Circle (header) */
.rp-match-circle[b-cvkrxrumsx] {
       width: 88px;
    height: 88px;
    position: relative;
    flex-shrink: 0;
}

.rp-ring-svg[b-cvkrxrumsx] { width: 100%; height: 100%; transform: rotate(-90deg); }

.rp-match-ring-arc[b-cvkrxrumsx] {
    transition: stroke-dashoffset 0.6s ease;
}

.rp-ring-text[b-cvkrxrumsx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rp-ring-value[b-cvkrxrumsx] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-900);
    line-height: 1;
}

.rp-ring-label[b-cvkrxrumsx] {
    font-size: 7px;
    font-weight: var(--g-fw-bold);
    letter-spacing: 1px;
    color: var(--g-text-secondary);
}

/* Required Skills Row */
.rp-required-skills-row[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-12);
}

.rp-required-skills-label[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .6px;
    color: var(--g-text-muted);
    text-transform: uppercase;
}

/* Header Meta Row */
.rp-header-meta-row[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    margin-top: var(--g-space-4);
}

.rp-meta-item[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
}

.rp-meta-item svg[b-cvkrxrumsx] {
    opacity: 0.7;
}

.rp-meta-sep[b-cvkrxrumsx] { color: var(--g-gray-300); }

/* ═══ FORM GRID ═══ */
.rp-form-grid[b-cvkrxrumsx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-16) var(--g-space-20);
}

.rp-form-grid-3col[b-cvkrxrumsx] {
    grid-template-columns: 1fr 1fr 1fr;
}

.rp-field[b-cvkrxrumsx] { display: flex; flex-direction: column; gap: 5px; }
.rp-field-full[b-cvkrxrumsx] { grid-column: 1 / -1; }
.rp-field-spaced[b-cvkrxrumsx] { margin-bottom: 14px; }

.rp-label[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-600);
    display: flex;
    align-items: center;
    gap: 5px;
}

.rp-required[b-cvkrxrumsx] { color: var(--g-error); }

.rp-input[b-cvkrxrumsx],
.rp-select[b-cvkrxrumsx],
.rp-textarea[b-cvkrxrumsx] {
    width: 100%;
    padding: 9px var(--g-space-12);
    font-size: var(--g-fs-sm);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-section);
    color: var(--g-gray-900);
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.rp-input:focus[b-cvkrxrumsx],
.rp-select:focus[b-cvkrxrumsx],
.rp-textarea:focus[b-cvkrxrumsx] {
    border-color: var(--g-brand);
    box-shadow: var(--g-focus-shadow);
}

.rp-select[b-cvkrxrumsx] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.rp-textarea[b-cvkrxrumsx] { resize: vertical; min-height: 80px; }

.rp-input:disabled[b-cvkrxrumsx],
.rp-select:disabled[b-cvkrxrumsx] {
    background: var(--g-gray-100);
    color: var(--g-gray-400);
    border-color: var(--g-gray-200);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Validation errors */
.rp-input-error[b-cvkrxrumsx] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
}

/* ═══ NUMBER INPUT WITH SPINNER ═══ */
/* Native input[type=number] shows up/down arrows on hover by default */

.rp-field-error[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    color: var(--g-error);
    margin-top: 2px;
}

.rp-field-hint[b-cvkrxrumsx] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
    display: block;
}

/* Currency Input */
.rp-currency-input[b-cvkrxrumsx] {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-currency-symbol[b-cvkrxrumsx] {
    position: absolute;
    left: var(--g-space-12);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
}

.rp-input-currency[b-cvkrxrumsx] {
    padding-left: 28px;
}



/* ═══ PROFILE UPLOAD ═══ */
.rp-profile-upload[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--g-space-16);
background: var(--g-bg-section);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-20);
        border: 1px solid var(--g-border-card);
    position: relative;
}

.rp-avatar-wrap[b-cvkrxrumsx] { flex-shrink: 0; }

.rp-avatar[b-cvkrxrumsx] {
   width: 64px;
    height: 64px;
    border-radius: var(--g-radius-full);
    background: var(--g-bg-card);
    display: flex;
    border: 1px solid var(--g-border-card);
    align-items: center;
    justify-content: center;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background 0.2s;
}

.rp-avatar:hover[b-cvkrxrumsx] {
    background: #f3f4f6;
}

.rp-avatar .rp-avatar-icon-default[b-cvkrxrumsx] { display: block; }
.rp-avatar .rp-avatar-icon-hover[b-cvkrxrumsx] { display: none; }
.rp-avatar:hover .rp-avatar-icon-default[b-cvkrxrumsx] { display: none; }
.rp-avatar:hover .rp-avatar-icon-hover[b-cvkrxrumsx] { display: block; }

.rp-upload-info[b-cvkrxrumsx] { display: flex; flex-direction: column; gap: 1px; }

.rp-upload-title[b-cvkrxrumsx] { font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.rp-upload-hint[b-cvkrxrumsx] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.rp-browse-btn[b-cvkrxrumsx] {
        display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-8) 14px;
    border: 1px solid var(--g-brand);
    background: var(--g-bg-card);
    color: var(--g-brand);
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    margin-top: var(--g-space-10);
    transition: background var(--g-transition);
    width: 120px;
    box-shadow: var(--g-shadow-sm);
 
}

.rp-browse-btn:hover[b-cvkrxrumsx] { background: var(--g-indigo-bg);   }

/* ═══ ADD LINK (header) ═══ */
.rp-add-link[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-4) 0;
    border: none;
    background: none;
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    margin-left: auto;
    transition: opacity var(--g-transition);
}

.rp-add-link:hover[b-cvkrxrumsx] { opacity: 0.7; }

/* ═══ ASSESSMENT PROGRESS CARD ═══ */
.rp-assess-progress-card[b-cvkrxrumsx] {
         background: var(--g-bg-section);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-16) 14px;
    margin-bottom: 18px;
    border: 1px solid var(--bs-primary-bg-subtle);
}

.rp-assess-progress-row[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 10px;
  
}

.rp-assess-progress-icon[b-cvkrxrumsx] {
  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp-assess-progress-icon svg[b-cvkrxrumsx] {
    width: 15px;
    height: 15px;
}

.rp-assess-progress-info[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.rp-assess-progress-info strong[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs);
    color: var(--g-gray-900);
}

.rp-assess-progress-info span[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.rp-assess-progress-bottom[b-cvkrxrumsx] {
  display: flex;
    align-items: center;
    gap: 0px;
    width: 18%;
    margin: 0 auto;
}

.rp-progress-bar[b-cvkrxrumsx] {
      flex: 1;
    height: 8px;
    background: var(--g-gray-200);
    border-radius: 23px;
    overflow: hidden;
    min-width: 60px;
}

.rp-progress-fill[b-cvkrxrumsx] {
    height: 100%;
    background: var(--g-brand);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.rp-assess-pct[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ═══ PRE-SCREENING ═══ */
.rp-screening-row[b-cvkrxrumsx] {
 display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--g-space-16);
    background: var(--sidebar-bg);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-10);
    gap: var(--g-space-16);
    padding: var(--g-space-16) 14px;
  
    border: 1px solid var(--g-border-card);
}
.rp-screening-row:hover[b-cvkrxrumsx]{
      box-shadow: var(--g-shadow-sm);
}

.rp-screening-question[b-cvkrxrumsx] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-700);
    flex: 1;
}

.rp-toggle-group[b-cvkrxrumsx] {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    background-color: var(--g-bg-page);
    padding: 10px;
    border-radius: var(--g-radius-sm);
}

.rp-toggle-btn[b-cvkrxrumsx] {
       padding: 7px var(--g-space-16);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    background: var(--g-bg-section);
    color: var(--g-text-secondary);
    border: none;
    cursor: pointer;
    transition: all var(--g-transition);
    box-shadow: var(--bs-box-shadow-sm);
}

.rp-toggle-btn:first-child[b-cvkrxrumsx] { border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm); }
.rp-toggle-btn:last-child[b-cvkrxrumsx] { border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0; border-left: none; }

.rp-toggle-active[b-cvkrxrumsx] {
     background: var(--sidebar-bg);
    color: var(--g-brand);
    border-color: var(--g-brand);
}

.rp-toggle-active + .rp-toggle-btn[b-cvkrxrumsx] { border-left-color: var(--g-brand); }

/* ═══ TIMELINE ═══ */
.rp-timeline[b-cvkrxrumsx] {
    position: relative;
    padding-left: var(--g-space-24);
}

.rp-timeline-item[b-cvkrxrumsx] {
    position: relative;
    padding-bottom: var(--g-space-24);
}

.rp-timeline-item:last-child[b-cvkrxrumsx] { padding-bottom: 0; }

/* Connector line between dots — only between items */
.rp-timeline-item[b-cvkrxrumsx]::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--g-gray-200);
    border-radius: 1px;
}

/* No line below the last item */
.rp-timeline-item:last-child[b-cvkrxrumsx]::before {
    display: none;
}

.rp-timeline-dot[b-cvkrxrumsx] {
    position: absolute;
    left: -24px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: var(--g-radius-full);
    border: 2.5px solid var(--g-gray-300);
    background: var(--g-bg-card);
    z-index: 2;
    transition: all 0.2s ease;
}

.rp-timeline-dot.blue[b-cvkrxrumsx] {
    background: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 4px rgba(0,111,249,.12);
}

.rp-timeline-dot.dark[b-cvkrxrumsx] {
    background: #334155;
    border-color: var(--g-text-body, #334155);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

.rp-timeline-content[b-cvkrxrumsx] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-lg);
    padding: 14px var(--g-space-16);
}

.rp-timeline-head[b-cvkrxrumsx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-12);
}

.rp-timeline-title[b-cvkrxrumsx] {
        font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-900);
    margin: 0 0 2px;
}

.rp-timeline-company[b-cvkrxrumsx] {
   font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    margin: 0 0 2px;

}

.rp-timeline-date[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
}

.rp-timeline-actions[b-cvkrxrumsx] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.rp-timeline-content:hover .rp-timeline-actions[b-cvkrxrumsx] { opacity: 1; }

.rp-icon-btn[b-cvkrxrumsx] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
    box-shadow: var(--g-shadow-xs);
}

.rp-icon-btn:hover[b-cvkrxrumsx] { background: var(--g-indigo-bg); color: var(--g-brand); }
.rp-icon-btn-danger:hover[b-cvkrxrumsx] { background: var(--g-error-bg); color: var(--g-error); }

/* ═══ EDIT FORM (inline experience) ═══ */
.rp-edit-form[b-cvkrxrumsx] {
    background: var(--g-indigo-bg);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: 18px var(--g-space-20);
    box-shadow: var(--g-shadow-sm);
}

.rp-edit-form-header[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rp-edit-form-title[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    color: var(--g-brand);
    margin: 0;
}

.rp-edit-form-close[b-cvkrxrumsx] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rp-edit-form-close:hover[b-cvkrxrumsx] { background: var(--g-gray-200); }

.rp-edit-form-actions[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--g-space-16);
    gap: var(--g-space-10);
}

.rp-edit-form-actions-right[b-cvkrxrumsx] { display: flex; gap: var(--g-space-8); }

.rp-btn-delete[b-cvkrxrumsx] {
    padding: 7px var(--g-space-16);
    border: 1px solid var(--g-error-border);
    background: var(--g-error-bg);
    color: var(--g-error);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-btn-delete:hover[b-cvkrxrumsx] { background: var(--g-error-border); }

.rp-btn-clear[b-cvkrxrumsx] {
    padding: 7px var(--g-space-16);
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
}

.rp-btn-clear:hover[b-cvkrxrumsx] { background: var(--g-gray-50); }

.rp-btn-save[b-cvkrxrumsx] {
    padding: 7px 18px;
    border: none;
   background:var(--sidebar-active-bg);
    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-btn-save:hover[b-cvkrxrumsx] {   background: var(--sidebar-active-bg) }

/* ═══ EXTRACTED SKILLS ═══ */
.rp-skills-grid[b-cvkrxrumsx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-10);
    align-items: center;
}

.rp-skill-pill[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 14px;
    border-radius: var(--g-radius-full);
    background: #f0f5ff;
    color: var(--g-gray-700, #334155);
        font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    border: 1.5px solid #bfdbfe;
    cursor: pointer;
    transition: background var(--g-transition), box-shadow var(--g-transition);
}

.rp-skill-pill:hover[b-cvkrxrumsx] {
    background: #e0edff;
    box-shadow: var(--g-shadow-xs);
}

.rp-skill-pill-name[b-cvkrxrumsx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8ch;
    color: var(--g-gray-700, #334155);
}

.rp-skill-pill-yrs[b-cvkrxrumsx] {
       font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand, #2c7cff);
    white-space: nowrap;
    padding: 2px 8px;
    background: #fff;
    border-radius: var(--g-radius-full, 9999px);
}

.rp-skill-pill-remove[b-cvkrxrumsx] {
  
    border: none;
    background: none !important;
    color: var(--g-brand);
    border-radius: var(--g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--g-transition);
    margin-left: 2px;
}

.rp-skill-pill-remove:hover[b-cvkrxrumsx] { background: rgba(0,111,249,.2); }

.rp-skill-pill-danger[b-cvkrxrumsx] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.rp-skill-pill-danger:hover[b-cvkrxrumsx] {
    background: #fee2e2;
}

.rp-skill-pill-danger .rp-skill-pill-yrs[b-cvkrxrumsx] {
    color: #ef4444;
}

.rp-skill-pill-danger .rp-skill-pill-remove[b-cvkrxrumsx] {
    background: rgba(220, 38, 38, .1);
    color: #dc2626;
}

.rp-skill-pill-danger .rp-skill-pill-remove:hover[b-cvkrxrumsx] {
    background: rgba(220, 38, 38, .2);
}

.rp-skill-pill-success[b-cvkrxrumsx] {
        background: var(--g-indigo-bg);
    border-color: var(--g-indigo-border);
    color: var(--g-indigo-dark);
}

.rp-skill-pill-success:hover[b-cvkrxrumsx] {
    background: var(--g-indigo-bg-hover);
}

.rp-skill-pill-success .g-skill-pill-num[b-cvkrxrumsx] {
    color: var(--g-indigo-dark);
}

.rp-add-skill-inline[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-6) 14px;
    border: 1px dashed var(--g-gray-300);
    background: transparent;
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: border-color var(--g-transition), color var(--g-transition);
}

.rp-add-skill-inline:hover[b-cvkrxrumsx] {
    border-color: var(--g-brand);
    color: var(--g-brand);
}

/* ═══ EMPTY STATE ═══ */
.rp-empty-state[b-cvkrxrumsx] {
    text-align: center;
    padding: var(--g-space-24) var(--g-space-16);
    color: var(--g-text-muted);
    font-size: var(--g-fs-sm);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
}

/* ═══ DOCUMENT ROWS ═══ */
.rp-doc-row[b-cvkrxrumsx] {
      display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-20) var(--g-space-16);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-10);
    gap: var(--g-space-12);
    border: 1px solid var(--bs-border-color);
}

.rp-doc-info[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    flex: 1;
    min-width: 0;
}

.rp-doc-icon[b-cvkrxrumsx] {
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-md);
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.rp-doc-text[b-cvkrxrumsx] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-doc-name[b-cvkrxrumsx] { font-size: var(--g-fs-sm); color: var(--g-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-doc-name-row[b-cvkrxrumsx] { display: flex; align-items: center; gap: var(--g-space-8); }
.rp-doc-rename-btn[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    cursor: pointer;
    padding: 2px var(--g-space-4);
    border-radius: var(--g-radius-xs);
    transition: color var(--g-transition), background var(--g-transition);
}
.rp-doc-rename-btn:hover[b-cvkrxrumsx] { color: var(--g-brand); background: var(--g-gray-100); }
.rp-doc-rename-input[b-cvkrxrumsx] { font-size: var(--g-fs-sm); padding: var(--g-space-4) var(--g-space-8); max-width: 200px; }
.rp-doc-status[b-cvkrxrumsx] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.rp-doc-actions[b-cvkrxrumsx] { display: flex; align-items: center; gap: var(--g-space-6); }

.rp-doc-upload-btn[b-cvkrxrumsx] {
   display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-6) 14px;
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: border-color var(--g-transition);
    flex-shrink: 0;
}

.rp-doc-upload-btn:hover[b-cvkrxrumsx] { border-color: var(--g-brand); color: var(--g-brand); }

.rp-doc-delete-btn[b-cvkrxrumsx] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--g-text-muted);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--g-transition), color var(--g-transition);
}

.rp-doc-row-hoverable:hover .rp-doc-delete-btn[b-cvkrxrumsx] { opacity: 1; }
.rp-doc-delete-btn:hover[b-cvkrxrumsx] { color: var(--g-error); }

/* ═══ SIDEBAR CARDS ═══ */

.rp-sb-card[b-cvkrxrumsx] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: var(--g-space-24) var(--g-space-20);
    box-shadow: var(--g-shadow-xs);
    text-align: center;
}

.rp-sb-card-left[b-cvkrxrumsx] { text-align: left; }

.rp-sb-name[b-cvkrxrumsx] {
        font-size: var(--g-space-20);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-900);
    margin: 0 0 7px;
}

.rp-sb-role[b-cvkrxrumsx] {
    font-size: var(--g-space-12);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    letter-spacing: 0.125em;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
}

/* ── Sidebar Divider ── */
.rp-sb-divider[b-cvkrxrumsx] {
  width: 100%;
    border: none;
    height: 1px;
    background: var(--g-gray-300);
    margin: var(--g-space-10) 0 var(--g-space-12);
}

/* ── Sidebar Status ── */
.rp-sb-status-label[b-cvkrxrumsx] {
        font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-brand);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--g-space-8);
}

.rp-sb-status-grid[b-cvkrxrumsx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    margin-bottom: var(--g-space-8);
}

.rp-sb-status-item[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--g-space-8) var(--g-space-4);
    position: relative;
}

.rp-sb-status-item:not(:last-child)[b-cvkrxrumsx]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--g-gray-200);
}

.rp-sb-status-num[b-cvkrxrumsx] {
        font-size: var(--g-fs-job-status);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-800);
    line-height: 1;
}

.rp-sb-status-brand[b-cvkrxrumsx] { color: var(--g-brand); }

.rp-sb-status-text[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rp-sb-match-ring[b-cvkrxrumsx] {
    width: 140px;
    height: 140px;
    position: relative;
    margin: var(--g-space-16) auto;
}

.rp-sb-ring-svg[b-cvkrxrumsx] { width: 100%; height: 100%; transform: rotate(-90deg); }

.rp-sb-ring-arc[b-cvkrxrumsx] { transition: stroke-dashoffset 0.6s ease; }

.rp-sb-ring-text[b-cvkrxrumsx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rp-sb-ring-value[b-cvkrxrumsx] {     font-size: var(--g-fs-job-status);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-900);
    line-height: 1; }
.rp-sb-ring-label[b-cvkrxrumsx] {     font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: 0.170em;
    color: var(--g-text-muted);
    margin-top: 2px; }

/* Remarks */
.rp-sb-remarks-card[b-cvkrxrumsx] {
    background: var(--g-gray-50);
    border-radius: var(--g-radius-2xl);
    border: 1px solid var(--g-brand-bg);
   
    padding: 18px var(--g-space-20);
    text-align: center;
}

.rp-sb-card-title[b-cvkrxrumsx] {
      font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .6px;
    color: var(--g-brand);
    margin: 0 0 var(--g-space-10);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--g-space-4);
    text-transform: uppercase;
}

.rp-sb-text[b-cvkrxrumsx] {
   font-size: var(--g-space-12);
    color: var(--g-gray-800);
    line-height: 1.7;
    margin: 0;

    text-align: center;
}

/* Sidebar Rows */
.rp-sb-rows[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-10);
}

.rp-sb-row[b-cvkrxrumsx] {
     display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--g-space-12);
    color: var(--g-gray-600);
    padding: var(--g-space-6) 0;
    border-bottom: 1px solid var(--g-gray-50);
}

.rp-sb-row:last-child[b-cvkrxrumsx] { border-bottom: none; }

.rp-sb-row-left[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    color: var(--g-text-secondary);
}

.rp-sb-row strong[b-cvkrxrumsx] { font-weight: var(--g-fw-semibold); color: var(--g-gray-900); }
.rp-sb-brand[b-cvkrxrumsx] { color: var(--g-brand) !important; }

.rp-sb-skill-yr[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
}

/* ═══ MODAL ═══ */
/* ═══ PHOTO ID VERIFICATION ═══ */
.rp-photo-id-label[b-cvkrxrumsx] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    padding: var(--g-space-16);
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-gray-200);
    background: var(--g-gray-50);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-photo-id-label:hover[b-cvkrxrumsx] {
    background: var(--g-gray-100);
}

.rp-photo-id-checkbox[b-cvkrxrumsx] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--g-radius-xs);
    border: 1.5px solid var(--g-gray-300);
    accent-color: var(--g-brand, #2c7cff);
    cursor: pointer;
    flex-shrink: 0;
}

.rp-photo-id-text[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    line-height: 1.4;
    margin: 0;
}

.rp-photo-id-hint[b-cvkrxrumsx] {
    font-size: var(--g-fs-xxs);
    color: var(--g-brand);
    margin: var(--g-space-4) 0 0;
    line-height: 1.4;
}

/* ═══ ADD SKILL MODAL ═══ */
.rp-modal-overlay[b-cvkrxrumsx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
 z-index: 1200;
    backdrop-filter: blur(2px);
}

.rp-modal[b-cvkrxrumsx] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 28px 28px var(--g-space-24);
    width: 90%;
    max-width: 420px;
    box-shadow: var(--g-shadow-lg);
}

.rp-modal-header[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--g-space-20);
}

.rp-modal-title[b-cvkrxrumsx] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.rp-modal-close[b-cvkrxrumsx] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rp-modal-close:hover[b-cvkrxrumsx] { background: var(--g-gray-200); }

.rp-modal-actions[b-cvkrxrumsx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--g-space-10);
    margin-top: var(--g-space-20);
}

.rp-modal-btn-clear[b-cvkrxrumsx] {
    padding: 0 var(--g-space-20);
    height: 30px;
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    cursor: pointer;
}

.rp-modal-btn-clear:hover[b-cvkrxrumsx] { background: var(--g-gray-50); }

.rp-modal-btn-add[b-cvkrxrumsx] {
    padding: 0 var(--g-space-20);
    height: 30px;
    border: none;
    background: var(--g-brand);
    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-modal-btn-add:hover[b-cvkrxrumsx] { background: color-mix(in srgb, var(--g-brand, #2c7cff) 85%, #000); }

.rp-input-readonly[b-cvkrxrumsx] {
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    cursor: not-allowed;
    border-color: var(--g-gray-200);
}

/* ═══ STICKY FOOTER ═══ */

.rp-footer-inner[b-cvkrxrumsx] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--g-space-10);
    max-width: 1600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Footer buttons using global btn conventions */
[b-cvkrxrumsx] .g-btn-cancel {
    padding: var(--g-space-8) var(--g-space-20);
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
    height: 30px;

}

[b-cvkrxrumsx] .g-btn-cancel:hover { background: var(--g-gray-50); }

[b-cvkrxrumsx] .g-btn-outline {
  padding: var(--g-space-8) var(--g-space-20);
    border: 1px solid var(--g-sidebar-active-bg);
    background:var(--sidebar-active-bg);
    color: var(--g-bg-card);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
    height: 30px;
    display: flex;
    align-items: center;
}

[b-cvkrxrumsx] .g-btn-outline:hover { background: var(--sidebar-active-bg); }

[b-cvkrxrumsx] .g-btn-primary {

    background:var(--sidebar-active-bg);
   padding: var(--g-space-8) 22px;
    border: none;

    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    transition: background var(--g-transition);
    height: 30px;
}



/* ═══ RESPONSIVE ═══ */

/* ── 1440px and below ── */
@media (max-width: 1440px) {
    .rp-expanded .rp-form-col[b-cvkrxrumsx] {
       flex: 0 0 73%;
    max-width: 70%;
       padding: 20px 27px 20px;
}
.rp-job-avatar-wrap[b-cvkrxrumsx] {
        position: relative;
    left: -9%;
}
.rp-sb-name[b-cvkrxrumsx] {
        font-size: var(--g-space-16);
}
.rp-sb-role[b-cvkrxrumsx] {
    font-size: var(--g-space-10);
}
    .rp-card[b-cvkrxrumsx] {
        width: 100%;
        max-width: 790px;
    }
    .rp-sidebar[b-cvkrxrumsx] {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .rp-form-col[b-cvkrxrumsx] {
        padding: var(--g-space-16) var(--g-space-16) 80px var(--g-space-16);
    }
    .rp-viewer-body[b-cvkrxrumsx] {
         padding: var(--g-space-20);
    }
    .rp-sticky-footer[b-cvkrxrumsx]{
        padding: var(--g-space-16) var(--g-space-32);
    }
    .rp-zoom-group[b-cvkrxrumsx] {
    overflow:visible;
    }

}

/* ── 1200px and below ── */
@media (max-width: 1200px) {
    .rp-sidebar[b-cvkrxrumsx] { flex: 0 0 38%; max-width: 38%; }
    .rp-expanded .rp-form-col[b-cvkrxrumsx] { flex: 0 0 62%; max-width: 62%; }
    .rp-card[b-cvkrxrumsx] {
        width: 100%;
        max-width: 100%;
    }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
    .rp-split[b-cvkrxrumsx] {
        flex-direction: column;
    }

    /* Hide resume viewer */
    .rp-viewer-col[b-cvkrxrumsx],
    .rp-expanded .rp-viewer-col[b-cvkrxrumsx] {
        display: none;
    }

    .rp-data-panel[b-cvkrxrumsx],
    .rp-expanded .rp-data-panel[b-cvkrxrumsx] {
        flex: 1 1 auto;
        max-width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .rp-data-body[b-cvkrxrumsx] {
        flex-direction: column;
        padding: 0;
        min-height: 0;
        overflow-y: auto;
    }

    .rp-form-col[b-cvkrxrumsx] {
        overflow-y: visible;
        flex: none;
        min-height: auto;
        padding: 14px 14px 80px;
    }

    .rp-expanded .rp-form-col[b-cvkrxrumsx] {
        flex: none;
        max-width: 100%;
    }

    .rp-sidebar[b-cvkrxrumsx] {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding: 0 14px 80px;
    }

    .rp-toggle-panel[b-cvkrxrumsx] { display: none; }

    .rp-card[b-cvkrxrumsx] {
        width: 100%;
        max-width: 100%;
    }

    .rp-header-card[b-cvkrxrumsx] {
        padding: 1px 14px 14px 14px;
    }

    .rp-breadcrumb-bar[b-cvkrxrumsx] {
        padding: 12px 14px 3px 14px;
    }

    .rp-sticky-footer[b-cvkrxrumsx] {
        padding: var(--g-space-10) var(--g-space-16);
    }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
    .rp-sidebar[b-cvkrxrumsx] { display: none; }
    .rp-doc-text[b-cvkrxrumsx]{max-width:210px;}
    .rp-toolbar-btn[b-cvkrxrumsx]{display:none;}

    .rp-data-body[b-cvkrxrumsx] {
        padding: 0;
        gap: 12px;
    }

    .rp-form-col[b-cvkrxrumsx] {
        padding: 10px 10px 80px;
    }

    .rp-expanded .rp-form-col[b-cvkrxrumsx] {
        flex: none;
        max-width: 100%;
    }

    .rp-card[b-cvkrxrumsx] {
        padding: 18px var(--g-space-16);
        border-radius: var(--g-radius-xl);
    }

    .rp-header-card-top[b-cvkrxrumsx] {
        gap: var(--g-space-12);
    }

    .rp-match-circle[b-cvkrxrumsx] {
        width: 70px;
        height: 70px;
    }

    .rp-ring-value[b-cvkrxrumsx] {
        font-size: var(--g-fs-sm);
    }

    .rp-ring-label[b-cvkrxrumsx] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }

    .rp-job-avatar-thumb[b-cvkrxrumsx] {
        width: 52px;
        height: 52px;
        border-radius: var(--g-radius-2xl);
    }

    .rp-job-avatar-badge[b-cvkrxrumsx] {
        width: 24px;
        height: 24px;
    }

    .rp-candidate-name[b-cvkrxrumsx] {
        font-size: var(--g-fs-sm);
    }

    .rp-breadcrumb-bar[b-cvkrxrumsx] {
        padding: var(--g-space-10) var(--g-space-10) 3px var(--g-space-10);
    }

    .rp-header-card[b-cvkrxrumsx] {
        padding: 1px var(--g-space-10) var(--g-space-12) var(--g-space-10);
    }

    .rp-form-grid[b-cvkrxrumsx] {
        gap: var(--g-space-12) var(--g-space-16);
    }

    .rp-sticky-footer[b-cvkrxrumsx] {
        padding: var(--g-space-16) var(--g-space-12);
        display: flex;
        /* Sidebar hidden at this breakpoint — span full width, stay pinned to bottom. */
        left: 17px;
        right: 21px;
        align-items: center;
        justify-content: flex-end;
    }
    .rp-footer-inner[b-cvkrxrumsx]{margin: 0;}
}

/* ── 425px and below ── */
@media (max-width: 425px) {
 
    .rp-form-col[b-cvkrxrumsx] {
        padding: 8px 8px 80px;
    }

    .rp-form-grid[b-cvkrxrumsx] {
        grid-template-columns: 1fr;
        gap: var(--g-space-10);
    }

    .rp-card[b-cvkrxrumsx] {
        padding: 14px var(--g-space-12);
        border-radius: var(--g-radius-lg);
        margin-bottom: var(--g-space-12);
    }

    .rp-header-card-top[b-cvkrxrumsx] {
        flex-direction: row;
        align-items: flex-start;
    }

    .rp-match-circle[b-cvkrxrumsx] {
        align-self: flex-start;
        width: 64px;
        height: 64px;
    }

    .rp-screening-row[b-cvkrxrumsx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-space-10);
        padding: var(--g-space-12);
    }

    .rp-assess-progress-row[b-cvkrxrumsx] {
        flex-wrap: wrap;
    }

    .rp-assess-progress-bottom[b-cvkrxrumsx] {
        width: 100%;
    }

    .rp-required-skills-row[b-cvkrxrumsx] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--g-space-6);
    }

    .rp-header-meta-row[b-cvkrxrumsx] {
        flex-wrap: wrap;
        gap: var(--g-space-6);
        font-size: var(--g-fs-xxs);
    }

    .rp-breadcrumb-bar[b-cvkrxrumsx] {
        padding: var(--g-space-8) var(--g-space-8) 3px var(--g-space-8);
    }

    .rp-header-card[b-cvkrxrumsx] {
        padding: 1px var(--g-space-8) var(--g-space-10) var(--g-space-8);
    }

    .rp-profile-upload[b-cvkrxrumsx] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-space-12);
        padding: var(--g-space-12);
    }

    .rp-sticky-footer[b-cvkrxrumsx] {
        padding: var(--g-space-8) var(--g-space-10);
        display: flex;
        left: 16px;
        right: 16px;
        align-items: center;
        justify-content: flex-end;
    }

    .rp-footer-inner[b-cvkrxrumsx] {
        justify-content: stretch;
        gap: var(--g-space-8);
    }

    [b-cvkrxrumsx] .g-btn-cancel,
    [b-cvkrxrumsx] .g-btn-outline,
    [b-cvkrxrumsx] .g-btn-primary {
        flex: 1;
        justify-content: center;
     
        font-size: 13px;
    }

    .rp-job-avatar-thumb[b-cvkrxrumsx] {
        width: 48px;
        height: 48px;
        border-radius: var(--g-radius-xl);
    }

    .rp-job-avatar-badge[b-cvkrxrumsx] {
        width: 22px;
        height: 22px;
    }

    .rp-candidate-name[b-cvkrxrumsx] {
        font-size: var(--g-fs-xs);
    }

    .rp-candidate-company[b-cvkrxrumsx] {
        font-size: var(--g-fs-xxs);
    }

    .rp-sb-card[b-cvkrxrumsx] {
        padding: 18px 14px;
    }

    .rp-timeline-content[b-cvkrxrumsx] {
        padding: var(--g-space-12);
    }
}

/* ── 640px (form grid collapse) ── */
@media (max-width: 640px) {
    .rp-form-grid[b-cvkrxrumsx] { grid-template-columns: 1fr; }
    .rp-form-grid-3col[b-cvkrxrumsx] { grid-template-columns: 1fr; }

    .rp-sticky-footer[b-cvkrxrumsx] {
        padding: var(--g-space-10) var(--g-space-12);
    }
    .rp-footer-inner[b-cvkrxrumsx] {
        justify-content: stretch;
        gap: var(--g-space-8);
    }
    [b-cvkrxrumsx] .g-btn-cancel,
    [b-cvkrxrumsx] .g-btn-outline,
    [b-cvkrxrumsx] .g-btn-primary {
        flex: 1;
        justify-content: center;
        padding: var(--g-space-8) var(--g-space-12);
        font-size: var(--g-fs-xs);
    }
}

/* ── Document Viewer Modal ── */
.rp-doc-viewer-overlay[b-cvkrxrumsx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-doc-viewer-modal[b-cvkrxrumsx] {
    background: #fff;
    border-radius: 12px;
    width: 80vw;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.rp-doc-viewer-header[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--g-gray-50);
    border-bottom: 1px solid var(--g-gray-200);
}
.rp-doc-viewer-title[b-cvkrxrumsx] {
    font-weight: 600;
    font-size: var(--g-fs-body);
    color: var(--g-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rp-doc-viewer-close[b-cvkrxrumsx] {
    background: none;
    border: none;
    font-size: var(--g-fs-display);
    cursor: pointer;
    color: var(--g-text-secondary);
    line-height: 1;
    padding: 0 4px;
}
.rp-doc-viewer-close:hover[b-cvkrxrumsx] {
    color: var(--g-text-heading);
}
.rp-doc-viewer-body[b-cvkrxrumsx] {
    flex: 1;
    overflow: hidden;
}

/* ═══ VIEW RESUME BUTTON (mobile ≤1024px) ═══ */
.rp-view-resume-btn[b-cvkrxrumsx] {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--g-brand, #2c7cff);
    background: var(--g-bg-card);
    border: 1px solid var(--g-brand, #2c7cff);
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.rp-view-resume-btn:hover[b-cvkrxrumsx] {
    background: var(--g-brand, #2c7cff);
    color: #fff;
}

@media (max-width: 1024px) {
    .rp-view-resume-btn[b-cvkrxrumsx] {
        display: inline-flex;
    }
}

/* ═══ RESUME POPUP OVERLAY ═══ */
.rp-resume-popup-overlay[b-cvkrxrumsx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rp-resume-popup[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 900px;
    max-height: 95vh;
    background: var(--g-bg-card, #fff);
    border-radius: var(--g-radius-xl, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.rp-resume-popup-header[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.rp-resume-popup-title[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-text-primary);
}

.rp-resume-popup-close[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--g-gray-100);
    border-radius: 50%;
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background 0.2s, color 0.2s;
}
.rp-resume-popup-close:hover[b-cvkrxrumsx] {
    background: var(--g-danger, #ef4444);
    color: #fff;
}

.rp-resume-popup-body[b-cvkrxrumsx] {
    flex: 1;
    overflow: hidden;
}

/* ═══ SKILL SEARCH DROPDOWN ═══ */
.rp-skill-search-wrap[b-cvkrxrumsx] {
    position: relative;
}

.rp-skill-dropdown[b-cvkrxrumsx] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    box-shadow: var(--g-shadow-md);
    z-index: 100;
    margin-top: 2px;
}

.rp-skill-dropdown-item[b-cvkrxrumsx] {
    padding: 8px 12px;
    font-size: var(--g-fs-sm);
    cursor: pointer;
    transition: background .15s;
}

.rp-skill-dropdown-item:hover[b-cvkrxrumsx] {
    background: var(--g-indigo-bg);
    color: var(--g-brand);
}

/* ═══ DATE RANGE ROW ═══ */
.rp-date-range-row[b-cvkrxrumsx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.rp-date-picker-wrap[b-cvkrxrumsx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-date-range-combined[b-cvkrxrumsx] {
    position: relative;
}

.rp-date-range-input[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: var(--g-radius-md, 6px);
    background: var(--g-bg-card, #fff);
    cursor: pointer;
    transition: border-color 0.15s;
}

.rp-date-range-input:hover[b-cvkrxrumsx] {
    border-color: var(--g-gray-300, #cbd5e1);
}

.rp-date-range-text[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs, 0.8125rem);
    color: var(--g-text-heading, #1e293b);
    white-space: nowrap;
}

.rp-date-range-separator[b-cvkrxrumsx] {
    color: var(--g-text-muted, #94a3b8);
    font-size: var(--g-fs-xs);
    flex-shrink: 0;
}

.rp-sub-label[b-cvkrxrumsx] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Certification Issue Date Picker ── */
.rp-deadline-picker-wrap[b-cvkrxrumsx] {
    position: relative;
}

.rp-deadline-picker-wrap .rp-datepicker[b-cvkrxrumsx] {
    left: auto;
    right: 0;
}

.rp-deadline-btn[b-cvkrxrumsx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: var(--g-bg-card, #fff);
    color: var(--g-text-secondary, #475569);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    min-height: 38px;
}

.rp-deadline-btn:hover[b-cvkrxrumsx] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 2px rgba(44, 124, 255, 0.08);
}

/* ── Dual Date Picker Popup ── */
.rp-datepicker[b-cvkrxrumsx] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: var(--g-bg-card, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    z-index: 200;
    padding: 16px;
    margin-top: 4px;
}

.rp-datepicker-dual[b-cvkrxrumsx] {
    width: 580px;
}

.rp-cal-panel-header[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 10px;
}

.rp-cal-select[b-cvkrxrumsx] {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading, #1e293b);
    background: var(--g-bg-card, #fff);
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.rp-cal-select:focus[b-cvkrxrumsx] {
    border-color: var(--g-brand, #2c7cff);
}

.rp-datepicker-arrow[b-cvkrxrumsx] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-secondary, #475569);
    transition: background 0.15s;
    padding: 0;
}

.rp-datepicker-arrow:hover[b-cvkrxrumsx] {
    background: #f1f5f9;
}

.rp-datepicker-month[b-cvkrxrumsx] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-text-heading, #1e293b);
    white-space: nowrap;
}

.rp-dual-panels[b-cvkrxrumsx] {
    display: flex;
    gap: 0;
}

.rp-calendar-panel[b-cvkrxrumsx] {
    flex: 1;
}

.rp-calendar-divider[b-cvkrxrumsx] {
    width: 1px;
    background: #e2e8f0;
    margin: 0 12px;
}

.rp-datepicker-weekdays[b-cvkrxrumsx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    margin-bottom: 6px;
}

.rp-datepicker-days[b-cvkrxrumsx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.rp-day-empty[b-cvkrxrumsx] {
    width: 34px;
    height: 34px;
}

.rp-day-btn[b-cvkrxrumsx] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--g-text-body, #334155);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.rp-day-btn:hover[b-cvkrxrumsx] {
    background: #f1f5f9;
}

.rp-day-btn.today[b-cvkrxrumsx] {
    background: #eff6ff;
    color: var(--g-brand, #2c7cff);
    box-shadow: inset 0 0 0 1.5px var(--g-brand, #2c7cff);
}

.rp-day-btn.selected[b-cvkrxrumsx] {
    background: #1e293b;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.rp-day-btn.in-range[b-cvkrxrumsx] {
    background: #dbeafe;
    color: var(--g-brand, #2c7cff);
    border-radius: 4px;
}

.rp-day-btn.in-range:hover[b-cvkrxrumsx] {
    background: #bfdbfe;
}

.rp-day-btn.range-start[b-cvkrxrumsx] {
    border-radius: 50%;
}

.rp-day-btn.range-end[b-cvkrxrumsx] {
    border-radius: 50%;
}

.rp-day-btn.past[b-cvkrxrumsx],
.rp-day-btn:disabled[b-cvkrxrumsx] {
    color: var(--g-text-muted, #64748b);
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.rp-datepicker-footer[b-cvkrxrumsx] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.rp-link-btn[b-cvkrxrumsx] {
    border: none;
    background: none;
    color: var(--g-brand, #2c7cff);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.rp-link-btn:hover[b-cvkrxrumsx] {
    background: #eff6ff;
}

@media (max-width: 768px) {
    .rp-datepicker-dual[b-cvkrxrumsx] {
        width: 300px;
    }
    .rp-dual-panels[b-cvkrxrumsx] {
        flex-direction: column;
        gap: 12px;
    }
    .rp-calendar-divider[b-cvkrxrumsx] {
        width: 100%;
        height: 1px;
        margin: 0;
    }
}

@media (max-width: 600px) {
    .rp-date-range-row[b-cvkrxrumsx] {
        grid-template-columns: 1fr;
    }
}

/* ── End Date label with checkbox ── */
.rp-label-with-check[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rp-enddate-checkbox[b-cvkrxrumsx] {
    width: 14px;
    height: 14px;
    accent-color: var(--g-brand, #2c7cff);
    cursor: pointer;
    margin: 0;
}

.rp-enddate-hint[b-cvkrxrumsx] {
    font-size: 11px;
    font-weight: 400;
    color: var(--g-text-secondary, #64748b);
    margin-left: 4px;
}

.rp-enddate-group[b-cvkrxrumsx] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.rp-deadline-btn--disabled[b-cvkrxrumsx] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--g-text-muted, #94a3b8);
}

/* ── Draft Saved Popup ── */
.rp-popup-overlay[b-cvkrxrumsx] {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}
.rp-popup-card[b-cvkrxrumsx] {
    background: #fff; border-radius: 16px; padding: 36px 32px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    text-align: center; max-width: 400px; width: 90%;
}
.rp-popup-icon[b-cvkrxrumsx] { margin-bottom: 12px; }
.rp-popup-icon-circle[b-cvkrxrumsx] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: #dcfce7;
}
.rp-popup-title[b-cvkrxrumsx] { font-size: 18px; font-weight: 700; color: #1e293b; margin: 8px 0 4px; }
.rp-popup-subtitle[b-cvkrxrumsx] { font-size: 13px; color: #64748b; margin-bottom: 20px; }
.rp-popup-actions[b-cvkrxrumsx] { display: flex; gap: 12px; justify-content: center; }

/* ── Resume update overlay loader (Additional Details → Update) ── */
.rp-resume-loading-overlay[b-cvkrxrumsx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.rp-resume-loading-card[b-cvkrxrumsx] {
    background: var(--g-bg-section, #fff);
    border-radius: var(--g-radius-2xl, 16px);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16, 16px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rp-resume-loading-spinner[b-cvkrxrumsx] {
    animation: rp-resume-spin-b-cvkrxrumsx 1s linear infinite;
}

@keyframes rp-resume-spin-b-cvkrxrumsx {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rp-resume-loading-title[b-cvkrxrumsx] {
    font-size: var(--g-fs-body, 14px);
    font-weight: var(--g-fw-semibold, 600);
    color: var(--g-text-heading, #111);
}

.rp-resume-loading-subtitle[b-cvkrxrumsx] {
    font-size: var(--g-fs-xs, 12px);
    color: var(--g-text-secondary, #666);
    text-align: center;
}
/* /Components/Pages/Dashboard/CandidateSearch.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Candidate Directory Search – cds- prefix
   Self-contained scoped styles
   ═══════════════════════════════════════════ */

/* ── Page Shell ── */
.cds-page[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 24px;
    font-family: var(--g-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

 
.cds-header-wrap[b-xikpz9mezw]{
    position: sticky;
    top: 58px;
    z-index: 50;
    margin-bottom: 15px;
    background: var(--g-bg-card, #fff);
    flex-shrink: 0;
    padding: 20px 24px 10px;
    border-bottom: 1px solid var(--g-gray-100);
}
/* ── Header ── */
.cds-header[b-xikpz9mezw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.cds-header-left[b-xikpz9mezw] { display: flex; flex-direction: column; gap: 2px; }

.cds-title[b-xikpz9mezw] {
    font-size: var(--g-fs-page-title, 1.25rem);
    font-weight: 700;
    color: var(--g-text-heading, #0f172a);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cds-subtitle[b-xikpz9mezw] {
    font-size: var(--g-fs-sm);
    font-weight: 400;
    color: var(--g-text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

.cds-header-right[b-xikpz9mezw] {
    position: relative;
}

/* ── Job Link Button ── */
.cds-job-link-btn[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    font-size: var(--g-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.cds-job-link-btn:hover[b-xikpz9mezw] { border-color: var(--g-text-muted, #94a3b8); }

.cds-job-link-btn.selected[b-xikpz9mezw] {
    background: var(--g-dark);
    color: #fff;
    border-color: var(--g-dark);
}

.cds-job-link-btn.selected svg[b-xikpz9mezw] { stroke: #fff; }

.cds-job-clear[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0.7;
    cursor: pointer;
}

.cds-job-clear:hover[b-xikpz9mezw] { opacity: 1; }

/* ── Job Dropdown ── */
.cds-job-dropdown[b-xikpz9mezw] {
    overflow-y: auto;
    /* max- (not fixed) height: short job lists shouldn't render a mostly-empty 315px box. */
    max-height: min(315px, calc(100vh - 220px));
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-lg);
    z-index: 50;
    min-width: 280px;
    padding: 6px;
}

.cds-job-dropdown-item[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.cds-job-dropdown-item:hover[b-xikpz9mezw] { background: var(--g-gray-50); }

.cds-job-dropdown-title[b-xikpz9mezw] { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-text-heading); }
.cds-job-dropdown-company[b-xikpz9mezw] { font-size: var(--g-fs-xxs, 0.6875rem); color: var(--g-text-secondary, #64748b); }
.cds-job-dropdown-empty[b-xikpz9mezw] { padding: 16px; text-align: center; font-size: 13px; color: #94a3b8; }

/* ── Search Bar ── */
.cds-search-wrap[b-xikpz9mezw] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.cds-search-icon[b-xikpz9mezw] {
    position: absolute;
    left: 14px;
    color: var(--g-text-muted, #94a3b8);
    pointer-events: none;
}

.cds-search-input[b-xikpz9mezw] {
    flex: 1;
    padding: 12px 130px 12px 42px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl);
    font-size: var(--g-fs-sm);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cds-search-wrap[b-xikpz9mezw]  .g-btn-primary {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: var(--g-fs-xs);
    font-weight: 600;
}

.cds-search-input:focus[b-xikpz9mezw] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}

.cds-search-input[b-xikpz9mezw]::placeholder { color: var(--g-text-muted, #94a3b8); }

/* ── Search Button ── */
.cds-search-btn[b-xikpz9mezw] {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 9px;
     background:var(--sidebar-active-bg);
    color: #fff;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.01em;
}

.cds-search-btn:hover[b-xikpz9mezw] {
background:var(--sidebar-active-bg);
    opacity: 0.92;
    box-shadow: 0 2px 8px rgba(44, 124, 255, 0.3);
}


.cds-search-btn svg[b-xikpz9mezw] { flex-shrink: 0; }

/* ── Search Hint ── */
.cds-search-hint[b-xikpz9mezw] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0 4px;
    margin: -5px 0 14px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted, #94a3b8);
    line-height: 1.5;
    font-weight: 600;
}

.cds-search-hint svg[b-xikpz9mezw] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--g-text-muted, #94a3b8);
}

.cds-search-hint strong[b-xikpz9mezw] {
    font-weight: 700;
    color: var(--g-text-secondary, #64748b);
    background: var(--g-gray-100, #f1f5f9);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
}

.cds-search-hint em[b-xikpz9mezw] {
    font-style: normal;
    color: var(--g-text-secondary, #64748b);
}

@media (max-width: 576px) {
    .cds-search-hint[b-xikpz9mezw] {
        font-size: 0.625rem;
        margin: -4px 0 10px;
    }
}


/* ── Clear All Filters ── */
.cds-chip-clear-all[b-xikpz9mezw] {
    border: none;
    background: none;
    color: var(--g-error, #dc2626) !important;
    font-weight: 600;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.cds-chip-clear-all:hover[b-xikpz9mezw] {
    background: #fef2f2;
    color: #b91c1c;
}

.cds-chip-clear-all svg[b-xikpz9mezw] {
    stroke: currentColor;
}
/* ── Hero Banner ── */
.cds-hero[b-xikpz9mezw] {
    position: relative;
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: 12px;
    padding: 64px 40px;
    text-align: center;
}

.cds-hero-content[b-xikpz9mezw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
     margin: 0 auto;
}

.cds-hero-icon[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
}

.cds-hero-title[b-xikpz9mezw] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--g-text-heading, #0f172a);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cds-hero-desc[b-xikpz9mezw] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-secondary, #64748b);
    margin: 0;
    line-height: 1.7;
    max-width: 460px;
}

.cds-hero-suggestions[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.cds-hero-suggestions-label[b-xikpz9mezw] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-secondary, #64748b);
    font-weight: 500;
}

.cds-hero-pill[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-brand, #2c7cff);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.cds-hero-pill:hover[b-xikpz9mezw] {
    border-color: var(--g-brand, #2c7cff);
    background: #eff6ff;
}

/* Skeleton pill shown while the "Try searching for" job suggestions load */
.cds-hero-pill-skeleton[b-xikpz9mezw] {
    display: inline-block;
    height: 30px;
    border-radius: 20px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

/* ── Job Info Banner ── */
/* ── Filter Bar ── */
.cds-filter-bar[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cds-filter-chips[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.cds-chip-wrap[b-xikpz9mezw] {
    position: relative;
}

.cds-chip[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    color: #3f3f46;
    font-size: var(--g-fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.cds-chip:hover[b-xikpz9mezw] { border-color: var(--g-text-muted, #94a3b8); }

.cds-chip.active[b-xikpz9mezw] {
    background: var(--sidebar-active-bg);
    color: #fff;
    border-color: var(--sidebar-active-bg);
}

.cds-chip.active svg[b-xikpz9mezw] { stroke: #fff; }

.cds-chip-value[b-xikpz9mezw] {
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
}

.cds-chip-label[b-xikpz9mezw] { font-weight: 600; }

.cds-chip-chevron[b-xikpz9mezw] {
    flex-shrink: 0;
    transition: transform 0.15s;
}

.cds-chip-remove[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0;
}

.cds-chip-wrap:hover .cds-chip-remove[b-xikpz9mezw] {
    opacity: 1;
}

.cds-chip-remove:hover[b-xikpz9mezw] {
    background: rgba(0, 0, 0, 0.16);
}

.cds-chip.active .cds-chip-remove[b-xikpz9mezw] {
    background: rgba(255, 255, 255, 0.25);
}

.cds-chip.active .cds-chip-remove:hover[b-xikpz9mezw] {
    background: rgba(255, 255, 255, 0.45);
}

.cds-chip-add[b-xikpz9mezw] {
    border-style: dashed;
    color: var(--g-text-secondary, #64748b);
}

/* ── Filter Dropdown ── */
.cds-filter-dropdown[b-xikpz9mezw] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    z-index: 50;
    min-width: 180px;
    /* Cap the height so long option lists (e.g. the 100-company list) scroll inside the
       dropdown instead of growing past the bottom of the viewport. */
    max-height: min(380px, calc(100vh - 260px));
    overflow-y: auto;
    padding: 4px;
    animation: cds-dropIn-b-xikpz9mezw 0.12s ease-out;
}

.cds-filter-search-wrap[b-xikpz9mezw] {
    padding: 6px 8px;
    position: sticky;
    top: 0;
    background: var(--g-bg-card);
    z-index: 1;
}
.cds-filter-search-input[b-xikpz9mezw] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--g-border);
    border-radius: 6px;
    font-size: var(--g-fs-sm);
    outline: none;
    background: var(--g-bg-page, #f8fafc);
    color: var(--g-text-primary);
}
.cds-filter-search-input:focus[b-xikpz9mezw] {
    border-color: var(--g-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

@keyframes cds-dropIn-b-xikpz9mezw {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Add Filter Dropdown ── */
.cds-add-filter-dropdown[b-xikpz9mezw] {
    min-width: 200px;
}

.cds-add-filter-header[b-xikpz9mezw] {
    padding: 8px 14px 6px;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    color: var(--g-text-muted, #94a3b8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cds-filter-option[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    gap: 8px;
}

.cds-filter-option:hover[b-xikpz9mezw] { background: var(--g-gray-100); }
.cds-filter-option.selected[b-xikpz9mezw] { background: var(--g-indigo-bg); color: var(--g-brand); font-weight: 600; }
.cds-filter-clear[b-xikpz9mezw] { color: var(--g-error); font-weight: 600; border-top: 1px solid var(--g-gray-100); margin-top: 2px; }

/* ── Sort Area ── */
.cds-sort-area[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cds-sort-label[b-xikpz9mezw] { font-weight: 500; }

.cds-sort-wrapper[b-xikpz9mezw] {
    position: relative;
}

.cds-sort-toggle[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: 8px;
    font-size: var(--g-fs-xs, 12px);
    color: var(--g-text-heading);
    background: var(--g-bg-card, #fff);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.cds-sort-toggle:hover[b-xikpz9mezw] { border-color: var(--g-gray-400, #9ca3af); }
.cds-sort-toggle b[b-xikpz9mezw] { font-weight: 600; }

.cds-sort-chevron[b-xikpz9mezw] { transition: transform 0.2s; }
.cds-sort-chevron-up[b-xikpz9mezw] { transform: rotate(180deg); }

.cds-sort-popover[b-xikpz9mezw] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 220px;
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 6px;
    /* Safety cap: scrolls instead of clipping below the fold on short windows. */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    animation: cdsSortIn-b-xikpz9mezw 150ms ease;
}
@keyframes cdsSortIn-b-xikpz9mezw {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cds-sort-item[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--g-text-body, #374151);
    cursor: pointer;
    transition: background 0.12s;
}
.cds-sort-item:hover[b-xikpz9mezw] { background: var(--g-gray-50, #f9fafb); }
.cds-sort-item-active[b-xikpz9mezw] { color: var(--g-primary, #2563eb); font-weight: 600; }
.cds-sort-item-active:hover[b-xikpz9mezw] { background: #eff6ff; }

.cds-sort-check[b-xikpz9mezw] { margin-left: auto; color: var(--g-primary, #2563eb); }

.cds-sort-select[b-xikpz9mezw] {
    padding: 5px 10px;
    border: 1px solid var(--g-border);
    border-radius: 8px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    cursor: pointer;
    outline: none;
}

.cds-result-count[b-xikpz9mezw] {
    font-weight: 600;
    color: var(--g-dark);
    padding-left: 8px;
    border-left: 1px solid var(--g-border, #e2e8f0);
}

/* ── Batch Actions ── */
.cds-batch-bar[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--g-dark);
    border-radius: var(--g-radius-lg);
    margin-bottom: 12px;
}

.cds-batch-left[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.cds-batch-count[b-xikpz9mezw] {
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: #fff;
}

.cds-batch-actions[b-xikpz9mezw] { display: flex; gap: 8px; }

.cds-batch-btn[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    background: transparent;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
}

.cds-batch-btn:hover[b-xikpz9mezw] { background: rgba(255,255,255,0.1); }

.cds-batch-btn-primary[b-xikpz9mezw] {
    background: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
}

.cds-batch-btn-primary:hover[b-xikpz9mezw] {
    background: #1a6ae8;
}

.cds-batch-outline[b-xikpz9mezw] {
    background: #fff;
    color: #18181b;
    border-color: #fff;
}

.cds-batch-outline:hover[b-xikpz9mezw] { background: var(--g-gray-100); }

/* ── Results Table ── */
.cds-table-wrap[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card, #e2e8f0);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
}



/* ── Empty State ── */
.cds-empty-state[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    gap: 12px;
}

.cds-empty-title[b-xikpz9mezw] {
    font-size: var(--g-fs-body, 0.875rem);
    font-weight: 600;
    color: var(--g-text-heading, #0f172a);
    margin: 0;
}

.cds-empty-desc[b-xikpz9mezw] {
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-text-secondary, #64748b);
    margin: 0;
}

/* ── V2 Table Header ── */
.cds-table-header-v2[b-xikpz9mezw] {
    display: none;
}

@media (min-width: 769px) {
    .cds-table-header-v2[b-xikpz9mezw] {
        display: grid;
        grid-template-columns: 36px 2.5fr 1.4fr 1.1fr 1.1fr 1.2fr 1.3fr 1.4fr;
        gap: 0;
        position: sticky;
        top: 0;
        z-index: 6;
        padding: 11px 16px;
        border-bottom: 1px solid var(--g-gray-100, #f1f5f9);
        background: var(--g-gray-50, #fafbfc);
        align-items: center;
    }
}

.cds-th[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    color: var(--g-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cds-th-check[b-xikpz9mezw] { display: flex; align-items: center; }
.cds-th-skill[b-xikpz9mezw],
.cds-th-linkedin[b-xikpz9mezw],
.cds-th-assessment[b-xikpz9mezw] { text-align: center; }
.cds-th-actions[b-xikpz9mezw] { text-align: center; }

/* ── V2 Row ── */
.cds-row-v2[b-xikpz9mezw] {
    display: grid;
    grid-template-columns: 36px 2.5fr 1.4fr 1.1fr 1.1fr 1.2fr 1.3fr 1.4fr;
    gap: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--g-gray-100, #f1f5f9);
    align-items: center;
    transition: background 0.12s;
    position: relative;
    min-height: 80px;
}

.cds-row-v2:last-child[b-xikpz9mezw] { border-bottom: none; }
.cds-row-v2:hover[b-xikpz9mezw] { background: var(--g-gray-50, #fafbfc); }
.cds-row-v2.selected[b-xikpz9mezw] {
    background: #eff6ff;
    border-left: 3px solid var(--g-brand, #2c7cff);
    padding-left: 13px;
}

/* No-check variants (when no job selected) */
.cds-table-header-v2.no-check[b-xikpz9mezw] {
    grid-template-columns: 2.5fr 1.4fr 1.1fr 1.1fr 1.2fr 1.3fr 1.4fr;
}
.cds-row-v2.no-check[b-xikpz9mezw] {
    grid-template-columns: 2.5fr 1.4fr 1.1fr 1.1fr 1.2fr 1.3fr 1.4fr;
}

.cds-cell[b-xikpz9mezw] { min-width: 0; }
.cds-cell-check[b-xikpz9mezw] { display: flex; align-items: flex-start; padding-top: 2px; }

.cds-check-btn[b-xikpz9mezw] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ── Candidate Column V2 ── */
.cds-cell-candidate-v2[b-xikpz9mezw] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.cds-avatar[b-xikpz9mezw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-border);
    flex-shrink: 0;
}

.cds-avatar-initials[b-xikpz9mezw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #3b82f6;
    background: #f8fafc;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    border: 1.5px solid #e2e8f0;
}

.cds-candidate-info[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cds-candidate-name-row[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cds-candidate-name[b-xikpz9mezw] {
    font-size: var(--g-fs-sm);
    font-weight: 700;
    color: var(--g-text-heading, #0f172a);
    text-decoration: none;
    cursor: pointer;
}

.cds-candidate-name:hover[b-xikpz9mezw] {color: var(--g-brand); }

.cds-status-dot[b-xikpz9mezw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cds-status-dot.active[b-xikpz9mezw] { background: #10b981; }

.cds-verified-badge[b-xikpz9mezw] {
    flex-shrink: 0;
    margin-left: 2px;
}

.cds-candidate-subtitle[b-xikpz9mezw] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-body, #475569);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cds-candidate-exp[b-xikpz9mezw] { font-weight: 600; color: var(--g-text-heading); }
.cds-candidate-rate[b-xikpz9mezw] { font-weight: 600; color: var(--g-text-heading); }
.cds-sep[b-xikpz9mezw] { color: #cbd5e1; margin: 0 2px; }

.cds-candidate-location[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    color: var(--g-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0;
}

.cds-candidate-badges[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 1px;
}

.cds-badge-mnc[b-xikpz9mezw],
.cds-badge-reloc[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 500;
}

.cds-badge-ok[b-xikpz9mezw] { color: #059669; }
.cds-badge-warn[b-xikpz9mezw] { color: #dc2626; }
.cds-badge-muted[b-xikpz9mezw] { color: var(--g-text-muted, #94a3b8); }
.cds-badge-sep[b-xikpz9mezw] { color: #e2e8f0; font-size: var(--g-fs-xxs); }

.cds-candidate-socials[b-xikpz9mezw] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.cds-social-icon[b-xikpz9mezw] {
    color: var(--g-text-muted, #94a3b8);
    cursor: pointer;
    transition: color 0.12s;
}

.cds-social-icon:hover[b-xikpz9mezw] { color: var(--g-brand, #2c7cff); }

.cds-social-link[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

/* ── Donut (shared for skill/linkedin/assessment) ── */
.cds-donut[b-xikpz9mezw] {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.cds-donut-svg[b-xikpz9mezw] {
    width: 64px;
    height: 64px;
}

.cds-donut-value[b-xikpz9mezw] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--g-text-heading);
}

.cds-donut-label[b-xikpz9mezw] {
    display: block;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

/* ── Skill Column ── */
.cds-cell-skill[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cds-skill-pill-wrap[b-xikpz9mezw] {
    position: relative;
}

.cds-skill-text-wrap[b-xikpz9mezw] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cds-skill-name[b-xikpz9mezw] {
    font-size: var(--g-fs-xs, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cds-skill-more[b-xikpz9mezw] {
  font-size: 10px;
    color: #3b82f6;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s;
    white-space: nowrap;
}

.cds-skill-more:hover[b-xikpz9mezw] {
    color: var(--g-text-secondary, #64748b);
}

.cds-skill-pill[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    background: none;
}

.cds-skill-pill.cds-pill-green[b-xikpz9mezw] {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.cds-skill-pill.cds-pill-green:hover[b-xikpz9mezw] { background: #d1fae5; }

.cds-skill-pill.cds-pill-blue[b-xikpz9mezw] {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.cds-skill-pill.cds-pill-blue:hover[b-xikpz9mezw] { background: #dbeafe; }

.cds-skill-pill.cds-pill-red[b-xikpz9mezw] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.cds-skill-pill.cds-pill-red:hover[b-xikpz9mezw] { background: #fee2e2; }

.cds-pill-more[b-xikpz9mezw] {
    font-weight: 500;
    opacity: 0.8;
}

/* ── LinkedIn + Assessment columns ── */
.cds-cell-linkedin[b-xikpz9mezw],
.cds-cell-assessment[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ── Status Column ── */
.cds-cell-status[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cds-status-wrap[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cds-status-indicator[b-xikpz9mezw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cds-status-text[b-xikpz9mezw] {
    font-size: var(--g-fs-xs);
    font-weight: 600;
    color: var(--g-text-heading);
}

.cds-status-sub[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.625rem);
    color: var(--g-text-muted, #94a3b8);
    padding-left: 14px;
}

/* ── Created By Column ── */
.cds-cell-created[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cds-created-avatar[b-xikpz9mezw] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
}

.cds-created-info[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cds-created-name[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
    color: var(--g-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cds-created-date[b-xikpz9mezw] {
    font-size: var(--g-fs-xxs, 0.625rem);
    color: var(--g-text-muted, #94a3b8);
}

/* ── Actions Column ── */
.cds-cell-actions[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cds-creator-letter[b-xikpz9mezw]{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
}
.cds-action-view[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    color: var(--g-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.cds-action-view:hover[b-xikpz9mezw] {
    color: var(--g-brand, #2c7cff);
    border-color: #93c5fd;
    background: #eff6ff;
}

.cds-action-apply[b-xikpz9mezw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--sidebar-active-bg, var(--g-dark));
    color: #fff;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.cds-action-apply:hover[b-xikpz9mezw] {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(33, 82, 255, 0.3);
}

.cds-action-apply svg[b-xikpz9mezw] { stroke: #facc15; }

/* ── Skill Dropdown ── */
/* Full-screen transparent layer rendered while any dropdown is open (incl. per-row skill
   dropdowns). An outside click lands here and closes the open menu via CloseDropdowns. */
.cds-overlay[b-xikpz9mezw] {
    position: fixed;
    inset: 0;
    z-index: 29; /* below .cds-skill-dropdown (30) so the open dropdown stays clickable */
    background: transparent;
}

.cds-skill-dropdown[b-xikpz9mezw] {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 30;
    margin-top: 6px; background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200); border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg); padding: 10px 0;
    min-width: 200px; max-width: 280px;
    max-height: 260px; overflow-y: auto;
    animation: cds-dropIn-b-xikpz9mezw 0.12s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--g-gray-200) transparent;
}
.cds-skill-dropdown[b-xikpz9mezw]::-webkit-scrollbar { width: 6px; }
.cds-skill-dropdown[b-xikpz9mezw]::-webkit-scrollbar-track { background: transparent; }
.cds-skill-dropdown[b-xikpz9mezw]::-webkit-scrollbar-thumb {
    background: var(--g-gray-200); border-radius: 6px;
}
.cds-skill-dropdown[b-xikpz9mezw]::-webkit-scrollbar-thumb:hover { background: var(--g-gray-300); }

.cds-skill-empty[b-xikpz9mezw] {
    color: var(--g-text-muted, #94a3b8);
    font-size: var(--g-fs-xs, 0.75rem);
}

.cds-skill-dd-title[b-xikpz9mezw] {
    font-size: 9px; font-weight: 700; color: var(--g-text-muted);
    padding: 4px 14px 8px; text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--g-gray-100);
}

/* LinkedIn justification / assessment remarks popup — free text (not a list). */
.cds-just-dropdown[b-xikpz9mezw] { padding: 10px 0 12px; }
.cds-just-text[b-xikpz9mezw] {
    margin: 8px 14px 0; padding: 0;
    font-size: 12px; line-height: 1.55; color: var(--g-text-body);
    white-space: normal; word-break: break-word;
}

.cds-skill-dd-item[b-xikpz9mezw] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; font-size: 12px; color: var(--g-text-body);
    border-bottom: 1px solid var(--g-gray-50, #fafafa);
    transition: background 0.12s;
}

.cds-skill-dd-item:last-child[b-xikpz9mezw] { border-bottom: none; }
.cds-skill-dd-item:hover[b-xikpz9mezw] { background: var(--g-gray-50); }

.cds-skill-dd-yrs[b-xikpz9mezw] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}
/* Skill-occurrence dropdown: found / not-found markers */
.cds-occ-yes[b-xikpz9mezw] {
    font-size: var(--g-fs-xs);
    color: #16a34a;
    font-weight: 600;
    white-space: nowrap;
}
.cds-occ-no[b-xikpz9mezw] {
    font-size: var(--g-fs-xs);
    color: var(--g-gray-400, #94a3b8);
    font-weight: 600;
    white-space: nowrap;
}
/* ── Responsive ── */

/* Large screens (<=1280px) – hide Created By */
@media (max-width: 1280px) {
    .cds-table-header-v2[b-xikpz9mezw],
    .cds-row-v2[b-xikpz9mezw] {
        grid-template-columns: 36px 2.5fr 1.2fr 1fr 1fr 1.2fr 1.4fr;
    }

    .cds-table-header-v2.no-check[b-xikpz9mezw],
    .cds-row-v2.no-check[b-xikpz9mezw] {
        grid-template-columns: 2.5fr 1.2fr 1fr 1fr 1.2fr 1.4fr;
    }

    .cds-th-created[b-xikpz9mezw],
    .cds-cell-created[b-xikpz9mezw] { display: none; }
}

/* Tablets (<=1024px) – hide LinkedIn + Created By */
@media (max-width: 1024px) {
    .cds-table-header-v2[b-xikpz9mezw],
    .cds-row-v2[b-xikpz9mezw] {
        grid-template-columns: 36px 3fr 1.8fr 1.4fr 1.2fr 2fr;
    }

    .cds-table-header-v2.no-check[b-xikpz9mezw],
    .cds-row-v2.no-check[b-xikpz9mezw] {
        grid-template-columns: 3fr 1.8fr 1.4fr 1.2fr 2fr;
    }

    .cds-th-linkedin[b-xikpz9mezw],
    .cds-cell-linkedin[b-xikpz9mezw],
    .cds-th-created[b-xikpz9mezw],
    .cds-cell-created[b-xikpz9mezw] { display: none; }

    .cds-search-input[b-xikpz9mezw] { padding-right: 130px; font-size: 12px; }
}

/* Small tablets (<=768px) – simplified grid */
@media (max-width: 768px) {
    .cds-header[b-xikpz9mezw] { flex-direction: column; gap: 8px; }
    .cds-header-right[b-xikpz9mezw] { width: 100%; }
    .cds-job-link-btn[b-xikpz9mezw] { width: 100%; justify-content: center; }
    .cds-job-dropdown[b-xikpz9mezw] { left: 0; right: 0; min-width: unset; }

    .cds-filter-bar[b-xikpz9mezw] { flex-direction: column; align-items: stretch; }
    .cds-filter-chips[b-xikpz9mezw] { flex-wrap: wrap; }
    .cds-sort-area[b-xikpz9mezw] { width: 100%; justify-content: space-between; }

    .cds-table-header-v2[b-xikpz9mezw] { display: none; }

    .cds-row-v2[b-xikpz9mezw] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .cds-cell-check[b-xikpz9mezw] { display: none; }
    .cds-th-skill[b-xikpz9mezw], .cds-cell-skill[b-xikpz9mezw] { display: none; }
    .cds-th-linkedin[b-xikpz9mezw], .cds-cell-linkedin[b-xikpz9mezw] { display: none; }
    .cds-th-assessment[b-xikpz9mezw], .cds-cell-assessment[b-xikpz9mezw] { display: none; }
    .cds-th-status[b-xikpz9mezw], .cds-cell-status[b-xikpz9mezw] { display: none; }
    .cds-th-created[b-xikpz9mezw], .cds-cell-created[b-xikpz9mezw] { display: none; }

    .cds-cell-actions[b-xikpz9mezw] {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--g-gray-100);
    }

    .cds-hero[b-xikpz9mezw] { padding: 32px 20px; }
    .cds-hero-title[b-xikpz9mezw] { font-size: 1rem; }
    .cds-hero-suggestions[b-xikpz9mezw] { flex-direction: column; gap: 8px; }

    .cds-batch-bar[b-xikpz9mezw] { flex-direction: column; gap: 10px; text-align: center; }
    .cds-batch-actions[b-xikpz9mezw] { justify-content: center; }
}

/* ── Mobile (<=576px) ── */
@media (max-width: 576px) {
    .cds-title[b-xikpz9mezw] { font-size: var(--g-fs-section-title, 1.125rem); }
    .cds-subtitle[b-xikpz9mezw] { font-size: 12px; }

    .cds-search-wrap[b-xikpz9mezw] { gap: 8px; }
    .cds-search-icon[b-xikpz9mezw] { top: 6px; }
    .cds-search-input[b-xikpz9mezw] { padding: 6px 14px 6px 38px; border-radius: 10px; font-size: 13px; }
    .cds-search-wrap[b-xikpz9mezw]  .g-btn-primary {
        position: static;
        width: 100%;
        justify-content: center;
        padding: 10px;
        border-radius: 10px;
    }

    .cds-chip[b-xikpz9mezw] { padding: 5px 10px; font-size: var(--g-fs-xxs, 0.6875rem); }

    .cds-hero[b-xikpz9mezw] { padding: 24px 16px; }
    .cds-hero-icon[b-xikpz9mezw] { width: 48px; height: 48px; }
    .cds-hero-icon svg[b-xikpz9mezw] { width: 24px; height: 24px; }
    .cds-hero-title[b-xikpz9mezw] { font-size: 1rem; }
    .cds-hero-desc[b-xikpz9mezw] { font-size: 12px; }
    .cds-hero-suggestions[b-xikpz9mezw] { flex-direction: column; gap: 6px; }

    .cds-row-v2[b-xikpz9mezw] {
        display: flex; 
        gap: 0;
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .cds-cell-candidate-v2[b-xikpz9mezw] {
        padding: 14px;
    }

    .cds-cell-actions[b-xikpz9mezw] {
        padding: 10px 14px;
        background: var(--g-gray-50, #fafbfc);
        border-top: 1px solid var(--g-gray-100);
        justify-content: flex-end;
    }

    .cds-action-apply[b-xikpz9mezw] { font-size: var(--g-fs-xxs, 0.6875rem); padding: 6px 12px; }
    .cds-action-view[b-xikpz9mezw] { width: 30px; height: 30px; }

    .cds-batch-bar[b-xikpz9mezw] { padding: 10px 14px; border-radius: 10px; }
    .cds-batch-count[b-xikpz9mezw] { font-size: 12px; }
    .cds-batch-btn[b-xikpz9mezw] { padding: 6px 12px; font-size: var(--g-fs-xxs, 0.6875rem); }
}

/* ═══ Resume Viewer Drawer ═══ */
.cds-resume-backdrop[b-xikpz9mezw] {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.3);
}

.cds-resume-drawer[b-xikpz9mezw] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 1000px; max-width: 90vw;
    background: var(--g-bg-card);
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    z-index: 2001;
    display: flex; flex-direction: column;
    animation: cds-slide-in-b-xikpz9mezw 280ms ease;
}

@keyframes cds-slide-in-b-xikpz9mezw { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cds-resume-drawer-header[b-xikpz9mezw] {
    padding: 16px 20px; border-bottom: 1px solid var(--g-border-light, #e2e8f0);
    display: flex; align-items: center; flex-shrink: 0;
}

.cds-resume-drawer-title-row[b-xikpz9mezw] { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.cds-resume-drawer-cand[b-xikpz9mezw] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cds-resume-head-actions[b-xikpz9mezw] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cds-resume-drawer-body[b-xikpz9mezw] { flex: 1; overflow: auto; padding: 16px; }

.cds-resume-close[b-xikpz9mezw] {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--g-text-muted); line-height: 1; padding: 4px 8px;
    border-radius: 6px; transition: background 0.15s;
}

.cds-resume-close:hover[b-xikpz9mezw] { background: var(--g-gray-100); }

/* ── Pagination (matching CandidateListNew style) ── */
.cds-pagination[b-xikpz9mezw] {
    margin-top: 20px;
    border-top: none;
}

.cds-pagination .g-pg-nav[b-xikpz9mezw] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: var(--g-fs-xxs);
    font-weight: 500;
    color: var(--g-gray-600);
    border: 1px solid var(--g-gray-200);
}

/* ═══ Shimmer Skeleton Loader ═══ */
@keyframes cds-shimmer-b-xikpz9mezw {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.cds-shimmer-wrap[b-xikpz9mezw] {
    border: 1px solid var(--g-gray-200);
    border-radius: 16px;
    background: #fff;
    padding: 0;
    overflow: hidden;
}

.cds-shimmer-toolbar[b-xikpz9mezw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--g-gray-100);
}

.cds-shimmer-header[b-xikpz9mezw] {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--g-gray-100);
}

.cds-shimmer-row[b-xikpz9mezw] {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--g-gray-50);
    align-items: center;
}

.cds-shimmer-cell[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cds-shimmer-cell-candidate[b-xikpz9mezw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cds-shimmer-cell-score[b-xikpz9mezw] {
    justify-content: center;
}

.cds-shimmer-cell-status[b-xikpz9mezw] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.cds-shimmer-cell-created[b-xikpz9mezw] {
    gap: 8px;
}

.cds-shimmer-cell-actions[b-xikpz9mezw] {
    gap: 8px;
    justify-content: flex-end;
}

.cds-shimmer-avatar[b-xikpz9mezw] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

.cds-shimmer-avatar-sm[b-xikpz9mezw] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

.cds-shimmer-circle[b-xikpz9mezw] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

.cds-shimmer-lines[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.cds-shimmer-line[b-xikpz9mezw] {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

.cds-shimmer-line-md[b-xikpz9mezw] { width: 75%; }
.cds-shimmer-line-sm[b-xikpz9mezw] { width: 55%; }
.cds-shimmer-line-xs[b-xikpz9mezw] { width: 40%; }
.cds-shimmer-line-xxs[b-xikpz9mezw] { width: 25%; }

.cds-shimmer-btn[b-xikpz9mezw] {
    width: 60px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cds-shimmer-b-xikpz9mezw 1.05s linear infinite;
}

/* Location filter — two-column State | City picker */
.cds-loc-picker[b-xikpz9mezw] {
    width: 460px;
    max-width: 90vw;
}
.cds-loc-cols[b-xikpz9mezw] {
    display: flex;
    align-items: stretch;
}
.cds-loc-col[b-xikpz9mezw] {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px;
}
.cds-loc-col--state[b-xikpz9mezw] {
    border-right: 1px solid #eef0f3;
}
.cds-loc-col-title[b-xikpz9mezw] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    padding: 2px 8px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cds-loc-list[b-xikpz9mezw] {
    max-height: 190px;
    overflow-y: auto;
}
.cds-loc-hint[b-xikpz9mezw] {
    padding: 28px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

/* Thin, light scrollbar for the location lists */
.cds-loc-list[b-xikpz9mezw] {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #e5e7eb transparent;  /* Firefox: thumb track */
}
.cds-loc-list[b-xikpz9mezw]::-webkit-scrollbar {
    width: 6px;
}
.cds-loc-list[b-xikpz9mezw]::-webkit-scrollbar-track {
    background: transparent;
}
.cds-loc-list[b-xikpz9mezw]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 6px;
}
.cds-loc-list[b-xikpz9mezw]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Thin, light scrollbar for the location lists */
.cds-filter-dropdown[b-xikpz9mezw] {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #e5e7eb transparent;  /* Firefox: thumb track */
}
.cds-filter-dropdown[b-xikpz9mezw]::-webkit-scrollbar {
    width: 6px;
}
.cds-filter-dropdown[b-xikpz9mezw]::-webkit-scrollbar-track {
    background: transparent;
}
.cds-filter-dropdown[b-xikpz9mezw]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 6px;
}
.cds-filter-dropdown[b-xikpz9mezw]::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Location picker footer — Apply + Clear */
.cds-loc-footer[b-xikpz9mezw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #eef0f3;
    padding: 6px;
}
.cds-loc-apply[b-xikpz9mezw] {
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: var(--sidebar-active-bg, #1e293b);
    border-radius: 8px;
}
.cds-loc-apply:hover:not(:disabled)[b-xikpz9mezw] {
    opacity: 0.92;
}
.cds-loc-apply:disabled[b-xikpz9mezw] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Dashboard/DashboardIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Dashboard Index – Scoped Styles
   ═══════════════════════════════════════════ */

/* Custom scrollbar for dashboard panels */
.custom-scrollbar[b-dafirhr7ki] {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.custom-scrollbar[b-dafirhr7ki]::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar[b-dafirhr7ki]::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar[b-dafirhr7ki]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

.custom-scrollbar[b-dafirhr7ki]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── Dashboard Wrapper ── */
.dashboard-wrapper[b-dafirhr7ki] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'OpenSans', sans-serif;
    /* Render the dashboard at 90% scale so more content fits on screen */
    zoom: 0.9;
}

/* ── Header Banner ── */
.dashboard-header-banner[b-dafirhr7ki] {
    border-radius: 2rem;
    padding: 48px;
    margin-bottom: 32px;
    position: relative;
    overflow: visible;
}

/* ── Banner Left: Profile Row ── */
.banner-profile-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.banner-avatar-wrapper[b-dafirhr7ki] {
    position: relative;
    flex-shrink: 0;
}

.banner-avatar-img[b-dafirhr7ki] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.25);
    display: block;
}

.banner-avatar-status[b-dafirhr7ki] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgb(59, 130, 246);
    border: 2px solid #ffffff;
    display: block;
}

/* ── Initials Avatar (fallback when no image) ── */
.banner-avatar-initials[b-dafirhr7ki] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid rgba(59, 130, 246, 0.25);
    flex-shrink: 0;
}

.target-avatar-initials[b-dafirhr7ki] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}

.performer-photo-initials[b-dafirhr7ki] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.recruiter-avatar-initials[b-dafirhr7ki] {
    width: 38px;
    height: 38px;  
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
}

.banner-status-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.banner-status-dot[b-dafirhr7ki] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(59, 130, 246);
    display: inline-block;
    flex-shrink: 0;
}

.banner-status-label[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 600;
    color: rgb(59, 130, 246);
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 0px;
}

.banner-user-info[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 3px;
    font-weight: 400;
}

.banner-greeting[b-dafirhr7ki] {
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -1.5px;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 16px;
}

.banner-description[b-dafirhr7ki] {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.65;
    max-width: 450px;
}

.banner-description strong[b-dafirhr7ki] {
    color: rgb(59, 130, 246);
    font-weight: 600;
}

/* ── Timer Section ── */
.banner-timer-section[b-dafirhr7ki] {
    margin-top: 20px;
    margin-bottom: 20px;
}

.banner-timer-row[b-dafirhr7ki] {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.timer-digit[b-dafirhr7ki] {
    font-size: 36px;
    font-weight: 300;
    color: rgb(59, 130, 246);
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    line-height: 1;
}

.timer-separator[b-dafirhr7ki] {
    font-size: 32px;
    font-weight: 300;
    color: #bfdbfe;
    line-height: 1;
    width: 16px;
    text-align: center;
}

/* ── Banner Buttons ── */
.banner-buttons[b-dafirhr7ki] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-view-pipeline[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.btn-view-pipeline-icon[b-dafirhr7ki] {
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
}

.btn-view-interviews[b-dafirhr7ki] {
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 22px;
    border-radius: 10px;
    border: 1.5px solid #111827;
    cursor: pointer;
}

/* ── Center: Target Header ── */
.target-header-row[b-dafirhr7ki] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.target-dropdown-wrapper[b-dafirhr7ki] {
    position: relative;
    min-width: 0;
}

.target-select-btn[b-dafirhr7ki] {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
}

.target-team-icon[b-dafirhr7ki] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.target-avatar[b-dafirhr7ki] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #e2e8f0;
    flex-shrink: 0;
}

.target-selected-name[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 700;
    color: rgb(59, 130, 246);
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.target-dropdown-list[b-dafirhr7ki] {
    min-width: 192px;
    height: 306px;
    overflow-y: auto;
    overflow-x: hidden;
}

.target-dropdown-list[b-dafirhr7ki]::-webkit-scrollbar {
    width: 5px;
}

.target-dropdown-list[b-dafirhr7ki]::-webkit-scrollbar-thumb {
    background: var(--g-gray-300);
    border-radius: var(--g-radius-xs);
}

.target-dropdown-list[b-dafirhr7ki]::-webkit-scrollbar-track {
    background: transparent;
}

.target-date-wrapper[b-dafirhr7ki] {
    position: relative;
    justify-self: end;
}

.target-date-btn[b-dafirhr7ki] {
    padding: 6px 10px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    border-width: 1px;
    min-width: 170px;
    justify-content: center;
}

.date-preset-option[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}

.date-preset-option:hover[b-dafirhr7ki] {
    background: #f8fafc;
}

/* ── Motivational Chip ── */
.target-motivational-chip[b-dafirhr7ki] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.target-motivational-text[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #15803d;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Target Progress Bars ── */
.target-progress-container[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.target-progress-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6px;
}

.target-progress-label[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.target-progress-value[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.target-progress-value-sub[b-dafirhr7ki] {
    color: #9ca3af;
    font-weight: 400;
}

.target-progress-track[b-dafirhr7ki] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.target-progress-fill[b-dafirhr7ki] {
    height: 100%;
    background: #111827;
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* ── Top Performer Card ── */
.performer-card[b-dafirhr7ki] {
    background: rgba(239, 246, 255, 0.45);
    border-radius: 24px;
    overflow: hidden;
}

.performer-photo[b-dafirhr7ki] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.performer-badge[b-dafirhr7ki] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
}

.performer-info[b-dafirhr7ki] {
    flex: 1;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.performer-star-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}

.performer-star-icon[b-dafirhr7ki] {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.performer-star-label[b-dafirhr7ki] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #d97706;
    line-height: 1;
    white-space: nowrap;
}

.performer-name[b-dafirhr7ki] {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.performer-role[b-dafirhr7ki] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 20px;
}

.performer-stats-grid[b-dafirhr7ki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.performer-stat-num[b-dafirhr7ki] {
    font-size: 22px;
    font-weight: 300;
    color: rgb(59, 130, 246);
    line-height: 1;
    letter-spacing: -0.5px;
}

.performer-stat-label[b-dafirhr7ki] {
    font-size: 8.5px;
    color: #9ca3af;
    letter-spacing: 0.2px;
    margin-top: 4px;
    font-weight: 700;
}

.performer-feedback-row[b-dafirhr7ki] {
    display: flex;
    justify-content: flex-end;
     padding:25px 0 0 0 ;
}

.performer-carousel-dots[b-dafirhr7ki] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding:20px 0 15px 0;
}

.performer-dot[b-dafirhr7ki] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(200, 210, 220, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.performer-dot:hover[b-dafirhr7ki] {
    background: rgba(160, 175, 190, 0.7);
}

.performer-dot-active[b-dafirhr7ki] {
    background: rgba(200, 210, 220, 0.5);
    width: 24px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    transform: none;
}

.performer-dot-active[b-dafirhr7ki]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #3b82f6;
    border-radius: 999px;
    animation: performerDotProgress-b-dafirhr7ki 5s linear forwards;
}

.performer-dot-paused.performer-dot-active[b-dafirhr7ki]::after {
    animation-play-state: paused;
}

@keyframes performerDotProgress-b-dafirhr7ki {
    from { width: 0%; }
    to   { width: 100%; }
}

.link-button[b-dafirhr7ki] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.link-button-text[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: rgb(59, 130, 246);
}

/* ── Pipeline Section ── */
.dashboard-pipeline[b-dafirhr7ki] {
    border-radius: 24px;
    padding: 32px;
}

.pipeline-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.section-title[b-dafirhr7ki] {
    font-size: 1.05rem;
    font-weight: 500;
    color: #111827;
    letter-spacing: -0.3px;
}

.pipeline-conversion[b-dafirhr7ki] {
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

.pipeline-conversion-pct[b-dafirhr7ki] {
    display: block;
    font-size: 19px;
    font-weight: 300;
    color: rgb(59, 130, 246);
    line-height: 1;
    margin-bottom: 3px;
}

.pipeline-stages[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pipeline-stage-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6px;
}

.pipeline-stage-label[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

.pipeline-stage-count[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.pipeline-stage-track[b-dafirhr7ki] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.pipeline-stage-fill[b-dafirhr7ki] {
    height: 100%;
    background: #111827;
    border-radius: 999px;
}

/* ── Activity Feed ── */
.dashboard-activity-feed[b-dafirhr7ki] {
    border-radius: 24px;
    padding: 32px;
}

.activity-feed-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.activity-feed-viewall[b-dafirhr7ki] {
    font-size: 14px;
    font-weight: 500;
    color: rgb(59, 130, 246);
    background: none;
    border: none;
    cursor: pointer;
}

.activity-feed-list[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feed-item[b-dafirhr7ki] {
    position: relative;
    padding-left: 16px;
    border-left: 2px solid #f3f4f6;
}

.feed-dot[b-dafirhr7ki] {
    position: absolute;
    left: -5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.feed-subject[b-dafirhr7ki] {
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;  
}

.feed-by[b-dafirhr7ki] {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin-bottom: 5px;
}

.feed-meta-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.feed-actor[b-dafirhr7ki] {
    font-size: 11px;
    font-weight: 600;
    color: #111827;
}

.feed-verb-badge[b-dafirhr7ki] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
}

.feed-time[b-dafirhr7ki] {
    font-size: 9.5px;
    color: #b0b0b0;
}

.feed-note[b-dafirhr7ki] {
    font-size: 11px;
    color: #374151;
    background: #f3f4f6;
    padding: 5px 12px;
    border-radius: 10px;
    line-height: 1.6;
}

/* ── Top Recruiters ── */
.dashboard-top-recruiters[b-dafirhr7ki] {
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.recruiters-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.recruiters-month-label[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 600;
    color: rgb(59, 130, 246);
    letter-spacing: 0.2px;
}

.recruiters-list[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recruiter-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.recruiter-rank[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    width: 12px;
    text-align: right;
    flex-shrink: 0;
}

.recruiter-avatar[b-dafirhr7ki] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(59, 130, 246, 0.15);
    flex-shrink: 0;
}

.recruiter-info[b-dafirhr7ki] {
    flex: 1;
    min-width: 0;
}

.recruiter-name-row[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}

.recruiter-name[b-dafirhr7ki] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recruiter-count[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin-left: 8px;
    flex-shrink: 0;
}

.recruiter-track[b-dafirhr7ki] {
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.recruiter-fill[b-dafirhr7ki] {
    height: 100%;
    background: #111827;
    border-radius: 999px;
}

.recruiters-footer[b-dafirhr7ki] {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 16px;
}

/* ── Main Grid Left Column ── */
.dashboard-main-left[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Pipeline + Activity side by side */
.dashboard-top-row[b-dafirhr7ki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ── Job Tracking Strip ── */
.dashboard-job-tracking[b-dafirhr7ki] {
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

.dashboard-job-header[b-dafirhr7ki] {
    padding: 20px 32px 0px 32px;
    border-bottom: 1px solid #f3f4f6;
}

.job-header-title[b-dafirhr7ki] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.2px;
}

.job-cell[b-dafirhr7ki] {
    padding: 32px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.job-cell-top[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.job-cell-icon[b-dafirhr7ki] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-cell-value[b-dafirhr7ki] {
    font-size: 36px;
    font-weight: 300;
    color: rgb(59, 130, 246);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.job-cell-title[b-dafirhr7ki] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 2px;
}

.job-cell-sub[b-dafirhr7ki] {
    font-size: 11px;
    color: #6b7280;
}

/* Active Jobs cell — blue highlight matching the Candidate Pipeline card */
.job-cell-blue[b-dafirhr7ki] {
    background: rgb(59, 130, 246);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.3);
}
.job-cell-blue .job-cell-value[b-dafirhr7ki],
.job-cell-blue .job-cell-title[b-dafirhr7ki] { color: #ffffff !important; }
.job-cell-blue .job-cell-sub[b-dafirhr7ki] { color: rgba(255, 255, 255, 0.85) !important; }
.job-cell-blue .job-cell-icon[b-dafirhr7ki] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

/* ── Action Center ── */
.dashboard-action-center[b-dafirhr7ki] {
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
    padding: 24px;
}

.action-center-title[b-dafirhr7ki] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.2px;
    margin-bottom: 16px;
}

/* ── Pipeline Hero (Blue Card) ── */
.pipeline-hero[b-dafirhr7ki] {
    background: rgb(59, 130, 246);
    border-radius: 2rem;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 240px;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

.pipeline-hero-watermark[b-dafirhr7ki] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 32px;
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.pipeline-hero-content[b-dafirhr7ki] {
    position: relative;
    z-index: 1;
}

.pipeline-hero-indicator-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.pipeline-hero-indicator-dot[b-dafirhr7ki] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    display: inline-block;
}

.pipeline-hero-indicator-label[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
}

.pipeline-hero-count[b-dafirhr7ki] {
    font-size: 72px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 16px;
}

.pipeline-hero-desc[b-dafirhr7ki] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    max-width: 220px;
    line-height: 1.6;
}

.pipeline-hero-footer[b-dafirhr7ki] {
    position: relative;
    z-index: 1;
    margin-top: 48px;
}

.btn-explore-pipeline[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 8px 20px;
    cursor: pointer;
}

/* ── Action Panels ── */
.dashboard-action-panels[b-dafirhr7ki] {
    border-radius: 2rem;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
    align-items: stretch;
}

.action-panel-icon[b-dafirhr7ki] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.action-panel-bottom[b-dafirhr7ki] {
    margin: 90px 0 0 0;
}

.action-panel-value[b-dafirhr7ki] {
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 12px;
}

.action-panel-title[b-dafirhr7ki] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.action-panel-sub[b-dafirhr7ki] {
    font-size: 11px;
    color: #6b7280;
}

/* Extra clarifier chip (e.g. Follow-ups = Submitted + Waiting Interview) */
.action-panel-extra[b-dafirhr7ki] {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Right Sidebar ── */
.dashboard-right-sidebar[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 75px;
   align-self: start; 
}

/* ── Schedule ── */
.dashboard-schedule[b-dafirhr7ki] {
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.schedule-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.schedule-month-btn[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.schedule-month-label[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 600;
    color: rgb(59, 130, 246);
    letter-spacing: 0.2px;
}

.schedule-calendar[b-dafirhr7ki] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 12px;
    margin-bottom: 24px;
}

.cal-day-header[b-dafirhr7ki] {
    font-weight: 600;
    color: #9ca3af;
    padding: 4px 0;
}

.cal-day-empty[b-dafirhr7ki] {
    padding: 6px 0;
}

.cal-day[b-dafirhr7ki] {
    position: relative;
    padding: 6px 0;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-day-today[b-dafirhr7ki] {
    font-weight: 600;
    color: #ffffff;
    background: rgb(59, 130, 246);
}

.cal-day-normal[b-dafirhr7ki] {
    font-weight: 400;
    color: #4b5563;
    background: transparent;
}

.cal-event-dot[b-dafirhr7ki] {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(59, 130, 246);
    display: block;
}

.schedule-events[b-dafirhr7ki] {
    border-top: 1px solid #eff6ff;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
}

/* ── Applied Candidates ── */
.dashboard-applied-candidates[b-dafirhr7ki] {
    border-radius: 24px;
    padding: 28px 32px;
    overflow: visible;
    margin-top: 24px;
}

.applied-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.applied-title[b-dafirhr7ki] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.3px;
    margin-bottom: 3px;
}

.applied-subtitle[b-dafirhr7ki] {
    font-size: 12px;
    color: #9ca3af;
}

.applied-viewall[b-dafirhr7ki] {
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(59, 130, 246);
    background: none;
    border: none;
    cursor: pointer;
}

.applied-toolbar[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px; 
    margin-bottom: 15px;
}

.applied-search-wrapper[b-dafirhr7ki] {
    position: relative;
    width: 300px;
}

.applied-search-icon[b-dafirhr7ki] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.applied-search-input[b-dafirhr7ki] {
   width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-gray-700);
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
}

.applied-right-toolbar[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.applied-result-count[b-dafirhr7ki] {
      font-size: 14px;
    color: rgb(59, 130, 246);
    white-space: nowrap;
    font-weight: 600;
}

.applied-sort-wrapper[b-dafirhr7ki] {
    position: relative;
}

.applied-sort-btn[b-dafirhr7ki] {
      display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: #fff;
    color: var(--g-gray-600);
    font-size: var(--g-fs-sm);
    cursor: pointer;
    white-space: nowrap;
}

.applied-sort-dropdown[b-dafirhr7ki] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
    z-index: 300;
    min-width: 260px;
    padding: 6px;
}

.sort-option-btn[b-dafirhr7ki] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
}

.sort-option-active[b-dafirhr7ki] {
    background: #111827;
    color: #ffffff;
    font-weight: 600;
}

.sort-option-inactive[b-dafirhr7ki] {
    background: transparent;
    color: #374151;
    font-weight: 400;
}

/* ── Applied Table ── */
.applied-table-wrapper[b-dafirhr7ki] {
     overflow-y: visible;
    margin-top: 4px;
}

.applied-table[b-dafirhr7ki] {
    width: 100%;
    text-align: left;
    font-size: 13px;
    border-collapse: collapse;
   
}

.applied-table thead tr[b-dafirhr7ki] {
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.applied-table th[b-dafirhr7ki] {
    padding: 10px 12px;
    font-size: 10.5px;
    font-weight: 700;
    color: #9ca3af;
}

/* Matching Skill (7th) & Overall (8th) data donuts are centered in their cells,
   so center their headers to sit directly above the data. */
.applied-table th:nth-child(7)[b-dafirhr7ki],
.applied-table th:nth-child(8)[b-dafirhr7ki] {
    text-align: center;
}

.applied-table tbody tr[b-dafirhr7ki] {
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

/* ── Table Cell Styles ── */
.td-sno[b-dafirhr7ki] {
    padding: 18px 12px;
    color: #9ca3af;
    font-size: 13px;
    vertical-align: middle;
}

.td-candidate[b-dafirhr7ki] {
    padding: 14px 12px;
}

.td-candidate-name[b-dafirhr7ki] {
    font-size: 11.5px;
    font-weight: 700; 
    margin-bottom: 2px;
    white-space: nowrap;
}

.td-candidate-title[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #6b7280;
    margin-bottom: 6px;
}

.td-candidate-icons[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.td-icon-btn[b-dafirhr7ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    text-decoration: none;
}

.td-icon-btn:hover[b-dafirhr7ki] {
    color: rgb(59, 130, 246);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.td-icon-btn-linkedin[b-dafirhr7ki] {
    color: #64748b;
    background: #eff6ff;
}

.gr-cl-icon-xxs[b-dafirhr7ki] { width: 10px; height: 10px; }

.td-icon-btn-linkedin:hover[b-dafirhr7ki] {
    color: #005fa3;
    background: #dbeafe;
}

.td-applied-date[b-dafirhr7ki] {
    font-size: 10.5px;
    color: #b0b0b0;
    margin-top: 5px;
}

.td-experience[b-dafirhr7ki] {
    padding: 18px 12px;
    vertical-align: middle;
}

.td-exp-years[b-dafirhr7ki] {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.td-exp-mnc[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #6b7280;
}

.td-location[b-dafirhr7ki] {
    padding: 18px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.td-location-city[b-dafirhr7ki] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.td-location-relocation[b-dafirhr7ki] {
    font-size: 11.5px;
    font-weight: 500;
}

.td-resume[b-dafirhr7ki] {
    padding: 18px 12px;
    vertical-align: middle;
}

.td-resume-btn[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.td-resume-viewed[b-dafirhr7ki] {
    font-size: 11.5px;
    font-weight: 500;
    color: rgb(59, 130, 246);
}

.td-resume-viewed-by[b-dafirhr7ki] {
    font-size: 10.5px;
    color: #9ca3af;
}

.td-resume-not-viewed[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #9ca3af;
}

.td-job[b-dafirhr7ki] {
    padding: 14px 12px;
    vertical-align: middle;
}

.td-job-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-job-img-wrapper[b-dafirhr7ki] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: visible;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    position: relative;
}

.td-job-img[b-dafirhr7ki] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.td-job-letter-avatar[b-dafirhr7ki] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.td-job-client-badge[b-dafirhr7ki] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    background: #fff;
}

.td-job-type-info[b-dafirhr7ki] {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
}

.td-job-info[b-dafirhr7ki] {
    min-width: 0;
}

.td-job-title[b-dafirhr7ki] {
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.td-job-client[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
}

.td-job-separator[b-dafirhr7ki] {
    color: #d1d5db;
    margin: 0 4px;
}

.td-skill[b-dafirhr7ki] {
    padding: 14px 12px;
    vertical-align: middle;
}

.td-skill-content[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.td-donut-wrapper[b-dafirhr7ki] {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.td-donut-svg[b-dafirhr7ki] {
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    left: 0;
}

.td-donut-label[b-dafirhr7ki] {
    font-size: 10.5px;
    font-weight: 800;
    z-index: 1;
}

.td-skill-tags[b-dafirhr7ki] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
}

.td-skill-tag[b-dafirhr7ki] {
    font-size: 10px;
    background: #eff6ff;
    color: rgb(59, 130, 246);
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.td-skill-more[b-dafirhr7ki] {
    font-size: 10px;
    color: #9ca3af;
    padding: 2px 4px;
    cursor: pointer;
}

.td-skill-more:hover[b-dafirhr7ki] {
    color: rgb(59,130,246);
    text-decoration: underline;
}

/* Skill dropdown (click toggle) */
.td-skill-dropdown[b-dafirhr7ki] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    z-index: 40;
    min-width: 180px;
    padding: 8px 0;
}

.td-skill-dropdown-header[b-dafirhr7ki] {
    font-size: 9px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
}

.td-skill-dropdown-row[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    color: #374151;
}

.td-skill-dropdown-row:hover[b-dafirhr7ki] {
    background: #f9fafb;
}
.td-skill-dropdown-yrs[b-dafirhr7ki]{
color:#9ca3af;
font-size:12px;
white-space:no-wrap;
margin-left:12px;
}

.td-overall[b-dafirhr7ki] {
    padding: 14px 12px;
    vertical-align: middle;
}

.td-overall-content[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.td-overall-label[b-dafirhr7ki] {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Score breakdown tooltip (hover) */
.td-score-group[b-dafirhr7ki] {
    position: relative;
}

.td-score-tooltip[b-dafirhr7ki] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    width: 210px;
    padding: 12px 14px;
    z-index: 100;
}

.td-score-group:hover .td-score-tooltip[b-dafirhr7ki] {
    display: block;
}

.td-score-tooltip[b-dafirhr7ki]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
}

.td-score-tooltip-header[b-dafirhr7ki] {
    font-size: 9px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.td-score-tooltip-row[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 11px;
    color: #374151;
}

.td-score-tooltip-row-last span:last-child[b-dafirhr7ki] {
    color: rgb(59,130,246);
    font-weight: 600;
}

/* ── Action Column ── */
.td-action[b-dafirhr7ki] {
    padding: 14px 12px;
    vertical-align: middle;
    position: relative;
}

.action-badge[b-dafirhr7ki] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.action-badge-submit[b-dafirhr7ki] {
    background: #f0fdf4;
    color: #16a34a;
}

.action-badge-reject[b-dafirhr7ki] {
    background: #fef2f2;
    color: #dc2626;
}

.action-menu-btn[b-dafirhr7ki] {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.action-menu-btn:hover[b-dafirhr7ki] {
    background: #f1f5f9;
}

.action-menu-dropdown[b-dafirhr7ki] {
    position: absolute;
    right: 8px;
    top: 52px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 200;
    min-width: 150px;
    padding: 6px;
}

.action-menu-overlay[b-dafirhr7ki] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.action-menu-item[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 0;
    font-family: inherit;
    transition: background 0.15s;
}

.action-menu-submit[b-dafirhr7ki] {
    color: #16a34a;
}

.action-menu-submit:hover[b-dafirhr7ki] {
    background: #f0fdf4;
}

.action-menu-reject[b-dafirhr7ki] {
    color: #dc2626;
}

.action-menu-reject:hover[b-dafirhr7ki] {
    background: #fef2f2;
}

/* ── Applied Candidates Empty State ── */
.applied-empty[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: #9ca3af;
}

.applied-empty-text[b-dafirhr7ki] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

/* Applied Candidates pagination now uses the shared <Pagination> component (global g-pagination styles) */

/* ── Reject Modal ── */
.reject-modal-backdrop[b-dafirhr7ki] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 9998;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.reject-modal[b-dafirhr7ki] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 94vw;
    background: #ffffff;
    border-radius: 20px;
    z-index: 9999;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 32px;
}

.reject-modal-header[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.reject-modal-icon[b-dafirhr7ki] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reject-modal-title[b-dafirhr7ki] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.reject-modal-candidate[b-dafirhr7ki] {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 1px;
}

.modal-close-btn[b-dafirhr7ki] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: #6b7280;
}

.reject-modal-prompt[b-dafirhr7ki] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.reject-modal-textarea[b-dafirhr7ki] {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    background: #f9fafb;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.reject-modal-actions[b-dafirhr7ki] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-confirm-reject[b-dafirhr7ki] {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    background: #dc2626;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.btn-cancel-reject[b-dafirhr7ki] {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    background: #ffffff;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
    cursor: pointer;
}

/* ── Resume Modal ── */
.resume-modal-backdrop[b-dafirhr7ki] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 9998;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.resume-modal[b-dafirhr7ki] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    max-width: 94vw;
    max-height: 88vh;
    background: #ffffff;
    border-radius: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.resume-modal-header[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.resume-modal-header-left[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resume-modal-title[b-dafirhr7ki] {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.resume-modal-subtitle[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #9ca3af;
    margin-top: 2px;
}

.modal-close-btn-lg[b-dafirhr7ki] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #6b7280;
}

.resume-modal-body[b-dafirhr7ki] {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    background: #f8f9fa;
}

.resume-modal-content[b-dafirhr7ki] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    min-height: 500px;
}

.resume-candidate-header[b-dafirhr7ki] {
    border-bottom: 2px solid #111827;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.resume-candidate-name[b-dafirhr7ki] {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
}

.resume-candidate-role[b-dafirhr7ki] {
    font-size: 14px;
    color: #6b7280;
}

.resume-candidate-contact[b-dafirhr7ki] {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 4px;
}

.resume-stats-grid[b-dafirhr7ki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.resume-stat-card[b-dafirhr7ki] {
    background: #f9fafb;
    border-radius: 10px;
    padding: 16px;
}

.resume-stat-label[b-dafirhr7ki] {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 8px;
}

.resume-stat-value-blue[b-dafirhr7ki] {
    font-size: 28px;
    font-weight: 800;
    color: rgb(59, 130, 246);
}

.resume-stat-value-dark[b-dafirhr7ki] {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
}

.resume-placeholder[b-dafirhr7ki] {
    background: #eff6ff;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}

.resume-placeholder-text[b-dafirhr7ki] {
    font-size: 13px;
    color: #6b7280;
}

/* ── Activity Feed Drawer ── */
.feed-drawer-backdrop[b-dafirhr7ki] {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.35);
    z-index: 9998;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.feed-drawer[b-dafirhr7ki] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 600px;
    max-width: 90vw;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
}

.feed-drawer-header[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.feed-drawer-title[b-dafirhr7ki] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}

.feed-drawer-refresh-info[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.feed-drawer-refresh-label[b-dafirhr7ki] {
    font-size: 11.5px;
    color: #9ca3af;
}

.feed-drawer-refresh-time[b-dafirhr7ki] {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
}

.feed-drawer-actions[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-icon-btn[b-dafirhr7ki] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-close-btn[b-dafirhr7ki] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #6b7280;
}

.feed-drawer-tabs[b-dafirhr7ki] {
    display: flex;
    gap: 6px;
    padding: 16px 28px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
    overflow-x: auto;
}

.feed-tab-btn[b-dafirhr7ki] {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.feed-tab-active[b-dafirhr7ki] {
    border: 1.5px solid #111827;
    background: #111827;
    color: #ffffff;
}

.feed-tab-inactive[b-dafirhr7ki] {
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
}

.feed-drawer-list[b-dafirhr7ki] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feed-empty-state[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* ── Activity Feed Shimmer Skeleton ── */
.feed-shimmer-wrap[b-dafirhr7ki] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 0;
}

.feed-shimmer-item[b-dafirhr7ki] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.feed-shimmer-dot[b-dafirhr7ki] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
    margin-top: 4px;
    animation: feedShimmer-b-dafirhr7ki 1.2s ease-in-out infinite;
}

.feed-shimmer-content[b-dafirhr7ki] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feed-shimmer-line[b-dafirhr7ki] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: feedShimmer-b-dafirhr7ki 1.2s ease-in-out infinite;
}

.feed-shimmer-line-lg[b-dafirhr7ki] { width: 85%; }
.feed-shimmer-line-md[b-dafirhr7ki] { width: 65%; }
.feed-shimmer-line-sm[b-dafirhr7ki] { width: 45%; height: 10px; }
.feed-shimmer-line-xs[b-dafirhr7ki] { width: 60px; height: 10px; }

.feed-shimmer-meta[b-dafirhr7ki] {
    display: flex;
    gap: 10px;
}

@keyframes feedShimmer-b-dafirhr7ki {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.feed-drawer-item[b-dafirhr7ki] {
    position: relative;
    padding-left: 18px;
    border-left: 2px solid #f3f4f6;
}

.feed-drawer-dot[b-dafirhr7ki] {
    position: absolute;
    left: -5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.feed-drawer-meta-row[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.feed-drawer-verb-badge[b-dafirhr7ki] {
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 6px;
}

.feed-drawer-footer[b-dafirhr7ki] {
    padding: 16px 28px;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    text-align: center;
}

.feed-drawer-footer-text[b-dafirhr7ki] {
    font-size: 12px;
    color: #9ca3af;
}

 

.footer-copyright[b-dafirhr7ki] {
    font-size: 11px;
    color: #9ca3af;
}

.footer-brand[b-dafirhr7ki] {
    font-weight: 600;
    color: rgb(59, 130, 246);
}

.footer-links[b-dafirhr7ki] {
    display: flex;
    gap: 24px;
}

.footer-link-btn[b-dafirhr7ki] {
    font-size: 11px;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   DASHBOARD RESPONSIVE LAYOUT
   ═══════════════════════════════════════════ */

 

/* Banner row */
.db-row[b-dafirhr7ki] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
}
.db-left[b-dafirhr7ki] { flex: 1; min-width: 0; }
.db-center[b-dafirhr7ki] { width: 340px; flex-shrink: 0; border-left: 1px solid #f3f4f6; padding-left: 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: visible; }
.db-right[b-dafirhr7ki] { flex-shrink: 1; min-width: 0; border-left: 1px solid #f3f4f6; padding-left: 28px; display: flex; align-items: stretch; overflow: hidden; position: relative; }

/* Job tracking strip */
.dj[b-dafirhr7ki] { display: grid; grid-template-columns: repeat(4, 1fr);padding:24px }

/* Action center */
.da[b-dafirhr7ki] { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-bottom: 10px; }
.dap[b-dafirhr7ki] { display: flex; flex-direction: row; gap: 8px; align-items: stretch; }

/* Main 2-col grid (left content · right sidebar) */
.dm[b-dafirhr7ki] { display: grid; grid-template-columns: 1fr 500px; gap: 24px; align-items: start; }
.dc[b-dafirhr7ki] { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* Top Performer card */
.dtp[b-dafirhr7ki] { display: flex; flex-direction: row; width: 480px; max-width: 100%; }
.dtph[b-dafirhr7ki] { width: 210px; flex-shrink: 0; position: relative; overflow: hidden; min-height: 200px; }

 

/* ── XL (≤1440px) — large desktop ── */
@media (max-width: 1920px) {
    .th-experience[b-dafirhr7ki],
    .td-experience[b-dafirhr7ki] { display: none; }
}

@media (max-width: 1440px) {
     .db-center[b-dafirhr7ki] { width: 240px; padding-left: 20px; }
    .db-right[b-dafirhr7ki] { padding-left: 20px; }
    .dtp[b-dafirhr7ki] { width: 380px; }
    .dtph[b-dafirhr7ki] { width: 160px; }
}
@media (max-width: 1366px) {
   .da[b-dafirhr7ki]{
        grid-template-columns: 1fr;
   }
}
/* ── Mobile Applied Candidates Cards ── */
.applied-cards-mobile[b-dafirhr7ki] {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.applied-card[b-dafirhr7ki] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    transition: box-shadow 0.15s;
}

.applied-card:hover[b-dafirhr7ki] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.applied-card-header[b-dafirhr7ki] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.applied-card-name[b-dafirhr7ki] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    text-decoration: none;
}

.applied-card-title[b-dafirhr7ki] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.applied-card-scores[b-dafirhr7ki] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.applied-card-score[b-dafirhr7ki] {
    font-size: 13px;
    font-weight: 700;
}

.applied-card-meta[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.applied-card-job[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.applied-card-job-title[b-dafirhr7ki] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.applied-card-job-client[b-dafirhr7ki] {
    font-size: 11px;
    color: #9ca3af;
}

.applied-card-footer[b-dafirhr7ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.applied-card-skills[b-dafirhr7ki] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.applied-card-skill-tag[b-dafirhr7ki] {
    font-size: 10px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.applied-card-skill-more[b-dafirhr7ki] {
    font-size: 10px;
    color: #9ca3af;
}

.applied-card-fit[b-dafirhr7ki] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.applied-card-date[b-dafirhr7ki] {
    font-size: 10px;
    color: #b0b0b0;
    margin-top: 8px;
}

/* ── LG-XL (≤1280px) — desktop ── */
@media (max-width: 1280px) {
     .db-center[b-dafirhr7ki] { width: 200px; padding-left: 16px; }
    .db-right[b-dafirhr7ki] { padding-left: 16px; }
    .db-row[b-dafirhr7ki] { gap: 16px !important; }
    .dm[b-dafirhr7ki] { grid-template-columns: 1fr 360px !important; }
    .dtp[b-dafirhr7ki] { width: 340px; }
    .dtph[b-dafirhr7ki] { width: 140px; }
}

/* ── LG (≤1024px) — laptop/tablet ── */
@media (max-width: 1024px) {
     .dashboard-header-banner[b-dafirhr7ki] { padding: 28px !important; border-radius: 1.2rem !important; }
    .db-row[b-dafirhr7ki] { flex-direction: column !important; gap: 24px !important; }
    .db-left[b-dafirhr7ki] { flex: none !important; width: 100% !important; }
    .db-center[b-dafirhr7ki] {
        width: 100% !important; border-left: none !important;
        padding-left: 0 !important; border-top: 1px solid #f3f4f6; padding-top: 24px;
    }
    .db-right[b-dafirhr7ki] {
        border-left: none !important; padding-left: 0 !important;
        border-top: 1px solid #f3f4f6; padding-top: 24px; width: 100% !important;
        display: block !important;
    }
    .banner-greeting[b-dafirhr7ki] { font-size: 28px !important; }
    .dj[b-dafirhr7ki] { grid-template-columns: repeat(2, 1fr) !important; }
    .da[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .dm[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .dc[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .dashboard-top-row[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .dtp[b-dafirhr7ki] { width: 100% !important; max-width: 100% !important; }
    .dtph[b-dafirhr7ki] { width: 200px !important; }
    .dtph img[b-dafirhr7ki] { object-position: center 20% !important; }
    .dashboard-pipeline[b-dafirhr7ki] { padding: 24px !important; }
    .dashboard-activity-feed[b-dafirhr7ki] { padding: 24px !important; }
    .dashboard-top-recruiters[b-dafirhr7ki] { padding: 24px !important; }
    .dashboard-schedule[b-dafirhr7ki] { padding: 24px !important; }
    .dashboard-applied-candidates[b-dafirhr7ki] { padding: 20px !important; }
    .pipeline-hero[b-dafirhr7ki] { padding: 28px !important; min-height: 200px !important; }
    .pipeline-hero-count[b-dafirhr7ki] { font-size: 56px !important; }
    .dashboard-action-panels[b-dafirhr7ki] { padding: 6px !important; }
}

/* ── MD (≤768px) — tablet portrait ── */
@media (max-width: 768px) {
     .dashboard-header-banner[b-dafirhr7ki] { padding: 20px !important; border-radius: 1rem !important; margin-bottom: 20px !important; }
    .banner-greeting[b-dafirhr7ki] { font-size: 24px !important; letter-spacing: -0.5px !important; }
    .banner-description[b-dafirhr7ki] { font-size: 13px !important; max-width: 100% !important; }
    .banner-buttons[b-dafirhr7ki] { gap: 8px !important; }
    .btn-view-pipeline[b-dafirhr7ki], .btn-view-interviews[b-dafirhr7ki] { font-size: 12px !important; padding: 6px 16px !important; }
    .timer-digit[b-dafirhr7ki] { font-size: 28px !important; min-width: 36px !important; }
    .timer-separator[b-dafirhr7ki] { font-size: 24px !important; }
    .target-progress-container[b-dafirhr7ki] { gap: 16px !important; }
    .dap[b-dafirhr7ki] { flex-wrap: wrap !important; }
    .dtp[b-dafirhr7ki] { flex-direction: column !important; }
    .dtph[b-dafirhr7ki] { width: 100% !important; height: 260px !important; }
    .dtph img[b-dafirhr7ki] { object-position: center 18% !important; }
    .dtph > div:last-child[b-dafirhr7ki] { bottom: 10px !important; }
    .performer-info[b-dafirhr7ki] { padding: 18px 16px !important; }
    .performer-name[b-dafirhr7ki] { font-size: 18px !important; }
    .performer-stats-grid[b-dafirhr7ki] { gap: 10px 12px !important; }
    .performer-stat-num[b-dafirhr7ki] { font-size: 18px !important; }
    .da[b-dafirhr7ki] { gap: 16px !important; }
    .pipeline-hero[b-dafirhr7ki] { padding: 24px !important; min-height: 180px !important; }
    .pipeline-hero-count[b-dafirhr7ki] { font-size: 48px !important; }
    .pipeline-hero-desc[b-dafirhr7ki] { font-size: 13px !important; }
    .btn-explore-pipeline[b-dafirhr7ki] { font-size: 12px !important; padding: 6px 16px !important; }
    .dashboard-job-tracking[b-dafirhr7ki] { border-radius: 1rem !important; }
    .job-cell[b-dafirhr7ki] { padding: 20px !important; }
    .job-cell-value[b-dafirhr7ki] { font-size: 28px !important; }
    .job-cell-title[b-dafirhr7ki] { font-size: 13px !important; }
    .action-panel-value[b-dafirhr7ki] { font-size: 28px !important; }
    .action-panel-title[b-dafirhr7ki] { font-size: 13px !important; }
    .section-title[b-dafirhr7ki] { font-size: 16px !important; }
    .schedule-calendar[b-dafirhr7ki] { font-size: 11px !important; gap: 2px !important; }
    .applied-search-wrapper[b-dafirhr7ki] { width: 100% !important; }
    .applied-toolbar[b-dafirhr7ki] { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .applied-right-toolbar[b-dafirhr7ki] { justify-content: space-between !important; }
    .applied-table[b-dafirhr7ki] { min-width: 900px !important; }
    .applied-table-wrapper[b-dafirhr7ki] { display: none !important; }
    .applied-cards-mobile[b-dafirhr7ki] { display: flex !important; }
     .footer-links[b-dafirhr7ki] { justify-content: center !important; }
    .feed-drawer[b-dafirhr7ki] { width: 100% !important; max-width: 100% !important; }
    .feed-drawer-header[b-dafirhr7ki] { padding: 16px 18px !important; }
    .feed-drawer-tabs[b-dafirhr7ki] { padding: 12px 18px !important; }
    .feed-drawer-list[b-dafirhr7ki] { padding: 16px 18px !important; }
    .reject-modal[b-dafirhr7ki] { width: 92vw !important; padding: 24px !important; }
    .resume-modal[b-dafirhr7ki] { width: 96vw !important; }
}

/* ── SM (≤480px) — mobile ── */
@media (max-width: 480px) {
     .dashboard-header-banner[b-dafirhr7ki] { padding: 16px !important; border-radius: 0.75rem !important; margin-bottom: 16px !important; }
    .banner-greeting[b-dafirhr7ki] { font-size: 20px !important; margin-bottom: 10px !important; }
    .banner-description[b-dafirhr7ki] { font-size: 12px !important; line-height: 1.5 !important; }
    .banner-profile-row[b-dafirhr7ki] { gap: 8px !important; margin-bottom: 12px !important; }
    .banner-avatar-img[b-dafirhr7ki] { width: 36px !important; height: 36px !important; }
    .banner-user-info[b-dafirhr7ki] { font-size: 10px !important; }
    .banner-timer-section[b-dafirhr7ki] { margin-top: 12px !important; margin-bottom: 12px !important; }
    .timer-digit[b-dafirhr7ki] { font-size: 22px !important; min-width: 28px !important; }
    .timer-separator[b-dafirhr7ki] { font-size: 20px !important; width: 12px !important; }
    .banner-buttons[b-dafirhr7ki] { flex-direction: column !important; gap: 8px !important; }
    .btn-view-pipeline[b-dafirhr7ki], .btn-view-interviews[b-dafirhr7ki] { width: 100% !important; justify-content: center !important; text-align: center !important; padding: 10px 16px !important; }
    .target-header-row[b-dafirhr7ki] { flex-wrap: wrap !important; gap: 8px !important; }
    .target-motivational-chip[b-dafirhr7ki] { padding: 8px 10px !important; }
    .target-motivational-text[b-dafirhr7ki] { font-size: 10.5px !important; }
    .dj[b-dafirhr7ki] { grid-template-columns: 1fr 1fr !important; }
    .dap > div[b-dafirhr7ki] { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
    .dtph[b-dafirhr7ki] { height: 220px !important; }
    .performer-badge[b-dafirhr7ki] { font-size: 7px !important; padding: 4px 12px !important; }
    .performer-star-label[b-dafirhr7ki] { font-size: 12px !important; }
    .performer-name[b-dafirhr7ki] { font-size: 16px !important; }
    .performer-role[b-dafirhr7ki] { font-size: 11px !important; margin-bottom: 14px !important; }
    .performer-stat-num[b-dafirhr7ki] { font-size: 16px !important; }
    .performer-stat-label[b-dafirhr7ki] { font-size: 7.5px !important; }
    .pipeline-hero[b-dafirhr7ki] { padding: 20px !important; min-height: 160px !important; }
    .pipeline-hero-count[b-dafirhr7ki] { font-size: 40px !important; letter-spacing: -2px !important; }
    .pipeline-hero-desc[b-dafirhr7ki] { font-size: 12px !important; }
    .pipeline-hero-footer[b-dafirhr7ki] { margin-top: 24px !important; }
    .job-cell[b-dafirhr7ki] { padding: 16px !important; }
    .job-cell-value[b-dafirhr7ki] { font-size: 24px !important; }
    .job-cell-title[b-dafirhr7ki] { font-size: 12px !important; }
    .job-cell-sub[b-dafirhr7ki] { font-size: 10px !important; }
    .action-panel-value[b-dafirhr7ki] { font-size: 24px !important; }
    .action-panel-title[b-dafirhr7ki] { font-size: 12px !important; }
    .action-panel-sub[b-dafirhr7ki] { font-size: 10px !important; }
    .action-panel-icon[b-dafirhr7ki] { width: 32px !important; height: 32px !important; margin-bottom: 20px !important; }
    .dashboard-pipeline[b-dafirhr7ki] { padding: 16px !important; border-radius: 1rem !important; }
    .dashboard-activity-feed[b-dafirhr7ki] { padding: 16px !important; border-radius: 1rem !important; }
    .dashboard-top-recruiters[b-dafirhr7ki] { padding: 16px !important; border-radius: 1rem !important; }
    .dashboard-schedule[b-dafirhr7ki] { padding: 16px !important; border-radius: 1rem !important; }
    .dashboard-applied-candidates[b-dafirhr7ki] { padding: 14px 12px !important; border-radius: 1rem !important; }
    .section-title[b-dafirhr7ki] { font-size: 15px !important; }
    .activity-feed-header[b-dafirhr7ki] { margin-bottom: 18px !important; }
    .activity-feed-viewall[b-dafirhr7ki] { font-size: 12px !important; }
    .feed-item[b-dafirhr7ki] { padding-left: 12px !important; }
    .feed-subject[b-dafirhr7ki] { font-size: 12.5px !important; }
    .feed-note[b-dafirhr7ki] { font-size: 11px !important; padding: 7px 10px !important; }
    .recruiters-header[b-dafirhr7ki] { margin-bottom: 18px !important; }
    .recruiter-avatar[b-dafirhr7ki] { width: 30px !important; height: 30px !important; }
    .recruiter-name[b-dafirhr7ki] { font-size: 13px !important; }
    .schedule-header[b-dafirhr7ki] { margin-bottom: 20px !important; }
    .applied-title[b-dafirhr7ki] { font-size: 15px !important; }
    .applied-table[b-dafirhr7ki] { min-width: 700px !important; font-size: 11px !important; }
    .applied-table-wrapper[b-dafirhr7ki] { display: none !important; }
    .applied-cards-mobile[b-dafirhr7ki] { display: flex !important; }
    .applied-card[b-dafirhr7ki] { padding: 12px; }
    .applied-card-name[b-dafirhr7ki] { font-size: 13px; }
    .applied-card-score[b-dafirhr7ki] { font-size: 12px; }
    .dashboard-action-center[b-dafirhr7ki] { padding: 16px !important; border-radius: 1rem !important; }
    .dashboard-action-panels[b-dafirhr7ki] { border-radius: 1rem !important; }
 }

/* ── XS (≤360px) — small mobile ── */
@media (max-width: 360px) {
     .dashboard-header-banner[b-dafirhr7ki] { padding: 12px !important; }
    .banner-greeting[b-dafirhr7ki] { font-size: 18px !important; }
    .banner-description[b-dafirhr7ki] { font-size: 11px !important; }
    .timer-digit[b-dafirhr7ki] { font-size: 18px !important; min-width: 24px !important; }
    .timer-separator[b-dafirhr7ki] { font-size: 16px !important; }
    .dj[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .dap[b-dafirhr7ki] { flex-direction: column !important; }
    .dap > div[b-dafirhr7ki] { flex: none !important; width: 100% !important; }
    .job-cell-value[b-dafirhr7ki] { font-size: 20px !important; }
    .pipeline-hero-count[b-dafirhr7ki] { font-size: 32px !important; }
    .performer-stats-grid[b-dafirhr7ki] { grid-template-columns: 1fr !important; }
    .schedule-calendar[b-dafirhr7ki] { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════
   TAILWIND UTILITIES (dashboard-scoped)
   ═══════════════════════════════════════════ */

*[b-dafirhr7ki], [b-dafirhr7ki]::after, [b-dafirhr7ki]::before { box-sizing: border-box; }

/* Layout */
.flex[b-dafirhr7ki] { display: flex !important; }
.inline-flex[b-dafirhr7ki] { display: inline-flex !important; }
.hidden[b-dafirhr7ki] { display: none !important; }
.block[b-dafirhr7ki] { display: block !important; }
.flex-col[b-dafirhr7ki] { flex-direction: column !important; }
.flex-1[b-dafirhr7ki] { flex: 1 1 0% !important; }
.shrink-0[b-dafirhr7ki] { flex-shrink: 0 !important; }
.items-center[b-dafirhr7ki] { align-items: center !important; }
.items-stretch[b-dafirhr7ki] { align-items: stretch !important; }
.justify-between[b-dafirhr7ki] { justify-content: space-between !important; }
.justify-center[b-dafirhr7ki] { justify-content: center !important; }
.gap-2[b-dafirhr7ki] { gap: 0.5rem !important; }

/* Sizing */
.h-full[b-dafirhr7ki] { height: 100% !important; }
.h-3[b-dafirhr7ki] { height: 0.75rem !important; }
.h-3\.5[b-dafirhr7ki] { height: 0.875rem !important; }
.h-4[b-dafirhr7ki] { height: 1rem !important; }
.h-5[b-dafirhr7ki] { height: 1.25rem !important; }
.h-8[b-dafirhr7ki] { height: 2rem !important; }
.h-40[b-dafirhr7ki] { height: 10rem !important; }
.w-full[b-dafirhr7ki] { width: 100% !important; }
.w-3[b-dafirhr7ki] { width: 0.75rem !important; }
.w-3\.5[b-dafirhr7ki] { width: 0.875rem !important; }
.w-4[b-dafirhr7ki] { width: 1rem !important; }
.w-5[b-dafirhr7ki] { width: 1.25rem !important; }
.w-8[b-dafirhr7ki] { width: 2rem !important; }
.w-24[b-dafirhr7ki] { width: 6rem !important; }
.w-40[b-dafirhr7ki] { width: 10rem !important; }

/* Overflow */
.overflow-hidden[b-dafirhr7ki] { overflow: hidden !important; }
.overflow-y-auto[b-dafirhr7ki] { overflow-y: auto !important; }

/* Position */
.absolute[b-dafirhr7ki] { position: absolute !important; }
.relative[b-dafirhr7ki] { position: relative !important; }
.top-full[b-dafirhr7ki] { top: 100% !important; }
.top-1\/2[b-dafirhr7ki] { top: 50% !important; }
.left-0[b-dafirhr7ki] { left: 0 !important; }
.left-3[b-dafirhr7ki] { left: 0.75rem !important; }
.z-50[b-dafirhr7ki] { z-index: 50 !important; }

/* Transform */
.-translate-y-1\/2[b-dafirhr7ki] { transform: translateY(-50%) !important; }
.rotate-180[b-dafirhr7ki] { transform: rotate(180deg) !important; }

/* Spacing */
.mt-0\.5[b-dafirhr7ki] { margin-top: 0.125rem !important; }
.mt-2[b-dafirhr7ki] { margin-top: 0.5rem !important; }
.mb-2[b-dafirhr7ki] { margin-bottom: 0.5rem !important; }
.mx-auto[b-dafirhr7ki] { margin-left: auto !important; margin-right: auto !important; }
.p-2[b-dafirhr7ki] { padding: 0.5rem !important; }
.px-4[b-dafirhr7ki] { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-2[b-dafirhr7ki] { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3[b-dafirhr7ki] { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

/* Typography */
.text-left[b-dafirhr7ki] { text-align: left !important; }
.text-sm[b-dafirhr7ki] { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-xs[b-dafirhr7ki] { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-\[11px\][b-dafirhr7ki] { font-size: 11px !important; }
.font-medium[b-dafirhr7ki] { font-weight: 500 !important; }
.font-semibold[b-dafirhr7ki] { font-weight: 600 !important; }
.font-bold[b-dafirhr7ki] { font-weight: 700 !important; }

/* Colors */
.text-white[b-dafirhr7ki] { color: #fff !important; }
.text-blue-300[b-dafirhr7ki] { color: rgb(147, 197, 253) !important; }
.text-blue-400[b-dafirhr7ki] { color: rgb(96, 165, 250) !important; }
.text-blue-500[b-dafirhr7ki] { color: rgb(59, 130, 246) !important; }
.text-blue-600[b-dafirhr7ki] { color: rgb(37, 99, 235) !important; }
.text-gray-400[b-dafirhr7ki] { color: rgb(156, 163, 175) !important; }
.text-gray-500[b-dafirhr7ki] { color: rgb(107, 114, 128) !important; }
.text-green-500[b-dafirhr7ki] { color: rgb(34, 197, 94) !important; }
.text-red-500[b-dafirhr7ki] { color: rgb(239, 68, 68) !important; }
.text-slate-400[b-dafirhr7ki] { color: rgb(148, 163, 184) !important; }
.text-slate-500[b-dafirhr7ki] { color: rgb(100, 116, 139) !important; }
.text-slate-600[b-dafirhr7ki] { color: rgb(71, 85, 105) !important; }
.text-slate-700[b-dafirhr7ki] { color: rgb(51, 65, 85) !important; }
.text-slate-800[b-dafirhr7ki] { color: rgb(30, 41, 59) !important; }

/* Backgrounds */
.bg-white[b-dafirhr7ki] { background-color: #fff !important; }
.bg-blue-50[b-dafirhr7ki] { background-color: rgb(239, 246, 255) !important; }

/* Borders */
.border[b-dafirhr7ki] { border-width: 1px !important; border-style: solid !important; border-color: rgb(229, 231, 235) !important; }
.border-b[b-dafirhr7ki] { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-gray-200[b-dafirhr7ki] { border-color: rgb(229, 231, 235) !important; }
.border-slate-100[b-dafirhr7ki] { border-color: rgb(241, 245, 249) !important; }
.border-slate-200[b-dafirhr7ki] { border-color: rgb(226, 232, 240) !important; }

/* Radius */
.rounded-lg[b-dafirhr7ki] { border-radius: 0.5rem !important; }
.rounded-md[b-dafirhr7ki] { border-radius: 0.375rem !important; border:none; }
.rounded-xl[b-dafirhr7ki] { border-radius: 0.75rem !important; }

/* Shadows */
.shadow-sm[b-dafirhr7ki] { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow-lg[b-dafirhr7ki] { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }

/* Transitions */
.transition-colors[b-dafirhr7ki] { transition-property: color, background-color, border-color; transition-duration: 0.15s; }
.transition-transform[b-dafirhr7ki] { transition-property: transform; transition-duration: 0.15s; }

/* Hover states */
.hover\:bg-slate-50:hover[b-dafirhr7ki] { background-color: rgb(248, 250, 252) !important; }
.hover\:bg-blue-50:hover[b-dafirhr7ki] { background-color: rgb(239, 246, 255) !important; }
.hover\:bg-blue-100:hover[b-dafirhr7ki] { background-color: rgb(219, 234, 254) !important; }
.hover\:border-blue-400:hover[b-dafirhr7ki] { border-color: rgb(96, 165, 250) !important; }
.hover\:text-blue-700:hover[b-dafirhr7ki] { color: rgb(29, 78, 216) !important; }

/* Animation */
@keyframes spin-b-dafirhr7ki { to { transform: rotate(360deg); } }
.animate-spin[b-dafirhr7ki] { animation: spin-b-dafirhr7ki 1s linear infinite; }
.feed-refreshing svg[b-dafirhr7ki],
.feed-refreshing[b-dafirhr7ki]  svg { animation: spin-b-dafirhr7ki 0.8s linear infinite; }

/* SVG sizing fix */
svg[aria-hidden="true"][b-dafirhr7ki] { flex-shrink: 0; }

/* /Components/Pages/Dashboard/DraftCandidate/DraftCandidateDossierReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Draft Candidate Dossier Review – dcr- prefix
   Full-width layout (no job sidebar)
   8px grid system • Synced with CandidateDossierReview (dr-)
   ═══════════════════════════════════════════ */

/* ── UTILITY CLASSES ── */
.dcr-avatar-round-img[b-42efkhjrcn] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ── PAGE SHELL — natural document flow ── */
.dcr-page[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--g-bg-page);
    font-family: var(--g-font-sans);
    color: var(--g-gray-800);
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 1600px) {
    .dcr-page[b-42efkhjrcn] {
        min-height: calc(100vh / 0.85);
    }
}

/* ── PAGE TITLE BAR — Sticky below topbar ── */
.dcr-page-title-bar[b-42efkhjrcn] {
    position: sticky;
    top: var(--dcr-topbar-height, 0px);
    z-index: 100;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-gray-200);
    margin: 0 0 var(--g-space-16) 0;
    padding: 0;
    height: 66px;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease;
    overflow: hidden;
}

/* When JS adds this class on scroll: compact header with shadow */
.dcr-page-title-bar.dcr-title-bar-scrolled[b-42efkhjrcn] {
    box-shadow: var(--g-shadow-sm);
    border-bottom-color: var(--g-gray-300);
}


/* Default content — visible when NOT scrolled */
.dcr-title-default[b-42efkhjrcn] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-16);
    padding: 0 var(--g-space-24);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.dcr-title-bar-scrolled .dcr-title-default[b-42efkhjrcn] {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Scrolled compact content — hidden by default, shown when scrolled */
.dcr-title-scrolled[b-42efkhjrcn] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--g-space-24);
    gap: var(--g-space-16);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.dcr-title-bar-scrolled .dcr-title-scrolled[b-42efkhjrcn] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dcr-title-scrolled-left[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    min-width: 0;
    flex: 1;
}

.dcr-scrolled-avatar[b-42efkhjrcn] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.dcr-scrolled-avatar-img[b-42efkhjrcn] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dcr-scrolled-fallback[b-42efkhjrcn] {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.dcr-scrolled-avatar .dcr-avatar-initials[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
}

.dcr-scrolled-info[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dcr-scrolled-name[b-42efkhjrcn] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcr-scrolled-subtitle[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    line-height: var(--g-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcr-title-scrolled-right[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    flex-shrink: 0;
}



.dcr-page-heading[b-42efkhjrcn] {
       font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--g-lh-tight);
}

.dcr-page-subtitle[b-42efkhjrcn] {
  font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: var(--g-space-4) 0 0;
    line-height: var(--g-lh-normal);
    text-transform: uppercase;
}

/* ── HEADER + META — Unified card container ── */
.dcr-header-card-container[b-42efkhjrcn] {
    margin: 16px auto 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
}

.dcr-header[b-42efkhjrcn] {
   display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-24);
  
    box-shadow: none;
    margin: 0;
    background: var(--g-bg-card);
    border-radius: 12px;
    padding: 20px 22px;
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    padding: 20px 22px;
}

.dcr-header-left[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.dcr-back-btn[b-42efkhjrcn] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-gray-600);
    transition: background var(--g-transition), border-color var(--g-transition);
    flex-shrink: 0;
}
.dcr-back-btn:hover[b-42efkhjrcn] {
    background: var(--g-gray-100);
    border-color: var(--g-gray-300);
}

.dcr-header-avatar[b-42efkhjrcn] {
    position: relative;
    flex-shrink: 0;
}
.dr-header-avatar[b-42efkhjrcn] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--g-gray-100);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.dr-header-avatar img[b-42efkhjrcn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.dr-header-avatar .dr-avatar-initials[b-42efkhjrcn] {
    font-size: 18px;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    text-transform: uppercase;
}
.dr-avatar-status[b-42efkhjrcn] {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--g-success);
    border: 2.5px solid var(--g-bg-card);
    border-radius: var(--g-radius-full);
    z-index: 2;
}

.dcr-header-info[b-42efkhjrcn] {
    min-width: 0;
}

.dcr-header-role[b-42efkhjrcn] {
        font-size: var(--g-fs-section-subtitle);
    color: var(--g-text-secondary);
    margin: 1px 0 6px;
}

.dcr-header-details-row[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--g-space-6) var(--g-space-12);
}

.dcr-header-detail[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-secondary);
    white-space: nowrap;
}

.dcr-header-link[b-42efkhjrcn] {
    color: var(--g-brand);
    text-decoration: none;
    cursor: pointer;
}

.dcr-header-link:hover[b-42efkhjrcn] {
    text-decoration: underline;
}

.dcr-header-name-row[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
}
.dcr-header-name[b-42efkhjrcn] {
    font-size: var(--g-fs-section-title);
    font-weight: var(--g-fw-bold);
    line-height: var(--g-lh-tight);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcr-status-badge[b-42efkhjrcn] {
    font-size: var(--g-fs-xxxs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--g-radius-full);
    background: var(--g-success-bg, #ecfdf5);
    color: var(--g-success, #047857);
    border: 1px solid var(--g-success-border, #a7f3d0);
    white-space: nowrap;
}
.dcr-status-badge.dcr-badge-inactive[b-42efkhjrcn] {
    background: var(--g-error-bg, #fef2f2);
    color: var(--g-error, #b91c1c);
    border-color: var(--g-error-border, #fecaca);
}
.dcr-header-subtitle[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    display: block;
    margin-top: 2px;
}

.dcr-header-meta[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.dcr-meta-block[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
}
.dcr-meta-divider[b-42efkhjrcn] {
    width: 1px;
    height: 36px;
    background: var(--g-gray-200);
    flex-shrink: 0;
}
.dcr-meta-label[b-42efkhjrcn] {
     font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .06em;
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    text-transform: uppercase;
    white-space: nowrap;
}
.dcr-meta-value[b-42efkhjrcn] {
font-size: var(--g-fs-pipeline-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    white-space: nowrap;
}

.dcr-value-brand[b-42efkhjrcn],
.dcr-meta-value.dcr-value-brand[b-42efkhjrcn] {
    color: var(--g-brand);
}
.dcr-meta-highlight[b-42efkhjrcn] {
    padding-left: 20px;
    padding-right: 0;
}
.dcr-meta-sub[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin-top: 2px;
}



/* ── BODY — grid layout with optional sidebar ── */
.dcr-body[b-42efkhjrcn] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--g-space-24, 24px);
    margin: 16px auto;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}
.dcr-body-full[b-42efkhjrcn] {
    grid-template-columns: 1fr;
}
.dcr-content[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── SIDEBAR ── */
.dcr-sidebar[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 140px;
    max-height: calc(100vh - 160px);
    align-self: start;
    overflow: hidden;
}
.dcr-sidebar-header[b-42efkhjrcn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--g-space-12, 12px);
    padding-bottom: var(--g-space-8, 8px);
}
.dcr-sidebar-title[b-42efkhjrcn] {
   font-size: var(--g-fs-pipeline-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
    letter-spacing: 0.1em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6, 6px);
}
.dcr-sidebar-count[b-42efkhjrcn] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: .04em;
}
.dcr-sidebar-scroll[b-42efkhjrcn] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Recommended Job Cards ── */
.dcr-rec-card[b-42efkhjrcn] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl, 12px);
    padding: 14px;
    margin-bottom: var(--g-space-10, 10px);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.dcr-rec-card:hover[b-42efkhjrcn] {
    box-shadow: var(--g-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    border-color: var(--g-gray-300);
}
.dcr-rec-card-top[b-42efkhjrcn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.dcr-rec-card-info[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dcr-rec-card-info strong[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcr-rec-card-meta[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}
.dcr-rec-card-rate[b-42efkhjrcn] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-600);
}
.dcr-rec-card-match[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.dcr-rec-pct[b-42efkhjrcn] {
    font-size: var(--g-fs-section-title, 1.125rem);
    font-weight: var(--g-fw-bold);
}
.dcr-rec-lbl[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--g-text-muted);
    font-weight: var(--g-fw-semibold);
}
.dcr-rec-card-bottom[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8, 8px);
    margin-top: var(--g-space-8, 8px);
    padding-top: var(--g-space-8, 8px);
    border-top: 1px solid var(--g-gray-100);
}
.dcr-rec-skill[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary, #64748b);
    font-weight: var(--g-fw-medium);
}
.dcr-priority[b-42efkhjrcn] {
    font-size: 10px;
    font-weight: var(--g-fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--g-radius-full, 9999px);
}
.dcr-priority-high[b-42efkhjrcn] {
    background: #fef2f2;
    color: #b91c1c;
}
.dcr-priority-medium[b-42efkhjrcn] {
    background: #fffbeb;
    color: #b45309;
}
.dcr-priority-low[b-42efkhjrcn] {
    background: #ecfdf5;
    color: #047857;
}



/* ── CARDS ── */
.dcr-card[b-42efkhjrcn] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    padding: 20px 22px;
}
.dcr-card-header-row[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dcr-card-title[b-42efkhjrcn] {
   color: var(--g-gray-700);
    margin: 0 0 14px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
  font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}
.dcr-card-header-row .dcr-card-title[b-42efkhjrcn] {
    margin-bottom: 0;
}
.dcr-title-brand[b-42efkhjrcn] {
    color: var(--g-brand);
       font-size: var(--g-fs-section-subtitle);
    font-weight: 500;
}

.dcr-badge-outline[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .05em;
    color: var(--g-brand);
    border: 1px solid color-mix(in srgb, var(--g-brand) 30%, transparent);
    border-radius: var(--g-radius-full);
    padding: 3px var(--g-space-12);
    background: color-mix(in srgb, var(--g-brand) 6%, transparent);
}

.dcr-summary-text[b-42efkhjrcn], .dcr-remarks-text[b-42efkhjrcn] {
       font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    line-height: 1.7;
    margin: 0;
}

.dcr-summary-text.dcr-summary-collapsed[b-42efkhjrcn] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dcr-card-text-wrap[b-42efkhjrcn] {
    display: block;
}

.dcr-view-more-btn[b-42efkhjrcn] {
    margin-top: var(--g-space-8);
    border: 0;
    background: transparent;
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
}

.dcr-view-more-btn svg[b-42efkhjrcn] {
    transition: transform .2s ease;
}

.dcr-view-more-btn .dcr-chevron-up[b-42efkhjrcn] {
    transform: rotate(180deg);
}

/* ── SKILLS ── */
.dcr-skills-wrap[b-42efkhjrcn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dcr-skill-pill[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 14px;
    border-radius: 999px;
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-gray-200, #e2e8f0);
    font-size: var(--g-fs-xs, 13px);
    font-weight: 500;
    color: var(--g-text-body, #334155);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.dcr-skill-pill:hover[b-42efkhjrcn] {
    background: var(--g-gray-50, #f8fafc);
}
.dcr-skill-name[b-42efkhjrcn] {
    white-space: nowrap;
}
.dcr-skill-years[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--g-gray-100, #f3f4f6);
    color: var(--g-text-secondary, #64748b);
    font-size: var(--g-fs-xxs, 11px);

    line-height: 1.2;
    white-space: nowrap;
}

/* ── TIMELINE — Modern style indicators ── */
.dcr-timeline[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: var(--g-space-20);
    margin-left: var(--g-space-6);
    position: relative;
}
.dcr-timeline-item[b-42efkhjrcn] {
    position: relative;
    padding: 0 0 var(--g-space-24) var(--g-space-20);
}
.dcr-timeline-item:last-child[b-42efkhjrcn] {
    padding-bottom: 0;
}
/* Connector line between dots — only between items, not above first or below last */
.dcr-timeline-item[b-42efkhjrcn]::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--g-gray-200);
}
.dcr-timeline-item:last-child[b-42efkhjrcn]::before {
    display: none;
}
.dcr-timeline-dot[b-42efkhjrcn] {
    position: absolute;
    left: -24px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2.5px solid var(--g-gray-300, #cbd5e1);
    background: var(--g-bg-card, #fff);
    z-index: 2;
    transition: all 0.2s ease;
}
.dcr-timeline-dot.blue[b-42efkhjrcn] {
    border-color: var(--g-brand, #2c7cff);
    background: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 4px rgba(0, 111, 249, 0.12);
}
.dcr-timeline-dot.dark[b-42efkhjrcn],
.dcr-timeline-dot.black[b-42efkhjrcn] {
    border-color: var(--g-gray-700);
    background: var(--g-gray-700);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}
.dcr-timeline-body[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dcr-timeline-title[b-42efkhjrcn] {
     font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}
.dcr-timeline-meta[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
}
.dcr-timeline-date[b-42efkhjrcn] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

/* ── TWO-COL ── */
.dcr-two-col[b-42efkhjrcn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-20);
}

.dcr-assess-list[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dcr-assess-card-row[b-42efkhjrcn] {
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--g-gray-50);
    border-radius: 10px;
    font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    border: 1px solid transparent;
    transition: background 0.15s ease;
}
.dcr-assess-card-row:hover[b-42efkhjrcn] {
    background: var(--g-gray-100);
}
.dcr-assess-card-row strong[b-42efkhjrcn] {
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-800);
}

/* Blue highlight variant — Current Co. Experience */
.dcr-assess-card-blue[b-42efkhjrcn] {
    background: var(--g-brand-bg, #eff6ff);
    border-color: var(--g-brand-border, #bfdbfe);
}
.dcr-assess-card-blue:hover[b-42efkhjrcn] {
    background: var(--g-brand-bg-hover, #dbeafe);
}
.dcr-assess-card-blue strong[b-42efkhjrcn] {
    color: var(--g-brand-dark, #1d4ed8);
}

/* Green highlight variant — Profile Completion */
.dcr-assess-card-green[b-42efkhjrcn] {
    background: var(--g-success-bg, #ecfdf5);
    border-color: var(--g-success-border, #a7f3d0);
}
.dcr-assess-card-green:hover[b-42efkhjrcn] {
    background: var(--g-success-bg-hover, #d1fae5);
}
.dcr-assess-card-green span[b-42efkhjrcn] {
    font-weight: var(--g-fw-semibold);
    color: var(--g-success, #047857);
}
.dcr-assess-card-green strong[b-42efkhjrcn] {
    color: var(--g-success, #047857);
    font-weight: var(--g-fw-extrabold);
}

.dcr-screening-list[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dcr-screening-item[b-42efkhjrcn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-12);
    background: var(--g-bg-section);
    padding: var(--g-space-30) var(--g-space-16);
    border-radius: var(--g-space-12);
    margin-bottom: 10px;
    border: none;
    flex-direction: row;

}
.dcr-screening-item:last-child[b-42efkhjrcn] { border-bottom: none; }
.dcr-screening-q[b-42efkhjrcn] {
   color: var(--g-gray-600);
    line-height: var(--g-lh-normal);
    flex: 1;
    font-weight: 700;
    font-size: var(--g-fs-section-subtitle);
}
.dcr-screening-a[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
    font-weight: var(--g-fw-bold);
    flex-shrink: 0;
}
.dcr-screening-a.yes[b-42efkhjrcn] { color: var(--g-success-text); }
.dcr-screening-a.no[b-42efkhjrcn] { color: var(--g-error); }

/* ── DOCUMENTS ── */
.dcr-doc-count[b-42efkhjrcn] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-muted);
    letter-spacing: .04em;
}
.dcr-doc-list[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dcr-doc-download[b-42efkhjrcn] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background var(--g-transition);
}
.dcr-doc-download:hover[b-42efkhjrcn] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}
.dcr-doc-row[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--g-space-12) 0;
    border-bottom: 1px solid var(--g-gray-100);
    transition: background var(--g-transition);
}
.dcr-doc-row:last-child[b-42efkhjrcn] { border-bottom: none; }
.dcr-doc-row:hover[b-42efkhjrcn] {
    background: var(--g-gray-50);
    border-radius: var(--g-radius-md);
    padding-left: var(--g-space-8);
    margin-left: -8px;
    padding-right: var(--g-space-8);
    margin-right: -8px;
}
.dcr-doc-icon[b-42efkhjrcn] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.dcr-doc-icon.dcr-doc-red[b-42efkhjrcn] { background: var(--g-error-bg); color: var(--g-error); }
.dcr-doc-icon.dcr-doc-blue[b-42efkhjrcn] { background: var(--g-indigo-bg); color: var(--g-indigo-light); }
.dcr-doc-info[b-42efkhjrcn] {
    flex: 1;
    min-width: 0;
}
.dcr-doc-info strong[b-42efkhjrcn] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcr-doc-info span[b-42efkhjrcn] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}
.dcr-doc-download[b-42efkhjrcn] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background var(--g-transition);
}
.dcr-doc-download:hover[b-42efkhjrcn] {
    background: var(--g-brand);
    color: #fff;
    border-color: var(--g-brand);
}


/* ═══════ FIXED BOTTOM ACTION BAR ═══════ */
.dcr-bottom-bar[b-42efkhjrcn] {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    padding: 14px 24px;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-gray-200);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
    margin-top: auto;
    margin-left: -18px;
    margin-right: -18px;
    border-radius: 6px;
    flex-wrap: wrap;
}
.dcr-wrap[b-42efkhjrcn]{
    display:flex;
    flex-direction: column;
}
.dcr-submit-error[b-42efkhjrcn] {
    display: block;
    width: 100%;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: #dc2626;
    margin-top: 4px;
}

/* Checkbox + Label */
.dcr-verify-label[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.dcr-verify-checkbox[b-42efkhjrcn] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dcr-verify-checkmark[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--g-gray-300);
    border-radius: var(--g-radius-xs);
    background: var(--g-bg-card);
    flex-shrink: 0;
    transition: all var(--g-transition);
}
.dcr-verify-checkmark svg[b-42efkhjrcn] {
    opacity: 0;
    color: #fff;
    transition: opacity .15s;
}
.dcr-verify-checkbox:checked + .dcr-verify-checkmark[b-42efkhjrcn] {
    background: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
}
.dcr-verify-checkbox:checked + .dcr-verify-checkmark svg[b-42efkhjrcn] {
    opacity: 1;
}
.dcr-verify-checkbox:focus-visible + .dcr-verify-checkmark[b-42efkhjrcn] {
    box-shadow: 0 0 0 3px rgba(0, 111, 249, .2);
}
.dcr-verify-text[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
    line-height: 1.4;
}

/* Bar Buttons */
.dcr-bar-actions[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    flex-shrink: 0;
}
.dcr-btn-draft[b-42efkhjrcn] {
    padding: 5px 22px;
    height: 30px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .04em;
    border: 1.5px solid var(--g-gray-300);
    border-radius: 10px;
    background: var(--g-bg-card);
    color: var(--g-gray-700);
    cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition);
    font-family: inherit;
    text-transform: uppercase;
}
.dcr-btn-draft:hover[b-42efkhjrcn] {
    background: var(--g-gray-100);
    border-color: var(--g-gray-400);
}
.dcr-btn-submit[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8);
    padding: 5px 22px;
    height: 30px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .04em;
    border: none;
    border-radius: 10px;
   background:var(--sidebar-active-bg);
    color: #fff;
    cursor: pointer;
    transition: background var(--g-transition), box-shadow var(--g-transition), opacity var(--g-transition);
    font-family: inherit;
    text-transform: uppercase;
}
.dcr-btn-submit:hover:not(:disabled)[b-42efkhjrcn] {
    background: color-mix(in srgb, var(--g-brand, #2c7cff) 85%, #000);
    box-shadow: 0 2px 8px rgba(0, 111, 249, .25);
}
.dcr-btn-submit:disabled[b-42efkhjrcn] {
    opacity: .45;
    cursor: not-allowed;
}

/* ═══════ RESPONSIVE ═══════ */

/* ── 1440px and below ── */
@media (max-width: 1440px) {
    .dcr-page[b-42efkhjrcn] {
        padding-left: 0;
        padding-right: 0;
    }
    .dcr-body[b-42efkhjrcn] {
        max-width: 1100px;
    }
    .dcr-content[b-42efkhjrcn] {
        gap: 24px;
    }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
    .dcr-content[b-42efkhjrcn] {
        flex-direction: column;
        gap: 20px;
    }
    .dcr-two-col[b-42efkhjrcn] {
        grid-template-columns: 1fr;
    }
    .dcr-bottom-bar[b-42efkhjrcn] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .dcr-bar-actions[b-42efkhjrcn] {
        justify-content: flex-end;
    }
    /* Header: stack metrics below */
    .dcr-header[b-42efkhjrcn] {
        flex-wrap: wrap;
    }
    .dcr-header-meta[b-42efkhjrcn] {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--g-gray-100);
    }
    .dcr-meta-block:first-child[b-42efkhjrcn] {
        padding-left: 0;
    }
    .dcr-body[b-42efkhjrcn] {
        grid-template-columns: 1fr 320px;
    }
    .dcr-body-full[b-42efkhjrcn] {
        grid-template-columns: 1fr;
    }
    /* Sticky header 1024 */
    .dcr-scrolled-name[b-42efkhjrcn] {
        font-size: 13px;
    }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
    .dcr-page[b-42efkhjrcn] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .dcr-page-title-bar[b-42efkhjrcn] {
        margin-left: -8px;
        margin-right: -8px;
    }
    .dcr-title-default[b-42efkhjrcn],
    .dcr-title-scrolled[b-42efkhjrcn] {
        padding: 0 12px;
    }
    .dcr-header-card-container[b-42efkhjrcn] {
        margin: 12px auto 0;
        border-radius: 12px;
    }
    .dcr-header[b-42efkhjrcn] {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px 14px;
    }
    .dcr-header-left[b-42efkhjrcn] {
        flex-direction: column;
        align-items: flex-start;
    }
    .dcr-header-meta[b-42efkhjrcn] {
        width: 100%;
        justify-content: space-between;
        border-top: 1px solid var(--g-gray-100);
        padding-top: 12px;
        margin-top: 4px;
    }
    .dcr-body[b-42efkhjrcn] {
        padding: 16px 0;
        grid-template-columns: 1fr;
    }
    .dcr-sidebar[b-42efkhjrcn] {
        position: static;
        max-height: none;
        order: 2;
    }
    .dcr-bottom-bar[b-42efkhjrcn] {
        padding: 12px 16px;
    }
    .dcr-bar-actions[b-42efkhjrcn] {
        width: 100%;
    }
    .dcr-btn-draft[b-42efkhjrcn],
    .dcr-btn-submit[b-42efkhjrcn] {
        flex: 1;
        justify-content: center;
    }
    /* Sticky header 768 — compact horizontal, smaller fonts */
    .dcr-scrolled-name[b-42efkhjrcn] {
        font-size: 13px;
    }
    .dcr-scrolled-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-avatar[b-42efkhjrcn] {
        width: 32px;
        height: 32px;
    }
    .dcr-scrolled-avatar .dcr-avatar-initials[b-42efkhjrcn] {
        font-size: 12px;
    }
}

/* ── 425px and below — vertical stack ── */
@media (max-width: 425px) {
    .dcr-page[b-42efkhjrcn] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .dcr-page-title-bar[b-42efkhjrcn] {
        margin-left: -8px;
        margin-right: -8px;
        height: 48px;
    }
    .dcr-title-default[b-42efkhjrcn],
    .dcr-title-scrolled[b-42efkhjrcn] {
        padding: 0 8px;
    }
    .dcr-page-heading .dcr-page-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-header-card-container[b-42efkhjrcn] {
        margin: 10px auto 0;
        border-radius: 10px;
    }
    .dcr-header[b-42efkhjrcn] {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    .dcr-header-left[b-42efkhjrcn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .dcr-header-name[b-42efkhjrcn] {
        font-size: var(--g-fs-body, 0.875rem);
    }
    .dcr-header-meta[b-42efkhjrcn] {
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
        justify-content: space-between;
    }
    .dcr-meta-divider[b-42efkhjrcn] {
        display: none;
    }
    .dcr-meta-block[b-42efkhjrcn] {
        padding: 8px 0;
        flex: 1;
        min-width: calc(33% - 8px);
    }
    .dcr-meta-row[b-42efkhjrcn] {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }
    .dcr-body[b-42efkhjrcn] {
        padding: 12px 0;
        margin: 12px auto;
    }
    .dcr-content[b-42efkhjrcn] {
        gap: 14px;
    }
    .dcr-card[b-42efkhjrcn] {
        padding: 16px;
        border-radius: 12px;
    }
    /* Status grid: 2x2 */
    .dcr-bottom-bar[b-42efkhjrcn] {
        padding: 10px 12px;
        flex-direction: column;
        gap: 10px;
    }
    .dcr-verify-text[b-42efkhjrcn] {
        font-size: 12px;
    }
    .dcr-bar-actions[b-42efkhjrcn] {
        flex-direction: column;
        width: 100%;
    }
    .dcr-btn-draft[b-42efkhjrcn],
    .dcr-btn-submit[b-42efkhjrcn] {
        width: 100%;
        justify-content: center;
    }
    .dcr-two-col[b-42efkhjrcn] {
        gap: 14px;
    }
    .dcr-skills-wrap[b-42efkhjrcn] {
        gap: 6px;
    }
    /* Sticky header 425 — keep single row */
    .dcr-title-scrolled[b-42efkhjrcn] {
        gap: 6px;
    }
    .dcr-title-bar-scrolled .dcr-title-scrolled[b-42efkhjrcn] {
        flex-direction: row;
        align-items: center;
    }
    .dcr-title-scrolled-left[b-42efkhjrcn] {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }
    .dcr-title-scrolled-right[b-42efkhjrcn] {
        flex-shrink: 0;
        padding-left: 0;
    }
    .dcr-scrolled-avatar[b-42efkhjrcn] {
        width: 30px;
        height: 30px;
    }
    .dcr-scrolled-avatar .dcr-avatar-initials[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-scrolled-name[b-42efkhjrcn] {
        font-size: 12px;
    }
    .dcr-scrolled-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-job-avatar[b-42efkhjrcn] {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }
    .dcr-scrolled-job-title[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-scrolled-job-meta[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
}

/* ── 375px and below ── */
@media (max-width: 375px) {
    .dcr-page-title-bar[b-42efkhjrcn] {
        margin-left: -6px;
        margin-right: -6px;
        height: 44px;
    }
    .dcr-title-default[b-42efkhjrcn],
    .dcr-title-scrolled[b-42efkhjrcn] {
        padding: 0 6px;
    }
    .dcr-page-heading .dcr-page-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-page-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-name[b-42efkhjrcn] {
        font-size: 12px;
    }
    .dcr-scrolled-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-job-title[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-scrolled-job-meta[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-card[b-42efkhjrcn] {
        padding: 14px;
    }
    .dcr-header-card-container[b-42efkhjrcn] {
        border-radius: 8px;
    }
}

/* ── 320px and below — minimal ── */
@media (max-width: 320px) {
    .dcr-page[b-42efkhjrcn] {
        padding-left: 4px;
        padding-right: 4px;
    }
    .dcr-page-title-bar[b-42efkhjrcn] {
        margin-left: -4px;
        margin-right: -4px;
        height: 40px;
    }
    .dcr-title-default[b-42efkhjrcn],
    .dcr-title-scrolled[b-42efkhjrcn] {
        padding: 0 4px;
    }
    .dcr-page-heading .dcr-page-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-scrolled-avatar[b-42efkhjrcn] {
        width: 26px;
        height: 26px;
    }
    .dcr-scrolled-avatar .dcr-avatar-initials[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-name[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }
    .dcr-scrolled-subtitle[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-job-avatar[b-42efkhjrcn] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .dcr-scrolled-job-title[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-scrolled-job-meta[b-42efkhjrcn] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }
    .dcr-header-card-container[b-42efkhjrcn] {
        border-radius: 8px;
    }
    .dcr-card[b-42efkhjrcn] {
        padding: 12px;
        border-radius: 10px;
    }
    .dcr-header[b-42efkhjrcn] {
        padding: 10px;
        gap: 12px;
    }
    .dcr-header-name[b-42efkhjrcn] {
        font-size: var(--g-fs-body, 0.875rem);
    }
    .dcr-bottom-bar[b-42efkhjrcn] {
        padding: 8px;
    }
}

/* ═══ Personal Info / Submission Rate Grid ═══ */
.dcr-info-grid[b-42efkhjrcn] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--g-space-16) var(--g-space-20);
}

.dcr-info-item[b-42efkhjrcn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dcr-info-label[b-42efkhjrcn] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dcr-info-value[b-42efkhjrcn] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-gray-900);
    word-break: break-word;
}

.dcr-info-value a[b-42efkhjrcn] {
    color: var(--g-brand);
    text-decoration: none;
}

.dcr-info-value a:hover[b-42efkhjrcn] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .dcr-info-grid[b-42efkhjrcn] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 425px) {
    .dcr-info-grid[b-42efkhjrcn] {
        grid-template-columns: 1fr;
    }
}

/* ═══ Draft Saved Success Modal ═══ */
.dcr-overlay[b-42efkhjrcn] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9990;
    animation: dcrFadeIn-b-42efkhjrcn 0.2s ease;
}

.dcr-success-popup[b-42efkhjrcn] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    z-index: 9991;
    width: 90%;
    max-width: 420px;
    animation: dcrPopIn-b-42efkhjrcn 0.25s ease;
}

.dcr-success-icon-wrap[b-42efkhjrcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--g-success-bg);
    color: var(--g-success);
    margin: 0 auto 20px;
}

.dcr-success-title[b-42efkhjrcn] {
    font-size: var(--g-fs-page-title, 1.25rem);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

.dcr-success-message[b-42efkhjrcn] {
    font-size: 0.875rem;
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.dcr-btn-success-ok[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 40px;
    border: none;
    border-radius: var(--g-radius-md);
    background: linear-gradient(310deg, #2c7cff, #21d4fd);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 5px -1px rgba(0, 147, 255, 0.2),
                0 5px 12px -4px rgba(0, 147, 255, 0.3);
}

.dcr-btn-success-ok:hover[b-42efkhjrcn] {
    opacity: 0.92;
}

.dcr-btn-outline[b-42efkhjrcn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 28px;
    border: 2px solid #2c7cff;
    border-radius: var(--g-radius-md);
    background: #fff;
    color: #2c7cff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dcr-btn-outline:hover[b-42efkhjrcn] {
    background: #f0f6ff;
}

@keyframes dcrFadeIn-b-42efkhjrcn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dcrPopIn-b-42efkhjrcn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* /Components/Pages/Dashboard/DraftCandidate/DraftCandidateSubmission.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Draft Candidate Submission – dc- prefix
   Full-width layout (no job sidebar)
   8px grid · Responsive · Self-contained
   ═══════════════════════════════════════════ */

/* ── Loading Overlay ── */
.dc-loading-overlay[b-skv08d8wt4] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.dc-loading-card[b-skv08d8wt4] {
    background: var(--g-bg-section);
    border-radius: var(--g-radius-2xl);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dc-loading-spinner[b-skv08d8wt4] {
    animation: dc-spin-b-skv08d8wt4 1s linear infinite;
}

@keyframes dc-spin-b-skv08d8wt4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dc-loading-title[b-skv08d8wt4] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.dc-loading-subtitle[b-skv08d8wt4] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* ── Page Shell ── */
.dc-page[b-skv08d8wt4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
}

/* ── Page Header ── */
.dc-header[b-skv08d8wt4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dc-header-left[b-skv08d8wt4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-title[b-skv08d8wt4] {
    font-size: var(--g-fs-page-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: var(--g-lh-tight);
}

.dc-subtitle[b-skv08d8wt4] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-normal);
    color: var(--g-text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* ── Full-width Form Wrapper ── */
.dc-form-wrap[b-skv08d8wt4] {
   
    max-width: 1000px;
    width: 100%;
    margin: 25px auto;
}

.dc-form-card[b-skv08d8wt4] {
    background: var(--g-bg-layout);
    border-radius: var(--g-radius-3xl);
    --tw-shadow: 0 20px 27px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dc-form-card-header[b-skv08d8wt4] {
       margin-bottom: 28px;
    background-color: white;
    padding: var(--g-space-24) var(--g-space-32);
     border-top-left-radius:var(--g-radius-3xl); 
    border-top-right-radius: var(--g-radius-3xl);
}

.dc-form-card-title[b-skv08d8wt4] {
  
     font-size: var(--g-fs-candidate-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.dc-form-card-subtitle[b-skv08d8wt4] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: var(--g-lh-normal);
}

/* ── Field Groups ── */
.dc-field-group[b-skv08d8wt4] {
      margin-bottom: var(--g-space-24);
    padding: 0 var(--g-space-32);
}

.dc-label[b-skv08d8wt4] {
    display: block;
      font-size: var(--g-space-12);
    font-weight: var(--g-fw-semibold);
    color: var(--g-dark);
    margin-bottom: 8px;
}

.dc-required[b-skv08d8wt4] {
    color: var(--g-error);
}

.dc-field-error[b-skv08d8wt4] {
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    margin-top: 4px;
    display: block;
}

.dc-resume-error-alert[b-skv08d8wt4] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: var(--g-radius-md);
    background: #fef2f2;
    color: #b91c1c;
    line-height: 1.4;
}

.dc-resume-error-alert svg[b-skv08d8wt4] {
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Input with Icon ── */
.dc-input-icon-wrap[b-skv08d8wt4] {
    position: relative;
    display: flex;
    align-items: center;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: var(--g-radius-md);
}

.dc-input-icon[b-skv08d8wt4] {
    position: absolute;
    left: 8px;
    color: var(--g-text-muted);
    pointer-events: none;
    flex-shrink: 0;
    height: auto;
    top: 7px;
}
.dc-input-icon-wrapping[b-skv08d8wt4]{
     position: absolute;
    top: 5px;
    background: var(--g-border-light);
    width: 30px;
    height: 30px;
    left: 7px;
    border-radius: var(--g-radius-xs);
}

.dc-input-icon:hover[b-skv08d8wt4] {
    color: var(--g-brand);
}

.dc-input[b-skv08d8wt4] {
    width: 100%;
    height: var(--g-btn-height);
    padding: 0 14px;
    border: 1px solid var(--g-gray-300);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-dark);
    background: var(--g-bg-card);
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    box-sizing: border-box;
}

.dc-input[b-skv08d8wt4]::placeholder {
    color: var(--g-text-muted);
}

.dc-input:focus[b-skv08d8wt4] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.dc-input-with-icon[b-skv08d8wt4] {
    padding-left: 42px;
}

/* ── Dropzone ── */
.dc-dropzone[b-skv08d8wt4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
    width: 100%;
    min-height: 180px;
    padding: 40px var(--g-space-20);
    border: 1px dashed var(--g-gray-200, #e5e7eb);
    border-radius: var(--g-radius-2xl, 1rem);
    background: white;
    cursor: pointer;
    transition: border-color var(--g-transition), background var(--g-transition), transform 0.2s;
    text-align: center;
    box-sizing: border-box;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dc-dropzone-disabled[b-skv08d8wt4] {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

.dc-dropzone:hover[b-skv08d8wt4],
.dc-dropzone.drag-over[b-skv08d8wt4] {
    border-color: var(--g-brand);
    background: var(--g-bg-section);
}

.dc-dropzone-icon-wrap[b-skv08d8wt4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-xl, 0.75rem);
        background: var(--sidebar-active-bg);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    transition: transform 0.2s;
}

.dc-dropzone:hover .dc-dropzone-icon-wrap[b-skv08d8wt4] {
    transform: scale(1.1);
}

.dc-dropzone-icon-success[b-skv08d8wt4] {
    color: var(--g-success);
}

.dc-dropzone-text[b-skv08d8wt4] {
      font-size: var(--g-space-16);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.dc-dropzone-hint[b-skv08d8wt4] {
      font-size: var(--g-space-12);
    color: var(--g-dark-muted);
    font-weight: var(--g-fw-medium);
}

.dc-dropzone-filename[b-skv08d8wt4] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    word-break: break-all;
}

.dc-dropzone-change[b-skv08d8wt4] {
    font-size: var(--g-fs-xs);
    color: var(--g-brand);
    font-weight: var(--g-fw-medium);
}

/* ── Form Actions ── */
.dc-form-actions[b-skv08d8wt4] {
      display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-12);
    margin-top: var(--g-space-8);
    padding-top: var(--g-space-24);
    padding-bottom: var(--g-space-24);
    /* border-top: 1px solid var(--g-border-light); */
    background-color: var(--bs-body-bg);
    border-bottom-right-radius: var(--g-radius-3xl);
    border-bottom-left-radius: var(--g-radius-3xl);
    padding: var(--g-space-24) var(--g-space-32);

}

.dc-btn-clear[b-skv08d8wt4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 22px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: color var(--g-transition), background var(--g-transition);
}

.dc-btn-clear:hover[b-skv08d8wt4] {
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

.dc-btn-clear:disabled[b-skv08d8wt4] {
    color: var(--g-text-muted);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

/* ── Modal ── */
.dc-modal-overlay[b-skv08d8wt4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: dcFadeIn-b-skv08d8wt4 0.2s ease-out;
}

@keyframes dcFadeIn-b-skv08d8wt4 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dcSlideDown-b-skv08d8wt4 {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dc-eval-modal[b-skv08d8wt4] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 36px 40px;
    max-width: 620px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: dcSlideDown-b-skv08d8wt4 0.25s ease-out;
    position: relative;
}

/* ── Loading ── */
.dc-loading[b-skv08d8wt4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    gap: 16px;
}

.dc-spinner[b-skv08d8wt4] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--g-gray-200, #e2e8f0);
    border-top-color: var(--g-brand, #2c7cff);
    border-radius: 50%;
    animation: dcSpin-b-skv08d8wt4 0.8s linear infinite;
}

@keyframes dcSpin-b-skv08d8wt4 {
    to { transform: rotate(360deg); }
}

.dc-loading-text[b-skv08d8wt4] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

/* ── Eval Header ── */
.dc-eval-header[b-skv08d8wt4] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 24px;
}

.dc-eval-score[b-skv08d8wt4] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.dc-score-ring[b-skv08d8wt4] {
    width: 100%;
    height: 100%;
}

.dc-score-progress[b-skv08d8wt4] {
    transition: stroke-dashoffset 1s ease-out;
}

.dc-score-text[b-skv08d8wt4] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.dc-score-value[b-skv08d8wt4] {
    font-size: var(--g-fs-display, 1.5rem);
    font-weight: var(--g-fw-extrabold, 800);
    color: var(--g-text-heading);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dc-score-label[b-skv08d8wt4] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.dc-eval-info[b-skv08d8wt4] {
    flex: 1;
    min-width: 0;
}

.dc-eval-title[b-skv08d8wt4] {
    font-size: 1.125rem;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
    line-height: var(--g-lh-tight);
}

.dc-eval-summary[b-skv08d8wt4] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: 1.6;
    margin: 0;
    background: var(--g-gray-100);
    border-radius: var(--g-radius-lg);
    padding: 14px 18px;
}

.dc-eval-db-status[b-skv08d8wt4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin-bottom: 24px;
    padding: 0 4px;
}

.dc-eval-db-status svg[b-skv08d8wt4] {
    flex-shrink: 0;
    color: var(--g-info, #006ff9);
    width: 18px;
    height: 18px;
}

.dc-eval-actions[b-skv08d8wt4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--g-border-light, #dde3eb);
}

.dc-btn-cancel[b-skv08d8wt4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid var(--g-gray-300, #d1d5db);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition);
}

.dc-btn-cancel:hover[b-skv08d8wt4] {
    background: var(--g-gray-100, #f3f4f6);
    border-color: var(--g-gray-400, #9ca3af);
}

/* ══════════════════════════════════
   Responsive
   ══════════════════════════════════ */

/* ── 1440px and below ── */
@media (max-width: 1440px) {
    .dc-form-wrap[b-skv08d8wt4] {
        width: 900px;
    }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
    .dc-form-wrap[b-skv08d8wt4] {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
    }
    .dc-form-card[b-skv08d8wt4] {
        padding: 28px 24px;
    }
}

@media (max-width: 768px) {
    .dc-header[b-skv08d8wt4] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .dc-form-wrap[b-skv08d8wt4] {
        margin-top: 16px;
    }
    .dc-form-card[b-skv08d8wt4] {
        padding: 20px 16px;
        border-radius: var(--g-radius-lg);
    }
    .dc-form-card-header[b-skv08d8wt4] {
        margin-bottom: 20px;
    }
    .dc-dropzone[b-skv08d8wt4] {
        min-height: 140px;
        padding: 20px 16px;
    }
    .dc-eval-modal[b-skv08d8wt4] {
        padding: 28px 24px;
        margin: 16px;
        max-width: 100%;
        border-radius: var(--g-radius-xl);
    }
    .dc-eval-header[b-skv08d8wt4] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .dc-eval-score[b-skv08d8wt4] {
        width: 100px;
        height: 100px;
    }
    .dc-score-value[b-skv08d8wt4] {
        font-size: 1.5rem;
    }
}

/* ── 425px and below ── */
@media (max-width: 425px) {
    .dc-title[b-skv08d8wt4] {
        font-size: 1rem;
    }
    .dc-subtitle[b-skv08d8wt4] {
        font-size: 12px;
    }
    .dc-form-card[b-skv08d8wt4] {
        padding: 16px 12px;
    }
    .dc-dropzone[b-skv08d8wt4] {
        min-height: 120px;
        padding: 16px 12px;
    }
    .dc-form-actions[b-skv08d8wt4] {
        flex-direction: column;
        gap: 10px;
    }
    .dc-btn-clear[b-skv08d8wt4] {
        width: 100%;
        padding: 10px 22px;
        order: 2;
    }
    .dc-eval-modal[b-skv08d8wt4] {
        padding: 24px 18px;
    }
    .dc-eval-actions[b-skv08d8wt4] {
        flex-direction: column;
        width: 100%;
    }
    .dc-btn-cancel[b-skv08d8wt4],
    .dc-btn-continue[b-skv08d8wt4] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 375px) {
    .dc-form-card[b-skv08d8wt4] {
        padding: 14px 10px;
    }
    .dc-eval-modal[b-skv08d8wt4] {
        padding: 20px 14px;
    }
}

/* ── Evaluation overlay (blocks page during AI eval) ── */
[b-skv08d8wt4] .dc-evaluation-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

[b-skv08d8wt4] .dc-evaluation-overlay-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}
/* /Components/Pages/Dashboard/DraftCandidate/DraftReviewPipeline.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   ReviewPipeline – Scoped CSS
   Prefix: rp-
   ═══════════════════════════════════════════════════════ */

/* ── Loader ── */
.rp-loader-overlay[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
}

.rp-loader-spinner[b-p9rzqt0hle] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--g-primary, #2563eb);
    border-radius: 50%;
    animation: rp-spin-b-p9rzqt0hle 0.8s linear infinite;
}

@keyframes rp-spin-b-p9rzqt0hle {
    to { transform: rotate(360deg); }
}

.rp-loader-text[b-p9rzqt0hle] {
    font-size: var(--g-fs-sm, 0.875rem);
    color: var(--g-text-secondary, #64748b);
    font-weight: 500;
}

/* ── Page Shell ── */
/* ── Wrapper ── */
.rp-wrapper[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    height: calc(90vh - 60px);
    overflow: hidden;
}


@media (max-width: 1600px) {
    .rp-wrapper[b-p9rzqt0hle] {
        height: calc(90vh / 0.85 - 60px);
    }
}

.rp-page[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--g-bg, #f1f5f9);
    overflow: hidden;
    position: relative;
    border-top-left-radius: var(--g-radius-3xl);
}

.rp-sticky-footer[b-p9rzqt0hle] {
    /* Pinned to the viewport bottom (matches Job Creation / Candidate Preview action bars),
       offset for the sidebar so it spans the content area only. */
    position: fixed;
    bottom: 5px;
    left: 257px;
    right: 20px;
    z-index: 50;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-gray-200);
    padding: var(--g-space-20) var(--g-space-32);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
    border-radius: 6px;
    transition: left 0.3s ease;
}

/* ── Two-Panel Split ── */
.rp-split[b-p9rzqt0hle] {
    display: flex;
    flex: 1;
    overflow: visible;
    gap: 0;
    min-height: 0;
    position: relative;
}

.rp-viewer-col[b-p9rzqt0hle] {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: flex 0.35s ease, max-width 0.35s ease;
     border-top-left-radius: var(--g-radius-3xl);
}

.rp-viewer-col[b-p9rzqt0hle]::-webkit-scrollbar { width: 5px; }
.rp-viewer-col[b-p9rzqt0hle]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.rp-viewer-col[b-p9rzqt0hle]::-webkit-scrollbar-track { background: transparent; }

.rp-data-panel[b-p9rzqt0hle] {
    flex: 0 0 55%;
    max-width: 55%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex 0.35s ease, max-width 0.35s ease;
}

/* Expanded state: viewer hidden, data full width */
.rp-expanded .rp-viewer-col[b-p9rzqt0hle] {
    flex: 0 0 0%;
    max-width: 0%;
    padding: 0;
    overflow: hidden;
}

.rp-expanded .rp-data-panel[b-p9rzqt0hle] {
    flex: 0 0 100%;
    max-width: 100%;
}

.rp-expanded .rp-breadcrumb-bar[b-p9rzqt0hle] {
    border-top-left-radius: var(--g-radius-3xl);
    border-top-right-radius: var(--g-radius-3xl);
}

/* ── Toggle Panel Button ── */
.rp-toggle-panel[b-p9rzqt0hle] {
    position: relative;
    z-index: 25;
    align-self: center;
    flex-shrink: 0;
    margin: 0 -18px;
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-gray-200);
    cursor: pointer;
    box-shadow: var(--g-shadow-sm);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, width 0.2s, height 0.2s, border-radius 0.2s;
    padding: 0;
    line-height: 1;
}

/* Expand state: circle */
.rp-toggle-expand[b-p9rzqt0hle] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* Collapse state: pill */
.rp-toggle-collapse[b-p9rzqt0hle] {
    width: 28px;
    height: 56px;
    border-radius: 8px;
}

.rp-toggle-panel:hover[b-p9rzqt0hle] {
    background: var(--g-gray-50);
    color: var(--g-gray-700);
    box-shadow: var(--g-shadow-md);
}

/* Toggle panel in expanded/collapse state — keep visible */
.rp-expanded .rp-toggle-panel[b-p9rzqt0hle] {
    background: var(--g-bg-card);
    color: var(--g-text-muted);
    border-color: var(--g-gray-200);
    margin: 0;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
}

.rp-expanded .rp-toggle-panel:hover[b-p9rzqt0hle] {
    background: var(--g-gray-50);
    color: var(--g-gray-700);
}

/* ── Breadcrumb Bar ── */
.rp-breadcrumb-bar[b-p9rzqt0hle] {
    padding: var(--g-space-24);
    flex-shrink: 0;
    background: var(--g-bg-card);
    z-index: 12;
    display: flex;
   
    width: 100%;
}

/* ── Data Body (flex container for form + sidebar) ── */
.rp-data-body[b-p9rzqt0hle] {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: var(--g-bg-page);
}

.rp-form-col[b-p9rzqt0hle] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--g-space-16) var(--g-space-20) 20px var(--g-space-20);
}

/* In expanded mode: form-col takes full width (no sidebar) */
.rp-expanded .rp-form-col[b-p9rzqt0hle] {
    flex: 1;
    max-width: 100%;
    padding-left: 40px;
}

/* hide scrollbar on form column */
.rp-form-col[b-p9rzqt0hle]::-webkit-scrollbar { width: 5px; }
.rp-form-col[b-p9rzqt0hle]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-xs); }
.rp-form-col[b-p9rzqt0hle]::-webkit-scrollbar-track { background: transparent; }

/* ═══ SIDEBAR ═══ */
.rp-sidebar[b-p9rzqt0hle] {
        flex: 0 0 40%;
    max-width: 32%;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    overflow-y: auto;
    margin: 0 auto;
    padding: var(--g-space-16) 0px 80px 0;
}

.rp-sidebar[b-p9rzqt0hle]::-webkit-scrollbar { width: 4px; }
.rp-sidebar[b-p9rzqt0hle]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: 3px; }

/* ═══ LEFT: Resume Viewer ═══ */
.rp-viewer-card[b-p9rzqt0hle] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--g-bg-card);
  
    box-shadow: var(--g-shadow-xs);
    overflow: hidden;
}

.rp-viewer-toolbar[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    z-index: 10;
    border-top-left-radius: var(--g-radius-3xl);
}

.rp-viewer-file-info[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
       font-size: var(--g-fs-section-subtitle);
    font-weight: 700;
    color: #344767;
    min-width: 0;
}

.rp-viewer-filename[b-p9rzqt0hle] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-viewer-controls[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rp-toolbar-btn[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #f3f4f6;
    background: #ffffff;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 8px;
    transition: box-shadow 0.2s, color 0.2s;
}

.rp-toolbar-btn:hover[b-p9rzqt0hle] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: #3b82f6;
}

.rp-zoom-level[b-p9rzqt0hle] {
    font-size: 12px;
    font-weight: 700;
    color: #344767;
    min-width: 36px;
    text-align: center;
    padding: 0 12px;
}

.rp-toolbar-divider[b-p9rzqt0hle] {
    width: 1px;
    height: 20px;
    background: var(--g-gray-200);
    margin: 0 var(--g-space-4);
}

.rp-zoom-group[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #f3f4f6;
    height: 32px;
    overflow: hidden;
}

.rp-zoom-btn[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 100%;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s;
}

.rp-zoom-btn:first-child[b-p9rzqt0hle] {
    border-right: 1px solid #e5e7eb;
}

.rp-zoom-btn:last-child[b-p9rzqt0hle] {
    border-left: 1px solid #e5e7eb;
}

.rp-zoom-btn:hover[b-p9rzqt0hle] {
    background: #f3f4f6;
}

.rp-viewer-body[b-p9rzqt0hle] {
    flex: 1;
    overflow: hidden;
    background: var(--g-bg-page);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--g-space-24);
}

.rp-resume-preview[b-p9rzqt0hle] {
    transform-origin: top center;
    transition: transform 0.15s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rp-resume-iframe[b-p9rzqt0hle] {
    width: 100%;
    height: 100%;
    border: none;
}

.rp-resume-placeholder[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    color: var(--g-text-muted);
    gap: var(--g-space-10);
    font-size: var(--g-fs-body);
}

/* ═══ CARDS ═══ */
.rp-card[b-p9rzqt0hle] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 22px var(--g-space-24);
    margin-bottom: 18px;
    box-shadow: var(--g-shadow-xs);
 
    margin: 0px auto 18px;
}



.rp-card-header[b-p9rzqt0hle] {
      display: flex;
    align-items: center;
    gap: var(--g-space-10);
    margin-bottom: var(--g-fs-sidejob-title);
    color: var(--g-brand);
    border-bottom: 1px solid var(--g-bg-page);
    padding-bottom: var(--g-fs-pipeline-title);
}

.rp-card-title[b-p9rzqt0hle] {
    font-size: var(--g-fs-section-subtitle);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    margin: 0;
    flex: 1;
    color: var(--g-brand);
    text-transform: uppercase;
}

/* ═══ HEADER CARD ═══ */
.rp-header-card[b-p9rzqt0hle] {
    flex-shrink: 0;
    padding: 1px 18px 17px 37px;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-border-card);
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Hide header card when expanded */
.rp-expanded .rp-header-card[b-p9rzqt0hle] {
    max-height: 0;
    opacity: 0;
    padding: 0 24px;
    pointer-events: none;
}

.rp-breadcrumb[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
       font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    color: var(--g-text-muted);
    margin-bottom: 0;
    justify-content: space-between;
    width: 100%;
}

.rp-breadcrumb a[b-p9rzqt0hle] {
    color: var(--g-text-secondary);
    text-decoration: none;
    transition: color var(--g-transition);
}

.rp-breadcrumb a:hover[b-p9rzqt0hle] { color: var(--g-brand); }

.rp-breadcrumb-sep[b-p9rzqt0hle] { color: var(--g-gray-300); }
.rp-breadcrumb-active[b-p9rzqt0hle] { color: var(--g-brand); }

.rp-header-date[b-p9rzqt0hle] {
       margin-right: inherit;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
    text-align: right;
  
    display: flex;
    align-items: center;
    gap: 4px;
}

.rp-header-card-top[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-16);
    margin-bottom: 0;
}

.rp-header-left-block[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Job+Client Avatar Structure */
.rp-job-avatar-wrap[b-p9rzqt0hle] {
    position: relative;
    flex-shrink: 0;
}

.rp-job-avatar-thumb[b-p9rzqt0hle] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--g-gray-100);
    border: 2px solid var(--g-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.rp-job-avatar-thumb img[b-p9rzqt0hle] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-job-avatar-badge[b-p9rzqt0hle] {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: var(--g-radius-full);
    overflow: hidden;
     border: 2.5px solid var(--g-bg-card);
    box-shadow: var(--g-shadow-sm);
}

.rp-job-avatar-badge img[b-p9rzqt0hle] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sidebar larger avatar */
.rp-sidebar .rp-job-avatar-wrap[b-p9rzqt0hle] {
    margin: 0 auto 10px;
}

.rp-sidebar .rp-job-avatar-thumb[b-p9rzqt0hle] {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    border: 2px solid var(--g-gray-200);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    left: 41%;
}

.rp-sidebar .rp-job-avatar-badge[b-p9rzqt0hle] {
 width: 40px;
    height: 40px;
    bottom: -4px;
    /* right: 4px; */
    border: 2.5px solid var(--g-bg-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    position: absolute;
    left: 57%;
  
}

.rp-candidate-name[b-p9rzqt0hle] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    margin: 0 0 3px;
    color: var(--g-gray-800);
    line-height: var(--g-lh-tight);
}

.rp-candidate-company[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 var(--g-space-6);
    letter-spacing: .3px;
}

/* Match Circle (header) */
.rp-match-circle[b-p9rzqt0hle] {
       width: 88px;
    height: 88px;
    position: relative;
    flex-shrink: 0;
}

.rp-ring-svg[b-p9rzqt0hle] { width: 100%; height: 100%; transform: rotate(-90deg); }

.rp-match-ring-arc[b-p9rzqt0hle] {
    transition: stroke-dashoffset 0.6s ease;
}

.rp-ring-text[b-p9rzqt0hle] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rp-ring-value[b-p9rzqt0hle] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-extrabold);
    color: var(--g-gray-900);
    line-height: 1;
}

.rp-ring-label[b-p9rzqt0hle] {
    font-size: 7px;
    font-weight: var(--g-fw-bold);
    letter-spacing: 1px;
    color: var(--g-text-secondary);
}

/* Required Skills Row */
.rp-required-skills-row[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-12);
}

.rp-required-skills-label[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .6px;
    color: var(--g-text-muted);
    text-transform: uppercase;
}

/* Header Meta Row */
.rp-header-meta-row[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: var(--g-fw-semibold);
    letter-spacing: .5px;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    margin-top: var(--g-space-4);
}

.rp-meta-item[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-4);
}

.rp-meta-item svg[b-p9rzqt0hle] {
    opacity: 0.7;
}

.rp-meta-sep[b-p9rzqt0hle] { color: var(--g-gray-300); }

/* ═══ FORM GRID ═══ */
.rp-form-grid[b-p9rzqt0hle] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-16) var(--g-space-20);
}

.rp-form-grid-3col[b-p9rzqt0hle] {
    grid-template-columns: 1fr 1fr 1fr;
}

.rp-field[b-p9rzqt0hle] { display: flex; flex-direction: column; gap: 5px; }
.rp-field-full[b-p9rzqt0hle] { grid-column: 1 / -1; }

.rp-label[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-600);
    display: flex;
    align-items: center;
    gap: 5px;
}

.rp-required[b-p9rzqt0hle] { color: var(--g-error); }

.rp-input[b-p9rzqt0hle],
.rp-select[b-p9rzqt0hle],
.rp-textarea[b-p9rzqt0hle] {
    width: 100%;
    padding: 9px var(--g-space-12);
    font-size: var(--g-fs-sm);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
   background: var(--g-bg-section);
    color: var(--g-gray-900);
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.rp-input:focus[b-p9rzqt0hle],
.rp-select:focus[b-p9rzqt0hle],
.rp-textarea:focus[b-p9rzqt0hle] {
    border-color: var(--g-brand);
    box-shadow: var(--g-focus-shadow);
}

.rp-select[b-p9rzqt0hle] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.rp-textarea[b-p9rzqt0hle] { resize: vertical; min-height: 80px; }

.rp-input:disabled[b-p9rzqt0hle],
.rp-select:disabled[b-p9rzqt0hle] {
    background: var(--g-gray-100);
    color: var(--g-gray-400);
    border-color: var(--g-gray-200);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Validation errors */
.rp-field .rp-input-error[b-p9rzqt0hle] {
    border-color: var(--g-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* ═══ NUMBER INPUT WITH SPINNER ═══ */
/* Native input[type=number] shows up/down arrows on hover by default */

.rp-field-error[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    color: var(--g-error);
    margin-top: 2px;
}

.rp-field-hint[b-p9rzqt0hle] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
    display: block;
}

/* Currency Input */
.rp-currency-input[b-p9rzqt0hle] {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-currency-symbol[b-p9rzqt0hle] {
    position: absolute;
    left: var(--g-space-12);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
}

.rp-input-currency[b-p9rzqt0hle] { padding-left: 28px; }

/* ═══ PROFILE UPLOAD ═══ */
.rp-profile-upload[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--g-space-16);
    background: var(--g-bg-section);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-20);
        border: 1px solid var(--g-border-card);
    position: relative;
}

.rp-avatar-wrap[b-p9rzqt0hle] { flex-shrink: 0; }

.rp-avatar[b-p9rzqt0hle] {
    width: 64px;
    height: 64px;
    border-radius: var(--g-radius-full);
    background: var(--g-bg-card);
    display: flex;
    border: 1px solid var(--g-border-card);
    align-items: center;
    justify-content: center;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background 0.2s;
}

.rp-avatar:hover[b-p9rzqt0hle] {
    background: #f3f4f6;
}

.rp-avatar .rp-avatar-icon-default[b-p9rzqt0hle] { display: block; }
.rp-avatar .rp-avatar-icon-hover[b-p9rzqt0hle] { display: none; }
.rp-avatar:hover .rp-avatar-icon-default[b-p9rzqt0hle] { display: none; }
.rp-avatar:hover .rp-avatar-icon-hover[b-p9rzqt0hle] { display: block; }

.rp-upload-info[b-p9rzqt0hle] { display: flex; flex-direction: column; gap: 1px; }

.rp-upload-title[b-p9rzqt0hle] { font-size: var(--g-fs-sm); color: var(--g-gray-800); }
.rp-upload-hint[b-p9rzqt0hle] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.rp-browse-btn[b-p9rzqt0hle] {
       display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    padding: var(--g-space-8) 14px;
    border: 1px solid var(--g-brand);
    background: var(--g-bg-card);
    color: var(--g-brand);
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    margin-top: var(--g-space-10);
    transition: background var(--g-transition);
    width: 120px;
   box-shadow: var(--g-shadow-sm);
}

.rp-browse-btn:hover[b-p9rzqt0hle] { background: var(--g-indigo-bg);  }

/* ═══ ADD LINK (header) ═══ */
.rp-add-link[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-4) 0;
    border: none;
    background: none;
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    margin-left: auto;
    transition: opacity var(--g-transition);
}

.rp-add-link:hover[b-p9rzqt0hle] { opacity: 0.7; }

/* ═══ UTILITY CLASSES ═══ */
.rp-field-spaced[b-p9rzqt0hle] { margin-bottom: 14px; }
.rp-field-remarks[b-p9rzqt0hle] { margin-top: var(--g-space-16); }
.rp-field-photo-id[b-p9rzqt0hle] { margin-top: var(--g-space-12); }
.rp-resume-hint-text[b-p9rzqt0hle] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.rp-avatar-img[b-p9rzqt0hle] { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rp-save-error[b-p9rzqt0hle] { font-size: var(--g-fs-xs); }

/* ═══ ASSESSMENT SECTION LABEL ═══ */
.rp-assess-section-label[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--g-space-16) 0 var(--g-space-8);
}

/* ═══ ASSESSMENT PROGRESS CARD ═══ */
.rp-assess-progress-card[b-p9rzqt0hle] {
     background: var(--g-bg-section);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-16) 14px;
    margin-bottom: 18px;
    border: 1px solid var(--bs-primary-bg-subtle);
}

.rp-assess-progress-row[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 10px;
  
}

.rp-assess-progress-icon[b-p9rzqt0hle] {
 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp-assess-progress-icon svg[b-p9rzqt0hle] {
    width: 15px;
    height: 15px;
}

.rp-assess-progress-info[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.rp-assess-progress-info strong[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs);
    color: var(--g-gray-900);
}

.rp-assess-progress-info span[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.rp-assess-progress-bottom[b-p9rzqt0hle] {
     display: flex;
    align-items: center;
    gap: 0px;
    width: 18%;
    margin: 0 auto;
}

.rp-progress-bar[b-p9rzqt0hle] {
    flex: 1;
    height: 8px;
    background: var(--g-gray-200);
    border-radius: 23px;
    overflow: hidden;
    min-width: 60px;
}

.rp-progress-fill[b-p9rzqt0hle] {
    height: 100%;
    background: var(--g-brand);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.rp-assess-pct[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ═══ PRE-SCREENING ═══ */
.rp-screening-row[b-p9rzqt0hle] {
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--g-space-16);
    background: var(--sidebar-bg);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-10);
    gap: var(--g-space-16);
    padding: var(--g-space-16) 14px;
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--g-border-card);
}
.rp-screening-row:hover[b-p9rzqt0hle]{
      box-shadow: var(--g-shadow-sm);
}
.rp-screening-question[b-p9rzqt0hle] {
    font-size: var(--g-fs-sm);
    color: var(--g-gray-700);
    flex: 1;
}

.rp-toggle-group[b-p9rzqt0hle] {
       display: flex;
    gap: 0;
    flex-shrink: 0;
      background-color: var(--g-bg-page);
    padding: 10px;
    border-radius: var(--g-radius-sm);
}

.rp-toggle-btn[b-p9rzqt0hle] {
    padding: 7px var(--g-space-16);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    background: var(--g-bg-section);
    color: var(--g-text-secondary);
    border: none;
    cursor: pointer;
    transition: all var(--g-transition);
    box-shadow: var(--bs-box-shadow-sm);
}

.rp-toggle-btn:first-child[b-p9rzqt0hle] { border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm); }
.rp-toggle-btn:last-child[b-p9rzqt0hle] { border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0; border-left: none; }

.rp-toggle-active[b-p9rzqt0hle] {
    background: var(--sidebar-bg);
    color: var(--g-brand);
    border-color: var(--g-brand);
}

.rp-toggle-active + .rp-toggle-btn[b-p9rzqt0hle] { border-left-color: var(--g-brand); }

/* ═══ TIMELINE ═══ */
.rp-timeline[b-p9rzqt0hle] {
    position: relative;
    padding-left: var(--g-space-24);
}

.rp-timeline-item[b-p9rzqt0hle] {
    position: relative;
    padding-bottom: var(--g-space-24);
}

.rp-timeline-item:last-child[b-p9rzqt0hle] { padding-bottom: 0; }

/* Connector line between dots — only between items */
.rp-timeline-item[b-p9rzqt0hle]::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--g-gray-200);
    border-radius: 1px;
}

/* No line below the last item */
.rp-timeline-item:last-child[b-p9rzqt0hle]::before {
    display: none;
}

.rp-timeline-dot[b-p9rzqt0hle] {
    position: absolute;
    left: -24px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: var(--g-radius-full);
    border: 2.5px solid var(--g-gray-300);
    background: var(--g-bg-card);
    z-index: 2;
    transition: all 0.2s ease;
}

.rp-timeline-dot.blue[b-p9rzqt0hle] {
    background: var(--g-brand, #2c7cff);
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 4px rgba(0,111,249,.12);
}

.rp-timeline-dot.dark[b-p9rzqt0hle] {
    background: var(--g-text-body, #334155);
    border-color: var(--g-text-body, #334155);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

.rp-timeline-content[b-p9rzqt0hle] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-lg);
    padding: 14px var(--g-space-16);
}

.rp-timeline-head[b-p9rzqt0hle] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--g-space-12);
}

.rp-timeline-title[b-p9rzqt0hle] {
       font-size: var(--g-fs-candidate-subtitle);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-900);
    margin: 0 0 2px;
}

.rp-timeline-company[b-p9rzqt0hle] {
   font-size: var(--g-fs-section-subtitle);
    color: var(--g-gray-600);
    margin: 0 0 2px;

}

.rp-timeline-date[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    margin: 0;
}

.rp-timeline-actions[b-p9rzqt0hle] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.rp-timeline-content:hover .rp-timeline-actions[b-p9rzqt0hle] { opacity: 1; }

.rp-icon-btn[b-p9rzqt0hle] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
    box-shadow: var(--g-shadow-xs);
}

.rp-icon-btn:hover[b-p9rzqt0hle] { background: var(--g-indigo-bg); color: var(--g-brand); }
.rp-icon-btn-danger:hover[b-p9rzqt0hle] { background: var(--g-error-bg); color: var(--g-error); }

/* ═══ EDIT FORM (inline experience) ═══ */
.rp-edit-form[b-p9rzqt0hle] {
    background: var(--g-indigo-bg);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    padding: 18px var(--g-space-20);
    box-shadow: var(--g-shadow-sm);
}

.rp-edit-form-header[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.rp-edit-form-title[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    color: var(--g-brand);
    margin: 0;
}

.rp-edit-form-close[b-p9rzqt0hle] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rp-edit-form-close:hover[b-p9rzqt0hle] { background: var(--g-gray-200); }

.rp-edit-form-actions[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--g-space-16);
    gap: var(--g-space-10);
}

.rp-edit-form-actions-right[b-p9rzqt0hle] { display: flex; gap: var(--g-space-8); }

.rp-btn-delete[b-p9rzqt0hle] {
    padding: 7px var(--g-space-16);
    border: 1px solid var(--g-error-border);
    background: var(--g-error-bg);
    color: var(--g-error);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-btn-delete:hover[b-p9rzqt0hle] { background: var(--g-error-border); }

.rp-btn-clear[b-p9rzqt0hle] {
    padding: 7px var(--g-space-16);
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
}

.rp-btn-clear:hover[b-p9rzqt0hle] { background: var(--g-gray-50); }

.rp-btn-save[b-p9rzqt0hle] {
    padding: 7px 18px;
    border: none;
    background:var(--sidebar-active-bg);
    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-btn-save:hover[b-p9rzqt0hle] { background: color-mix(in srgb, var(--g-brand, #2c7cff) 85%, #000); }

/* ═══ EXTRACTED SKILLS ═══ */
.rp-skills-grid[b-p9rzqt0hle] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-10);
    align-items: center;
}

.rp-skill-pill[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 14px;
    border-radius: var(--g-radius-full);
    background: var(--g-brand-bg, #f0f5ff);
    color: var(--g-gray-700, #334155);
      font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    border: 1.5px solid var(--g-brand-border, #bfdbfe);
    cursor: pointer;
    transition: background var(--g-transition), box-shadow var(--g-transition);
}

.rp-skill-pill:hover[b-p9rzqt0hle] {
    background: var(--g-brand-bg-hover, #e0edff);
    box-shadow: var(--g-shadow-xs);
}

.rp-skill-pill-name[b-p9rzqt0hle] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8ch;
    color: var(--g-gray-700, #334155);
}

.rp-skill-pill-yrs[b-p9rzqt0hle] {
        font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand, #2c7cff);
    white-space: nowrap;
    padding: 2px 8px;
    background: #fff;
    border-radius: var(--g-radius-full, 9999px);
}

.rp-skill-pill-remove[b-p9rzqt0hle] {
     border: none;
    background: none !important;
    color: var(--g-brand);
    border-radius: var(--g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--g-transition);
    margin-left: 2px;
}

.rp-skill-pill-remove:hover[b-p9rzqt0hle] { background: rgba(0,111,249,.2); }

.rp-skill-pill-danger[b-p9rzqt0hle] {
    background: var(--g-error-bg, #fef2f2);
    border-color: var(--g-error-border, #fca5a5);
    color: var(--g-error, #dc2626);
}

.rp-skill-pill-danger:hover[b-p9rzqt0hle] {
    background: var(--g-error-bg-hover, #fee2e2);
}

.rp-skill-pill-danger .rp-skill-pill-yrs[b-p9rzqt0hle] {
    color: var(--g-error, #ef4444);
}

.rp-skill-pill-danger .rp-skill-pill-remove[b-p9rzqt0hle] {
    background: rgba(220, 38, 38, .1);
    color: var(--g-error, #dc2626);
}

.rp-skill-pill-danger .rp-skill-pill-remove:hover[b-p9rzqt0hle] {
    background: rgba(220, 38, 38, .2);
}

.rp-skill-pill-success[b-p9rzqt0hle] {
        background: var(--g-indigo-bg);
    border-color: var(--g-indigo-border);
    color: var(--g-indigo-dark);
}

.rp-skill-pill-success:hover[b-p9rzqt0hle] {
    background: var(--g-indigo-bg-hover);
}

.rp-skill-pill-success .g-skill-pill-num[b-p9rzqt0hle] {
    color: var(--g-indigo-dark);
}

.rp-add-skill-inline[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-6) 14px;
    border: 1px dashed var(--g-gray-300);
    background: transparent;
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: border-color var(--g-transition), color var(--g-transition);
}

.rp-add-skill-inline:hover[b-p9rzqt0hle] {
    border-color: var(--g-brand);
    color: var(--g-brand);
}

/* ═══ EMPTY STATE ═══ */
.rp-empty-state[b-p9rzqt0hle] {
    text-align: center;
    padding: var(--g-space-24) var(--g-space-16);
    color: var(--g-text-muted);
    font-size: var(--g-fs-sm);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
}

/* ═══ DOCUMENT ROWS ═══ */
.rp-doc-row[b-p9rzqt0hle] {
       display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-20) var(--g-space-16);
    background: var(--g-gray-50);
    border-radius: var(--g-radius-lg);
    margin-bottom: var(--g-space-10);
    gap: var(--g-space-12);
    border: 1px solid var(--bs-border-color);
}

.rp-doc-info[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    flex: 1;
    min-width: 0;
}

.rp-doc-icon[b-p9rzqt0hle] {
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-md);
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.rp-doc-text[b-p9rzqt0hle] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-doc-name[b-p9rzqt0hle] { font-size: var(--g-fs-sm); color: var(--g-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-doc-name-row[b-p9rzqt0hle] { display: flex; align-items: center; gap: var(--g-space-8); }
.rp-doc-rename-btn[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-medium);
    cursor: pointer;
    padding: 2px var(--g-space-4);
    border-radius: var(--g-radius-xs);
    transition: color var(--g-transition), background var(--g-transition);
}
.rp-doc-rename-btn:hover[b-p9rzqt0hle] { color: var(--g-brand); background: var(--g-gray-100); }
.rp-doc-rename-input[b-p9rzqt0hle] { font-size: var(--g-fs-sm); padding: var(--g-space-4) var(--g-space-8); max-width: 200px; }
.rp-doc-status[b-p9rzqt0hle] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }

.rp-doc-actions[b-p9rzqt0hle] { display: flex; align-items: center; gap: var(--g-space-6); }

.rp-doc-upload-btn[b-p9rzqt0hle] {
 display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--g-space-6) 14px;
    color: var(--g-brand);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: border-color var(--g-transition);
    flex-shrink: 0;
}

.rp-doc-upload-btn:hover[b-p9rzqt0hle] { border-color: var(--g-brand); color: var(--g-brand); }

.rp-doc-delete-btn[b-p9rzqt0hle] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--g-text-muted);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--g-transition), color var(--g-transition);
}

.rp-doc-row-hoverable:hover .rp-doc-delete-btn[b-p9rzqt0hle] { opacity: 1; }
.rp-doc-delete-btn:hover[b-p9rzqt0hle] { color: var(--g-error); }

/* ═══ MODAL ═══ */
/* ═══ PHOTO ID VERIFICATION ═══ */
.rp-photo-id-label[b-p9rzqt0hle] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    padding: var(--g-space-16);
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-gray-200);
    background: var(--g-gray-50);
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-photo-id-label:hover[b-p9rzqt0hle] {
    background: var(--g-gray-100);
}

.rp-photo-id-checkbox[b-p9rzqt0hle] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--g-radius-xs);
    border: 1.5px solid var(--g-gray-300);
    accent-color: var(--g-brand, #2c7cff);
    cursor: pointer;
    flex-shrink: 0;
}

.rp-photo-id-text[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-gray-800);
    line-height: 1.4;
    margin: 0;
}

.rp-photo-id-hint[b-p9rzqt0hle] {
    font-size: var(--g-fs-xxs);
    color: var(--g-brand);
    margin: var(--g-space-4) 0 0;
    line-height: 1.4;
}

/* ═══ ADD SKILL MODAL ═══ */
.rp-modal-overlay[b-p9rzqt0hle] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
 z-index: 1200;
    backdrop-filter: blur(2px);
}

.rp-modal[b-p9rzqt0hle] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 28px 28px var(--g-space-24);
    width: 90%;
    max-width: 420px;
    box-shadow: var(--g-shadow-lg);
}

.rp-modal-header[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--g-space-20);
}

.rp-modal-title[b-p9rzqt0hle] {
    font-size: var(--g-fs-card-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
}

.rp-modal-close[b-p9rzqt0hle] {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rp-modal-close:hover[b-p9rzqt0hle] { background: var(--g-gray-200); }

.rp-modal-actions[b-p9rzqt0hle] {
    display: flex;
    justify-content: flex-end;
    gap: var(--g-space-10);
    margin-top: var(--g-space-20);
}

.rp-modal-btn-clear[b-p9rzqt0hle] {
    padding: 0 var(--g-space-20);
    height: 30px;
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    cursor: pointer;
}

.rp-modal-btn-clear:hover[b-p9rzqt0hle] { background: var(--g-gray-50); }

.rp-modal-btn-add[b-p9rzqt0hle] {
    padding: 0 var(--g-space-20);
    height: 30px;
    border: none;
    background: var(--g-brand);
    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    letter-spacing: .5px;
    cursor: pointer;
    transition: background var(--g-transition);
}

.rp-modal-btn-add:hover[b-p9rzqt0hle] { background: color-mix(in srgb, var(--g-brand, #2c7cff) 85%, #000); }

.rp-input-readonly[b-p9rzqt0hle] {
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    cursor: not-allowed;
    border-color: var(--g-gray-200);
}

/* ═══ STICKY FOOTER ═══ */
/* (footer uses flex-shrink:0 from .rp-sticky-footer above) */

.rp-footer-inner[b-p9rzqt0hle] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--g-space-10);
    max-width: 1600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Footer buttons using global btn conventions */
[b-p9rzqt0hle] .g-btn-cancel {
  padding: var(--g-space-8) var(--g-space-20);
    border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
    height: 30px;

}

[b-p9rzqt0hle] .g-btn-cancel:hover { background: var(--g-gray-50); }

[b-p9rzqt0hle] .g-btn-outline {
  padding: var(--g-space-8) var(--g-space-20);
    border: 1px solid var(--g-brand);
   background:var(--sidebar-active-bg);
    color: var(--g-brand);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    transition: background var(--g-transition);
    height: 30px;
    display: flex;
    align-items: center;
}

[b-p9rzqt0hle] .g-btn-outline:hover { background: var(--sidebar-active-bg); }

[b-p9rzqt0hle] .g-btn-primary {
    background:var(--sidebar-active-bg);
   padding: var(--g-space-8) 22px;
    border: none;

    color: #fff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-6);
    transition: background var(--g-transition);
    height: 30px;
}



/* ═══ RESPONSIVE ═══ */

/* ── 1440px and below ── */
@media (max-width: 1440px) {
    .rp-card[b-p9rzqt0hle] {
        width: 100%;
        max-width: 790px;
    }
    .rp-sidebar[b-p9rzqt0hle] {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .rp-form-col[b-p9rzqt0hle] {
        padding: var(--g-space-16) var(--g-space-16) 80px var(--g-space-16);
    }
     .rp-zoom-group[b-p9rzqt0hle] {
    overflow:visible;
    }
    .rp-viewer-body[b-p9rzqt0hle] {
         padding: var(--g-space-20);
    }
}

/* ── 1200px and below ── */
@media (max-width: 1200px) {
    .rp-sidebar[b-p9rzqt0hle] { flex: 0 0 38%; max-width: 38%; }
    .rp-expanded .rp-form-col[b-p9rzqt0hle] { flex: 0 0 62%; max-width: 62%; }
    .rp-card[b-p9rzqt0hle] {
        width: 100%;
        max-width: 100%;
    }
}

/* ── 1024px and below ── */
@media (max-width: 1024px) {
    .rp-split[b-p9rzqt0hle] {
        flex-direction: column;
    }

    /* Hide resume viewer */
    .rp-viewer-col[b-p9rzqt0hle],
    .rp-expanded .rp-viewer-col[b-p9rzqt0hle] {
        display: none;
    }

    .rp-data-panel[b-p9rzqt0hle],
    .rp-expanded .rp-data-panel[b-p9rzqt0hle] {
        flex: 1 1 auto;
        max-width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .rp-data-body[b-p9rzqt0hle] {
        flex-direction: column;
        padding: 0;
        min-height: 0;
        overflow-y: auto;
    }

    .rp-form-col[b-p9rzqt0hle] {
        overflow-y: visible;
        flex: none;
        min-height: auto;
        padding: 14px 14px 80px;
    }

    .rp-expanded .rp-form-col[b-p9rzqt0hle] {
        flex: none;
        max-width: 100%;
    }

    .rp-sidebar[b-p9rzqt0hle] {
        flex: none;
        max-width: 100%;
        width: 100%;
        padding: 0 14px 80px;
    }

    .rp-toggle-panel[b-p9rzqt0hle] { display: none; }

    .rp-card[b-p9rzqt0hle] {
        width: 100%;
        max-width: 100%;
    }

    .rp-header-card[b-p9rzqt0hle] {
        padding: 1px 14px 14px 14px;
    }

    .rp-breadcrumb-bar[b-p9rzqt0hle] {
        padding: 12px 14px 3px 14px;
    }

    .rp-sticky-footer[b-p9rzqt0hle] {
        padding: var(--g-space-10) var(--g-space-16);
    }
}

/* ── 768px and below ── */
@media (max-width: 768px) {
    .rp-sidebar[b-p9rzqt0hle] { display: none; }
     .rp-doc-text[b-p9rzqt0hle]{max-width:210px;}
      .rp-toolbar-btn[b-p9rzqt0hle]{display:none;}

    .rp-data-body[b-p9rzqt0hle] {
        padding: 0;
        gap: 12px;
    }

    .rp-form-col[b-p9rzqt0hle] {
        padding: 10px 10px 80px;
    }

    .rp-expanded .rp-form-col[b-p9rzqt0hle] {
        flex: none;
        max-width: 100%;
    }

    .rp-card[b-p9rzqt0hle] {
        padding: 18px var(--g-space-16);
        border-radius: var(--g-radius-xl);
    }

    .rp-header-card-top[b-p9rzqt0hle] {
        gap: var(--g-space-12);
    }

    .rp-match-circle[b-p9rzqt0hle] {
        width: 70px;
        height: 70px;
    }

    .rp-ring-value[b-p9rzqt0hle] {
        font-size: var(--g-fs-sm);
    }

    .rp-ring-label[b-p9rzqt0hle] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }

    .rp-job-avatar-thumb[b-p9rzqt0hle] {
        width: 52px;
        height: 52px;
        border-radius: var(--g-radius-2xl);
    }

    .rp-job-avatar-badge[b-p9rzqt0hle] {
        width: 24px;
        height: 24px;
    }

    .rp-candidate-name[b-p9rzqt0hle] {
        font-size: var(--g-fs-sm);
    }

    .rp-breadcrumb-bar[b-p9rzqt0hle] {
        padding: var(--g-space-10) var(--g-space-10) 3px var(--g-space-10);
    }

    .rp-header-card[b-p9rzqt0hle] {
        padding: 1px var(--g-space-10) var(--g-space-12) var(--g-space-10);
    }

    .rp-form-grid[b-p9rzqt0hle] {
        gap: var(--g-space-12) var(--g-space-16);
    }

    .rp-sticky-footer[b-p9rzqt0hle] {
        padding: var(--g-space-10) var(--g-space-12);
        /* Sidebar hidden at this breakpoint — span full width. */
        left: 0;
        right: 0;
    }
}

/* ── 425px and below ── */
@media (max-width: 425px) {
    .rp-form-col[b-p9rzqt0hle] {
        padding: 8px 8px 80px;
    }

    .rp-form-grid[b-p9rzqt0hle] {
        grid-template-columns: 1fr;
        gap: var(--g-space-10);
    }

    .rp-card[b-p9rzqt0hle] {
        padding: 14px var(--g-space-12);
        border-radius: var(--g-radius-lg);
        margin-bottom: var(--g-space-12);
    }

    .rp-header-card-top[b-p9rzqt0hle] {
        flex-direction: row;
        align-items: flex-start;
    }

    .rp-match-circle[b-p9rzqt0hle] {
        align-self: flex-start;
        width: 64px;
        height: 64px;
    }

    .rp-screening-row[b-p9rzqt0hle] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-space-10);
        padding: var(--g-space-12);
    }

    .rp-assess-progress-row[b-p9rzqt0hle] {
        flex-wrap: wrap;
    }

    .rp-assess-progress-bottom[b-p9rzqt0hle] {
        width: 100%;
    }

    .rp-required-skills-row[b-p9rzqt0hle] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--g-space-6);
    }

    .rp-header-meta-row[b-p9rzqt0hle] {
        flex-wrap: wrap;
        gap: var(--g-space-6);
        font-size: var(--g-fs-xxs);
    }

    .rp-breadcrumb-bar[b-p9rzqt0hle] {
        padding: var(--g-space-8) var(--g-space-8) 3px var(--g-space-8);
    }

    .rp-header-card[b-p9rzqt0hle] {
        padding: 1px var(--g-space-8) var(--g-space-10) var(--g-space-8);
    }

    .rp-profile-upload[b-p9rzqt0hle] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--g-space-12);
        padding: var(--g-space-12);
    }

    .rp-sticky-footer[b-p9rzqt0hle] {
        padding: var(--g-space-8) var(--g-space-10);
            display: flex;
        left: 16px;
        right: 16px;
        align-items: center;
        justify-content: flex-end;
    }

    .rp-footer-inner[b-p9rzqt0hle] {
        justify-content: stretch;
        gap: var(--g-space-8);
    }

    [b-p9rzqt0hle] .g-btn-cancel,
    [b-p9rzqt0hle] .g-btn-outline,
    [b-p9rzqt0hle] .g-btn-primary {
       flex: 1;
        justify-content: center;
      
        font-size: 13px;
    }

    .rp-job-avatar-thumb[b-p9rzqt0hle] {
        width: 48px;
        height: 48px;
        border-radius: var(--g-radius-xl);
    }

    .rp-job-avatar-badge[b-p9rzqt0hle] {
        width: 22px;
        height: 22px;
    }

    .rp-candidate-name[b-p9rzqt0hle] {
        font-size: var(--g-fs-xs);
    }

    .rp-candidate-company[b-p9rzqt0hle] {
        font-size: var(--g-fs-xxs);
    }

    .rp-timeline-content[b-p9rzqt0hle] {
        padding: var(--g-space-12);
    }
}

/* ── 640px (form grid collapse) ── */
@media (max-width: 640px) {
    .rp-form-grid[b-p9rzqt0hle] { grid-template-columns: 1fr; }
    .rp-form-grid-3col[b-p9rzqt0hle] { grid-template-columns: 1fr; }

    .rp-sticky-footer[b-p9rzqt0hle] {
        padding: var(--g-space-10) var(--g-space-12);
    }
    .rp-footer-inner[b-p9rzqt0hle] {
        justify-content: stretch;
        gap: var(--g-space-8);
    }
    [b-p9rzqt0hle] .g-btn-cancel,
    [b-p9rzqt0hle] .g-btn-outline,
    [b-p9rzqt0hle] .g-btn-primary {
        flex: 1;
        justify-content: center;
        padding: var(--g-space-8) var(--g-space-12);
        font-size: var(--g-fs-xs);
    }
}

/* ═══ VIEW RESUME BUTTON (mobile ≤1024px) ═══ */
.rp-view-resume-btn[b-p9rzqt0hle] {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    color: var(--g-brand, #2c7cff);
    background: var(--g-bg-card);
    border: 1px solid var(--g-brand, #2c7cff);
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.rp-view-resume-btn:hover[b-p9rzqt0hle] {
    background: var(--g-brand, #2c7cff);
    color: #fff;
}

@media (max-width: 1024px) {
    .rp-view-resume-btn[b-p9rzqt0hle] {
        display: inline-flex;
    }
}

/* ═══ RESUME POPUP OVERLAY ═══ */
.rp-resume-popup-overlay[b-p9rzqt0hle] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rp-resume-popup[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 900px;
    max-height: 95vh;
    background: var(--g-bg-card, #fff);
    border-radius: var(--g-radius-xl, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.rp-resume-popup-header[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}

.rp-resume-popup-title[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-text-primary);
}

.rp-resume-popup-close[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--g-gray-100);
    border-radius: 50%;
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background 0.2s, color 0.2s;
}
.rp-resume-popup-close:hover[b-p9rzqt0hle] {
    background: var(--g-danger, #ef4444);
    color: #fff;
}

.rp-resume-popup-body[b-p9rzqt0hle] {
    flex: 1;
    overflow: hidden;
}

/* ═══ SKILL SEARCH DROPDOWN ═══ */
.rp-skill-search-wrap[b-p9rzqt0hle] {
    position: relative;
}

.rp-skill-dropdown[b-p9rzqt0hle] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    box-shadow: var(--g-shadow-md);
    z-index: 100;
    margin-top: 2px;
}

.rp-skill-dropdown-item[b-p9rzqt0hle] {
    padding: 8px 12px;
    font-size: var(--g-fs-sm);
    cursor: pointer;
    transition: background .15s;
}

.rp-skill-dropdown-item:hover[b-p9rzqt0hle] {
    background: var(--g-indigo-bg);
    color: var(--g-brand);
}

/* ═══ DATE RANGE ROW ═══ */
.rp-date-range-row[b-p9rzqt0hle] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rp-date-picker-wrap[b-p9rzqt0hle] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-date-range-combined[b-p9rzqt0hle] {
    position: relative;
}

.rp-date-range-input[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: var(--g-radius-md, 6px);
    background: var(--g-bg-card, #fff);
    cursor: pointer;
    transition: border-color 0.15s;
}

.rp-date-range-input:hover[b-p9rzqt0hle] {
    border-color: var(--g-gray-300, #cbd5e1);
}

.rp-date-range-text[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs, 0.8125rem);
    color: var(--g-text-heading, #1e293b);
    white-space: nowrap;
}

.rp-date-range-separator[b-p9rzqt0hle] {
    color: var(--g-text-muted, #94a3b8);
    font-size: var(--g-fs-xs);
    flex-shrink: 0;
}

.rp-sub-label[b-p9rzqt0hle] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Certification Issue Date Picker ── */
.rp-deadline-picker-wrap[b-p9rzqt0hle] {
    position: relative;
}

.rp-deadline-btn[b-p9rzqt0hle] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: var(--g-bg-card, #fff);
    color: var(--g-text-secondary, #475569);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    min-height: 38px;
    width: 100%;
}

.rp-deadline-btn:hover[b-p9rzqt0hle] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 2px rgba(44, 124, 255, 0.08);
}

/* ── Dual Date Picker Popup ── */
.rp-datepicker[b-p9rzqt0hle] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: var(--g-bg-card, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    z-index: 200;
    padding: 16px;
    margin-top: 4px;
}

.rp-datepicker-dual[b-p9rzqt0hle] {
    width: 580px;
}

.rp-cal-panel-header[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 10px;
}

.rp-cal-select[b-p9rzqt0hle] {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading, #1e293b);
    background: var(--g-bg-card, #fff);
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.rp-cal-select:focus[b-p9rzqt0hle] {
    border-color: var(--g-brand, #2c7cff);
}

.rp-datepicker-arrow[b-p9rzqt0hle] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-secondary, #475569);
    transition: background 0.15s;
    padding: 0;
}

.rp-datepicker-arrow:hover[b-p9rzqt0hle] {
    background: #f1f5f9;
}

.rp-datepicker-month[b-p9rzqt0hle] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-text-heading, #1e293b);
    white-space: nowrap;
}

.rp-dual-panels[b-p9rzqt0hle] {
    display: flex;
    gap: 0;
}

.rp-calendar-panel[b-p9rzqt0hle] {
    flex: 1;
}

.rp-calendar-divider[b-p9rzqt0hle] {
    width: 1px;
    background: #e2e8f0;
    margin: 0 12px;
}

.rp-datepicker-weekdays[b-p9rzqt0hle] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-muted, #64748b);
    margin-bottom: 6px;
}

.rp-datepicker-days[b-p9rzqt0hle] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.rp-day-empty[b-p9rzqt0hle] {
    width: 34px;
    height: 34px;
}

.rp-day-btn[b-p9rzqt0hle] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--g-text-body, #334155);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.rp-day-btn:hover[b-p9rzqt0hle] {
    background: #f1f5f9;
}

.rp-day-btn.today[b-p9rzqt0hle] {
    background: #eff6ff;
    color: var(--g-brand, #2c7cff);
    box-shadow: inset 0 0 0 1.5px var(--g-brand, #2c7cff);
}

.rp-day-btn.selected[b-p9rzqt0hle] {
    background: #1e293b;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.rp-day-btn.in-range[b-p9rzqt0hle] {
    background: #dbeafe;
    color: var(--g-brand, #2c7cff);
    border-radius: 4px;
}

.rp-day-btn.in-range:hover[b-p9rzqt0hle] {
    background: #bfdbfe;
}

.rp-day-btn.range-start[b-p9rzqt0hle] {
    border-radius: 50%;
}

.rp-day-btn.range-end[b-p9rzqt0hle] {
    border-radius: 50%;
}

.rp-day-btn.past[b-p9rzqt0hle],
.rp-day-btn:disabled[b-p9rzqt0hle] {
    color: var(--g-text-muted, #64748b);
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.rp-datepicker-footer[b-p9rzqt0hle] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.rp-link-btn[b-p9rzqt0hle] {
    border: none;
    background: none;
    color: var(--g-brand, #2c7cff);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.rp-link-btn:hover[b-p9rzqt0hle] {
    background: #eff6ff;
}

@media (max-width: 768px) {
    .rp-datepicker-dual[b-p9rzqt0hle] {
        width: 300px;
    }
    .rp-dual-panels[b-p9rzqt0hle] {
        flex-direction: column;
        gap: 12px;
    }
    .rp-calendar-divider[b-p9rzqt0hle] {
        width: 100%;
        height: 1px;
        margin: 0;
    }
}

@media (max-width: 600px) {
    .rp-date-range-row[b-p9rzqt0hle] {
        grid-template-columns: 1fr;
    }
}

/* ── End Date label with checkbox ── */
.rp-label-with-check[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rp-enddate-checkbox[b-p9rzqt0hle] {
    width: 14px;
    height: 14px;
    accent-color: var(--g-brand, #2c7cff);
    cursor: pointer;
    margin: 0;
}

.rp-enddate-hint[b-p9rzqt0hle] {
    font-size: 11px;
    font-weight: 400;
    color: var(--g-text-secondary, #64748b);
    margin-left: 4px;
}

.rp-enddate-group[b-p9rzqt0hle] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.rp-deadline-btn--disabled[b-p9rzqt0hle] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--g-text-muted, #94a3b8);
}

/* ── Draft Saved Popup ── */
.rp-popup-overlay[b-p9rzqt0hle] {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
}
.rp-popup-card[b-p9rzqt0hle] {
    background: #fff; border-radius: 16px; padding: 36px 32px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    text-align: center; max-width: 400px; width: 90%;
}
.rp-popup-icon[b-p9rzqt0hle] { margin-bottom: 12px; }
.rp-popup-icon-circle[b-p9rzqt0hle] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: #dcfce7;
}
.rp-popup-title[b-p9rzqt0hle] { font-size: 18px; font-weight: 700; color: #1e293b; margin: 8px 0 4px; }
.rp-popup-subtitle[b-p9rzqt0hle] { font-size: 13px; color: #64748b; margin-bottom: 20px; }
.rp-popup-actions[b-p9rzqt0hle] { display: flex; gap: 12px; justify-content: center; }

/* ── Resume update overlay loader (Additional Details → Update) ── */
.rp-resume-loading-overlay[b-p9rzqt0hle] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(100, 116, 139, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.rp-resume-loading-card[b-p9rzqt0hle] {
    background: var(--g-bg-section, #fff);
    border-radius: var(--g-radius-2xl, 16px);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-16, 16px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rp-resume-loading-spinner[b-p9rzqt0hle] {
    animation: rp-resume-spin-b-p9rzqt0hle 1s linear infinite;
}

@keyframes rp-resume-spin-b-p9rzqt0hle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rp-resume-loading-title[b-p9rzqt0hle] {
    font-size: var(--g-fs-body, 14px);
    font-weight: var(--g-fw-semibold, 600);
    color: var(--g-text-heading, #111);
}

.rp-resume-loading-subtitle[b-p9rzqt0hle] {
    font-size: var(--g-fs-xs, 12px);
    color: var(--g-text-secondary, #666);
    text-align: center;
}
/* /Components/Pages/Dashboard/Jobs/Components/JcAiCreateModal.razor.rz.scp.css */
.jc-modal-backdrop[b-cj0iqsu7r2] {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 27, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    animation: g-fadeIn 0.15s ease-out;
}

.jc-modal[b-cj0iqsu7r2] {
    width: 100%;
    max-width: 440px;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: jc-modalIn-b-cj0iqsu7r2 0.2s ease-out;
    position: relative;
}

.jc-ai-modal[b-cj0iqsu7r2] {
    max-width: 620px !important;
}

@keyframes jc-modalIn-b-cj0iqsu7r2 {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.jc-modal-header[b-cj0iqsu7r2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--g-border-light);
}

.jc-ai-modal-title-row[b-cj0iqsu7r2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-modal-title[b-cj0iqsu7r2] {
    font-size: var(--g-fs-card-title);
    font-weight: 700;
    color: var(--g-text-heading);
}

.jc-modal-close[b-cj0iqsu7r2] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-secondary);
    cursor: pointer;
    transition: background var(--g-transition);
    padding: 0;
}

.jc-modal-close:hover[b-cj0iqsu7r2] {
    background: var(--g-gray-100);
}

.jc-modal-body[b-cj0iqsu7r2] {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
}

.jc-ai-desc[b-cj0iqsu7r2] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 var(--g-space-12) 0;
    line-height: 1.5;
}

.jc-ai-textarea[b-cj0iqsu7r2] {
    min-height: 200px;
    resize: vertical;
    font-size: var(--g-fs-sm);
    line-height: 1.6;
}

.jc-ai-helper[b-cj0iqsu7r2] {
    display: block;
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    margin-top: var(--g-space-8);
}

.jc-ai-modal-footer[b-cj0iqsu7r2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--g-border-light);
}

.jc-ai-create-btn[b-cj0iqsu7r2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* /Components/Pages/Dashboard/Jobs/Components/JcRemarksPopup.razor.rz.scp.css */
.jc-remarks-overlay[b-syglshf6tp] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: jc_fade_in-b-syglshf6tp 0.2s ease;
}

.jc-remarks-popup[b-syglshf6tp] {
    background: #fff;
    border-radius: 12px;
    width: min(520px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: jc_pop_in-b-syglshf6tp 0.25s ease;
}

.jc-remarks-popup-header[b-syglshf6tp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--g-border-light, #e5e7eb);
}

.jc-remarks-popup-title[b-syglshf6tp] {
    font-size: 16px;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
}

.jc-remarks-close[b-syglshf6tp] {
    color: var(--g-text-muted);
}

.jc-remarks-popup-body[b-syglshf6tp] {
    padding: 16px 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jc-remarks-empty[b-syglshf6tp] {
    font-size: 13px;
    color: var(--g-text-muted);
    text-align: center;
    padding: 24px 0;
}

.jc-remark-item[b-syglshf6tp] {
    padding: 12px 14px;
    background: var(--g-bg-page, #f9fafb);
    border-radius: 8px;
    border-left: 3px solid var(--g-brand, #6366f1);
}

.jc-remark-text[b-syglshf6tp] {
    font-size: 13px;
    color: var(--g-text-primary);
    line-height: 1.55;
    margin-bottom: 8px;
}

.jc-remark-meta[b-syglshf6tp] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--g-text-muted);
}

.jc-remark-author[b-syglshf6tp] {
    font-weight: 600;
    color: var(--g-text-secondary);
}

@keyframes jc_fade_in-b-syglshf6tp {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jc_pop_in-b-syglshf6tp {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/Pages/Dashboard/Jobs/Components/JcResultPopup.razor.rz.scp.css */
.jc-popup-overlay[b-7f8ybrotux] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.jc-popup-card[b-7f8ybrotux] {
    background: #fff;
    border-radius: 16px;
    padding: 36px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-width: 400px;
    max-width: 460px;
    animation: jc_pop_in-b-7f8ybrotux 0.25s ease;
}

.jc-popup-icon[b-7f8ybrotux] {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.jc-popup-icon-circle[b-7f8ybrotux] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jc-popup-title[b-7f8ybrotux] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

.jc-popup-subtitle[b-7f8ybrotux] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.jc-popup-actions[b-7f8ybrotux] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.jp_popup_btn_outline[b-7f8ybrotux] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 20px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: var(--g-btn-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.jp_popup_btn_outline:hover[b-7f8ybrotux] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

@keyframes jc_pop_in-b-7f8ybrotux {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/Pages/Dashboard/Jobs/Components/JcSkillModal.razor.rz.scp.css */
.jc-modal-backdrop[b-fj319cji26] {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 27, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    animation: g-fadeIn 0.15s ease-out;
}

.jc-modal[b-fj319cji26] {
    width: 100%;
    max-width: 440px;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: jc-modalIn-b-fj319cji26 0.2s ease-out;
    position: relative;
}

@keyframes jc-modalIn-b-fj319cji26 {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.jc-modal-header[b-fj319cji26] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--g-border-light);
}

.jc-modal-title[b-fj319cji26] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-card-title);
    font-weight: 700;
    color: var(--g-text-heading);
}

.jc-modal-close[b-fj319cji26] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-secondary);
    cursor: pointer;
    transition: background var(--g-transition);
    padding: 0;
}

.jc-modal-close:hover[b-fj319cji26] {
    background: var(--g-gray-100);
}

.jc-modal-body[b-fj319cji26] {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
}

.jc-skill-search-wrap[b-fj319cji26] {
    position: relative;
}

.jc-skill-dropdown[b-fj319cji26] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    margin-top: 4px;
}

.jc-skill-dropdown-item[b-fj319cji26] {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-skill-dropdown-item:hover[b-fj319cji26],
.jc-skill-dropdown-item.active[b-fj319cji26] {
    background: #2563eb;
    color: #fff;
}

.jc-modal-footer[b-fj319cji26] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--g-border-light);
    flex-wrap: wrap;
}

.jc-modal-error[b-fj319cji26] {
    flex: 1 1 100%;
    font-size: 12px;
    color: #dc2626;
    font-weight: 500;
    text-align: left;
    margin-bottom: 4px;
}

.jc-btn-black[b-fj319cji26] {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
}

.jc-btn-black:hover[b-fj319cji26] {
    background: #333 !important;
    border-color: #333 !important;
}
/* /Components/Pages/Dashboard/Jobs/JobCreation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   Job Creation Page — Scoped Styles
   ═══════════════════════════════════════════════════════ */

/* ── Page ── */
.jc-page[b-nuq5dl5eca] {
    font-family: var(--g-font-sans);
    padding-bottom: 20px;
}

.jc-page .g-form-input[b-nuq5dl5eca],
.jc-page .g-form-input[type="number"][b-nuq5dl5eca],
.jc-page .g-form-input[type="time"][b-nuq5dl5eca],
.jc-page .g-form-input[type="text"][b-nuq5dl5eca] {
    max-width: 100%;
}

/* ── Page Header (sticky) ── */
.jc-page-header[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px; 
    position: sticky;
    top: 52px;
    z-index: 40;
    background: var(--g-bg-card, #fff);
    padding: 16px 24px;
    margin: 0 0px;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid var(--g-border-light);
}

.jc-page-header-left[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jc-back-btn[b-nuq5dl5eca] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-border);
    border-radius: 10px;
    background: var(--g-bg-card);
    color: var(--g-text-body);
    cursor: pointer;
    transition: all var(--g-transition);
    flex-shrink: 0;
}

.jc-back-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
    border-color: var(--g-gray-300);
}

.jc-page-title[b-nuq5dl5eca] {
    font-size: var(--g-fs-page-title);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.jc-page-subtitle[b-nuq5dl5eca] {
    font-size: var(--g-fs-sm);
    font-weight: 400;
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.jc-page-header-right[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* AI Button — uses g-btn-primary from global CSS */

/* ── Banner ── */
.jc-banner[b-nuq5dl5eca] {
    position: relative;
    height: 220px;
    border-radius: var(--g-radius-xl);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--g-gray-200);
    margin-top: 10px;
}

.jc-banner-overlay[b-nuq5dl5eca] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.3) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 24px;
}

.jc-banner-meta[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jc-job-code[b-nuq5dl5eca] {
    display: inline-block;
    background: var(--g-gray-800);
    color: #fff;
    font-size: var(--g-fs-xxs);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--g-radius-sm);
    letter-spacing: 0.04em;
    width: fit-content;
}

.jc-banner-info[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--g-fs-xs);
    font-weight: 500;
}

.jc-banner-info span[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.jc-banner-tagline[b-nuq5dl5eca] {
    color: #fff;
    font-size: var(--g-fs-page-title);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: right;
}

.jc-banner-tagline p[b-nuq5dl5eca] {
    margin: 0;
}

.jc-banner-selector[b-nuq5dl5eca] {
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.jc-banner-select[b-nuq5dl5eca] {
    height: 34px;
    padding: 0 28px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--g-radius-md);
    background: rgba(255, 255, 255, 0.9);
    color: var(--g-text-heading);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(8px);
    outline: none;
    appearance: auto;
}

/* ── Two-Column Body ── */
.jc-body[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 24px;
    margin-top: 24px;
    align-items: stretch;
}

.jc-left[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.jc-left > :last-child[b-nuq5dl5eca] {
    flex: 1;
}

.jc-right[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 130px;
    align-self: start;
}

.jc-right > :last-child[b-nuq5dl5eca] {
    flex: 1;
}

/* ── Left Section Card ── */
.jc-section[b-nuq5dl5eca] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
    overflow: visible;
}

.jc-section-header[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px 0px;
    border-bottom: 1px solid var(--g-border-light);
}

.jc-section-title-group[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jc-section-icon[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-brand);
    flex-shrink: 0;
}

.jc-section-title[b-nuq5dl5eca] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0;
    letter-spacing: -0.02em;
}

.jc-section-body[b-nuq5dl5eca] {
    padding: 20px 24px 24px;
}

/* ── Job Title Input (bottom-border only) ── */
.jc-title-input[b-nuq5dl5eca] {
    width: 100%;
    padding: 10px 2px;
    border: none;
    border-bottom: 1.5px solid var(--g-border);
    border-radius: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--g-text-heading);
    background: transparent;
    font-family: inherit;
    outline: none;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
}

.jc-title-input[b-nuq5dl5eca]::placeholder {
    color: var(--g-text-muted);
}

.jc-title-input:focus[b-nuq5dl5eca] {
    border-bottom-color: var(--g-focus-border);
    box-shadow: 0 1px 0 0 var(--g-focus-border);
}

.jc-title-input.input-error[b-nuq5dl5eca] {
    border-bottom-color: var(--g-error);
}

.jc-title-input.input-error:focus[b-nuq5dl5eca] {
    box-shadow: 0 1px 0 0 var(--g-error);
}
.jc-comp-amount.input-error[b-nuq5dl5eca]{
    border-color: var(--g-error);
}
/* ── AI Generate Button ── */
.jc-ai-gen-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: var(--g-radius-md);
    background:var(--sidebar-active-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--g-transition);
}

.jc-ai-gen-btn:hover[b-nuq5dl5eca] {
    opacity: 0.9;
}

.jc-ai-gen-btn-sm[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-brand);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--g-transition);
}

.jc-ai-gen-btn-sm:hover[b-nuq5dl5eca] {
    background: var(--g-indigo-bg);
}

/* ── Experience Grid ── */
.jc-exp-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

/* ── Priority Button Group ── */
.jc-priority-group[b-nuq5dl5eca] {
    display: flex;
    gap: 6px;
}

.jc-priority-btn[b-nuq5dl5eca] {
    height: 36px;
    padding: 0 16px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-xl);
    background: var(--g-bg-card);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    color: var(--g-text-secondary);
}

.jc-priority-btn.high.active[b-nuq5dl5eca] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: var(--g-error-text, #dc2626);
}

.jc-priority-btn.med.active[b-nuq5dl5eca] {
    background: #fff3e0;
    border-color: #ffcc80;
    color: #e65100;
}

.jc-priority-btn.low.active[b-nuq5dl5eca] {
    background: #f5f5f5;
    border-color: #bdbdbd;
    color: #424242;
}

.jc-priority-btn:hover:not(.active)[b-nuq5dl5eca] {
    border-color: var(--g-gray-300);
    background: var(--g-gray-50);
}

/* ── Skills ── */
.jc-skills-wrap[b-nuq5dl5eca] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.jc-skill-tag[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1.5px solid var(--g-brand-border);
    border-radius: var(--g-radius-full);
    background: var(--g-brand-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-brand);
}

.jc-skill-name[b-nuq5dl5eca] {
    font-weight: 600;
}

.jc-skill-years[b-nuq5dl5eca] {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--g-brand);
    opacity: 0.7;
}

.jc-skill-remove[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: gray;
    cursor: pointer;
    padding: 0;
    transition: background var(--g-transition);
}

.jc-skill-remove:hover[b-nuq5dl5eca] {
    color: rgba(0, 111, 249, 0.15);
}

.jc-add-skill-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1.5px dashed var(--g-border);
    border-radius: var(--g-radius-full);
    background: transparent;
    color: var(--g-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
}

.jc-add-skill-btn:hover[b-nuq5dl5eca] {
    border-color: var(--g-brand);
    background: var(--g-brand-bg);
}

/* ── Editor ── */
.jc-editor-toolbar[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--g-border);
    border-bottom: none;
    border-radius: var(--g-radius-md) var(--g-radius-md) 0 0;
    background: var(--g-gray-50);
}

.jc-toolbar-btn[b-nuq5dl5eca] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-xs);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--g-transition);
    padding: 0;
}

.jc-toolbar-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-200);
    color: var(--g-text-heading);
}

.jc-toolbar-divider[b-nuq5dl5eca] {
    width: 1px;
    height: 18px;
    background: var(--g-border);
    margin: 0 4px;
}

/* ── Heading dropdown ── */
.jc-heading-wrap[b-nuq5dl5eca] {
    position: relative;
}

.jc-heading-btn[b-nuq5dl5eca] {
    gap: 2px;
    width: auto;
    padding: 0 6px;
}

.jc-heading-dropdown[b-nuq5dl5eca] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 50;
    min-width: 160px;
    padding: 4px;
}

.jc-heading-option[b-nuq5dl5eca] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: var(--g-radius-xs);
    font-size: 13px;
    color: var(--g-text-heading);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.jc-heading-option:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
}

.jc-heading-overlay[b-nuq5dl5eca] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.jc-editor-area[b-nuq5dl5eca] {
    width: 100%;
    min-height: 455px;
    max-height: 455px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--g-border);
    border-radius: 0 0 var(--g-radius-md) var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-heading);
    background: var(--g-bg-card);
    outline: none;
    line-height: 1.7;
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
}

.jc-editor-area:focus[b-nuq5dl5eca] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
}

.jc-editor-area:empty[b-nuq5dl5eca]::before {
    content: attr(data-placeholder);
    color: var(--g-text-muted);
    pointer-events: none;
}

/* AI Improve button inside editor */
.jc-editor-footer[b-nuq5dl5eca] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 14px 10px;
    border: 1px solid var(--g-border);
    border-top: none;
    border-radius: 0 0 var(--g-radius-md) var(--g-radius-md);
    background: var(--g-bg-card);
}

.jc-improve-btn[b-nuq5dl5eca] {
    height: 28px;
    padding: 0 12px;
    font-size: 0.6875rem;
}

.jc-editor-area[b-nuq5dl5eca] {
    border-radius: 0 !important; 
}

/* ── Boolean Grid ── */
.jc-boolean-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Boolean Disabled (AI-generated, read-only) ── */
.jc-boolean-disabled[b-nuq5dl5eca] {
    background: var(--g-gray-50) !important;
    color: var(--g-text-label) !important;
    cursor: not-allowed;
}

/* ── Right Sidebar Card ── */
.jc-sidebar-card[b-nuq5dl5eca] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    padding: 16px 20px;
    box-shadow: var(--g-shadow-xs);
}

/* ── Status Badge ── */
/* ── Status Select ── */
.jc-status-select-wrap[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--g-radius-md);
}

.jc-status-dot-colored[b-nuq5dl5eca] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.jc-status-select[b-nuq5dl5eca] {
    appearance: none;
    -webkit-appearance: none;
    border: none !important;
    background: transparent !important;
    font-size: var(--g-fs-body);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    width: 100%;
    padding: 0;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
}

.jc-status-select option[b-nuq5dl5eca] {
    color: #1f2937;
    background: #fff;
}

/* ── Work Mode Group ── */
.jc-workmode-group[b-nuq5dl5eca] {
    display: flex;
    gap: 0;
    margin-top: 6px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    overflow: hidden;
}

.jc-workmode-btn[b-nuq5dl5eca] {
    flex: 1;
    height: 33px;
    border: none;
    background: var(--g-bg-card);
    color: var(--g-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
}

.jc-workmode-btn:not(:last-child)[b-nuq5dl5eca] {
    border-right: 1px solid var(--g-border);
}

.jc-workmode-btn.active[b-nuq5dl5eca] {
    background: var(--g-gray-900);
    color: #fff;
}

.jc-workmode-btn:hover:not(.active)[b-nuq5dl5eca] {
    background: var(--g-gray-50);
}

/* ── Location Grid ── */
.jc-location-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

/* ── Duration Grid ── */
.jc-duration-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

/* ── Custom Shift ── */
.jc-custom-shift[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-custom-shift span[b-nuq5dl5eca] {
    color: var(--g-text-muted);
    font-size: 0.8125rem;
}

/* ── Compensation ── */
.jc-comp-grid[b-nuq5dl5eca] {
    grid-template-columns: 1fr 2fr;
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.jc-comp-grid > select[b-nuq5dl5eca] {
    width: 120px;
    flex-shrink: 0;
}

.jc-comp-amount[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    overflow: hidden;
    background: var(--g-bg-card);
}

.jc-comp-prefix[b-nuq5dl5eca] {
    padding: 0 10px;
    font-size: var(--g-fs-body);
    font-weight: 600;
    color: var(--g-text-secondary);
    border-right: 1px solid var(--g-border);
    background: var(--g-gray-50);
     display: flex;
    align-items: center;
}

.jc-comp-input[b-nuq5dl5eca] {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.jc-comp-suffix[b-nuq5dl5eca] {
    padding: 0 12px;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    color: var(--g-text-muted);
}

/* ── Client Selector ── */
.jc-client-selector[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jc-client-logo[b-nuq5dl5eca] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    object-fit: contain;
    border: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.jc-client-avatar[b-nuq5dl5eca] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-md);
    background: var(--g-brand, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.jc-client-contacts[b-nuq5dl5eca] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.jc-contact-chip[b-nuq5dl5eca] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--g-radius-full);
    background: var(--g-gray-100);
    color: var(--g-text-body);
}

/* Client contact person display */
.jc-client-info[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jc-client-contact-name[b-nuq5dl5eca] {
    font-size: var(--g-fs-xs);
    font-weight: 600;
    color: var(--g-brand);
}

.jc-client-contact-divider[b-nuq5dl5eca] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.jc-client-contact-role[b-nuq5dl5eca] {
    font-size: var(--g-fs-xs);
    font-weight: 500;
    color: var(--g-text-secondary);
}

/* ── Assigned To ── */
.jc-assigned-card[b-nuq5dl5eca] {
    padding: 16px 20px 12px;
}

.jc-assigned-header[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.jc-assigned-count[b-nuq5dl5eca] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g-brand);
}

.jc-assigned-actions[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.jc-link-btn[b-nuq5dl5eca] {
    border: none;
    background: transparent;
    color: var(--g-brand);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--g-transition);
}

.jc-link-btn:hover[b-nuq5dl5eca] {
    opacity: 0.7;
}

.jc-link-btn-danger[b-nuq5dl5eca] {
    color:red;
}

.jc-divider-pipe[b-nuq5dl5eca] {
    color: var(--g-text-muted);
    font-size: 0.75rem;
}

.jc-recruiter-search-wrap[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    margin-bottom: 8px;
    color: var(--g-text-muted);
}

.jc-recruiter-search[b-nuq5dl5eca] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--g-text-heading);
    background: transparent;
}

.jc-recruiter-search[b-nuq5dl5eca]::placeholder {
    color: var(--g-text-muted);
}

.jc-recruiter-list[b-nuq5dl5eca] {
    max-height: 285px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jc-recruiter-list[b-nuq5dl5eca]::-webkit-scrollbar {
    width: 4px;
}

.jc-recruiter-list[b-nuq5dl5eca]::-webkit-scrollbar-thumb {
    background: var(--g-gray-300);
    border-radius: 4px;
}

.jc-recruiter-row[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--g-radius-md);
    cursor: pointer;
    transition: background var(--g-transition);
}

.jc-recruiter-row.selected[b-nuq5dl5eca] {
    background: #ecfdf5;
}

.jc-recruiter-row.selected .jc-recruiter-avatar[b-nuq5dl5eca] {
    border: 1px solid #10b981;
}

.jc-recruiter-row:hover[b-nuq5dl5eca] {
    background: var(--g-gray-50);
}

.jc-recruiter-row.selected:hover[b-nuq5dl5eca] {
    background: #d1fae5;
}

.jc-recruiter-info[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jc-recruiter-avatar[b-nuq5dl5eca] {
    width: 36px;
    height: 36px; 
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
    flex-shrink: 0;

}

.jc-recruiter-avatar img[b-nuq5dl5eca] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jc-recruiter-name[b-nuq5dl5eca] {
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-text-heading);
}

.jc-recruiter-role[b-nuq5dl5eca] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
    margin-top: 1px;
}

.jc-recruiter-check[b-nuq5dl5eca] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--g-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--g-transition);
    flex-shrink: 0;
    background: #fff;
}

.jc-recruiter-check.checked[b-nuq5dl5eca] {
    background: var(--g-success, #10b981);
    border-color: var(--g-success, #10b981);
    color: #fff;
}

/* ── Deadline / Submission Countdown ── */
.jc-deadline-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.jc-deadline-picker-wrap[b-nuq5dl5eca] {
    position: relative;
}

.jc-deadline-btn[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--g-transition);
}

.jc-deadline-btn:hover[b-nuq5dl5eca] {
    border-color: var(--g-gray-300);
}

.jc-deadline-btn svg[b-nuq5dl5eca] {
    color: var(--g-text-muted);
    flex-shrink: 0;
}

/* ── Date Picker ── */
.jc-datepicker[b-nuq5dl5eca] {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    z-index: 50;
    padding: 16px;
    margin-bottom: 8px;
}

.jc-datepicker-nav[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.jc-datepicker-arrow[b-nuq5dl5eca] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--g-text-secondary);
    transition: background var(--g-transition);
    padding: 0;
}

.jc-datepicker-arrow:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
}

.jc-datepicker-month[b-nuq5dl5eca] {
    font-size: var(--g-fs-body);
    font-weight: 700;
    color: var(--g-text-heading);
}

.jc-datepicker-weekdays[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--g-text-muted);
    margin-bottom: 6px;
}

.jc-datepicker-days[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.jc-day-empty[b-nuq5dl5eca] {
    width: 36px;
    height: 36px;
}

.jc-day-btn[b-nuq5dl5eca] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--g-text-body);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    padding: 0;
}

.jc-day-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
}

.jc-day-btn.today[b-nuq5dl5eca] {
    background: var(--g-brand-bg);
    color: var(--g-brand);
    box-shadow: inset 0 0 0 1.5px var(--g-brand-border);
}

.jc-day-btn.selected[b-nuq5dl5eca] {
    background: var(--g-gray-900);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.jc-day-btn.past[b-nuq5dl5eca],
.jc-day-btn:disabled[b-nuq5dl5eca] {
    color: var(--g-text-muted);
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.jc-datepicker-footer[b-nuq5dl5eca] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--g-border-light);
}

/* ── Time Picker ── */
.jc-timepicker[b-nuq5dl5eca] {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 240px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    z-index: 50;
    padding: 12px;
    margin-bottom: 8px;
}

.jc-timepicker-columns[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.jc-timepicker-col[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}

.jc-timepicker-col[b-nuq5dl5eca]::-webkit-scrollbar {
    width: 3px;
}

.jc-timepicker-col[b-nuq5dl5eca]::-webkit-scrollbar-thumb {
    background: var(--g-gray-300);
    border-radius: 3px;
}

.jc-timepicker-period[b-nuq5dl5eca] {
    justify-content: flex-start;
}

.jc-time-btn[b-nuq5dl5eca] {
    height: 34px;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-body);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    padding: 0;
}

.jc-time-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
}

.jc-time-btn.selected[b-nuq5dl5eca] {
    background: var(--g-gray-900);
    color: #fff;
}

.jc-timepicker-done[b-nuq5dl5eca] {
    width: 100%;
    height: 36px;
    border: none;
    border-radius: var(--g-radius-md);
   background:var(--sidebar-active-bg);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity var(--g-transition);
}

.jc-timepicker-done:hover[b-nuq5dl5eca] {
    opacity: 0.9;
}

/* ── Threshold ── */
.jc-threshold-grid[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

.jc-threshold-input[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    border-radius: var(--g-radius-md);
    overflow: hidden;
    height: 42px;
    min-width: 0;
}

.jc-threshold-input input[b-nuq5dl5eca] {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: var(--g-fs-card-title);
    font-weight: 700;
    font-family: inherit;
    padding: 0 12px;
    background: transparent;
    min-width: 0;
    width: 0;
}

.jc-threshold-suffix[b-nuq5dl5eca] {
    padding: 0 12px;
    font-size: var(--g-fs-body);
    font-weight: 700;
    flex-shrink: 0;
}

.jc-threshold-reject[b-nuq5dl5eca] {
    background: rgb(255 220 220 / 50%);
    border: 1.5px solid #fca5a5;
}

.jc-threshold-reject input[b-nuq5dl5eca] {
    color: var(--g-error-text, #dc2626);
}

.jc-threshold-reject .jc-threshold-suffix[b-nuq5dl5eca] {
    color: var(--g-error-text, #dc2626);
}

.jc-threshold-approve[b-nuq5dl5eca] {
    background: rgb(186 255 223 / 40%);
    border: 1.5px solid #6ee7b7;
}

.jc-threshold-approve input[b-nuq5dl5eca] {
    color: var(--g-success-text, #059669);
}

.jc-threshold-approve .jc-threshold-suffix[b-nuq5dl5eca] {
    color: var(--g-success-text, #059669);
}

/* ── Clone Job Dropdown ── */
.jc-clone-wrap[b-nuq5dl5eca] {
    position: relative;
}

.jc-clone-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 5px 16px;
    border: 1px solid var(--g-border, #e2e8f0);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-body);
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--g-transition);
}

.jc-clone-btn:hover[b-nuq5dl5eca] {
    border-color: var(--g-brand);
    color: var(--g-brand);
    background: var(--g-brand-bg);
}

.jc-clone-dropdown[b-nuq5dl5eca] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 20px;
    z-index: 60;
    animation: jc-modalIn-b-nuq5dl5eca 0.15s ease-out;
    max-width: calc(100vw - 32px);
}

.jc-clone-title[b-nuq5dl5eca] {
    font-size: var(--g-fs-card-title);
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 16px;
}

.jc-clone-actions[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.jc-clone-action-btn[b-nuq5dl5eca] {
    flex: 1;
    height: 34px;
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.jc-clone-close-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--g-info, #006ff9);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: opacity var(--g-transition);
}

.jc-clone-close-btn:hover[b-nuq5dl5eca] {
    opacity: 0.88;
}

/* ── AI Job Creation Modal (wider) ── */
.jc-ai-modal[b-nuq5dl5eca] {
    max-width: 620px !important;
}

.jc-ai-modal-title-row[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-ai-desc[b-nuq5dl5eca] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 var(--g-space-12) 0;
    line-height: 1.5;
}

.jc-ai-textarea[b-nuq5dl5eca] {
    min-height: 200px;
    resize: vertical;
    font-size: var(--g-fs-sm);
    line-height: 1.6;
}

.jc-ai-helper[b-nuq5dl5eca] {
    display: block;
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    margin-top: var(--g-space-8);
}

.jc-ai-modal-footer[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--g-border-light);
}

.jc-ai-create-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jc-ai-manual-link[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--g-brand);
    font-size: var(--g-fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: opacity var(--g-transition);
}

.jc-ai-manual-link:hover[b-nuq5dl5eca] {
    opacity: 0.8;
}

/* ── Modal ── */
.jc-modal-backdrop[b-nuq5dl5eca] {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 27, 0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040;
    animation: g-fadeIn 0.15s ease-out;
}

.jc-modal[b-nuq5dl5eca] {
    width: 100%;
    max-width: 440px;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: jc-modalIn-b-nuq5dl5eca 0.2s ease-out;
     position: relative;
}

@keyframes jc-modalIn-b-nuq5dl5eca {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.jc-modal-header[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--g-border-light);
}

.jc-modal-title[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-card-title);
    font-weight: 700;
    color: var(--g-text-heading);
}

.jc-modal-close[b-nuq5dl5eca] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--g-radius-sm);
    background: transparent;
    color: var(--g-text-secondary);
    cursor: pointer;
    transition: background var(--g-transition);
    padding: 0;
}

.jc-modal-close:hover[b-nuq5dl5eca] {
    background: var(--g-gray-100);
}

.jc-modal-body[b-nuq5dl5eca] {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh; 
 }

.jc-skill-select[b-nuq5dl5eca] {
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jc-skill-search-wrap[b-nuq5dl5eca] {
    position: relative;
}

.jc-skill-dropdown[b-nuq5dl5eca] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    margin-top: 4px;
}

.jc-skill-dropdown-item[b-nuq5dl5eca] {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-skill-dropdown-item:hover[b-nuq5dl5eca],
.jc-skill-dropdown-item.active[b-nuq5dl5eca] {
    background: #2563eb;
    color: #fff;
}

.jc-modal-body .g-form-input[b-nuq5dl5eca] {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Priority toggle buttons */
.jc-priority-toggle[b-nuq5dl5eca] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.jc-priority-btn[b-nuq5dl5eca] {
    padding: 7px 18px; 
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-body);
    cursor: pointer;
    transition: all 0.15s ease;
}

.jc-priority-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-50);
}

.jc-priority-btn.jc-priority-high.active[b-nuq5dl5eca] {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.jc-priority-btn.jc-priority-med.active[b-nuq5dl5eca] {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}

.jc-priority-btn.jc-priority-low.active[b-nuq5dl5eca] {
    background: #f5f5f5;
    color: #424242;
    border-color: #bdbdbd;
}

/* Config-added priorities (no high/med/low mapping) — blue highlight when active */
.jc-priority-btn.jc-priority-default.active[b-nuq5dl5eca] {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
}

.jc-modal-footer[b-nuq5dl5eca] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--g-border-light);
    flex-wrap: wrap;
}
.jc-modal-error[b-nuq5dl5eca] {
    flex: 1 1 100%;
    font-size: 12px;
    color: #dc2626;
    font-weight: 500;
    text-align: left;
    margin-bottom: 4px;
}

/* Black button style for Add Skill modal */
.jc-btn-black[b-nuq5dl5eca] {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
}
.jc-btn-black:hover[b-nuq5dl5eca] {
    background: #333 !important;
    border-color: #333 !important;
}

/* Improve AI button inside editor area */
.jc-improve-inside[b-nuq5dl5eca] {
    position: relative;
}

/* ── Sticky Action Footer ── */
.jc-action-footer[b-nuq5dl5eca] {
    position: fixed;
    bottom: 5px;
    left: 80px;
    right: 16px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 0 16px;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-border-light);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    z-index: 20;
    border-radius: 15px;
    transition: left 0.3s ease;
}

.jc-footer-left[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
}

.jc-footer-cancel[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    color: var(--g-text-secondary);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
    font-family: inherit;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 5px 22px;
    transition: color var(--g-transition), background var(--g-transition);
}

.jc-footer-cancel:hover[b-nuq5dl5eca] {
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

.jc-footer-right[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.jc-publish-toggle[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-publish-label[b-nuq5dl5eca] {
    font-size: var(--g-fs-sm);
    font-weight: 600;
    color: var(--g-text-body);
}

.jc-draft-btn[b-nuq5dl5eca] {
    height: 36px;
    padding: 0 22px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-body);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    font-family: inherit;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--g-transition);
}

.jc-draft-btn:hover[b-nuq5dl5eca] {
    background: var(--g-gray-50);
    border-color: var(--g-gray-300);
}

.jc-create-btn[b-nuq5dl5eca] {
    height: 36px;
    padding: 0 24px;
    font-size: var(--g-fs-xs);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: transform var(--g-transition), opacity var(--g-transition), box-shadow var(--g-transition);
}

.jc-create-btn:hover[b-nuq5dl5eca] {
    transform: scale(1.02);
}

/* Focus styles for keyboard accessibility */
.jc-back-btn:focus-visible[b-nuq5dl5eca],
.jc-toolbar-btn:focus-visible[b-nuq5dl5eca],
.jc-priority-btn:focus-visible[b-nuq5dl5eca],
.jc-workmode-btn:focus-visible[b-nuq5dl5eca],
.jc-add-skill-btn:focus-visible[b-nuq5dl5eca],
.jc-skill-tag:focus-visible[b-nuq5dl5eca],
.jc-day-btn:focus-visible[b-nuq5dl5eca],
.jc-time-btn:focus-visible[b-nuq5dl5eca],
.jc-deadline-btn:focus-visible[b-nuq5dl5eca],
.jc-recruiter-row:focus-visible[b-nuq5dl5eca],
.jc-clone-btn:focus-visible[b-nuq5dl5eca] {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
}

/* ── Responsive ── */

/* Large desktop */
@media (min-width: 1201px) {
    .jc-action-footer[b-nuq5dl5eca] {
        left: 256px;
        right: 35px;
        bottom: 5px;
    }
}

/* Medium desktop / small laptop */
@media (max-width: 1440px) {
    .jc-body[b-nuq5dl5eca] {
        grid-template-columns: 1fr 330px;
        gap: 20px;
    }

    .jc-action-footer[b-nuq5dl5eca] {
       left: 255px;
        right: 20px;
        bottom: 5px;
        padding: 0 24px;
    }
}

/* Tablet / sidebar collapsed */
@media (max-width: 1024px) {
    .jc-body[b-nuq5dl5eca] {
        grid-template-columns: 1fr 330px;
        gap: 18px;
    }

    .jc-action-footer[b-nuq5dl5eca] {
         left: 104px;
        right: 25px;
        bottom: 5px;
        padding: 0 20px;
    }

    .jc-page-header[b-nuq5dl5eca] {
        gap: 12px; 
    }
}

/* Tablet portrait / sidebar hidden */
@media (max-width: 800px) {
    .jc-body[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .jc-right[b-nuq5dl5eca] {
        position: static;
    }

    .jc-exp-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr 1fr;
    }

    .jc-page-header[b-nuq5dl5eca] {
        position: static; 
    }

    .jc-action-footer[b-nuq5dl5eca] {
        left: 12px;
        right: 12px;
        bottom: 4px;
        height: 56px;
        padding: 0 16px;
    }

    .jc-clone-wrap[b-nuq5dl5eca] {
        position: static;
    }

    .jc-clone-dropdown[b-nuq5dl5eca] {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        width: 95%;
        max-width: 100%;
        margin: 0 auto;
        border-radius: var(--g-radius-xl) var(--g-radius-xl) 0 0;
        padding: 20px 16px;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
        z-index: 110;
    }

    .jc-banner[b-nuq5dl5eca] {
        height: 170px;
    }

    .jc-banner-tagline[b-nuq5dl5eca] {
        font-size: 1.125rem;
    }
}

/* Small tablet / large phone */
@media (max-width: 640px) {
    .jc-page[b-nuq5dl5eca] {
        padding-bottom: 20px;
    }

    .jc-exp-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .jc-boolean-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
    }

    .jc-section-body[b-nuq5dl5eca] {
        padding: 14px 16px 16px;
    }

    .jc-section-header[b-nuq5dl5eca] {
        padding: 14px 16px 0;
        gap: 8px;
    }

    .jc-section-title[b-nuq5dl5eca] {
        font-size: var(--g-fs-sm);
    }

    .jc-banner[b-nuq5dl5eca] {
        height: 150px;
        border-radius: var(--g-radius-lg);
    }

    .jc-banner-overlay[b-nuq5dl5eca] {
        padding: 14px 16px;
    }

    .jc-banner-tagline[b-nuq5dl5eca] {
        font-size: 1rem;
    }

    .jc-page-title[b-nuq5dl5eca] {
        font-size: 1.125rem;
    }

    .jc-page-subtitle[b-nuq5dl5eca] {
        font-size: var(--g-fs-xs);
    }

    .jc-action-footer[b-nuq5dl5eca] {
        left: 8px;
        right: 8px;
        bottom: 3px;
        height: 52px;
        padding: 0 12px;
    }

    .jc-footer-cancel[b-nuq5dl5eca] {
        font-size: var(--g-fs-xxs);
        padding: 5px 14px;
        gap: 4px;
    }

    .jc-footer-right[b-nuq5dl5eca] {
        gap: 8px;
    }

    .jc-draft-btn[b-nuq5dl5eca] {
        height: 32px;
        padding: 0 14px;
        font-size: var(--g-fs-xxs);
    }

    .jc-create-btn[b-nuq5dl5eca] {
        height: 32px;
        padding: 0 16px;
        font-size: var(--g-fs-xxs);
    }

    .jc-publish-label[b-nuq5dl5eca] {
        font-size: var(--g-fs-xs);
    }

    .jc-sidebar-card[b-nuq5dl5eca] {
        padding: 14px 16px;
    }

    .jc-location-grid[b-nuq5dl5eca],
    .jc-duration-grid[b-nuq5dl5eca],
    .jc-deadline-grid[b-nuq5dl5eca],
    .jc-threshold-grid[b-nuq5dl5eca] {
        gap: 8px;
    }

    .jc-comp-grid[b-nuq5dl5eca] {
        flex-direction: column;
        gap: 8px;
    }

    .jc-comp-grid > select[b-nuq5dl5eca] {
        width: 100%;
    }

    .jc-back-btn[b-nuq5dl5eca] {
        width: 34px;
        height: 34px;
    }

    .jc-clone-dropdown[b-nuq5dl5eca] {
        padding: 16px 14px;
    }

    .jc-clone-title[b-nuq5dl5eca] {
        font-size: var(--g-fs-body);
        margin-bottom: 12px;
    }

    .jc-clone-actions[b-nuq5dl5eca] {
        margin-top: 12px;
    }

    .jc-modal[b-nuq5dl5eca] {
        max-width: calc(100vw - 32px);
        margin: 0 16px;
    }
}

/* Mobile phone */
@media (max-width: 480px) {
    .jc-page[b-nuq5dl5eca] {
        padding-bottom: 20px;
    }

    .jc-exp-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .jc-priority-group[b-nuq5dl5eca] {
        width: 100%;
    }

    .jc-priority-btn[b-nuq5dl5eca] {
        flex: 1;
        padding: 0 10px;
        font-size: 0.75rem;
    }

    .jc-workmode-btn[b-nuq5dl5eca] {
        font-size: 0.75rem;
    }
    .jc-page-header[b-nuq5dl5eca]{
    display: flex;
    padding: 16px;
    align-items: flex-start;
    gap: 10px;
    }


    .jc-page-header-left[b-nuq5dl5eca] {
        gap: 8px;
    }

    .jc-page-header-right[b-nuq5dl5eca] {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
    }

    .jc-page-header-right > button[b-nuq5dl5eca] {
        flex: 1;
    }

    .jc-clone-btn[b-nuq5dl5eca] {
        flex: 1;
    }

    .jc-clone-dropdown[b-nuq5dl5eca] {
        padding: 16px 12px;
    }

    .jc-banner[b-nuq5dl5eca] {
        height: 130px;
    }

    .jc-banner-tagline[b-nuq5dl5eca] {
        font-size: 0.875rem;
    }

    .jc-banner-info[b-nuq5dl5eca] {
        font-size: 0.6875rem;
        gap: 10px;
    }

    .jc-job-code[b-nuq5dl5eca] {
        font-size: 0.625rem;
        padding: 3px 8px;
    }

    .jc-action-footer[b-nuq5dl5eca] {
        left: 19px;
        right: 18px;
        bottom: 2px;
        height: 48px;
        padding: 0 10px;
    }

    .jc-footer-cancel[b-nuq5dl5eca] {
        font-size: var(--g-fs-xxs);
        padding: 4px 10px;
    }

    .jc-footer-cancel svg[b-nuq5dl5eca] {
        width: 12px;
        height: 12px;
    }

    .jc-footer-right[b-nuq5dl5eca] {
        gap: 6px;
    }

    .jc-publish-label[b-nuq5dl5eca] {
        display: none;
    }

    .jc-draft-btn[b-nuq5dl5eca] {
        height: 30px;
        padding: 0 10px;
        font-size: var(--g-fs-xxs);
    }

    .jc-create-btn[b-nuq5dl5eca] {
        height: 32px;
        padding: 0 12px;
        font-size: 0.625rem;
    }

    .jc-section-body[b-nuq5dl5eca] {
        padding: 12px 14px 14px;
    }

    .jc-section-header[b-nuq5dl5eca] {
        padding: 12px 14px 0;
    }

    .jc-datepicker[b-nuq5dl5eca] {
        width: 280px;
        padding: 12px;
    }

    .jc-timepicker[b-nuq5dl5eca] {
        width: 220px;
    }

    .jc-deadline-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
    }

    .jc-threshold-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
    }

    .jc-location-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
    }

    .jc-duration-grid[b-nuq5dl5eca] {
        grid-template-columns: 1fr 1fr;
    }

    .jc-recruiter-avatar[b-nuq5dl5eca] {
        width: 32px;
        height: 32px;
    }

    .jc-recruiter-name[b-nuq5dl5eca] {
        font-size: 0.75rem;
    }

    .jc-recruiter-role[b-nuq5dl5eca] {
        font-size: 0.625rem;
    }

    .jc-recruiter-check[b-nuq5dl5eca] {
        width: 22px;
        height: 22px;
    }

    .jc-skill-tag[b-nuq5dl5eca] {
        height: 28px;
        padding: 0 8px;
        font-size: 0.75rem;
    }

    .jc-skill-years[b-nuq5dl5eca] {
        font-size: 0.625rem;
    }

    .jc-add-skill-btn[b-nuq5dl5eca] {
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Very small phone */
@media (max-width: 360px) {
    .jc-footer-cancel span[b-nuq5dl5eca] {
        display: none;
    }

    .jc-create-btn span[b-nuq5dl5eca] {
        display: none;
    }

    .jc-banner-selector[b-nuq5dl5eca] {
        bottom: 8px;
        right: 8px;
    }

    .jc-banner-select[b-nuq5dl5eca] {
        height: 28px;
        font-size: 0.75rem;
        padding: 0 20px 0 8px;
    }
}

/* ── Success Popup ── */
.jc-popup-overlay[b-nuq5dl5eca] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.jc-popup-card[b-nuq5dl5eca] {
    background: #fff;
    border-radius: 16px;
    padding: 36px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-width: 400px;
    max-width: 460px;
    animation: jc_pop_in-b-nuq5dl5eca 0.25s ease;
}

.jc-popup-icon[b-nuq5dl5eca] {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.jc-popup-icon-circle[b-nuq5dl5eca] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jc-popup-title[b-nuq5dl5eca] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0 0 8px;
}

.jc-popup-subtitle[b-nuq5dl5eca] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.jc-popup-text[b-nuq5dl5eca] { 
    margin: 0 0 20px;
}

.jc-popup-ok[b-nuq5dl5eca] {
    min-width: 100px;
    padding: 8px 32px;
}

.jc-popup-actions[b-nuq5dl5eca] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.jc-popup-btn[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    justify-content: center;
}

.jc-popup-btn-outline[b-nuq5dl5eca] {
    background: #fff;
    color: var(--g-text-heading);
    border: 1.5px solid var(--g-border-default);
}

.jc-popup-btn-outline:hover[b-nuq5dl5eca] {
    background: var(--g-bg-section);
    border-color: var(--g-border-hover);
}

.jc-popup-btn-primary[b-nuq5dl5eca] {
    background: var(--g-brand);
    color: #fff;
    border: 1.5px solid var(--g-brand);
}

.jc-popup-btn-primary:hover[b-nuq5dl5eca] {
    background: var(--g-brand-hover);
    border-color: var(--g-brand-hover);
}

.jp_popup_btn_outline[b-nuq5dl5eca] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 20px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: var(--g-btn-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.jp_popup_btn_outline:hover[b-nuq5dl5eca] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

@keyframes jc_pop_in-b-nuq5dl5eca {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== REMARKS (Edit Mode) ===== */
.jc-remarks-row[b-nuq5dl5eca] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 28px;
}

.jc-remarks-left[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jc-remarks-heading[b-nuq5dl5eca] {
    font-size: 14px;
    font-weight: 600;
    color: var(--g-text-heading);
    margin: 0;
}

.jc-remarks-latest[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jc-remarks-latest-text[b-nuq5dl5eca] {
    font-size: 13px;
    color: var(--g-brand, #4f46e5);
    font-style: italic;
    line-height: 1.5;
}

.jc-remarks-latest-meta[b-nuq5dl5eca] {
    font-size: 12px;
    color: var(--g-text-secondary);
    line-height: 1.4;
}

.jc-remarks-view-all[b-nuq5dl5eca] {
    background: none;
    border: none;
    color: var(--g-brand, #4f46e5);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-align: left;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.jc-remarks-view-all:hover[b-nuq5dl5eca] {
    text-decoration: none;
}

.jc-remarks-empty[b-nuq5dl5eca] {
    font-size: 13px;
    color: var(--g-text-muted);
    font-style: italic;
    margin: 0;
}

.jc-remarks-right[b-nuq5dl5eca] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Popup overlay */
.jc-remarks-overlay[b-nuq5dl5eca] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: jc_fade_in-b-nuq5dl5eca 0.2s ease;
}

.jc-remarks-popup[b-nuq5dl5eca] {
    background: #fff;
    border-radius: 12px;
    width: min(520px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: jc_pop_in-b-nuq5dl5eca 0.25s ease;
}

.jc-remarks-popup-header[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--g-border-light, #e5e7eb);
}

.jc-remarks-popup-title[b-nuq5dl5eca] {
    font-size: 16px;
    font-weight: 700;
    color: var(--g-text-heading);
    margin: 0;
}

.jc-remarks-close[b-nuq5dl5eca] {
    color: var(--g-text-muted);
}

.jc-remarks-popup-body[b-nuq5dl5eca] {
    padding: 16px 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jc-remark-item[b-nuq5dl5eca] {
    padding: 12px 14px;
    background: var(--g-bg-page, #f9fafb);
    border-radius: 8px;
    border-left: 3px solid var(--g-brand, #6366f1);
}

.jc-remark-text[b-nuq5dl5eca] {
    font-size: 13px;
    color: var(--g-text-primary);
    line-height: 1.55;
    margin-bottom: 8px;
}

.jc-remark-meta[b-nuq5dl5eca] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--g-text-muted);
}

.jc-remark-author[b-nuq5dl5eca] {
    font-weight: 600;
    color: var(--g-text-secondary);
}

@keyframes jc_fade_in-b-nuq5dl5eca {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .jc-remarks-row[b-nuq5dl5eca] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Components/Pages/Dashboard/Jobs/JobList.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   JobList – Scoped Styles
   Prefix: jl-
   Responsive: 1440+, 1440, 1200, 1024, 768, 425, 375, 320
   ═══════════════════════════════════════════ */

/* ── Page Shell ── */
.jl-page[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--g-font-sans);
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
}

/* ── Sticky top (header + tabs + toolbar) ── */
.jl-sticky-top[b-y9vdtsgn9l] {
    position: sticky;
    top: 58px;
    z-index: 50;
    background: var(--g-bg-card, #fff);
    flex-shrink: 0;
    padding: 20px 24px 10px;
    border-bottom: 1px solid var(--g-gray-100);
}

.jl-sticky-top .g-page-header[b-y9vdtsgn9l] {
    border: none;
    border-radius: 0;
    padding: 0 0 16px;
    margin: 0;
}

/* ── Tabs ── */
.jl-tabs-wrap[b-y9vdtsgn9l] {
    margin-top: 12px;
}

.jl-tabs[b-y9vdtsgn9l] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.jl-tab[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--g-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--g-gray-600);
    font-size: var(--g-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.jl-tab:hover[b-y9vdtsgn9l] {
    border-color: var(--g-gray-300);
    color: var(--g-gray-800);
}

.jl-tab.active[b-y9vdtsgn9l] {
    color: #fff;
    border-color: var(--sidebar-active-bg);
    background: var(--sidebar-active-bg);
}

.jl-tab-label[b-y9vdtsgn9l] {
    line-height: 1.2;
}

.jl-tab-count[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--g-gray-100);
    color: var(--g-gray-600);
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    line-height: 1;
}

.jl-tab-count.active[b-y9vdtsgn9l] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Mobile Tabs Dropdown ── */
.jl-tabs-mobile[b-y9vdtsgn9l] {
    display: none;
    position: relative;
}

.jl-tab-mobile-toggle[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 10px;
    font-size: var(--g-fs-sm);
    font-weight: 500;
    color: var(--g-text-primary);
    cursor: pointer;
}

.jl-tab-mobile-toggle svg[b-y9vdtsgn9l] {
    margin-left: auto;
}

.jl-tab-mobile-dropdown[b-y9vdtsgn9l] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 100;
    overflow: hidden;
}

.jl-tab-mobile-item[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: var(--g-fs-sm);
    color: var(--g-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.jl-tab-mobile-item:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
}

.jl-tab-mobile-item--active[b-y9vdtsgn9l] {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.jl-tab-mobile-item--active:hover[b-y9vdtsgn9l] {
    background: var(--sidebar-active-bg);
}

/* ── Toolbar ── */
.jl-toolbar[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: none;
    gap: 16px;
}

.jl-search-wrap[b-y9vdtsgn9l] {
    position: relative;
    width: 20%;
    min-width: 200px;
}

.jl-search-icon[b-y9vdtsgn9l] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-gray-400);
    pointer-events: none;
}

.jl-search-input[b-y9vdtsgn9l] {
    width: 100%;
    padding: 7px 5px 7px 30px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-gray-700);
    background: var(--g--heading-bg);
    outline: none;
    transition: border-color 0.2s ease;
}

.jl-search-input[b-y9vdtsgn9l]::placeholder {
    color: var(--g-gray-400);
}

.jl-search-input:focus[b-y9vdtsgn9l] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(44, 124, 255, 0.1);
}

.jl-toolbar-right[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jl-results-count[b-y9vdtsgn9l] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-primary, #2563eb);
    white-space: nowrap;
}

/* ── Sort ── */
.jl-sort-wrap[b-y9vdtsgn9l] {
    position: relative;
}

.jl-sort-btn[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: #fff;
    color: var(--g-gray-600);
    font-size: var(--g-fs-sm);
    cursor: pointer;
    white-space: nowrap;
}

.jl-sort-btn:hover[b-y9vdtsgn9l] {
    border-color: var(--g-gray-300);
}

.jl-sort-text[b-y9vdtsgn9l] {
    color: var(--g-gray-500);
}

.jl-sort-value[b-y9vdtsgn9l] {
    color: var(--g-gray-800);
}

.jl-sort-chevron[b-y9vdtsgn9l] {
    transition: transform 0.2s ease;
}

.jl-sort-chevron.open[b-y9vdtsgn9l] {
    transform: rotate(180deg);
}

.jl-sort-popover[b-y9vdtsgn9l] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.1));
    min-width: 190px;
    padding: 4px;
    animation: jl-fade-in-b-y9vdtsgn9l 0.12s ease;
}

.jl-sort-option[b-y9vdtsgn9l] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
    cursor: pointer;
    border-radius: var(--g-radius-sm);
}

.jl-sort-option:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
    color: var(--g-gray-800);
}

.jl-sort-option.active[b-y9vdtsgn9l] {
    background: rgba(44, 124, 255, 0.08);
    color: var(--g-brand, #2c7cff);
    font-weight: 600;
}

@keyframes jl-fade-in-b-y9vdtsgn9l {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Change Status Button ── */
.jl-change-status-btn[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: var(--g-fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    border: 1px solid #e67e22;
    border-radius: var(--g-radius-md);
    background: #fff1e4;
    color: #e67e22;
}

.jl-change-status-btn:hover[b-y9vdtsgn9l] {
    background: #ffe6d5;
}

.jl-change-status-btn:disabled[b-y9vdtsgn9l] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Button Spinner ── */
.jl-btn-spinner[b-y9vdtsgn9l] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: jlSpin-b-y9vdtsgn9l 0.6s linear infinite;
}

@keyframes jlSpin-b-y9vdtsgn9l {
    to { transform: rotate(360deg); }
}

/* ── Scroll Area ── */
.jl-scroll-area[b-y9vdtsgn9l] {
    flex: 1;
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-xs);
    overflow: visible;
    margin: 15px 0px;
    min-height: 0;
}

/* ── Loading ── */
.jl-loading[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

/* ── Table Header ── */
.jl-table-header[b-y9vdtsgn9l] {
    display: grid;
    grid-template-columns: 48px 2.5fr 1.2fr 1.6fr 1.5fr 1.5fr 1fr 1fr 1.3fr 0.5fr;
    align-items: center;
    gap: 0 var(--g-space-12);
  
    padding: var(--g-space-12) var(--g-space-16);
    border-bottom: 1px solid var(--g-gray-200);
    background: var(--g--heading-bg);
}

.jl-th--sno[b-y9vdtsgn9l] {
    text-align: center;
}

.jl-th[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 700;
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.jl-th--end[b-y9vdtsgn9l] {
    text-align: right;
}

/* Mobile label (hidden on desktop) */
.jl-mobile-label[b-y9vdtsgn9l] {
    display: none;
}

/* ── Table Body ── */


/* ── Row ── */
.jl-row[b-y9vdtsgn9l] {
    display: grid;
    grid-template-columns: 48px 2.5fr 1.2fr 1.6fr 1.5fr 1.5fr 1fr 1fr 1.3fr 0.5fr;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-gray-100);
    background: var(--g-bg-card);
    font-size: var(--g-fs-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.jl-row:hover[b-y9vdtsgn9l]{
  background: var(--g-bg-section);
}
.jl-row[title][b-y9vdtsgn9l]::after {
    content: attr(title);
    position: fixed;
    bottom: 8px;
    left: 16px;
    font-size: 11px;
    color: var(--g-text-muted);
    background: var(--g-gray-50);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--g-gray-200);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
}
.jl-row:hover[title][b-y9vdtsgn9l]::after { opacity: 1; }



.jl-td[b-y9vdtsgn9l] {
    min-width: 0;
}

/* ── Col 1: Job Details ── */
.jl-td-details[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jl-row-num[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 700;
    color: var(--g-gray-400);
    text-align: center;
}

.jl-details-img-wrap[b-y9vdtsgn9l] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.jl-details-img[b-y9vdtsgn9l] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-lg);
    object-fit: cover;
    flex-shrink: 0;
 }

.jl-details-img-default[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-lg);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border-card);
    color: var(--g-gray-400);
    flex-shrink: 0;
}

.jl-client-badge-img[b-y9vdtsgn9l] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: var(--g-radius-full);
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: var(--g-shadow-xs);
}

.jl-details-info[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.jl-details-title-row[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jl-job-title[b-y9vdtsgn9l] {
    font-size: var(--g-fs-sm);
    font-weight: 700;
    color: var(--g-text-heading);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.jl-job-title:hover[b-y9vdtsgn9l] {
    color: var(--g-brand, #2c7cff);
}

.jl-job-sub[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.jl-job-client[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.jl-job-client svg[b-y9vdtsgn9l] {
    flex-shrink: 0;
    color: var(--g-gray-400);
}

.jl-meta-row[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Col 2: Rate ── */
.jl-td-rate[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jl-rate-amount[b-y9vdtsgn9l] {
    font-size: var(--g-fs-sm);
    font-weight: 700; 
    text-transform: capitalize;
}

.jl-boarded-date[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    color: var(--g-success-text);
    font-weight: 600;
}

/* ── Col 3: Location ── */
.jl-td-location[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jl-loc-text[b-y9vdtsgn9l] {
    font-size: 10px;
    font-weight: 500;
    color: var(--g-text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 4px;
    text-transform: capitalize;
    word-break: break-word;
    line-height: 1.4;
}

.jl-loc-text svg[b-y9vdtsgn9l] {
    flex-shrink: 0;
    color: var(--g-gray-400);
    margin-top: 2px;
}

.jl-priority-indicator[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: capitalize;
}

.jl-priority-dot[b-y9vdtsgn9l] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.jl-boarded-inline[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    color: #16a34a;
}

.jl-status-inline[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 600;
}

.jl-status-inline--open[b-y9vdtsgn9l] { color: #16a34a; }
.jl-status-inline--close[b-y9vdtsgn9l] { color: #ef4444; }
.jl-status-inline--hold[b-y9vdtsgn9l] { color: #d97706; }
.jl-status-inline--inactive[b-y9vdtsgn9l] { color: #ef4444; }

.jl-job-status-badge[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
    width: fit-content;
}

.jl-status-close[b-y9vdtsgn9l] { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.jl-status-hold[b-y9vdtsgn9l] { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.jl-status-active[b-y9vdtsgn9l] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.jl-status-inactive[b-y9vdtsgn9l] { background: var(--g-gray-100); color: var(--g-gray-500); border-color: var(--g-gray-200); }

/* ── Col 4: Skills ── */
.jl-td-skill[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    position: relative;
    min-width: 0;
}

.jl-skill-pill[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--g-gray-200);
     border-radius: var(--g-radius-sm);
    background: #eff6ff;
    max-width: none;
    cursor: pointer;
    transition: all 0.15s;
    width:60px;
}

.jl-skill-pill:hover[b-y9vdtsgn9l] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.jl-skill-text[b-y9vdtsgn9l] {
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.jl-skill-count[b-y9vdtsgn9l] {
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
}

.jl-skill-more-wrap[b-y9vdtsgn9l] {
    position: relative;
    display: inline-flex;
}

.jl-skill-more[b-y9vdtsgn9l] {
    font-size: 10px;
    color: #3b82f6;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s;
}

.jl-skill-more:hover[b-y9vdtsgn9l] {
    color: #1d4ed8;
    text-decoration: underline;
}

.jl-skill-dropdown[b-y9vdtsgn9l] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: 4px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    padding: 10px 0;
    min-width: 230px;
    max-width: 300px;
    max-height: 195px;
    overflow-y: auto;
    animation: jl-fade-in-b-y9vdtsgn9l 0.12s ease;
}

.jl-skill-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar {
    width: 5px;
}
.jl-skill-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-track {
    background: transparent;
}
.jl-skill-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.jl-skill-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.jl-skill-dd-title[b-y9vdtsgn9l] {
    font-size: 11px;
    font-weight: 600;
    color: var(--g-text-heading);
    padding: 4px 14px 8px;
    border-bottom: 1px solid var(--g-gray-100);
}

.jl-skill-dd-item[b-y9vdtsgn9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--g-text-body);
    transition: background 0.12s;
}

.jl-skill-dd-item:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
}

.jl-skill-dd-yrs[b-y9vdtsgn9l] {
    font-size: 11px;
    color: var(--g-text-muted);
    background: var(--g-gray-50);
    padding: 1px 6px;
    border-radius: 4px;
}

.jl-boarded-count[b-y9vdtsgn9l] {
    font-size: var(--g-fs-xxs);
    font-weight: 600;
    color: var(--g-success-text);
}

/* ── Col 5: Closer ── */
.jl-td-closer[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jl-row-checkbox[b-y9vdtsgn9l] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--g-brand, #2563eb);
    cursor: pointer;
    flex-shrink: 0;
}

.jl-countdown-chip[b-y9vdtsgn9l] {
   display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--g-radius-sm);
    font-size: var(--g-fs-xxxs);
    font-weight: 600;
    white-space: nowrap;
}

.jl-countdown-normal[b-y9vdtsgn9l] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
    border: 1px solid var(--g-success-border);
}

.jl-countdown-expired[b-y9vdtsgn9l] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
    border: 1px solid var(--g-error-border);
}
.jl-countdown-urgent[b-y9vdtsgn9l] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
    border: 1px solid var(--g-error-border);
}
/* ── Col 6 & 7: Pipeline Buttons ── */
.jl-td-submissions[b-y9vdtsgn9l],
.jl-td-assigned[b-y9vdtsgn9l] {
    position: relative;
}

.jl-pipeline-btn[b-y9vdtsgn9l] {
      display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-md);
    background: #fff;
    color: var(--g-gray-600);
    font-size: var(--g-fs-xxs);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
    min-width: 56px;
    justify-content: center;
    margin: 0 8px;
}

.jl-pipeline-btn:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
    border-color: var(--g-gray-300);
}

.jl-pipeline-btn svg[b-y9vdtsgn9l] {
     color: var(--bs-dark-border-subtle);
    flex-shrink: 0;
}

.jl-pipeline-count[b-y9vdtsgn9l] {
    font-weight: 600;
    color: var(--g-text-heading);
}

.jl-pipeline-arrow[b-y9vdtsgn9l] {
    color: var(--g-gray-400);
    font-size: 10px;
}

/* ── Submissions Dropdown ── */
.jl-submissions-dropdown[b-y9vdtsgn9l] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    padding: 10px 0;
    min-width: 220px;
    white-space: nowrap;
    animation: jl-fade-in-b-y9vdtsgn9l 0.12s ease;
}

/* ── Assigned Dropdown ── */
.jl-assigned-dropdown[b-y9vdtsgn9l] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    padding: 10px 0;
    min-width: 200px;
    max-height: 195px;
    overflow-y: auto;
    white-space: nowrap;
    animation: jl-fade-in-b-y9vdtsgn9l 0.12s ease;
}

.jl-assigned-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar {
    width: 5px;
}
.jl-assigned-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-track {
    background: transparent;
}
.jl-assigned-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.jl-assigned-dropdown[b-y9vdtsgn9l]::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ── Dropdown shared styles ── */
.jl-dd-header[b-y9vdtsgn9l] {
    font-size: 10px;
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 14px 8px;
    border-bottom: 1px solid var(--g-gray-100);
}

.jl-dd-row[b-y9vdtsgn9l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
}

.jl-dd-row:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
}

.jl-dd-val[b-y9vdtsgn9l] {
    font-weight: 600;
    color: var(--g-text-heading);
}

.jl-assigned-row[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    cursor: pointer;
    transition: background 0.12s;
}

.jl-assigned-row:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
}

.jl-assigned-check[b-y9vdtsgn9l] {
    width: 15px;
    height: 15px;
    accent-color: var(--g-brand, #2563eb);
    cursor: pointer;
}

.jl-assigned-update-btn[b-y9vdtsgn9l] {
    display: block;
    width: calc(100% - 24px);
    margin: 10px 12px 4px;
    padding: 8px 0;
    border: none;
    border-radius: var(--g-radius-md);
    background: var(--g-brand, #2c7cff);
    color: #fff;
    font-size: var(--g-fs-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s;
}

.jl-assigned-update-btn:hover[b-y9vdtsgn9l] {
    background: #1d6ae5;
}

/* ── Col 8: Created By ── */
.jl-td-created[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jl-creator-avatar[b-y9vdtsgn9l] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--g-gray-200);
    flex-shrink: 0;
}


.jl-creator-avatar-default[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-gray-100);
    color: var(--g-gray-400);
}

.jl-creator-letter[b-y9vdtsgn9l] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
}

.jl-pipeline-icon[b-y9vdtsgn9l] {
       display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    /* background: #eff6ff; */
    border: 1px solid #bfdbfe;
    flex-shrink: 0;
}

.jl-pipeline-icon-circle[b-y9vdtsgn9l] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #93c5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.jl-creator-info[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.jl-creator-name[b-y9vdtsgn9l] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--g-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.jl-creator-date[b-y9vdtsgn9l] {
    font-size: 10px;
    color: var(--g-text-muted);
}

/* ── Col 9: Action ── */
.jl-td-action[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jl-action-wrap[b-y9vdtsgn9l] {
    position: relative;
    display: inline-block;
}

.jl-action-dots[b-y9vdtsgn9l] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--g-radius-md);
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted);
    transition: background 0.15s, color 0.15s;
}

.jl-action-dots:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-100);
    color: var(--g-gray-600);
}

.jl-action-dropdown[b-y9vdtsgn9l] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    min-width: 120px;
    padding: 4px;
    animation: jl-fade-in-b-y9vdtsgn9l 0.12s ease;
}

.jl-action-dd-item[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: none;
    background: none;
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--g-radius-sm);
    transition: background 0.12s;
}

.jl-action-dd-item:hover[b-y9vdtsgn9l] {
    background: var(--g-gray-50);
    color: var(--g-text-heading);
}

.jl-action-dd-item svg[b-y9vdtsgn9l] {
    flex-shrink: 0;
    color: var(--g-gray-400);
}

.jl-action-dd-item:hover svg[b-y9vdtsgn9l] {
    color: var(--g-text-heading);
}

/* ── Empty State ── */
.jl-empty-state[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
}

.jl-empty-icon[b-y9vdtsgn9l] {
    color: var(--g-gray-300, #cbd5e1);
    margin-bottom: 4px;
}

.jl-empty-title[b-y9vdtsgn9l] {
    font-size: 15px;
    font-weight: 600;
    color: var(--g-text-heading);
    margin: 0;
}

.jl-empty-subtitle[b-y9vdtsgn9l] {
    font-size: 13px;
    color: var(--g-text-muted);
    margin: 0;
}

/* ── Pagination wrapper ── */
.jl-pagination[b-y9vdtsgn9l] {
    margin-top: 20px;
    border-top: none;
}

.jl-pagination .g-pg-nav[b-y9vdtsgn9l] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: var(--g-fs-xxs);
    font-weight: 500;
    color: var(--g-gray-600);
    border: 1px solid var(--g-gray-200);
}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════ */

/* ── 1440px+ (Large desktop) ── */
@media (min-width: 1441px) {
    .jl-table-header[b-y9vdtsgn9l],
    .jl-row[b-y9vdtsgn9l] {
        grid-template-columns: 48px 2.5fr 1.2fr 1.6fr 1.5fr 1.5fr 1fr 1fr 1.3fr 0.5fr;
    }
}

/* ── Below 1440px ── */
@media (max-width: 1440px) {
    .jl-table-header[b-y9vdtsgn9l],
    .jl-row[b-y9vdtsgn9l] {
        grid-template-columns: 48px 2.5fr 1.2fr 1.5fr 1.5fr 1fr 1fr 1.3fr 0.5fr;
        padding: 14px 18px;
    }

    .jl-td-location[b-y9vdtsgn9l],
    .jl-table-header .jl-th:nth-child(4)[b-y9vdtsgn9l] {
        display: none;
    }
    .jl-td-action[b-y9vdtsgn9l]{
        margin-left: 58px;
    }
    .jl-creator-info[b-y9vdtsgn9l]{
        min-width: 80px;
    }

}

/* ── 1200px ── */
@media (max-width: 1200px) {
    .jl-table-header[b-y9vdtsgn9l],
    .jl-row[b-y9vdtsgn9l] {
        grid-template-columns: 40px 2.4fr 1fr 1.3fr 0.9fr 1.1fr 0.4fr;
        padding: 14px 16px;
    }

    /* Hide Submissions + Closer columns */
    .jl-td-submissions[b-y9vdtsgn9l],
    #jl-th-submissions[b-y9vdtsgn9l],
    .jl-td-closer[b-y9vdtsgn9l],
    #jl-th-closer[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-details-img-wrap[b-y9vdtsgn9l] {
        width: 38px;
        height: 38px;
    }

    .jl-details-img[b-y9vdtsgn9l] {
        width: 38px;
        height: 38px;
    }

    .jl-search-wrap[b-y9vdtsgn9l] {
        width: 25%;
    }
}

/* ── 1024px (Desktop/Laptop) ── */
@media (max-width: 1024px) {
    .jl-table-header[b-y9vdtsgn9l],
    .jl-row[b-y9vdtsgn9l] {
        grid-template-columns: 50px 2.2fr 1.2fr 1.2fr 1.2fr 0.8fr;
        padding: 12px 14px;
        gap: 6px;
    }

    /* Hide Rate column */
    .jl-td-rate[b-y9vdtsgn9l],
    .jl-table-header .jl-th:nth-child(3)[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-search-wrap[b-y9vdtsgn9l] {
        width: 30%;
    }

    .jl-countdown-chip[b-y9vdtsgn9l] {
        padding: 4px 10px;
        font-size: 10px;
    }

    .jl-details-img-wrap[b-y9vdtsgn9l] {
        width: 36px;
        height: 36px;
    }

    .jl-details-img[b-y9vdtsgn9l] {
        width: 36px;
        height: 36px;
    }

    .jl-creator-avatar[b-y9vdtsgn9l] {
        width: 24px;
        height: 24px;
    }

    /* Show tabs as dropdown on tablet */
    .jl-tabs-desktop[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-tabs-mobile[b-y9vdtsgn9l] {
        display: block;
    }
}

/* ── 768px (Tablet) ── */
@media (max-width: 768px) {
    .jl-table-header[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-row-num[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-mobile-label[b-y9vdtsgn9l] {
        display: none;
    }

    /* Card-style row — clean vertical stack with a wrapping chip band */
    .jl-row[b-y9vdtsgn9l] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 14px;
        margin: 0 0 10px;
        background: var(--g-bg-card, #fff);
        border: 1px solid var(--g-gray-100);
        border-radius: 14px;
        position: relative;
        transition: box-shadow 0.15s;
    }

    .jl-row:hover[b-y9vdtsgn9l] {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* Row 1: Job details — own full-width row */
    .jl-td-details[b-y9vdtsgn9l] {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        padding-right: 92px; /* clear space for the absolute rate + action */
    }

    .jl-details-info[b-y9vdtsgn9l] {
        min-width: 0;
    }

    .jl-job-title[b-y9vdtsgn9l] {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 75%;
    }

    .jl-job-sub[b-y9vdtsgn9l] {
        font-size: 11px;
    }

    .jl-meta-row[b-y9vdtsgn9l] {
        font-size: 11px;
    }

    /* Rate shown as a badge top-right area */
    .jl-td-rate[b-y9vdtsgn9l] {
        display: flex !important;
        position: absolute;
        top: 14px;
        right: 40px;
        width: auto;
        align-items: center;
    }

    .jl-rate-amount[b-y9vdtsgn9l] {
        font-size: 12px;
        font-weight: 600;
     }

    /* Action positioned top-right */
    .jl-td-action[b-y9vdtsgn9l] {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    /* Row 2: Location + Closer + Skills as a single wrapping chip band */
    .jl-td-location[b-y9vdtsgn9l] {
        display: inline-flex !important;
        flex: 0 0 auto;
        width: auto;
        align-items: center;
    }

    .jl-loc-text[b-y9vdtsgn9l] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        background: var(--g-gray-50);
        border: 1px solid var(--g-border-light, #e5e7eb);
        border-radius: 20px;
        font-size: 11px;
        color: var(--g-text-label);
    }

    .jl-job-status-badge[b-y9vdtsgn9l] {
        font-size: 10px;
    }

    .jl-td-closer[b-y9vdtsgn9l] {
        display: inline-flex !important;
        flex: 0 0 auto;
        width: auto;
        align-items: center;
    }

    .jl-countdown-chip[b-y9vdtsgn9l] {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* Row 3: Skills only — hide Submissions + Assigned */
    .jl-td-submissions[b-y9vdtsgn9l],
    .jl-td-assigned[b-y9vdtsgn9l] {
        display: none !important;
    }

    .jl-td-skill[b-y9vdtsgn9l] {
        display: inline-flex !important;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        align-items: center;
        gap: 6px;
    }

    .jl-pipeline-btn[b-y9vdtsgn9l] {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Created By — own full-width bottom row with a divider */
    .jl-td-created[b-y9vdtsgn9l] {
        flex: 0 0 100%;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 2px;
        padding-top: 10px;
        border-top: 1px solid var(--g-gray-50);
    }

    .jl-creator-name[b-y9vdtsgn9l] {
        font-size: 11px;
        font-weight: 600;
    }

    .jl-creator-date[b-y9vdtsgn9l] {
        font-size: 10px;
        color: var(--g-text-muted);
    }

    .jl-creator-avatar[b-y9vdtsgn9l] {
        width: 22px;
        height: 22px;
    }

    .jl-creator-avatar img[b-y9vdtsgn9l] {
        width: 22px !important;
        height: 22px !important;
    }

    /* No ::before labels */
    .jl-td-rate[b-y9vdtsgn9l]::before,
    .jl-td-location[b-y9vdtsgn9l]::before,
    .jl-td-skill[b-y9vdtsgn9l]::before,
    .jl-td-closer[b-y9vdtsgn9l]::before,
    .jl-td-submissions[b-y9vdtsgn9l]::before,
    .jl-td-assigned[b-y9vdtsgn9l]::before,
    .jl-td-created[b-y9vdtsgn9l]::before {
        display: none;
    }

    .jl-skill-pill[b-y9vdtsgn9l],
    .g-skill-pill[b-y9vdtsgn9l] {
        max-width: 90px;
    }

    /* Toolbar */
    .jl-toolbar[b-y9vdtsgn9l] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .jl-search-wrap[b-y9vdtsgn9l] {
        width: 100%;
    }

    .jl-tab-mobile-toggle[b-y9vdtsgn9l] {
        margin-bottom: 8px;
    }

    .jl-toolbar-right[b-y9vdtsgn9l] {
        justify-content: space-between;
    }

    /* Mobile tabs dropdown */
    .jl-tabs-desktop[b-y9vdtsgn9l] {
        display: none;
    }

    .jl-tabs-mobile[b-y9vdtsgn9l] {
        display: block;
    }

    .jl-sticky-top[b-y9vdtsgn9l] {
        padding: 16px 16px 8px;
    }
}

/* ── 425px (Mobile) ── */
@media (max-width: 425px) {
    .jl-row[b-y9vdtsgn9l] {
        padding: 12px;
        gap: 7px;
        margin: 0 0 8px;
    }

    .jl-td-details[b-y9vdtsgn9l] {
        width: 100%;
    }

    .jl-td-action[b-y9vdtsgn9l] {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .jl-td-rate[b-y9vdtsgn9l] {
        right: 36px;
        top: 12px;
    }

    .jl-rate-amount[b-y9vdtsgn9l] {
        font-size: 11px;
    }

    .jl-job-title[b-y9vdtsgn9l] {
        font-size: 13px;
        max-width: 65%;
    }

    .jl-job-sub[b-y9vdtsgn9l] {
        font-size: 10px;
    }

    .jl-meta-row[b-y9vdtsgn9l] {
        font-size: 10px;
    }

    .jl-details-meta[b-y9vdtsgn9l] {
        font-size: 10px;
    }

    .jl-loc-text[b-y9vdtsgn9l] {
        font-size: 10px;
        padding: 2px 8px;
    }

    .jl-countdown-chip[b-y9vdtsgn9l] {
        font-size: 9px;
        padding: 2px 6px;
    }

    .jl-tab[b-y9vdtsgn9l] {
        padding: 6px 12px;
        font-size: 12px;
    }

    .jl-sort-btn[b-y9vdtsgn9l] {
        font-size: 12px;
        padding: 7px 10px;
    }

    .jl-sticky-top[b-y9vdtsgn9l] {
        padding: 14px 12px 8px;
    }

    .jl-skill-dropdown[b-y9vdtsgn9l],
    .jl-assigned-dropdown[b-y9vdtsgn9l] {
        min-width: 180px;
        max-width: 240px;
    }

    .jl-action-dropdown[b-y9vdtsgn9l] {
        min-width: 110px;
    }

    .jl-td-created[b-y9vdtsgn9l] {
        padding-top: 6px;
    }

    .jl-creator-avatar[b-y9vdtsgn9l] {
        width: 20px;
        height: 20px;
    }

    .jl-creator-avatar img[b-y9vdtsgn9l] {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ── 375px (Small Mobile) ── */
@media (max-width: 375px) {
    .jl-sticky-top[b-y9vdtsgn9l] {
        top: 56px;
    }

    .jl-details-img-wrap[b-y9vdtsgn9l] {
        width: 36px;
        height: 36px;
    }

    .jl-details-img[b-y9vdtsgn9l] {
        width: 36px;
        height: 36px;
    }

    .jl-td-details[b-y9vdtsgn9l] {
        gap: 10px;
    }

    .jl-job-title[b-y9vdtsgn9l] {
        font-size: 12.5px;
    }

    .jl-rate-amount[b-y9vdtsgn9l] {
        font-size: 13px;
    }

    .jl-countdown-chip[b-y9vdtsgn9l] {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ── 320px (Extra Small) ── */
@media (max-width: 320px) {
    .jl-tab[b-y9vdtsgn9l] {
        padding: 5px 10px;
        font-size: 11px;
    }

    .jl-tab-count[b-y9vdtsgn9l] { 
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .jl-details-info[b-y9vdtsgn9l] {
        gap: 2px;
    }

    .jl-job-sub[b-y9vdtsgn9l] {
        font-size: 10px;
    }
}

/* ── Toast Notification ── */
.jl-toast[b-y9vdtsgn9l] {
    position: fixed;
    right: var(--g-space-20, 20px);
    bottom: 72px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-8, 8px);
    padding: var(--g-space-10, 10px) var(--g-space-16, 16px);
    background: var(--g-text-heading, #1a1a2e);
    color: var(--g-bg-card, #fff);
    border-radius: var(--g-radius-md, 8px);
    box-shadow: var(--g-shadow-lg, 0 4px 12px rgba(0,0,0,.15));
    font-size: var(--g-fs-sm, 13px);
    font-weight: var(--g-fw-medium, 500);
    animation: jlToastIn-b-y9vdtsgn9l 220ms cubic-bezier(.4,0,.2,1);
}

@keyframes jlToastIn-b-y9vdtsgn9l {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

 

/* ── Extend Time Popup ── */
.jl-extend-overlay[b-y9vdtsgn9l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: jlFadeIn-b-y9vdtsgn9l 150ms ease;
}
.jl-extend-popup[b-y9vdtsgn9l] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 420px;
    max-width: 92vw;
    padding: 28px 28px 22px;
    animation: jlSlideUp-b-y9vdtsgn9l 200ms cubic-bezier(.4,0,.2,1);
}
.jl-extend-header[b-y9vdtsgn9l] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
}
.jl-extend-header svg[b-y9vdtsgn9l] {
    flex-shrink: 0;
    margin-top: 2px;
}
.jl-extend-close[b-y9vdtsgn9l] {
    margin-left: auto;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.jl-extend-close:hover[b-y9vdtsgn9l] {
    background: #f0f0f4;
    color: #333;
}
.jl-extend-title[b-y9vdtsgn9l] {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
 }
.jl-extend-subtitle[b-y9vdtsgn9l] {
    font-size: 10.5px;
    color: #888;
    margin: 0;
}
.jl-extend-desc[b-y9vdtsgn9l] {
    font-size: 13.5px;
    color: #555;
    margin: 14px 0 18px;
    line-height: 1.4;
}
.jl-extend-options[b-y9vdtsgn9l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}
.jl-extend-option[b-y9vdtsgn9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border: 1.5px solid #e8e8f0;
    border-radius: 10px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.jl-extend-option:hover[b-y9vdtsgn9l] {
    border-color: #3b82f6;
    background: #eff6ff;
}
.jl-extend-option.selected[b-y9vdtsgn9l] {
    border-color: #3b82f6;
    background: #eff6ff;
}
.jl-extend-option.selected .jl-extend-option-label[b-y9vdtsgn9l] {
    color: #2563eb;
}
.jl-extend-option.selected .jl-extend-option-sub[b-y9vdtsgn9l] {
    color: #3b82f6;
}
.jl-extend-option-label[b-y9vdtsgn9l] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}
.jl-extend-option-sub[b-y9vdtsgn9l] {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}
.jl-extend-footer[b-y9vdtsgn9l] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f4;
}
.jl-extend-cancel[b-y9vdtsgn9l] {
    padding: 9px 20px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.jl-extend-cancel:hover[b-y9vdtsgn9l] {
    background: #f5f5f5;
}
.jl-extend-confirm[b-y9vdtsgn9l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #e67e22, #f39c12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.jl-extend-confirm:hover[b-y9vdtsgn9l] {
    opacity: 0.9;
}
.jl-extend-confirm:disabled[b-y9vdtsgn9l] {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes jlFadeIn-b-y9vdtsgn9l {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes jlSlideUp-b-y9vdtsgn9l {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

#jl-tab-draft[b-y9vdtsgn9l]{
    display: none;
}
/* /Components/Pages/Dashboard/Jobs/JobPreview.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   JobPreview – Scoped Styles
   Prefix: jp_
   ═══════════════════════════════════════════ */

.jp_page[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: var(--g-font-sans);
 }

/* ── Header Bar ── */
.jp_header_bar[b-gyy2jsnxxv] {
    position: sticky;
    top: 52px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: #fff;
    border-bottom: 1px solid var(--g-border-light, #e5e7eb);
    min-height: 56px;
}

.jp_header_left[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.jp_back_btn[b-gyy2jsnxxv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-border);
    background: #fff;
    color: var(--g-gray-600);
    cursor: pointer;
    flex-shrink: 0;
}

.jp_back_btn:hover[b-gyy2jsnxxv] {
    background: var(--g-gray-50);
}

.jp_avatar_circle[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-md);
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.jp_avatar_img[b-gyy2jsnxxv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    background: #fff;
}

.jp_avatar_img_lg[b-gyy2jsnxxv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jp_avatar_fallback[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 700;
}

.jp_avatar_blue[b-gyy2jsnxxv] {
    background: #1e40af;
    color: #fff;
}

.jp_header_bar .jp_avatar_circle[b-gyy2jsnxxv] {
    width: 36px;
    height: 36px;
    font-size: var(--g-fs-xs);
    border-radius: var(--g-radius-md);
    color:#fff;
}

.jp_header_meta[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jp_header_title[b-gyy2jsnxxv] {
     font-size: var(--g-fs-body);
    font-weight: 700;
    color: var(--g-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* max-width: 360px; */
}

.jp_header_subtitle[b-gyy2jsnxxv] {
     font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.jp_header_actions[b-gyy2jsnxxv] {
    flex-shrink: 0;
}

.jp_preview_badge[b-gyy2jsnxxv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: 1.5px solid #e5a00d;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xxs);
    font-weight: 700;
    color: #b7820a;
    letter-spacing: 0.06em;
    background: #fffdf5;
}

/* ── Banner ── */
.jp_banner[b-gyy2jsnxxv] {
    position: relative;
    margin: 0;
}

.jp_banner_bg[b-gyy2jsnxxv] {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #4a90d9 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 32px;
}

.jp_banner_overlay[b-gyy2jsnxxv] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.jp_banner_info[b-gyy2jsnxxv] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    font-size: var(--g-fs-xxs);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
}

.jp_banner_info b[b-gyy2jsnxxv] {
    color: #fff;
}

.jp_status_badge[b-gyy2jsnxxv] {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 1;
    padding: 4px 14px;
    border-radius: var(--g-radius-full);
    background: #059669;
    color: #fff;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    display: flex;
    align-items: center;
    gap: 5px;
}

.jp_status_badge[b-gyy2jsnxxv]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

.jp_banner_tagline[b-gyy2jsnxxv] {
    position: relative;
    z-index: 1;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-style: italic;
    margin-top: 8px;
    text-align: right;
}

.jp_banner_avatar[b-gyy2jsnxxv] {
    position: absolute;
    left: 20px;
    bottom: -28px;
    z-index: 2;
}

.jp_avatar_lg[b-gyy2jsnxxv] {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: var(--g-radius-md);
}

.jp_avatar_company[b-gyy2jsnxxv] {
    width: 44px;
    height: 44px;
    font-size: var(--g-fs-body);
    border-radius: 50%;
    border: 1px solid var(--g-border-light);
}

/* ── Title Section ── */
.jp_title_section[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 25px 4px;
}

.jp_title_left[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.jp_job_title[b-gyy2jsnxxv] {
    font-size: var(--g-fs-hero-title);
    font-weight: 700;
    color: var(--g-gray-900);
    margin: 0;
}

.jp_priority_high[b-gyy2jsnxxv] { background: var(--g-error-bg); color: var(--g-error-text); font-size: var(--g-fs-xxs); padding: 2px 10px; border-radius: var(--g-radius-full); font-weight: 700; }
.jp_priority_med[b-gyy2jsnxxv], .jp_priority_medium[b-gyy2jsnxxv] { background: #fff3e0; color: #e65100; font-size: var(--g-fs-xxs); padding: 2px 10px; border-radius: var(--g-radius-full); font-weight: 700; }
.jp_priority_low[b-gyy2jsnxxv] { background: #f5f5f5; color: #424242; font-size: var(--g-fs-xxs); padding: 2px 10px; border-radius: var(--g-radius-full); font-weight: 700; }

.jp_company_meta[b-gyy2jsnxxv] {
    padding: 4px 25px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--g-gray-500);
}

/* ── Body Grid ── */
.jp_body[b-gyy2jsnxxv] {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: var(--g-space-24); 
}

/* ── Left Column ── */
.jp_left[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-20);
    min-width: 0;
    position: sticky;
    top: 130px;
    align-self: start;
}

.jp_left > :last-child[b-gyy2jsnxxv] { flex: 1; }

.jp_card_pad[b-gyy2jsnxxv] { padding: var(--g-space-24); }

.jp_card_header_row[b-gyy2jsnxxv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.jp_muted_sm[b-gyy2jsnxxv] { font-size: var(--g-fs-sm); color: var(--g-text-muted); }

.jp_about_text[b-gyy2jsnxxv] {
    font-size: var(--g-fs-body);
    line-height: var(--g-lh-relaxed);
    color: var(--g-text-body);
}

.jp_about_text p[b-gyy2jsnxxv] { margin: 0 0 16px; }

.jp_about_clamped[b-gyy2jsnxxv] {
    max-height: 220px;
    overflow: hidden;
    position: relative;
}

.jp_about_clamped[b-gyy2jsnxxv]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--g-bg-card));
}

.jp_link_btn[b-gyy2jsnxxv] {
    background: none;
    border: none;
    color: #0a66c2;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    cursor: pointer;
    padding: 8px 0 0;
}

.jp_link_btn:hover[b-gyy2jsnxxv] { text-decoration: underline; }

/* Skills */
.jp_skills_list[b-gyy2jsnxxv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-8);
}

.jp_skill_pill[b-gyy2jsnxxv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xs);
    color: var(--g-text-body);
    background: var(--g-bg-card);
}

.jp_skill_yrs[b-gyy2jsnxxv] {
    background: var(--g-gray-100);
    color: var(--g-text-secondary);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
}

/* Boolean */
.jp_boolean_box[b-gyy2jsnxxv] {
    background: var(--g-bg-section);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    padding: 14px 16px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: var(--g-lh-relaxed);
    font-family: var(--g-font-mono);
}

.jp_copy_btn[b-gyy2jsnxxv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--g-gray-500);
    font-size: var(--g-fs-xs);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--g-radius-sm);
}

.jp_copy_btn:hover[b-gyy2jsnxxv] {
    background: var(--g-gray-100);
    color: var(--g-gray-700);
}

.jp_boolean_divider[b-gyy2jsnxxv] {
    height: 1px;
    background: var(--g-border-light);
    margin: 20px 0;
}

.jp_manager_name[b-gyy2jsnxxv] {
    font-weight: 400;
    color: var(--g-gray-500);
    font-size: var(--g-fs-sm);
}

/* Internal Notes */
.jp_internal_note[b-gyy2jsnxxv] {
    background: var(--g-warning-bg);
    border-radius: 0 var(--g-radius-md) var(--g-radius-md) 0;
    padding: 14px 16px;
    font-size: var(--g-fs-body);
    color: #713f12;
    line-height: var(--g-lh-relaxed);
}

/* Company */
.jp_company_profile[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    margin-bottom: var(--g-space-16);
}

.jp_company_profile_info[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
}

.jp_company_name[b-gyy2jsnxxv] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.jp_company_followers[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.jp_company_desc[b-gyy2jsnxxv] {
    font-size: var(--g-fs-body);
    color: var(--g-text-body);
    line-height: var(--g-lh-relaxed);
    margin: 0 0 12px;
}

/* ── Right Sidebar ── */
.jp_right[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    position: sticky;
    top: 130px;
    align-self: start;
}

.jp_right > :last-child[b-gyy2jsnxxv] { flex: 1; }

.jp_sidebar_single[b-gyy2jsnxxv] {
    display: flex;
    flex-direction: column;
}

.jp_rate_amount[b-gyy2jsnxxv] {
    font-size: 32px;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
}

.jp_rate_sublabel[b-gyy2jsnxxv] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
    margin-bottom: 16px;
}

.jp_sidebar_divider[b-gyy2jsnxxv] {
    height: 1px;
    background: var(--g-border-light);
    margin: var(--g-space-20) 0;
}

.jp_sidebar_row[b-gyy2jsnxxv] {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-12);
    padding: var(--g-space-10) 0;
}

.jp_icon_badge[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--g-gray-500);
    flex-shrink: 0;
}

.jp_sidebar_row b[b-gyy2jsnxxv] {
    display: block;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.jp_sidebar_sublabel[b-gyy2jsnxxv] {
    display: block;
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

/* Countdown */
.jp_countdown_label[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    letter-spacing: 0.5px;
    margin-bottom: var(--g-space-12);
}

.jp_countdown_boxes[b-gyy2jsnxxv] {
    line-height: 1.2;
    display: flex;
    gap: var(--g-space-8);
    margin-bottom: var(--g-space-10);
}

.jp_countdown_box[b-gyy2jsnxxv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    background: #f8fafc;
    border: 1px solid #e6e6e6;
    border-radius: var(--g-radius-md);
    text-align: center;
}

.jp_countdown_num.jp_text_red[b-gyy2jsnxxv] { color: #dc2626; font-weight: var(--g-fw-semibold); }
.jp_countdown_box.jp_box_red[b-gyy2jsnxxv] { background: #fef2f2; border: 1px solid #fca5a5; }


.jp_countdown_num[b-gyy2jsnxxv] {
    display: block;
    font-size: 20px;
    font-weight: var(--g-fw-bold);
    color: #0369a1;
}

.jp_countdown_unit[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    letter-spacing: 0.5px;
}

.jp_countdown_closes[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    text-align: center;
}

/* AI Threshold */
.jp_ai_label[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-label);
    letter-spacing: 0.5px;
    margin-bottom: var(--g-space-12);
}

.jp_ai_boxes[b-gyy2jsnxxv] {
    display: flex;
    gap: var(--g-space-8);
}

.jp_ai_box[b-gyy2jsnxxv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: var(--g-radius-md);
    text-align: center;
}

.jp_ai_reject[b-gyy2jsnxxv] {
    background: var(--g-error-bg);
    border: 1px solid var(--g-error-border);
}

.jp_ai_approve[b-gyy2jsnxxv] {
    background: var(--g-success-bg);
    border: 1px solid var(--g-success-border);
}

.jp_ai_pct[b-gyy2jsnxxv] {
    display: block;
    font-size: 22px;
    font-weight: var(--g-fw-bold);
}

.jp_ai_reject .jp_ai_pct[b-gyy2jsnxxv] { color: var(--g-error-text); }
.jp_ai_approve .jp_ai_pct[b-gyy2jsnxxv] { color: #10b981; }

.jp_ai_sub[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-secondary);
}

.jp_ai_reject .jp_ai_sub[b-gyy2jsnxxv] { color: var(--g-error-text); }
.jp_ai_approve .jp_ai_sub[b-gyy2jsnxxv] { color: #10b981; }

/* Team */
.jp_sidebar_last[b-gyy2jsnxxv] { flex: 1; }

.jp_team_header[b-gyy2jsnxxv] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}

.jp_team_sub_label[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    letter-spacing: 0.5px;
}

.jp_team_row[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--g-border-light);
}

.jp_team_row:last-child[b-gyy2jsnxxv] { border-bottom: none; }

.jp_team_avatar[b-gyy2jsnxxv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--g-gray-200);
}

.jp_team_avatar_default[b-gyy2jsnxxv] {
    width: 36px;
    height: 36px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
}

.jp_team_info[b-gyy2jsnxxv] {
    flex: 1;
    min-width: 0;
}

.jp_team_name[b-gyy2jsnxxv] {
    display: block;
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
}

.jp_team_role[b-gyy2jsnxxv] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
}

.jp_team_subs_badge[b-gyy2jsnxxv] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-brand, #2c7cff);
    background: #eef4ff;
    border-radius: 10px;
    padding: 2px 12px;
    min-width: 28px;
    text-align: center;
}

/* ── Bottom Bar ── */
.jp_bottom_bar[b-gyy2jsnxxv] {
    position: fixed;
    bottom: 0;
    left: 255px;
    right: 35px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: #fff;
    border-top: 1px solid var(--g-border-light);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.jp_verify_label[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm);
    color: var(--g-gray-600);
    cursor: pointer;
}

.jp_verify_checkbox[b-gyy2jsnxxv] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.jp_bottom_actions[b-gyy2jsnxxv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Toast ── */
.jp_toast[b-gyy2jsnxxv] {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
    font-size: var(--g-fs-sm);
    z-index: 100;
    animation: jp_fadein-b-gyy2jsnxxv 0.2s ease;
}

@keyframes jp_fadein-b-gyy2jsnxxv {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Focus styles for keyboard accessibility */
.jp_back_btn:focus-visible[b-gyy2jsnxxv],
.jp_link_btn:focus-visible[b-gyy2jsnxxv],
.jp_copy_btn:focus-visible[b-gyy2jsnxxv],
.jp_bottom_btn:focus-visible[b-gyy2jsnxxv],
.jp_bottom_btn_primary:focus-visible[b-gyy2jsnxxv] {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
}

/* ═══════ RESPONSIVE ═══════ */

@media (max-width: 1440px) {
    .jp_body[b-gyy2jsnxxv] { grid-template-columns: 1fr 330px; }
}

/* Tablet */
@media (max-width: 1024px) {
    .jp_body[b-gyy2jsnxxv] {
        grid-template-columns: 1fr 330px;
    }

    .jp_bottom_bar[b-gyy2jsnxxv] {
        left: 80px;
    }

    .jp_banner_tagline[b-gyy2jsnxxv] {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .jp_header_bar[b-gyy2jsnxxv] {
        padding: 10px 16px;
    }

    .jp_header_subtitle[b-gyy2jsnxxv] {
        display: none;
    }

    .jp_preview_badge[b-gyy2jsnxxv] {
        padding: 4px 10px;
        font-size: 10px;
    }

    .jp_banner_bg[b-gyy2jsnxxv] {
        height: 120px;
        padding: 16px;
    }

    .jp_banner_info[b-gyy2jsnxxv] {
        gap: 10px;
        font-size: 10px;
        flex-wrap: wrap;
    }

    .jp_banner_tagline[b-gyy2jsnxxv] {
        font-size: 14px;
    }

    .jp_banner_avatar[b-gyy2jsnxxv] {
        left: 14px;
        bottom: -22px;
    }

    .jp_avatar_lg[b-gyy2jsnxxv] {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .jp_title_section[b-gyy2jsnxxv] {
        padding: 36px 13px 4px;
    }

    .jp_job_title[b-gyy2jsnxxv] {
        font-size: 17px;
    }

    .jp_company_meta[b-gyy2jsnxxv] {
        padding: 0 13px 16px;
        font-size: var(--g-fs-xs);
    }

    .jp_body[b-gyy2jsnxxv] {
        grid-template-columns: 1fr;
          gap: 16px;
    }

    .jp_card_pad[b-gyy2jsnxxv] {
        padding: 16px;
    }

    .jp_rate_amount[b-gyy2jsnxxv] {
        font-size: 22px;
    }

    .jp_countdown_num[b-gyy2jsnxxv] {
        font-size: 16px;
    }

    .jp_bottom_bar[b-gyy2jsnxxv] {
        left: 20px;
        right: 20px;
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        align-items: stretch;
    }

    .jp_verify_label[b-gyy2jsnxxv] {
        font-size: var(--g-fs-xs);
    }

    .jp_bottom_actions[b-gyy2jsnxxv] {
        justify-content: flex-end;
    }
 
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .jp_header_bar[b-gyy2jsnxxv] {
        padding: 8px 12px;
    }

    .jp_header_title[b-gyy2jsnxxv] {
        font-size: 12px;
    }

    .jp_preview_badge[b-gyy2jsnxxv] {
        display: none;
    }

    .jp_banner_bg[b-gyy2jsnxxv] {
        height: 100px;
        padding: 12px;
    }

    .jp_banner_info[b-gyy2jsnxxv] {
        font-size: 9px;
        gap: 8px;
    }

    .jp_banner_tagline[b-gyy2jsnxxv] {
        display: none;
    }

    .jp_status_badge[b-gyy2jsnxxv] {
        font-size: 10px;
        padding: 3px 10px;
    }

    .jp_avatar_lg[b-gyy2jsnxxv] {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .jp_title_section[b-gyy2jsnxxv] {
        padding: 28px 12px 4px;
    }

    .jp_job_title[b-gyy2jsnxxv] {
        font-size: 15px;
    }

    .jp_company_meta[b-gyy2jsnxxv] {
        padding: 0 12px 12px;
        font-size: 11px;
    }

    .jp_body[b-gyy2jsnxxv] {
        padding: 0 12px;
        gap: 12px;
    }

    .jp_card_pad[b-gyy2jsnxxv] {
        padding: 14px;
    }

    .jp_rate_amount[b-gyy2jsnxxv] {
        font-size: 18px;
    }

    .jp_countdown_num[b-gyy2jsnxxv] {
        font-size: 14px;
    }

    .jp_bottom_bar[b-gyy2jsnxxv] {
        padding: 10px 12px;
    }

    .jp_bottom_actions .g-btn-primary[b-gyy2jsnxxv] {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ── Checkbox Error ── */
.jp_checkbox_error[b-gyy2jsnxxv] {
    max-width: 900px;
    margin: 0 auto 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--g-radius-md, 8px);
    text-align: center;
}

/* ── Success Popup ── */
.jp_popup_overlay[b-gyy2jsnxxv] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    animation: jp_overlay_in-b-gyy2jsnxxv 0.2s ease;
}

@keyframes jp_overlay_in-b-gyy2jsnxxv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.jp_popup_card[b-gyy2jsnxxv] {
    background: #fff;
    border-radius: 18px;
    padding: 40px 48px 36px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    min-width: 410px;
    max-width: 410px;
    animation: jp_pop_in-b-gyy2jsnxxv 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jp_popup_icon[b-gyy2jsnxxv] {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
}

.jp_popup_title[b-gyy2jsnxxv] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.jp_popup_subtitle[b-gyy2jsnxxv] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 28px;
    line-height: 1.5;
}

.jp_popup_actions[b-gyy2jsnxxv] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.jp_popup_btn_outline[b-gyy2jsnxxv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 20px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: var(--g-btn-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.jp_popup_btn_outline:hover[b-gyy2jsnxxv] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.jp_popup_btn_primary[b-gyy2jsnxxv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: var(--g-brand, #2c7cff);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.jp_popup_btn_primary:hover[b-gyy2jsnxxv] {
    background: #1b6ae8;
}

@keyframes jp_pop_in-b-gyy2jsnxxv {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Button loading spinner ── */
.jp-btn-spinner[b-gyy2jsnxxv] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jp-spin-b-gyy2jsnxxv 0.6s linear infinite;
}

@keyframes jp-spin-b-gyy2jsnxxv {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Dashboard/JobView/JobView.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   JobView Page – Scoped Styles
   Uses --g-* design tokens from variables.css
   ═══════════════════════════════════════════════════════ */

.jv-page[b-24be7q1zfz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #ffffff;
    font-family: var(--g-font-sans);
}

.jv-card-pad[b-24be7q1zfz] { padding: var(--g-space-24); }

/* ===== HEADER BAR ===== */
.jv-header-bar[b-24be7q1zfz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--g-space-12) var(--g-space-24);
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-border);
    position: sticky;
    top: 51px;
    z-index: 60;
}

.jv-header-left[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-12); }

.jv-back-btn[b-24be7q1zfz] { border: 1px solid var(--g-border); border-radius: var(--g-radius-md); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }

.jv-avatar-circle[b-24be7q1zfz] {
    width: 40px; height: 40px; border-radius: var(--g-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--g-fw-bold); font-size: var(--g-fs-body); color: #fff; flex-shrink: 0;
}

.jv-avatar-img[b-24be7q1zfz] {
    width: 40px; height: 40px; border-radius: var(--g-radius-md);
    object-fit: cover; flex-shrink: 0;
     background: #fff;
}

.jv-avatar-img.jv-avatar-lg[b-24be7q1zfz] {
    width: 75px; height: 75px; border-radius: var(--g-radius-md);
    border: 3px solid #fff; box-shadow: var(--g-shadow-md);
    object-fit: cover; flex-shrink: 0;
 }

.jv-avatar-img.jv-avatar-company[b-24be7q1zfz] {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover;
     background: #fff;
}

.jv-avatar-blue[b-24be7q1zfz] { background: #1e40af; }

.jv-avatar-lg[b-24be7q1zfz] {
    width: 64px; height: 64px; font-size: 20px;
    border: 3px solid #fff; box-shadow: var(--g-shadow-md);
    border-radius: var(--g-radius-md);
}

.jv-header-meta[b-24be7q1zfz] { display: flex; flex-direction: column; min-width: 0; }
.jv-header-title[b-24be7q1zfz] { font-size: var(--g-fs-body); font-weight: 700; color: var(--g-text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.jv-header-subtitle[b-24be7q1zfz] { font-size: var(--g-fs-sm); color: var(--g-text-secondary); overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.jv-header-actions[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-8); }

/* Outline button — page-level */
.jv-btn-outline[b-24be7q1zfz] {
    padding: 4px 16px; border-radius: var(--g-radius-md);
    border: 1px solid var(--g-border); background: var(--g-bg-card);
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium);
    color: var(--g-text-body); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background var(--g-transition);
}

.jv-btn-outline:hover[b-24be7q1zfz] { background: var(--g-gray-100); }

/* Share icon button */
.jv-share-btn[b-24be7q1zfz] {
    width: 34px; height: 34px; border-radius: var(--g-radius-md);
    border: 1px solid var(--g-border); background: var(--g-bg-card);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--g-text-secondary); cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
}
.jv-share-btn:hover[b-24be7q1zfz] { background: var(--g-gray-100); color: var(--g-text-heading); }

/* Submit Candidate — brand blue matching FSD #0a66c2 */
.jv-btn-submit-candidate[b-24be7q1zfz] {
    padding: 8px 20px; border-radius: var(--g-radius-md); border: none;
    background: var(--g-link-blue); color: #fff;
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--g-transition);
}

.jv-btn-submit-candidate:hover[b-24be7q1zfz] { background: #084d94; }

/* Add Candidate — near-black #1a1a1a per FSD */
.jv-btn-add-candidate[b-24be7q1zfz] {
    padding: 8px 20px; border-radius: var(--g-radius-md); border: none;
    background: #1a1a1a; color: #fff;
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--g-transition);
}

.jv-btn-add-candidate:hover[b-24be7q1zfz] { background: #000; }

/* Danger button for modal */
.jv-btn-danger[b-24be7q1zfz] {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 5px 22px; border: none; border-radius: var(--g-radius-md);
    background: #ef4444; color: #fff; font-size: 0.7125rem; font-weight: 600;
    cursor: pointer; transition: background var(--g-transition);
}

.jv-btn-danger:hover[b-24be7q1zfz] { background: #dc2626; }

/* ===== BANNER ===== */
.jv-banner[b-24be7q1zfz] { position: relative; }

.jv-banner-bg[b-24be7q1zfz] {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    height: 220px; position: relative;
    overflow: hidden; padding: 16px 24px;
    display: flex; flex-direction: column; justify-content: space-between;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.jv-banner-overlay[b-24be7q1zfz] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%); }

.jv-banner-info[b-24be7q1zfz] {
    display: flex; gap: 24px; font-size: var(--g-fs-xxs);
    color: rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .5px;
    position: relative; z-index: 1;
}

.jv-banner-info b[b-24be7q1zfz] { color: #fff; }

.jv-status-badge[b-24be7q1zfz] {
    position: absolute; top: 16px; right: 24px; z-index: 1;
    color: #fff; padding: 4px 14px;
    border-radius: var(--g-radius-full); font-size: var(--g-fs-xs); font-weight: var(--g-fw-semibold);
    display: flex; align-items: center; gap: 5px;
}

.jv-status-badge[b-24be7q1zfz]::before { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; }

.jv-status-open[b-24be7q1zfz] { background: #059669; }
.jv-status-onhold[b-24be7q1zfz] { background: #ea580c; }
.jv-status-closed[b-24be7q1zfz] { background: #dc2626; }

.jv-banner-tagline[b-24be7q1zfz] {
    font-size: var(--g-fs-kpi); color: rgba(255,255,255,.8); font-weight: var(--g-fw-medium);
    position: relative; z-index: 1; text-align: right; line-height: var(--g-lh-tight);
}

.jv-banner-avatar[b-24be7q1zfz] { position: absolute; bottom: -32px; left: 20px; z-index: 2; }

/* ===== TITLE SECTION ===== */
.jv-title-section[b-24be7q1zfz] { display: flex; align-items: center; justify-content: space-between; padding: var(--g-space-48) var(--g-space-24) 0; }
.jv-title-left[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-12); }
.jv-job-title[b-24be7q1zfz] { font-size: var(--g-fs-hero-title); font-weight: var(--g-fw-bold); color: var(--g-text-heading); margin: 0; }
.jv-priority-high[b-24be7q1zfz] { background: var(--g-error-bg); color: var(--g-error-text); border: 1px solid var(--g-error-border); }
.jv-priority-medium[b-24be7q1zfz] { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.jv-priority-low[b-24be7q1zfz] { background: #f5f5f5; color: #424242; border: 1px solid #bdbdbd; }
.jv-title-actions[b-24be7q1zfz] { display: flex; gap: var(--g-space-8); }
.jv-company-meta[b-24be7q1zfz] { padding: 4px var(--g-space-24) var(--g-space-20); color: var(--g-text-secondary);font-weight: 500;font-size: 13px; }
.jv-location-meta[b-24be7q1zfz] { margin-left: 12px; color: var(--g-text-secondary); }

/* ===== BODY GRID (matches JobCreation 1fr 440px) ===== */
.jv-body[b-24be7q1zfz] {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: var(--g-space-24);
    padding: 0 var(--g-space-24);
    align-items: start;
}

.jv-left[b-24be7q1zfz] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-20);
    min-width: 0;
    position: sticky;
    top: 130px;
    align-self: start;
}
.jv-left > :last-child[b-24be7q1zfz] { flex: 1; }

.jv-right[b-24be7q1zfz] {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    position: sticky;
    top: 130px;
    align-self: start;
}

.jv-sidebar-last[b-24be7q1zfz] { flex: 1; display: flex; flex-direction: column; }

/* Full-width candidate list below the grid */
.jv-fullwidth-section[b-24be7q1zfz] { padding: var(--g-space-24) var(--g-space-24) var(--g-space-40); }

/* ===== ABOUT ===== */
.jv-about-text[b-24be7q1zfz] { font-size: var(--g-fs-body); color: var(--g-text-body); line-height: var(--g-lh-relaxed); }
.jv-about-text p[b-24be7q1zfz] { margin: 0 0 16px; }
.jv-about-clamped[b-24be7q1zfz] { max-height: 220px; overflow: hidden; position: relative; }
.jv-about-clamped[b-24be7q1zfz]::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(transparent, var(--g-bg-card));
}
.jv-responsibilities-title[b-24be7q1zfz] { font-size: var(--g-fs-body); font-weight: var(--g-fw-bold); color: var(--g-text-heading); margin: 0 0 8px; }
.jv-responsibilities-list[b-24be7q1zfz] { padding-left: 20px; margin: 0; }
.jv-responsibilities-list li[b-24be7q1zfz] { font-size: var(--g-fs-body); color: var(--g-text-body); line-height: 1.8; }
.jv-link-btn[b-24be7q1zfz] { background: none; border: none; color: var(--g-link-blue); font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium); cursor: pointer; padding: 8px 0 0; }
.jv-link-btn:hover[b-24be7q1zfz] { text-decoration: underline; }

/* ===== CARD HEADER ROW ===== */
.jv-card-header-row[b-24be7q1zfz] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--g-space-12); }
.jv-muted-sm[b-24be7q1zfz] { font-size: var(--g-fs-sm); color: var(--g-text-muted); }

/* ===== SKILLS ===== */
.jv-skills-list[b-24be7q1zfz] { display: flex; flex-wrap: wrap; gap: var(--g-space-8); margin-bottom: var(--g-space-8); }

.jv-skill-pill[b-24be7q1zfz] {
    padding: 6px 14px; border-radius: var(--g-radius-full);
    border: 1px solid var(--g-gray-200); font-size: var(--g-fs-xs);
    color: var(--g-text-body); background: var(--g-bg-card);
    display: inline-flex; align-items: center; gap: 6px;
}

.jv-skill-num[b-24be7q1zfz] {
    background: var(--g-gray-100); color: var(--g-text-secondary);
    border-radius: 10px; padding: 2px 8px; font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold);
}

/* ===== BOOLEAN ===== */
.jv-boolean-box[b-24be7q1zfz] {
    background: var(--g-bg-section); border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    padding: 14px 16px; font-size: var(--g-fs-sm); color: var(--g-text-body);
    line-height: var(--g-lh-relaxed); font-family: var(--g-font-mono);
    word-break: break-word;
}

.jv-copy-btn[b-24be7q1zfz] {
    display: flex; align-items: center; gap: 4px; padding: 6px 12px;
    border-radius: var(--g-radius-sm); border:none;
    background: var(--g-bg-card); font-size: var(--g-fs-xs); color: var(--g-text-label); cursor: pointer;
}

.jv-copy-btn:hover[b-24be7q1zfz] { background: var(--g-gray-100); }
.jv-manager-name[b-24be7q1zfz] { font-weight: var(--g-fw-normal); color: var(--g-text-muted); font-size: var(--g-fs-body)}
.jv-internal-desc[b-24be7q1zfz] { font-weight: var(--g-fw-normal); color: var(--g-text-muted); font-size: var(--g-fs-body);display: flex;justify-content: end; }

.jv-countdown-num.jv-text-red[b-24be7q1zfz] { color: #dc2626; font-weight: var(--g-fw-semibold); }

.jv-boolean-divider[b-24be7q1zfz] { height: 1px; background: var(--g-border-light); margin: var(--g-space-20) 0; }

/* ===== INTERNAL NOTES ===== */
.jv-internal-note[b-24be7q1zfz] {
    background: var(--g-warning-bg);
    border-radius: 0 var(--g-radius-md) var(--g-radius-md) 0;
    padding: 14px 16px; font-size: var(--g-fs-body); color: #713f12; line-height: var(--g-lh-relaxed);
}

/* ===== ABOUT COMPANY ===== */
.jv-company-profile[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-12); margin-bottom: var(--g-space-16); }
.jv-avatar-company[b-24be7q1zfz] { width: 48px; height: 48px; font-size: 18px; border-radius: 50%; }
.jv-company-profile-info[b-24be7q1zfz] { display: flex; flex-direction: column; }
.jv-company-name[b-24be7q1zfz] { font-size: var(--g-fs-body); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }
.jv-company-followers[b-24be7q1zfz] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.jv-company-desc[b-24be7q1zfz] { font-size: var(--g-fs-body); color: var(--g-text-body); line-height: var(--g-lh-relaxed); margin: 0 0 12px; }


/* ===== MODAL ===== */
.jv-modal-icon-wrap[b-24be7q1zfz] {
    width: 48px; height: 48px; border-radius: var(--g-radius-md);
    background: var(--g-error-bg); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
}

/* ===== TOAST ===== */
.jv-toast[b-24be7q1zfz] {
    position: fixed; bottom: 24px; right: 24px; z-index: 200;
    background: var(--g-gray-900); color: #fff;
    padding: 12px 20px; border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-lg); display: flex; align-items: center; gap: 8px;
    font-size: var(--g-fs-sm); animation: g-fadeIn .15s ease;
}

/* ===== SIDEBAR (now .jv-right via grid) ===== */

.jv-sidebar-single[b-24be7q1zfz] { display: flex; flex-direction: column; }
.jv-sidebar-section-divider[b-24be7q1zfz] { height: 1px; background: var(--g-border-light); margin: var(--g-space-20) 0; }

/* Job Details Grid */
.jv-details-grid[b-24be7q1zfz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.jv-detail-item[b-24be7q1zfz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jv-detail-label[b-24be7q1zfz] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.jv-detail-value[b-24be7q1zfz] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-medium);
    color: var(--g-text-heading);
}

.jv-rate-amount[b-24be7q1zfz] { font-size: var(--g-fs-salary); font-weight: var(--g-fw-bold); color: var(--g-text-heading); }
.jv-rate-sublabel[b-24be7q1zfz] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.jv-sidebar-divider[b-24be7q1zfz] { height: 1px; background: var(--g-border-light); margin: 5px; }

.jv-sidebar-row[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-12); padding: var(--g-space-10) 0; }
.jv-sidebar-row b[b-24be7q1zfz] { font-size: var(--g-fs-body); color: var(--g-text-heading); display: block; }
.jv-sidebar-sublabel[b-24be7q1zfz] { font-size: var(--g-fs-xs); color: var(--g-text-muted); display: block; }
.jv-sidebar-icon[b-24be7q1zfz] {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--g-radius-md);
    background: var(--g-bg-section); color: var(--g-text-secondary);
    flex-shrink: 0;
}

/* Countdown */
.jv-countdown-label[b-24be7q1zfz] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); color: var(--g-text-label); letter-spacing: .5px; margin-bottom: var(--g-space-12); }

.jv-countdown-boxes[b-24be7q1zfz] { display: flex; gap: var(--g-space-8); margin-bottom: var(--g-space-10);line-height: 1.1; }
.jv-countdown-box.jv-box-red[b-24be7q1zfz] { background: #fef2f2; border: 1px solid #fca5a5; }

.jv-countdown-box[b-24be7q1zfz] {
    flex: 1; background: #f8fafc; border: 1px solid #e6e6e6;
    border-radius: var(--g-radius-md); padding: 10px 0; text-align: center;
}

.jv-countdown-num[b-24be7q1zfz] { display: block; font-size: var(--g-fs-kpi); font-weight: var(--g-fw-bold); color: #0369a1; }
.jv-countdown-unit[b-24be7q1zfz] { font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold); color: var(--g-text-secondary); letter-spacing: .5px; }
.jv-countdown-closes[b-24be7q1zfz] { font-size: var(--g-fs-xs); color: var(--g-text-muted); text-align: center; }
.jv-countdown-expired[b-24be7q1zfz] { font-size: var(--g-fs-kpi); font-weight: 800; color: #dc2626; text-align: center; padding: 6px 0; letter-spacing: 0.02em; }

/* AI Match */
.jv-ai-label[b-24be7q1zfz] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-bold); color: var(--g-text-label); letter-spacing: .5px; margin-bottom: var(--g-space-12); display: flex; align-items: center; gap: 6px; }
.jv-ai-boxes[b-24be7q1zfz] { display: flex; gap: var(--g-space-8);line-height: 1.2; }
.jv-ai-box[b-24be7q1zfz] { flex: 1; border-radius: var(--g-radius-md); padding: 12px; text-align: center; }
.jv-ai-reject[b-24be7q1zfz] { background: var(--g-error-bg); border: 1px solid var(--g-error-border); }
.jv-ai-approve[b-24be7q1zfz] { background: var(--g-success-bg); border: 1px solid var(--g-success-border); }
.jv-ai-pct[b-24be7q1zfz] { display: block; font-size: var(--g-fs-kpi); font-weight: var(--g-fw-bold); }
.jv-ai-reject .jv-ai-pct[b-24be7q1zfz] { color: var(--g-error-text); }
.jv-ai-approve .jv-ai-pct[b-24be7q1zfz] { color: #10b981; }
.jv-ai-sub[b-24be7q1zfz] { font-size: var(--g-fs-xxs); color: var(--g-text-secondary); }

/* Team */
.jv-team-header[b-24be7q1zfz] { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--g-fs-body); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); margin-bottom: 14px; }
.jv-team-sub-label[b-24be7q1zfz] { font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold); color: var(--g-text-muted); letter-spacing: .5px; }

.jv-team-row[b-24be7q1zfz] { display: flex; align-items: center; gap: var(--g-space-10); padding: 8px 0; }
.jv-team-avatar-wrap[b-24be7q1zfz] { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; position: relative; overflow: hidden; }
.jv-team-avatar[b-24be7q1zfz] { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--g-gray-200); }
.jv-team-avatar-fallback[b-24be7q1zfz] { 
    width: 32px; height: 32px;
     border-radius: 50%;
     background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
        display: flex;
         align-items: center; 
         justify-content: center; 
         font-size: 13px; 
         font-weight: 600;
        
        }
.jv-team-info[b-24be7q1zfz] { flex: 1; min-width: 0; }
.jv-team-name[b-24be7q1zfz] { display: block; font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium); color: var(--g-text-heading); }
.jv-team-role[b-24be7q1zfz] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.jv-team-subs-badge[b-24be7q1zfz] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--g-brand, #2c7cff);
    background: #eef4ff;
    border-radius: 10px;
    padding: 2px 12px;
    min-width: 28px;
    text-align: center;
}

/* ===== FOCUS-VISIBLE ===== */
.jv-btn-outline:focus-visible[b-24be7q1zfz],
.jv-btn-danger:focus-visible[b-24be7q1zfz],
.jv-link-btn:focus-visible[b-24be7q1zfz],
.g-btn-icon:focus-visible[b-24be7q1zfz] {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1440px) {
    .jv-body[b-24be7q1zfz] { grid-template-columns: 1fr 330px; }
}

@media (max-width: 1024px) {
    .jv-body[b-24be7q1zfz] { grid-template-columns: 1fr 330px; }
    .jv-header-bar[b-24be7q1zfz] { flex-wrap: wrap; gap: var(--g-space-8); padding: var(--g-space-12) 16px; }
    .jv-header-title[b-24be7q1zfz] { max-width: 260px; }
    .jv-header-subtitle[b-24be7q1zfz] { max-width: 260px; }
    .jv-title-section[b-24be7q1zfz] { flex-wrap: wrap; gap: var(--g-space-12); padding: 40px 16px 0; }
    .jv-company-meta[b-24be7q1zfz] { padding: 4px 16px 16px; }
    .jv-body[b-24be7q1zfz] { padding: 0 16px; }
    .jv-fullwidth-section[b-24be7q1zfz] { padding: 16px 16px 32px; }
    .jv-banner-bg[b-24be7q1zfz] { height: 150px; padding: 14px 18px; }
    .jv-banner-tagline[b-24be7q1zfz] { font-size: 15px; }
    .jv-job-title[b-24be7q1zfz] { font-size: 22px; }
    .jv-card-pad[b-24be7q1zfz] { padding: 18px; }
    .jv-candidate-toolbar[b-24be7q1zfz] { flex-wrap: wrap; gap: var(--g-space-8); }
    .jv-search-box[b-24be7q1zfz] { width: 100%; }
}

@media (max-width: 768px) {
    .jv-body[b-24be7q1zfz] { grid-template-columns: 1fr; }
    .jv-right[b-24be7q1zfz] { position: static; }
    .jv-header-bar[b-24be7q1zfz] { padding: 10px 14px; top: 56px; }
    .jv-header-title[b-24be7q1zfz] { max-width: 180px; font-size: 13px; }
    .jv-header-subtitle[b-24be7q1zfz] { display: none; }
    .jv-header-actions[b-24be7q1zfz] { gap: 4px; }
    .jv-btn-add-candidate span[b-24be7q1zfz],
    .jv-btn-submit-candidate span[b-24be7q1zfz] { display: none; }
    .jv-banner-bg[b-24be7q1zfz] { height: 120px; padding: 14px 16px; border-radius: 12px; }
    .jv-banner-info[b-24be7q1zfz] { gap: 10px; font-size: 10px; flex-wrap: wrap; }
    .jv-banner-tagline[b-24be7q1zfz] { font-size: 13px; }
    .jv-banner-avatar[b-24be7q1zfz] { left: 14px; bottom: -24px; }
    .jv-avatar-lg[b-24be7q1zfz] { width: 50px; height: 50px; font-size: 18px; }
    .jv-avatar-img.jv-avatar-lg[b-24be7q1zfz] { width: 50px; height: 50px; }
    .jv-title-section[b-24be7q1zfz] { padding: 36px 14px 0; }
    .jv-job-title[b-24be7q1zfz] { font-size: 18px; }
    .jv-company-meta[b-24be7q1zfz] { padding: 4px 14px 14px; font-size: 12px; }
    .jv-body[b-24be7q1zfz] { padding: 0 14px; gap: 16px; }
    .jv-card-pad[b-24be7q1zfz] { padding: 16px; }
    .jv-fullwidth-section[b-24be7q1zfz] { padding: 16px 14px 24px; }
    .jv-title-actions[b-24be7q1zfz] { width: 100%; justify-content: flex-end; }
}

@media (max-width: 480px) {
    .jv-header-bar[b-24be7q1zfz] { padding: 8px 12px; }
    .jv-avatar-circle[b-24be7q1zfz] { width: 32px; height: 32px; font-size: 12px; }
    .jv-avatar-img[b-24be7q1zfz] { width: 32px; height: 32px; }
    .jv-header-title[b-24be7q1zfz] { font-size: 13px; }
    .jv-banner-bg[b-24be7q1zfz] { height: 100px; padding: 12px 14px; }
    .jv-banner-info[b-24be7q1zfz] { font-size: 9px; gap: 8px; }
    .jv-banner-tagline[b-24be7q1zfz] { display: none; }
    .jv-status-badge[b-24be7q1zfz] { padding: 3px 10px; font-size: 10px; top: 10px; right: 14px; }
    .jv-avatar-lg[b-24be7q1zfz] { width: 42px; height: 42px; font-size: 15px; }
    .jv-avatar-img.jv-avatar-lg[b-24be7q1zfz] { width: 42px; height: 42px; }
    .jv-title-section[b-24be7q1zfz] { padding: 30px 12px 0; }
    .jv-job-title[b-24be7q1zfz] { font-size: 16px; }
    .jv-company-meta[b-24be7q1zfz] { padding: 2px 12px 12px; font-size: 11px; }
    .jv-body[b-24be7q1zfz] { padding: 0 12px; gap: 14px; }
    .jv-card-pad[b-24be7q1zfz] { padding: 14px; }
    .jv-fullwidth-section[b-24be7q1zfz] { padding: 14px 12px 20px; }
    .jv-btn-outline[b-24be7q1zfz] { padding: 4px 10px; font-size: 11px; }
    .jv-btn-add-candidate[b-24be7q1zfz],
    .jv-btn-submit-candidate[b-24be7q1zfz] { padding: 6px 12px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-24be7q1zfz] { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


.jv-remarks-view-all[b-24be7q1zfz] {
    background: none;
    border: none;
    color: var(--g-brand, #4f46e5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-align: left;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
/* /Components/Pages/Dashboard/JobView/JobViewCandidateList.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   JobViewCandidateList – Scoped Styles
   Uses --g-* design tokens from variables.css
   ═══════════════════════════════════════════════════════ */

.jv-card-pad[b-2uy9hkof4s] { padding: var(--g-space-24); }

/* ===== CANDIDATE SECTION ===== */
.jv-candidate-section[b-2uy9hkof4s] { }
.jv-candidate-header[b-2uy9hkof4s] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--g-space-20); }
.jv-candidate-header-actions[b-2uy9hkof4s] { display: flex; align-items: center; gap: 10px; }
.jv-muted-sm[b-2uy9hkof4s] { font-size: var(--g-fs-sm); color: var(--g-text-muted); }

/* Copy JD button */
.jv-copy-btn[b-2uy9hkof4s] {
    display: flex; align-items: center; gap: 4px; padding: 6px 12px;
    border-radius: var(--g-radius-sm); border: 1px solid var(--g-gray-200);
    background: var(--g-bg-card); font-size: var(--g-fs-xs); color: var(--g-text-label); cursor: pointer;
}
.jv-copy-btn:hover[b-2uy9hkof4s] { background: var(--g-gray-100); }

/* Schedule Interview button */
.jv-schedule-btn[b-2uy9hkof4s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #bfdbfe;
    border-radius: var(--g-radius-md, 8px);
    background: #eff6ff;
    color: #1d4ed8;
    font-size: var(--g-fs-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.jv-schedule-btn:hover[b-2uy9hkof4s] { background: #dbeafe; }

/* Row checkbox */
.jv-row-checkbox[b-2uy9hkof4s] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* Add Candidate — uses g-btn-primary from components.css */

/* Tabs */
.jv-tabs[b-2uy9hkof4s] { display: flex; gap: var(--g-space-8); flex-wrap: wrap; margin-bottom: var(--g-space-16); }

.jv-tab[b-2uy9hkof4s] {
    padding: 7px 16px; border-radius: var(--g-fs-xxxs); border: 1px solid var(--g-border);
    background: var(--g-bg-card); font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium);
    color: var(--g-text-label); cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: all var(--g-transition);
}

.jv-tab:hover[b-2uy9hkof4s] { border-color: var(--g-gray-300); color: var(--g-text-heading); }
.jv-tab-active[b-2uy9hkof4s] { color: #fff; border-color: var(--sidebar-active-bg); background: var(--sidebar-active-bg); }
.jv-tab-active:hover[b-2uy9hkof4s] { color: #fff; }

.jv-tab-active .jv-tab-badge[b-2uy9hkof4s] { background: rgba(255, 255, 255, 0.2); color: #fff; }
.jv-tab-badge[b-2uy9hkof4s] { background: var(--g-gray-100); color: var(--g-text-label); border-radius: 10px; padding: 1px 8px; font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold); }
.jv-badge-red[b-2uy9hkof4s] { background: var(--g-error-bg); color: var(--g-error-text); }
.jv-tab-rejected[b-2uy9hkof4s] { color: var(--g-text-label); border-color: var(--g-border); }
.jv-tab-rejected.jv-tab-active[b-2uy9hkof4s] { color: #dc2626; border-color: #dc2626; }
.jv-tab-rejected.jv-tab-active .jv-tab-badge[b-2uy9hkof4s] { background: #dc2626; color: #fff; }

/* ── Mobile Tabs Dropdown ── */
.jv-tabs-mobile[b-2uy9hkof4s] {
    display: none;
    position: relative;
    margin-bottom: var(--g-space-16);
}

.jv-tab-mobile-toggle[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 10px;
    font-size: var(--g-fs-sm);
    font-weight: 500;
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
}

.jv-tab-mobile-selected[b-2uy9hkof4s] {
    flex: 1;
    text-align: left;
}

.jv-tab-mobile-menu[b-2uy9hkof4s] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--g-bg-card);
    border: 1px solid var(--g-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 8px;
    animation: jv-fade-in-b-2uy9hkof4s 0.15s ease;
}

@keyframes jv-fade-in-b-2uy9hkof4s { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.jv-tab-mobile-item[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: var(--g-fs-sm);
    font-family: inherit;
    color: var(--g-text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.jv-tab-mobile-item:hover[b-2uy9hkof4s] { background: var(--g-gray-50); }
.jv-tab-mobile-item--active[b-2uy9hkof4s] { background: #18181b; color: #fff; }
.jv-tab-mobile-item--active:hover[b-2uy9hkof4s] { background: #27272a; }

.jv-tab-mobile-badge[b-2uy9hkof4s] {
    background: var(--g-gray-100);
    color: var(--g-text-label);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: var(--g-fs-xxs);
    font-weight: 600;
}

.jv-tab-mobile-item--active .jv-tab-mobile-badge[b-2uy9hkof4s] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Add Candidate button — black per design (override gradient) */


/* Toolbar */
.jv-candidate-toolbar[b-2uy9hkof4s] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--g-space-16); }

.jv-search-box[b-2uy9hkof4s] {
    display: flex; align-items: center; gap: var(--g-space-8);
    border: 1px solid var(--g-border); border-radius: var(--g-radius-md);
    padding: 8px 12px; background: var(--g-bg-card); width: 280px;
}

.jv-search-input[b-2uy9hkof4s] { border: none; outline: none; font-size: var(--g-fs-sm); color: var(--g-text-heading); width: 100%; background: transparent; font-family: inherit; }
.jv-search-input[b-2uy9hkof4s]::placeholder { color: var(--g-text-muted); }

.jv-toolbar-right[b-2uy9hkof4s] { display: flex; align-items: center; gap: var(--g-space-16); }
.jv-results-count[b-2uy9hkof4s] { font-size: var(--g-fs-sm); color: var(--g-text-muted); }
.jv-sort-wrapper[b-2uy9hkof4s] { position: relative; }
.jv-sort-control[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; font-size: var(--g-fs-sm); color: var(--g-text-label); cursor: pointer; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); padding: 7px 12px; background: var(--g-bg-card); }

/* ===== TABLE ===== */
.jv-table-wrapper[b-2uy9hkof4s] {
    overflow: visible;
    position: relative;
    border-radius: var(--g-radius-xl);
    border: 1px solid var(--g-gray-200);
}

.jv-table[b-2uy9hkof4s] { width: 100%; border-collapse: collapse; font-size: var(--g-fs-sm); overflow: visible; }







/* Column widths via CSS classes */
.jv-th-sno[b-2uy9hkof4s], .jv-td-sno[b-2uy9hkof4s] { width: 50px; }
.jv-th-action[b-2uy9hkof4s] { width: 60px; }
.jv-th-checkbox[b-2uy9hkof4s], .jv-td-checkbox[b-2uy9hkof4s] { width: 36px; text-align: center; }
.jv-th-center[b-2uy9hkof4s] { text-align: center; }

.jv-table thead tr[b-2uy9hkof4s] { background: #f9fafb; }

#jv-candidate-thead-row[b-2uy9hkof4s] {
    position: sticky;
    top: 0;
    z-index: 6;
}

.jv-table thead th[b-2uy9hkof4s] {
    text-align: left; padding: var(--g-space-12) var(--g-space-10);
    font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted); text-transform: uppercase; letter-spacing: 0.08em;
    border-top: 1px solid var(--g-border-light);
    border-bottom: 1px solid var(--g-border-light); white-space: nowrap;
    background: #f9fafb;
}
.jv-table thead th:first-child[b-2uy9hkof4s] { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.jv-table thead th:last-child[b-2uy9hkof4s] { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Center-align chart column headers to match the donut cells below */
.jv-table thead th.jv-th-center[b-2uy9hkof4s] { text-align: center; }

.jv-th-icon-btn[b-2uy9hkof4s] { background: none; border: none; cursor: pointer; color: var(--g-text-muted); padding: 2px; vertical-align: middle; margin-left: 4px; }
.jv-th-icon-btn.jv-filter-active[b-2uy9hkof4s] { color: var(--g-link-blue); }
.jv-filter-dot[b-2uy9hkof4s] { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--g-link-blue); margin-left: 4px; vertical-align: middle; }

.jv-table-row[b-2uy9hkof4s] { border-bottom: 1px solid var(--g-border-light); transition: background var(--g-transition); position: relative; }
.jv-table-row:hover[b-2uy9hkof4s] { background: var(--g-bg-section); }
.jv-table-row[title][b-2uy9hkof4s]::after {
    content: attr(title);
    position: fixed;
    bottom: 8px;
    left: 16px;
    font-size: 11px;
    color: var(--g-text-muted);
    background: var(--g-gray-50);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--g-gray-200);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
}
.jv-table-row:hover[b-2uy9hkof4s]::after { opacity: 1; }
.jv-table-row td[b-2uy9hkof4s] { padding: var(--g-space-16) var(--g-space-10); vertical-align: middle; text-overflow: ellipsis; }
.jv-td-sno[b-2uy9hkof4s] { color: var(--g-text-muted); font-weight: var(--g-fw-medium); width: 50px; }

/* Candidate cell */
.jv-candidate-cell[b-2uy9hkof4s] { display: flex; align-items: center; gap: 10px; }

.jv-candidate-avatar-wrap[b-2uy9hkof4s] {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--g-gray-200);
}

.jv-candidate-avatar[b-2uy9hkof4s] {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

.jv-avatar-initials[b-2uy9hkof4s] {
    font-size: 0.8rem; font-weight: 700; line-height: 1;
    text-transform: uppercase; user-select: none;
    display: flex; align-items: center; justify-content: center;
}

.jv-candidate-info[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.jv-candidate-name-link[b-2uy9hkof4s] { font-weight: var(--g-fw-semibold); color: #1a56db; text-decoration: none; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.jv-candidate-name-link:hover[b-2uy9hkof4s] { color: #1e40af; text-decoration: none; }
.jv-candidate-role[b-2uy9hkof4s] { font-size: 11px; color: var(--g-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.jv-candidate-icons[b-2uy9hkof4s] { display: flex; align-items: center; gap: var(--g-space-6, 6px); margin-top: 2px; }
.jv-icon-btn[b-2uy9hkof4s] { display: inline-flex; align-items: center; justify-content: center; background: var(--g-gray-100, #f1f5f9); border: none; padding: 4px; border-radius: var(--g-radius-md, 6px); cursor: pointer; color: var(--g-gray-500, #64748b); transition: color 0.15s, background 0.15s; text-decoration: none; }
.jv-icon-btn:hover[b-2uy9hkof4s] { color: var(--g-brand, #2c7cff);background: #eff6ff; }
.jv-candidate-rate[b-2uy9hkof4s] { font-size: var(--g-fs-xxs); color: var(--g-text-secondary); }

/* Experience */
.jv-exp-cell[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 2px; }
.jv-exp-sub[b-2uy9hkof4s] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.jv-text-green[b-2uy9hkof4s] { color: var(--g-success-text); font-weight: var(--g-fw-semibold); }
.jv-text-red[b-2uy9hkof4s] { color: var(--g-error-text); font-weight: var(--g-fw-semibold); }

/* Location */
.jv-location-cell[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 2px; font-size: var(--g-fs-sm); }
.jv-relocate-text[b-2uy9hkof4s] { font-size: var(--g-fs-xxs); }

/* Resume */
.jv-resume-cell[b-2uy9hkof4s] { display: inline-flex; flex-direction: row; align-items: flex-start; gap: 6px; font-size: var(--g-fs-xs); color: var(--g-text-secondary); }
.jv-resume-cell > svg[b-2uy9hkof4s] { flex-shrink: 0; margin-top: 3px; }
.jv-resume-text[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 1px; max-width: 120px; }
.jv-resume-clickable[b-2uy9hkof4s] { cursor: pointer; border-radius: var(--g-radius-sm); padding: 6px 8px; transition: background var(--g-transition); }
.jv-resume-clickable:hover[b-2uy9hkof4s] { background: var(--g-gray-100); }
/* Match the Dashboard applied-candidate list: blue "Viewed by" label, grey name | date below. */
.jv-resume-status[b-2uy9hkof4s] { font-size: 11.5px; color: var(--g-text-muted, #9ca3af); white-space: nowrap; }
.jv-resume-viewed-label[b-2uy9hkof4s] { font-size: 9.5px; font-weight: 500; color: #3b82f6; line-height: 1.4; }
.jv-resume-viewer[b-2uy9hkof4s] { font-size: 10.5px; color: #9ca3af; font-weight: 400; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Resume Viewer Drawer */
.jv-resume-drawer[b-2uy9hkof4s] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 1000px; max-width: 90vw;
    background: var(--g-bg-card);
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    z-index: 2001;
    display: flex; flex-direction: column;
    animation: jv-slide-in-b-2uy9hkof4s 280ms ease;
}
@keyframes jv-slide-in-b-2uy9hkof4s { from { transform: translateX(100%); } to { transform: translateX(0); } }
.jv-resume-drawer-header[b-2uy9hkof4s] {
    padding: 16px 20px; border-bottom: 1px solid var(--g-border-light);
    display: flex; align-items: center; flex-shrink: 0;
}
.jv-resume-drawer-title-row[b-2uy9hkof4s] { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.jv-resume-drawer-cand[b-2uy9hkof4s] { display: flex; align-items: center; gap: 10px; }
.jv-resume-drawer-actions[b-2uy9hkof4s] { display: flex; align-items: center; gap: 12px; }
 
 .jv-resume-drawer-body[b-2uy9hkof4s] { flex: 1; overflow: auto; padding: 16px; }

/* Resume backdrop — no blur so PDF stays sharp */
.jv-resume-backdrop[b-2uy9hkof4s] {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.3);
}

/* Chart cells */
.jv-chart-cell[b-2uy9hkof4s] { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.jv-chart-cell svg[b-2uy9hkof4s] { width: var(--g-donut-size); height: var(--g-donut-size); flex-shrink: 0; }
td:has(.jv-chart-cell)[b-2uy9hkof4s] { vertical-align: middle; }

/* ── Skill Match Cell ── */

/* Skill years in dropdown */
.jv-skill-yrs[b-2uy9hkof4s] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    font-weight: var(--g-fw-medium);
}

.jv-skill-labels[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; font-size: var(--g-fs-xxs); }
.jv-primary-skill-pill[b-2uy9hkof4s] { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: none; border-radius: var(--g-radius-sm); font-size: 10px; font-weight: var(--g-fw-semibold); white-space: nowrap; cursor: pointer; background: #eff6ff; color: #1d4ed8; transition: all 0.15s; font-family: inherit; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.jv-primary-skill-pill.jv-pill--green[b-2uy9hkof4s] { background: #ecfdf5; color: #059669; }
.jv-primary-skill-pill.jv-pill--green:hover[b-2uy9hkof4s] { background: #d1fae5; }
.jv-primary-skill-pill.jv-pill--blue[b-2uy9hkof4s] { background: #eff6ff; color: #2563eb; }
.jv-primary-skill-pill.jv-pill--blue:hover[b-2uy9hkof4s] { background: #dbeafe; }
.jv-primary-skill-pill.jv-pill--orange[b-2uy9hkof4s] { background: #fffbeb; color: #d97706; }
.jv-primary-skill-pill.jv-pill--orange:hover[b-2uy9hkof4s] { background: #fef3c7; }
.jv-primary-skill-pill.jv-pill--red[b-2uy9hkof4s] { background: #fef2f2; color: #dc2626; }
.jv-primary-skill-pill.jv-pill--red:hover[b-2uy9hkof4s] { background: #fee2e2; }
.jv-more-skills-btn[b-2uy9hkof4s] { background: none; border: none; color: #0a66c2; cursor: pointer; font-size: 10px; font-weight: var(--g-fw-medium); padding: 0; white-space: nowrap; transition: color 0.15s; }
.jv-more-skills-btn:hover[b-2uy9hkof4s] { color: #004182; text-decoration: underline; }

/* Skill dropdown popover */
.jv-skill-dropdown[b-2uy9hkof4s] {
    position: absolute; top: 100%; right: 0;
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-lg);
    z-index: 40; min-width: 200px; padding: 8px 0; margin-top: 4px;
    max-height: 195px; overflow-y: auto;
}

.jv-skill-dropdown[b-2uy9hkof4s]::-webkit-scrollbar {
    width: 5px;
}
.jv-skill-dropdown[b-2uy9hkof4s]::-webkit-scrollbar-track {
    background: transparent;
}
.jv-skill-dropdown[b-2uy9hkof4s]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.jv-skill-dropdown[b-2uy9hkof4s]::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.jv-skill-dropdown-header[b-2uy9hkof4s] { font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold); color: var(--g-text-muted); text-transform: uppercase; padding: 6px 14px; letter-spacing: .5px; }
.jv-skill-dropdown-row[b-2uy9hkof4s] { display: flex; justify-content: space-between; padding: 6px 14px; font-size: var(--g-fs-xs); color: var(--g-text-body); }

/* LinkedIn justification / Assessment remarks popup (free text, opened from the donut) */
.jv-just-dropdown[b-2uy9hkof4s] {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-lg);
    z-index: 40; width: 240px; padding: 10px 0 12px; margin-top: 4px;
    max-height: 220px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--g-gray-200) transparent;
}
.jv-just-dropdown[b-2uy9hkof4s]::-webkit-scrollbar { width: 6px; }
.jv-just-dropdown[b-2uy9hkof4s]::-webkit-scrollbar-thumb { background: var(--g-gray-200); border-radius: 6px; }
.jv-just-dd-title[b-2uy9hkof4s] { font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold); color: var(--g-text-muted); text-transform: uppercase; padding: 4px 14px 8px; letter-spacing: .5px; border-bottom: 1px solid var(--g-gray-100); }
.jv-just-text[b-2uy9hkof4s] { margin: 8px 14px 0; padding: 0; font-size: var(--g-fs-xs); line-height: 1.55; color: var(--g-text-body); white-space: normal; word-break: break-word; }

/* Overall / Recommendation */
.jv-recommendation[b-2uy9hkof4s] { font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold); }

/* Score Breakdown Tooltip */
.jv-score-tooltip[b-2uy9hkof4s] {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-lg);
    width: 210px; padding: 12px 14px; z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity 150ms ease;
}

.group:hover .jv-score-tooltip[b-2uy9hkof4s] { opacity: 1; pointer-events: auto; }
.jv-table-row:first-child .jv-score-tooltip[b-2uy9hkof4s],
.jv-table-row:nth-child(2) .jv-score-tooltip[b-2uy9hkof4s] {
    bottom: auto; top: calc(100% + 8px);
}
.jv-table-row:first-child .jv-score-tooltip .jv-tooltip-caret[b-2uy9hkof4s],
.jv-table-row:nth-child(2) .jv-score-tooltip .jv-tooltip-caret[b-2uy9hkof4s] {
    bottom: auto; top: -6px;
    border-right: none; border-bottom: none;
    border-left: 1px solid var(--g-border); border-top: 1px solid var(--g-border);
}

.jv-tooltip-header[b-2uy9hkof4s] { font-size: var(--g-fs-xxxs); font-weight: var(--g-fw-semibold); color: var(--g-text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: .5px; }
.jv-tooltip-row[b-2uy9hkof4s] { display: flex; justify-content: space-between; font-size: var(--g-fs-xxs); color: var(--g-text-body); padding: 3px 0; }
.jv-tooltip-row span:last-child[b-2uy9hkof4s] { color: var(--g-link-blue); font-weight: var(--g-fw-semibold); }

.jv-tooltip-caret[b-2uy9hkof4s] {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px; background: var(--g-bg-card);
    border-right: 1px solid var(--g-border); border-bottom: 1px solid var(--g-border);
}

/* Status */
.jv-status-dot[b-2uy9hkof4s] { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.jv-dot-green[b-2uy9hkof4s] { background: #16a34a; }
.jv-dot-blue[b-2uy9hkof4s] { background: #2563eb; }
.jv-dot-gray[b-2uy9hkof4s] { background: var(--g-text-muted); }
.jv-dot-red[b-2uy9hkof4s] { background: var(--g-error-text); }
.jv-dot-yellow[b-2uy9hkof4s] { background: #ca8a04; }
.jv-status-text[b-2uy9hkof4s] { font-size: var(--g-fs-sm); color: var(--g-text-body); }
.jv-status-date[b-2uy9hkof4s] { display: block; font-size: var(--g-fs-xxs); color: var(--g-text-muted);padding-left: 22px; }

/* Submitted by */
.jv-submitted-cell[b-2uy9hkof4s] { display: flex; align-items: center; gap: var(--g-space-8); }
.jv-submitter-avatar-wrap[b-2uy9hkof4s] { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); }
.jv-submitter-avatar[b-2uy9hkof4s] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.jv-avatar-initials[b-2uy9hkof4s] { font-size: 11px; font-weight: 600; color: #2563eb; }
.jv-submitter-name[b-2uy9hkof4s] { font-size: var(--g-fs-xs); color: var(--g-text-body); font-weight: var(--g-fw-bold); display: block; }
.jv-submitter-date[b-2uy9hkof4s] { font-size: var(--g-fs-xxxs); color: var(--g-text-muted); }

/* Action menu */
.jv-action-cell[b-2uy9hkof4s] { position: relative; width: 56px; }
.jv-action-dots[b-2uy9hkof4s] { background: none; border: none; font-size: 18px; color: var(--g-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: var(--g-radius-sm); }
.jv-action-dots:hover[b-2uy9hkof4s] { background: var(--g-gray-100); }

.jv-action-menu[b-2uy9hkof4s] {
    position: absolute;right: 43px;top: 38%;
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-lg);
    z-index: 30; min-width: 180px; padding: 6px 0;
}

.jv-action-item[b-2uy9hkof4s] {
    display: block; width: 100%; text-align: left;
    padding: 8px 16px; border: none; background: none;
    font-size: var(--g-fs-sm); color: var(--g-text-body); cursor: pointer;
    font-family: inherit;
}

.jv-action-item:hover[b-2uy9hkof4s] { background: var(--g-gray-100); }
.jv-action-item.jv-action-red[b-2uy9hkof4s] { color: var(--g-error-text); font-weight: var(--g-fw-medium); }
.jv-action-item.jv-action-orange[b-2uy9hkof4s] { color: #ea580c; font-weight: var(--g-fw-semibold); }
.jv-action-item.jv-action-disabled[b-2uy9hkof4s] { color: #9ca3af; cursor: not-allowed; pointer-events: auto; }
.jv-action-item.jv-action-disabled:hover[b-2uy9hkof4s] { background: transparent; }

/* Move to Tab Modal */
.jv-move-tab-options[b-2uy9hkof4s] { display: flex; flex-wrap: wrap; gap: 8px; }
.jv-move-tab-btn[b-2uy9hkof4s] {
    padding: 8px 16px; border-radius: var(--g-radius-md);
    border: 1px solid var(--g-border); background: var(--g-bg-card);
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium);
    color: var(--g-text-body); cursor: pointer;
    transition: background var(--g-transition), border-color var(--g-transition);
}
.jv-move-tab-btn:hover[b-2uy9hkof4s] { background: var(--g-gray-100); border-color: var(--g-link-blue); color: var(--g-link-blue); }

/* ===== INTERVIEW SCHEDULE CELL ===== */
.jv-interview-cell[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 4px; align-items: center; font-weight: 500; }
.jv-interview-label[b-2uy9hkof4s] { font-size: 10px; font-weight: 600; color: var(--g-gray-500); letter-spacing: 0.5px; }
.jv-interview-date[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--g-text-heading); }
.jv-interview-time[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--g-text-muted); }
.jv-interview-badge[b-2uy9hkof4s] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.jv-interview-badge--pending[b-2uy9hkof4s] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;

}

.jv-interview-badge--done[b-2uy9hkof4s] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* ===== POPOVERS ===== */
.jv-popover[b-2uy9hkof4s] {
    z-index: 60;
    background: var(--g-bg-card); border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-lg);
    padding: 6px 0;
}

.jv-sort-popover[b-2uy9hkof4s] { position: absolute; top: calc(100% + 4px); right: 0; width: 256px; }
.jv-status-popover[b-2uy9hkof4s] { position: fixed; width: 192px; top: 50%; right: 200px; }

.jv-popover-item[b-2uy9hkof4s] {
    padding: 8px 16px; font-size: var(--g-fs-sm); color: var(--g-text-body); cursor: pointer;
    transition: background var(--g-transition); font-family: inherit;
}

.jv-popover-item:hover[b-2uy9hkof4s] { background: var(--g-gray-100); }
.jv-popover-item.jv-popover-active[b-2uy9hkof4s] { background: #eef5ff; color: var(--g-link-blue); font-weight: var(--g-fw-semibold); }

/* ===== TOP MATCHING — CARD ROWS ===== */
.jv-tm-list[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 12px; }
.jv-tm-card[b-2uy9hkof4s] {
    display: flex; gap: 0;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.jv-tm-card:hover[b-2uy9hkof4s] { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* Left section */
.jv-tm-left[b-2uy9hkof4s] { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Top row: avatar + name + icons + action links */
.jv-tm-top[b-2uy9hkof4s] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jv-tm-avatar-wrap[b-2uy9hkof4s] {
    width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--g-gray-300);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.jv-tm-avatar[b-2uy9hkof4s] { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.jv-tm-name[b-2uy9hkof4s] {
    font-size: 15px; font-weight: 600; color: var(--g-brand);
    text-decoration: none; white-space: nowrap;
}
.jv-tm-name:hover[b-2uy9hkof4s] { text-decoration: underline; }
.jv-tm-separator[b-2uy9hkof4s] { color: var(--g-gray-300); font-size: 14px; margin: 0 2px; }
.jv-tm-link[b-2uy9hkof4s] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--g-text-muted); background: none; border: none;
    cursor: pointer; padding: 0; white-space: nowrap;
}
.jv-tm-link:hover[b-2uy9hkof4s] { color: var(--g-text-heading); }
.jv-tm-link-primary[b-2uy9hkof4s] { color: var(--g-brand); font-weight: 500; }
.jv-tm-link-primary:hover[b-2uy9hkof4s] { color: #1a5fd1; }

/* Detail pills row */
.jv-tm-pills[b-2uy9hkof4s] { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.jv-tm-pill[b-2uy9hkof4s] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--g-text-secondary);
}
.jv-tm-pill svg[b-2uy9hkof4s] { flex-shrink: 0; }

/* Skill pills */
.jv-tm-skills[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 6px; }
.jv-tm-skills-label[b-2uy9hkof4s] { font-size: 11px; font-weight: 600; color: var(--g-text-heading); text-transform: uppercase; letter-spacing: 0.3px; }
.jv-tm-skill-pills[b-2uy9hkof4s] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; }
.jv-tm-skill-pill[b-2uy9hkof4s] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border: 1px solid #10b981; border-radius: 14px;
    font-size: 11px; color: #047857; background: #ecfdf5; white-space: nowrap;
}
.jv-tm-skill-more[b-2uy9hkof4s] { font-size: 11px; color: var(--g-brand); cursor: pointer; font-weight: 600; background: none; border: none; padding: 3px 8px; border-radius: 12px; }
.jv-tm-skill-more:hover[b-2uy9hkof4s] { background: var(--g-gray-50); }
.jv-tm-skill-popover[b-2uy9hkof4s] {
    position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 6px;
    background: #fff; border: 1px solid var(--g-gray-200); border-radius: 10px;
    padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
    display: flex; flex-wrap: wrap; gap: 6px; min-width: 200px; max-width: 400px;
}

/* Right section: score panel */
.jv-tm-right[b-2uy9hkof4s] {
    width: 240px; flex-shrink: 0;
    border-left: 1px solid var(--g-gray-100);
    padding: 16px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.jv-tm-score-labels[b-2uy9hkof4s] { display: flex; gap: 24px; text-align: center; }
.jv-tm-score-item[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 2px; }
.jv-tm-score-title[b-2uy9hkof4s] { font-size: 11px; color: var(--g-text-muted); font-weight: 500; }
.jv-tm-score-val[b-2uy9hkof4s] { font-size: 20px; font-weight: 700; color: var(--g-text-heading); }
.jv-tm-score-blue[b-2uy9hkof4s] { color: var(--g-brand); }
.jv-tm-donut[b-2uy9hkof4s] { display: flex; align-items: center; justify-content: center; }

/* ===== TOP MATCHING — ROW LAYOUT (mimics CandidateSearch) ===== */
.jv-tm-rows[b-2uy9hkof4s] { display: flex; flex-direction: column;border-radius: var(--g-radius-xl);border: 1px solid var(--g-gray-200); }
.jv-tm-header-row[b-2uy9hkof4s] {
    display: grid;
    grid-template-columns: 2.3fr 1fr 1.4fr 1fr 1.3fr 1.1fr 48px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-gray-200);
    background: var(--g-gray-50);
    border-radius: 8px 8px 0 0;
}
.jv-tm-hcell[b-2uy9hkof4s] {
    font-size: var(--g-fs-xxxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.jv-tm-hcell-skill[b-2uy9hkof4s],
.jv-tm-hcell-linkedin[b-2uy9hkof4s],
.jv-tm-hcell-assessment[b-2uy9hkof4s] { text-align: center; }
.jv-tm-hcell-actions[b-2uy9hkof4s] { text-align: center; }

.jv-tm-row[b-2uy9hkof4s] {
    display: grid;
    grid-template-columns: 2.3fr 1fr 1.4fr 1fr 1.3fr 1.1fr 48px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--g-gray-100);
    transition: background 0.15s;
    position: relative;
}
.jv-tm-row:hover[b-2uy9hkof4s] { background: var(--g-gray-50); }
.jv-tm-row:last-child[b-2uy9hkof4s] { border-bottom: none; }
.jv-tm-row[b-2uy9hkof4s]::after {
    content: attr(title);
    position: fixed;
    bottom: 8px;
    left: 16px;
    font-size: 11px;
    color: var(--g-text-muted);
    background: var(--g-gray-50);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--g-gray-200);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 100;
}
.jv-tm-row:hover[b-2uy9hkof4s]::after { opacity: 1; }

.jv-tm-cell[b-2uy9hkof4s] { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.jv-tm-cell-candidate[b-2uy9hkof4s] { flex-direction: row; align-items: center; gap: 12px; overflow: hidden; }

/* Avatar initials */
.jv-tm-avatar[b-2uy9hkof4s] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-gray-200);
}
.jv-tm-avatar-initials[b-2uy9hkof4s] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--g-text-heading);
    background: var(--g-gray-100);
}

/* Candidate info */
.jv-tm-cand-info[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.jv-tm-cand-name-row[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; }
.jv-tm-cand-name[b-2uy9hkof4s] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
    color: var(--g-link-blue);
    cursor: pointer;
    text-decoration: none;
}
.jv-tm-cand-name:hover[b-2uy9hkof4s] { text-decoration: underline; color: var(--g-link-blue-hover); }
.jv-tm-active-dot[b-2uy9hkof4s] {
    width: 6%;
    height: 6%;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}
.jv-tm-cand-subtitle[b-2uy9hkof4s] {
    font-size: 12px;
    color: var(--g-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.jv-tm-sep[b-2uy9hkof4s] { margin: 0 4px; color: var(--g-gray-300); }
 .jv-tm-cand-location[b-2uy9hkof4s] {
    font-size: 12px;
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.jv-tm-cand-badges[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.jv-tm-badge[b-2uy9hkof4s] { font-weight: 500; }
.jv-tm-badge-ok[b-2uy9hkof4s] { color: var(--g-success-text); }
.jv-tm-badge-warn[b-2uy9hkof4s] { color: #ef4444; }
.jv-tm-badge-muted[b-2uy9hkof4s] { color: var(--g-text-muted); }
.jv-tm-badge-sep[b-2uy9hkof4s] { color: var(--g-gray-300); }

/* Social icons row */
.jv-tm-cand-socials[b-2uy9hkof4s] { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.jv-tm-social-icon[b-2uy9hkof4s] {
    cursor: pointer;
    color: var(--g-text-muted);
    transition: color 0.15s;
}
.jv-tm-social-icon:hover[b-2uy9hkof4s] { color: var(--g-text-heading); }
.jv-tm-social-link[b-2uy9hkof4s] { display: flex; align-items: center; }

/* Donut ring in cells */
.jv-tm-donut-wrap[b-2uy9hkof4s] {
    position: relative;
    width: var(--g-donut-size);
    height: var(--g-donut-size);
}
.jv-tm-donut-svg[b-2uy9hkof4s] { width: 100%; height: 100%; }
.jv-tm-donut-value[b-2uy9hkof4s] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
}
.jv-tm-donut-label[b-2uy9hkof4s] {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Skill text in matching skill cell */
.jv-tm-skill-text-wrap[b-2uy9hkof4s] { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.jv-tm-skill-name[b-2uy9hkof4s] {
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.jv-tm-skill-more-btn[b-2uy9hkof4s] {
    font-size: 10px;
    color: #0a66c2;
    cursor: pointer;
    font-weight: var(--g-fw-medium);
}
.jv-tm-skill-more-btn:hover[b-2uy9hkof4s] { color: #004182; text-decoration: underline; }

/* Status cell */
.jv-tm-status-wrap[b-2uy9hkof4s] { display: flex; align-items: center; gap: 6px; }
.jv-tm-status-text[b-2uy9hkof4s] { font-size: 13px; font-weight: 500; color: var(--g-text-heading); }
.jv-tm-status-sub[b-2uy9hkof4s] { font-size: 11px; color: var(--g-text-muted); }

/* Created By cell */
.jv-tm-cell-created[b-2uy9hkof4s] { flex-direction: row; gap: 8px; }
.jv-tm-cell-created .jv-submitter-avatar-wrap[b-2uy9hkof4s] {
    width: 28px;
    height: 28px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.jv-tm-created-avatar[b-2uy9hkof4s] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.jv-tm-created-info[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 1px; }
.jv-tm-created-name[b-2uy9hkof4s] { font-size: 12px; font-weight: 600; color: var(--g-text-heading); }
.jv-tm-created-date[b-2uy9hkof4s] { font-size: 11px; color: var(--g-text-muted); }

/* Action buttons */
.jv-tm-cell-actions[b-2uy9hkof4s] { flex-direction: row; gap: 8px; justify-content: center; }
.jv-tm-action-view[b-2uy9hkof4s] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--g-gray-200);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--g-text-muted);
    transition: all 0.15s;
}
.jv-tm-action-view:hover[b-2uy9hkof4s] { border-color: var(--g-brand); color: var(--g-brand); }
.jv-tm-action-apply[b-2uy9hkof4s] {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    background: var(--g-text-heading);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.jv-tm-action-apply:hover[b-2uy9hkof4s] { background: #1a1a2e; }

/* ===== MOBILE CARDS (hidden by default, shown < 768px) ===== */
.jv-mobile-cards[b-2uy9hkof4s] { display: none; }

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

/* ── Below 1600px – truncate subtitle + tighten grid ── */
@media (max-width: 1920px) {
    #th-experience[b-2uy9hkof4s],
    .jv-td-exp[b-2uy9hkof4s],
    .jv-th-tm-exp[b-2uy9hkof4s] { display: none; }
}

@media (max-width: 1600px) {
    .jv-tm-cand-subtitle[b-2uy9hkof4s] {
        max-width: 240px;
    }

    .jv-tm-header-row[b-2uy9hkof4s],
    .jv-tm-row[b-2uy9hkof4s] {
        grid-template-columns: 2fr 0.9fr 1.3fr 0.9fr 1.2fr 1.1fr 48px;
    }
}

/* ── Laptop: ≤ 1440px – hide Location & Resume ── */
@media (max-width: 1440px) {
    /* Hide Location & Resume (class-based — works for both tables) */
    .jv-th-tm-loc[b-2uy9hkof4s],
    .jv-th-tm-resume[b-2uy9hkof4s],
    #th-location[b-2uy9hkof4s],
    #th-resume[b-2uy9hkof4s],
    .jv-td-location[b-2uy9hkof4s],
    .jv-td-resume[b-2uy9hkof4s] {
        display: none;
    }

    /* Tighten padding */
    .jv-table-row td[b-2uy9hkof4s] { padding: 12px 8px; }
    .jv-table thead th[b-2uy9hkof4s] { padding: 10px 8px; }

    /* Reduce chart cell size */
    .jv-chart-cell svg[b-2uy9hkof4s] { width: 44px; height: 44px; }
    .jv-candidate-avatar-wrap[b-2uy9hkof4s] { width: 36px; height: 36px; }
}

/* ── ≤ 1250px – hide LinkedIn & Assessment in Top Matching, Interview Schedule in Interview tab ── */
@media (max-width: 1250px) {
    /* Top Matching tab: hide LinkedIn Match & Assessment columns */
    .jv-tm-hcell-linkedin[b-2uy9hkof4s],
    .jv-tm-hcell-assessment[b-2uy9hkof4s],
    .jv-tm-cell-linkedin[b-2uy9hkof4s],
    .jv-tm-cell-assessment[b-2uy9hkof4s] {
        display: none;
    }

    /* Top Matching grid: adjust to 4 columns (candidate, skill, created, actions) */
    .jv-tm-header-row[b-2uy9hkof4s],
    .jv-tm-row[b-2uy9hkof4s] {
        grid-template-columns: 2.5fr 1.2fr 1.3fr 100px;
    }

    /* Interview tab: hide Interview Schedule column */
    #th-interview-schedule[b-2uy9hkof4s],
    [id^="td-interview-"][b-2uy9hkof4s] {
        display: none;
    }
}

/* ── Small laptop: ≤ 1200px – tighten spacing ── */
@media (max-width: 1200px) {
    .jv-table-row td[b-2uy9hkof4s] { padding: 10px 6px; }
    .jv-table thead th[b-2uy9hkof4s] { padding: 8px 6px; font-size: 10px; }
    .jv-candidate-name-link[b-2uy9hkof4s] { font-size: 12px; }
    .jv-candidate-role[b-2uy9hkof4s] { font-size: 10px; max-width: 140px; }
    .jv-candidate-icons[b-2uy9hkof4s] { gap: 2px; }
    .jv-candidate-rate[b-2uy9hkof4s] { font-size: 10px; }

    .jv-card-pad[b-2uy9hkof4s] { padding: 18px; }
}

/* ── Tablet: ≤ 1024px – hide S.NO + Submitted By, compact ── */
@media (max-width: 1024px) {
    .jv-candidate-toolbar[b-2uy9hkof4s] { flex-wrap: wrap; gap: var(--g-space-8); }
    .jv-search-box[b-2uy9hkof4s] { width: 100%; }

    /* Hide desktop tabs, show dropdown */
    .jv-tabs-desktop[b-2uy9hkof4s] { display: none; }
    .jv-tabs-mobile[b-2uy9hkof4s] { display: block; }

    .jv-tab[b-2uy9hkof4s] {
        flex-shrink: 0;
        padding: 5px 12px;
        font-size: var(--g-fs-xs);
    }

    .jv-tab-badge[b-2uy9hkof4s] { font-size: 10px; padding: 1px 6px; }

    /* Hide S.NO + Submitted By */
    #th-sno[b-2uy9hkof4s],
    #th-submitted-by[b-2uy9hkof4s],
    .jv-td-sno[b-2uy9hkof4s],
    .jv-td-submitted[b-2uy9hkof4s] {
        display: none;
    }

    /* Compact table */
    .jv-table-row td[b-2uy9hkof4s] { padding: 8px 5px; }
    .jv-table thead th[b-2uy9hkof4s] { padding: 7px 5px; font-size: 9px; letter-spacing: 0.02em; }

    .jv-candidate-name-link[b-2uy9hkof4s] { font-size: 11px; }
    .jv-candidate-role[b-2uy9hkof4s] { font-size: 10px; max-width: 120px; }
    .jv-candidate-avatar-wrap[b-2uy9hkof4s] { width: 32px; height: 32px; }
    .jv-candidate-icons[b-2uy9hkof4s] { display: none; }

    .jv-chart-cell svg[b-2uy9hkof4s] { width: 38px; height: 38px; }
    .jv-status-text[b-2uy9hkof4s] { font-size: 11px; }
    .jv-status-date[b-2uy9hkof4s] { font-size: 9px; }

    .jv-card-pad[b-2uy9hkof4s] { padding: 16px; }
}

/* ── Mobile: < 768px ── */
@media (max-width: 768px) {
    .jv-candidate-section[b-2uy9hkof4s] { padding: 16px !important; }
    .jv-tm-card[b-2uy9hkof4s] { flex-direction: column; }
    .jv-tm-right[b-2uy9hkof4s] { width: 100%; border-left: none; border-top: 1px solid var(--g-gray-100); flex-direction: row; justify-content: space-around; padding: 12px 16px; }
    .jv-tm-score-labels[b-2uy9hkof4s] { gap: 16px; }

    /* Header: stack vertically */
    .jv-candidate-header[b-2uy9hkof4s] {
        flex-direction: column;
        gap: 12px;
    }

    .jv-btn-add-candidate[b-2uy9hkof4s] {
        width: 100%;
        justify-content: center;
    }

    /* Toolbar: stack */
    .jv-candidate-toolbar[b-2uy9hkof4s] {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .jv-search-box[b-2uy9hkof4s] { width: 100%; }

    .jv-toolbar-right[b-2uy9hkof4s] {
        width: 100%;
        justify-content: space-between;
    }

    /* Hide table, show cards */
    .jv-table-wrapper[b-2uy9hkof4s] { display: none; }
    .jv-tm-rows[b-2uy9hkof4s] { display: none; }
    .jv-mobile-cards[b-2uy9hkof4s] { display: flex; flex-direction: column; gap: 12px; }

    /* ── Card Styles ── */
    .jv-mcard[b-2uy9hkof4s] {
        background: var(--g-bg-card);
        border: 1px solid var(--g-border-light);
        border-radius: var(--g-radius-xl, 12px);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: box-shadow 0.15s ease;
    }

    .jv-mcard:active[b-2uy9hkof4s] {
        box-shadow: var(--g-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    }

    /* Top row */
    .jv-mcard-top[b-2uy9hkof4s] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .jv-mcard-avatar[b-2uy9hkof4s] {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        background: var(--g-gray-200);
        border: 2px solid var(--g-gray-300);
    }

    .jv-mcard-identity[b-2uy9hkof4s] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .jv-mcard-name[b-2uy9hkof4s] {
        font-size: var(--g-fs-sm);
        font-weight: var(--g-fw-semibold);
        color: var(--g-link-blue);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jv-mcard-name:hover[b-2uy9hkof4s] { text-decoration: underline; }

    .jv-mcard-role[b-2uy9hkof4s] {
        font-size: var(--g-fs-xs);
        color: var(--g-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .jv-mcard-top-right[b-2uy9hkof4s] {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        position: relative;
    }

    .jv-mcard-rate[b-2uy9hkof4s] {
        font-size: var(--g-fs-xs);
        font-weight: var(--g-fw-semibold);
         white-space: nowrap;
    }

    .jv-mcard-action-menu[b-2uy9hkof4s] {
        right: 0;
        top: 100%;
        min-width: 160px;
    }

    /* Details pills row */
    .jv-mcard-details[b-2uy9hkof4s] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .jv-mcard-pill[b-2uy9hkof4s] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        background: var(--g-gray-50);
        border: 1px solid var(--g-border-light);
        border-radius: var(--g-radius-full);
        font-size: 11px;
        color: var(--g-text-label);
        white-space: nowrap;
    }

    .jv-mcard-pill svg[b-2uy9hkof4s] {
        color: var(--g-text-muted);
        flex-shrink: 0;
    }

    .jv-mcard-pill .jv-status-dot[b-2uy9hkof4s] {
        margin-right: 0;
    }

    .jv-mcard-pill--ok[b-2uy9hkof4s] {
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #065f46;
    }

    .jv-mcard-pill--warn[b-2uy9hkof4s] {
        background: #fef3c7;
        border-color: #fde68a;
        color: #92400e;
    }

    /* Bottom row: scores + submitted */
    .jv-mcard-bottom[b-2uy9hkof4s] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--g-border-light);
    }

    .jv-mcard-scores[b-2uy9hkof4s] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .jv-mcard-score[b-2uy9hkof4s] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .jv-mcard-score-label[b-2uy9hkof4s] {
        font-size: 9px;
        color: var(--g-text-muted);
        text-transform: uppercase;
        font-weight: var(--g-fw-semibold);
        letter-spacing: 0.03em;
    }

    .jv-mcard-submitted[b-2uy9hkof4s] {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    /* Pagination compact */
    .g-pagination[b-2uy9hkof4s] {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .g-pagination-info[b-2uy9hkof4s] {
        font-size: var(--g-fs-xs);
    }

    /* Popovers adjust for mobile */
    .jv-sort-popover[b-2uy9hkof4s] {
        right: 16px;
        left: 16px;
        width: auto;
    }

    .jv-status-popover[b-2uy9hkof4s] {
        right: 16px;
        left: auto;
        width: auto;
        min-width: 160px;
    }
}

/* ── Small phone: ≤ 480px ── */
@media (max-width: 480px) {
    .jv-candidate-section[b-2uy9hkof4s] { padding: 12px !important; }

    .jv-mcard[b-2uy9hkof4s] { padding: 12px; gap: 10px; border-radius: 10px; }
    .jv-mcard-avatar[b-2uy9hkof4s] { width: 34px; height: 34px; }
    .jv-mcard-name[b-2uy9hkof4s] { font-size: 12px; }
    .jv-mcard-role[b-2uy9hkof4s] { font-size: 10px; }
    .jv-mcard-rate[b-2uy9hkof4s] { font-size: 10px; }
    .jv-mcard-pill[b-2uy9hkof4s] { font-size: 10px; padding: 2px 8px; }
    .jv-mcard-bottom[b-2uy9hkof4s] { gap: 8px; padding-top: 8px; }
    .jv-mcard-scores[b-2uy9hkof4s] { gap: 8px; }
    .jv-mcard-score-label[b-2uy9hkof4s] { font-size: 8px; }

    .jv-candidate-header h2[b-2uy9hkof4s] { font-size: 16px; }
    .jv-btn-add-candidate[b-2uy9hkof4s] { font-size: 12px; padding: 8px 12px; }
}

/* ===== FOCUS-VISIBLE ===== */
.jv-tab:focus-visible[b-2uy9hkof4s],
.jv-sort-control:focus-visible[b-2uy9hkof4s],
.jv-action-dots:focus-visible[b-2uy9hkof4s],
.jv-action-item:focus-visible[b-2uy9hkof4s],
.jv-more-skills-btn:focus-visible[b-2uy9hkof4s],
.jv_tm_btn_view:focus-visible[b-2uy9hkof4s],
.jv-page-btn:focus-visible[b-2uy9hkof4s] {
    outline: 2px solid var(--g-primary);
    outline-offset: 2px;
}

/* ═══════ TOP MATCHING PROFILES – CARD GRID ═══════ */
.jv_top_match_grid[b-2uy9hkof4s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--g-space-16);
    padding: var(--g-space-16) 0;
}

.jv_tm_card[b-2uy9hkof4s] {
    position: relative;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-xl);
    padding: var(--g-space-20);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow var(--g-transition), border-color var(--g-transition);
}

.jv_tm_card:hover[b-2uy9hkof4s] {
    box-shadow: var(--g-shadow-lg);
    border-color: var(--g-border-hover, #93c5fd);
}

.jv_tm_card_top3[b-2uy9hkof4s] {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 40%);
}

/* Rank badge */
.jv_tm_rank[b-2uy9hkof4s] {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-text-secondary);
    padding: 2px 8px;
    border-radius: var(--g-radius-full);
    background: var(--g-gray-100);
}

.jv_tm_rank_gold[b-2uy9hkof4s] { background: #fef3c7; color: #b45309; }
.jv_tm_rank_silver[b-2uy9hkof4s] { background: #f1f5f9; color: #475569; }
.jv_tm_rank_bronze[b-2uy9hkof4s] { background: #fde68a; color: #92400e; }

/* Header */
.jv_tm_header[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
}

.jv_tm_avatar[b-2uy9hkof4s] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-border-light);
}

.jv_tm_identity[b-2uy9hkof4s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.jv_tm_name[b-2uy9hkof4s] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jv_tm_name:hover[b-2uy9hkof4s] { color: var(--g-link-blue); text-decoration: underline; }

.jv_tm_role[b-2uy9hkof4s] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.jv_tm_overall_ring[b-2uy9hkof4s] { flex-shrink: 0; }

/* Meta row */
.jv_tm_meta[b-2uy9hkof4s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-12);
}

.jv_tm_meta_item[b-2uy9hkof4s] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* Skill match bar */
.jv_tm_skill_section[b-2uy9hkof4s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jv_tm_skill_header[b-2uy9hkof4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jv_tm_skill_label[b-2uy9hkof4s] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jv_tm_skill_pct[b-2uy9hkof4s] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-bold);
}

.jv_tm_skill_bar_bg[b-2uy9hkof4s] {
    height: 6px;
    border-radius: 3px;
    background: var(--g-gray-100);
    overflow: hidden;
}

.jv_tm_skill_bar_fill[b-2uy9hkof4s] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.jv_tm_skill_pills[b-2uy9hkof4s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jv_tm_primary_pill[b-2uy9hkof4s] {
    font-size: var(--g-fs-xxs);
    padding: 4px 10px;
    border: 1px solid var(--g-gray-200);
    border-radius: var(--g-radius-full);
    color: var(--g-text-body);
    background: var(--g-bg-card);
}

.jv_tm_more_pill[b-2uy9hkof4s] {
    font-size: var(--g-fs-xxs);
    padding: 2px 10px;
    border-radius: var(--g-radius-full);
    color: var(--g-text-muted);
    background: var(--g-gray-100);
}

/* Footer */
.jv_tm_footer[b-2uy9hkof4s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid var(--g-border-light);
}

.jv_tm_recommendation[b-2uy9hkof4s] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
}

.jv_tm_status[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
}

/* Actions */
.jv_tm_actions[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jv_tm_btn_view[b-2uy9hkof4s] {
    flex: 1;
    padding: 7px 0;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-body);
    cursor: pointer;
    transition: background var(--g-transition);
}

.jv_tm_btn_view:hover[b-2uy9hkof4s] { background: var(--g-gray-50); }

/* Responsive */
@media (max-width: 768px) {
    .jv_top_match_grid[b-2uy9hkof4s] {
        grid-template-columns: 1fr;
        gap: var(--g-space-12);
    }
}

/* ===== EMPTY STATE ===== */
.jv-empty-state[b-2uy9hkof4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--g-space-48) var(--g-space-24);
    color: var(--g-text-muted);
    font-size: var(--g-fs-body);
    text-align: center;
}

/* ===== PAGINATION ELLIPSIS ===== */
.jv-page-ellipsis[b-2uy9hkof4s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-muted);
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    *[b-2uy9hkof4s] { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== STATUS CELL TRIGGER (opens feedback drawer) ===== */
.jv-status-trigger[b-2uy9hkof4s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background var(--g-transition), color var(--g-transition);
}
.jv-status-trigger:hover[b-2uy9hkof4s] { background: var(--g-gray-50); }
.jv-status-trigger:hover .jv-status-text[b-2uy9hkof4s] { color: var(--g-brand); }
.jv-status-trigger:focus-visible[b-2uy9hkof4s] { outline: 2px solid var(--g-brand); outline-offset: 1px; }

/* ═══ Applied Actions ═══ */
.jv-applied-actions[b-2uy9hkof4s] { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }

.g-btn-danger-sm[b-2uy9hkof4s] {
    background: #ef4444; color: #fff; border: none; border-radius: 4px;
    cursor: pointer; font-weight: 500; transition: background 0.2s;
}
.g-btn-danger-sm:hover[b-2uy9hkof4s] { background: #dc2626; }
.g-btn-danger-sm:disabled[b-2uy9hkof4s] { opacity: 0.6; cursor: not-allowed; }

.g-btn-outline-sm[b-2uy9hkof4s] {
    background: transparent; color: var(--g-text-body, #374151); border: none;
    border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s;
}
.g-btn-outline-sm:hover[b-2uy9hkof4s] { background: var(--g-gray-50, #f9fafb); }

/* ═══ Drop Modal ═══ */
.jv-modal-backdrop[b-2uy9hkof4s] {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
}
.jv-modal-content[b-2uy9hkof4s] {
    background: #fff; border-radius: 12px; width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
}
.jv-modal-header[b-2uy9hkof4s] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.jv-modal-header h4[b-2uy9hkof4s] { margin: 0; font-size: 16px; font-weight: 600; }
.jv-modal-close[b-2uy9hkof4s] {
    background: none; border: none; font-size: 22px; cursor: pointer; color: #6b7280;
    line-height: 1;
}
.jv-modal-close:hover[b-2uy9hkof4s] { color: #111; }
.jv-modal-body[b-2uy9hkof4s] { padding: 20px; }
.jv-drop-textarea[b-2uy9hkof4s] {
    width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 10px;
    font-size: 13px; resize: vertical; font-family: inherit;
}
.jv-drop-textarea:focus[b-2uy9hkof4s] { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
 
/* ===== Drop / Reject Candidate Modal (matches dashboard reject modal) ===== */
.jv-reject-backdrop[b-2uy9hkof4s] {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(17, 24, 39, 0.45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.jv-reject-modal[b-2uy9hkof4s] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 480px; max-width: 94vw; background: #fff; border-radius: 20px;
    z-index: 9999; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); padding: 32px;
}
.jv-reject-header[b-2uy9hkof4s] { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.jv-reject-icon[b-2uy9hkof4s] {
    width: 36px; height: 36px; border-radius: 10px; background: #fef2f2;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jv-reject-title[b-2uy9hkof4s] { font-size: 15px; font-weight: 700; color: #111827; margin: 0; }
.jv-reject-candidate[b-2uy9hkof4s] { font-size: 12px; color: #9ca3af; margin: 1px 0 0; }
.jv-reject-close[b-2uy9hkof4s] {
    margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
    background: #f3f4f6; border: none; cursor: pointer; font-size: 15px; color: #6b7280; line-height: 1;
}
.jv-reject-close:hover[b-2uy9hkof4s] { background: #e5e7eb; }
.jv-reject-prompt[b-2uy9hkof4s] { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.jv-reject-textarea[b-2uy9hkof4s] {
    width: 100%; resize: vertical; min-height: 96px; padding: 12px 14px;
    border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13px; color: #374151;
    background: #f9fafb; outline: none; font-family: inherit; box-sizing: border-box;
}
.jv-reject-textarea:focus[b-2uy9hkof4s] { border-color: #fca5a5; }
.jv-reject-error[b-2uy9hkof4s] { display: block; margin-top: 8px; color: #ef4444; font-size: 12px; }
.jv-reject-actions[b-2uy9hkof4s] { display: flex; gap: 10px; margin-top: 16px; }
.jv-btn-confirm-reject[b-2uy9hkof4s] {
    flex: 1; padding: 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    background: #dc2626; color: #fff; border: none; cursor: pointer;
}
.jv-btn-confirm-reject:hover:not(:disabled)[b-2uy9hkof4s] { background: #b91c1c; }
.jv-btn-confirm-reject:disabled[b-2uy9hkof4s] { opacity: 0.6; cursor: default; }
.jv-btn-cancel-reject[b-2uy9hkof4s] {
    padding: 10px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
    background: #fff; color: #6b7280; border: 1.5px solid #e5e7eb; cursor: pointer;
}
.jv-btn-cancel-reject:hover[b-2uy9hkof4s] { background: #f9fafb; }
.jv-modal-footer[b-2uy9hkof4s] {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid #e5e7eb;
}

/* Rejection Details */
.jv-rejection-field[b-2uy9hkof4s] { margin-bottom: 16px; }
.jv-rejection-field:last-child[b-2uy9hkof4s] { margin-bottom: 0; }
.jv-rejection-label[b-2uy9hkof4s] { font-size: 12px; color: #6b7280; display: block; margin-bottom: 2px; }
.jv-rejection-value[b-2uy9hkof4s] { font-weight: 600; font-size: 13px; margin: 0; }
.jv-rejection-sublabel[b-2uy9hkof4s] { font-size: 12px; color: #6b7280; }
.jv-rejection-reason[b-2uy9hkof4s] {
    margin-top: 6px; padding: 12px 14px;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 8px; font-size: 13px; 
}

/* Spinner for top matching loading */
.jv-spinner[b-2uy9hkof4s] {
    width: 32px; height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: jv-spin-b-2uy9hkof4s 0.7s linear infinite;
}
@keyframes jv-spin-b-2uy9hkof4s { to { transform: rotate(360deg); } }

/* /Components/Pages/Dashboard/TopRecruiters/TopRecruiters.razor.rz.scp.css */
/* TopRecruiters — Scoped Styles */

/* ── Toast Notifications ── */
[b-rle4dhrw9j] .tr-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    animation: toastSlideIn-b-rle4dhrw9j 0.3s ease;
}

[b-rle4dhrw9j] .tr-toast-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

[b-rle4dhrw9j] .tr-toast-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

[b-rle4dhrw9j] .tr-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}

[b-rle4dhrw9j] .tr-toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn-b-rle4dhrw9j {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Page Shell */
#tr-page[b-rle4dhrw9j] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fafafa;
}

#tr-scroll[b-rle4dhrw9j] {
    flex: 1 1 0%;
    overflow-y: auto;
}

#tr-content[b-rle4dhrw9j] { 
    margin: 0 auto;
    width: 100%;
}

/* Custom Scrollbar */
[b-rle4dhrw9j] .tr-custom-scrollbar::-webkit-scrollbar { width: 4px; }
[b-rle4dhrw9j] .tr-custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
[b-rle4dhrw9j] .tr-custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
[b-rle4dhrw9j] .tr-custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* TOP PERFORMER BANNER */
#tr-banner[b-rle4dhrw9j] {
    background: rgb(59, 130, 246);
    border-radius: 2rem;
    padding: 48px;
    height: 350px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

[b-rle4dhrw9j] .tr-banner-inner {
    display: flex;
    flex-direction: row;
    gap: 48px;
}

[b-rle4dhrw9j] .tr-banner-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

[b-rle4dhrw9j] .tr-banner-top-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

[b-rle4dhrw9j] .tr-banner-star { flex-shrink: 0; }

[b-rle4dhrw9j] .tr-banner-period {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 2px;
}

[b-rle4dhrw9j] .tr-banner-name {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
}

[b-rle4dhrw9j] .tr-banner-role-label {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.5px;
    margin: 0 0 14px;
}

[b-rle4dhrw9j] .tr-banner-quote {
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.85;
    max-width: 460px;
    margin: 0 0 14px;
}

[b-rle4dhrw9j] .tr-banner-attribution {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-rle4dhrw9j] .tr-banner-attr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-rle4dhrw9j] .tr-banner-attr-initial {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

[b-rle4dhrw9j] .tr-banner-attr-info { display: flex; flex-direction: column; }

[b-rle4dhrw9j] .tr-banner-attr-name { font-size: 12px; font-weight: 600; color: #fff; }

[b-rle4dhrw9j] .tr-banner-attr-role {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

[b-rle4dhrw9j] .tr-banner-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

[b-rle4dhrw9j] .tr-banner-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 200px;
}

[b-rle4dhrw9j] .tr-banner-score-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

[b-rle4dhrw9j] .tr-banner-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

[b-rle4dhrw9j] .tr-banner-avatar-initials {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

[b-rle4dhrw9j] .tr-banner-score-block { display: flex; flex-direction: column; }

[b-rle4dhrw9j] .tr-banner-score-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 2px;
}

[b-rle4dhrw9j] .tr-banner-score-value {
    font-size: 36px;
    font-weight: 300;
    color: #fcd34d;
    letter-spacing: -1px;
    line-height: 1;
}

[b-rle4dhrw9j] .tr-banner-score-pct {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

[b-rle4dhrw9j] .tr-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

[b-rle4dhrw9j] .tr-banner-stat {
    display: flex;
    flex-direction: column; 
}

[b-rle4dhrw9j] .tr-banner-stat-value {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.5px;
}

[b-rle4dhrw9j] .tr-banner-stat-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 1px;
}

/* MONTHLY OVERVIEW HEADER */
#tr-overview-header[b-rle4dhrw9j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

#tr-overview-title[b-rle4dhrw9j] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: #111827;
    margin: 0;
}

#tr-overview-subtitle[b-rle4dhrw9j] {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin: 4px 0 0;
}

[b-rle4dhrw9j] .tr-overview-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-rle4dhrw9j] .tr-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-rle4dhrw9j] .tr-download-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

#tr-month-nav[b-rle4dhrw9j] {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #e4e4e7;
    padding-bottom: 8px;
}

[b-rle4dhrw9j] .tr-month-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
    transition: color 0.15s;
}

[b-rle4dhrw9j] .tr-month-btn:hover { color: #111827; }
[b-rle4dhrw9j] .tr-month-btn-disabled { opacity: 0.3; cursor: not-allowed; }

#tr-month-label[b-rle4dhrw9j] {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    min-width: 80px;
    text-align: center;
}

/* TABLE HEADER */
#tr-table-header[b-rle4dhrw9j] {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e4e4e7;
}

[b-rle4dhrw9j] .tr-th-rank {
    width: 64px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
}

[b-rle4dhrw9j] .tr-th-consultant {
    width: 26%;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
}

#tr-th-stats[b-rle4dhrw9j] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 32px;
}

[b-rle4dhrw9j] .tr-th-stat {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-align: center;
}

[b-rle4dhrw9j] .tr-th-score {
    width: 80px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-align: center;
}

[b-rle4dhrw9j] .tr-th-recognize {
    width: 80px;
    flex-shrink: 0;
    margin-left: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-align: center;
}

[b-rle4dhrw9j] .tr-th-action {
    width: 90px;
    flex-shrink: 0;
    margin-left: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-align: right;
}

/* RECRUITER ROWS */
[b-rle4dhrw9j] .tr-row {
    border-bottom: 1px solid #f4f4f5;
    transition: background-color 0.15s;
}

[b-rle4dhrw9j] .tr-row:hover { background: rgba(239, 246, 255, 0.35); }

[b-rle4dhrw9j] .tr-row-main {
    display: flex;
    align-items: center;
    padding: 24px 5px;
}

/* Rank Badge */
[b-rle4dhrw9j] .tr-rank-cell { width: 64px; flex-shrink: 0; }

[b-rle4dhrw9j] .tr-rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
}

[b-rle4dhrw9j] .tr-rank-1 { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
[b-rle4dhrw9j] .tr-rank-2 { background: #eff6ff; border: 1px solid #bfdbfe; color: rgb(59, 130, 246); }
[b-rle4dhrw9j] .tr-rank-3 { background: #eef2ff; border: 1px solid #c7d2fe; color: #6366f1; }
[b-rle4dhrw9j] .tr-rank-default { background: #fafafa; border: 1px solid #e4e4e7; color: #9ca3af; }

/* Consultant Cell */
[b-rle4dhrw9j] .tr-consultant-cell {
    width: 26%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-rle4dhrw9j] .tr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e4e4e7;
    object-fit: cover;
    flex-shrink: 0;
}

[b-rle4dhrw9j] .tr-avatar-top {
    border: 2px solid #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

[b-rle4dhrw9j] .tr-avatar-initials {
    width: 40px;
    height: 40px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(4px);
}

[b-rle4dhrw9j] .tr-consultant-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-rle4dhrw9j] .tr-consultant-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-rle4dhrw9j] .tr-consultant-role {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}

/* Stats Cell */
[b-rle4dhrw9j] .tr-stats-cell {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 32px;
}

[b-rle4dhrw9j] .tr-stat-value {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.5px;
    text-align: center;
}

[b-rle4dhrw9j] .tr-stat-zero { color: #d4d4d8; }
[b-rle4dhrw9j] .tr-stat-col-0 { color: #f59e0b; }
[b-rle4dhrw9j] .tr-stat-col-1 { color: rgb(59, 130, 246); }
[b-rle4dhrw9j] .tr-stat-col-2 { color: #818cf8; }
[b-rle4dhrw9j] .tr-stat-col-3 { color: #10b981; }

/* Score Ring */
[b-rle4dhrw9j] .tr-score-cell {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rle4dhrw9j] .tr-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
}

[b-rle4dhrw9j] .tr-ring-svg { width: 64px; height: 64px; }

[b-rle4dhrw9j] .tr-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #111827;
}

/* Action Cell */
[b-rle4dhrw9j] .tr-action-cell {
    width: 90px;
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

[b-rle4dhrw9j] .tr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #dbeafe;
    color: rgb(59, 130, 246);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

[b-rle4dhrw9j] .tr-add-btn:hover {
    background: #eff6ff;
    border-color: rgb(59, 130, 246);
}

/* Recognize Button */
[b-rle4dhrw9j] .tr-recognize-cell {
    width: 80px;
    flex-shrink: 0;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-rle4dhrw9j] .tr-recognize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1.5px solid #e4e4e7;
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

[b-rle4dhrw9j] .tr-recognize-btn:hover {
    border-color: #fbbf24;
    color: #fbbf24;
    background: #fffbeb;
}

[b-rle4dhrw9j] .tr-recognize-btn:active {
    transform: scale(0.92);
}

[b-rle4dhrw9j] .tr-recognize-active {
    border-color: #fbbf24;
    background: #fef3c7;
    color: #d97706;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

[b-rle4dhrw9j] .tr-recognize-active:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #b45309;
}

/* Top Performer Badge */
[b-rle4dhrw9j] .tr-top-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 1.5px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.4;
}

[b-rle4dhrw9j] .tr-badge-animate {
    animation: badgePop-b-rle4dhrw9j 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badgePop-b-rle4dhrw9j {
    0%   { opacity: 0; transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* Done indicator in action cell */
[b-rle4dhrw9j] .tr-action-done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    letter-spacing: 0.2px;
}

/* ── Confirmation Modal ── */
[b-rle4dhrw9j] .tr-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1100;
    animation: fadeIn-b-rle4dhrw9j 0.2s ease;
}

[b-rle4dhrw9j] .tr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 92vw;
    background: #fff;
    border-radius: 20px;
    z-index: 1101;
    padding: 36px 32px 28px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
    text-align: center;
    animation: modalSlideUp-b-rle4dhrw9j 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp-b-rle4dhrw9j {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes fadeIn-b-rle4dhrw9j {
    from { opacity: 0; }
    to   { opacity: 1; }
}

[b-rle4dhrw9j] .tr-modal-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fffbeb;
    border: 1px solid #fde68a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

[b-rle4dhrw9j] .tr-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

[b-rle4dhrw9j] .tr-modal-desc {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 0 28px;
}

[b-rle4dhrw9j] .tr-modal-desc strong {
    color: #111827;
    font-weight: 600;
}

[b-rle4dhrw9j] .tr-modal-actions {
    display: flex;
    gap: 10px;
}

[b-rle4dhrw9j] .tr-modal-cancel {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    background: #fff;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.15s;
}

[b-rle4dhrw9j] .tr-modal-cancel:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

[b-rle4dhrw9j] .tr-modal-ok {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    background: var(--sidebar-active-bg);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

[b-rle4dhrw9j] .tr-modal-ok:hover {
    background: var(--sidebar-active-bg);
    filter: brightness(1.15);
}

/* Removal modal styles */
[b-rle4dhrw9j] .tr-modal-icon-remove {
    background: #fef2f2;
    border-color: #fecaca;
}

[b-rle4dhrw9j] .tr-modal-remove {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

[b-rle4dhrw9j] .tr-modal-remove:hover {
    background: #dc2626;
}

/* ── Banner Carousel ── */
[b-rle4dhrw9j] .tr-banner-carousel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

[b-rle4dhrw9j] .tr-carousel-slide {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-rle4dhrw9j] .tr-slide-active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    z-index: 1;
}

[b-rle4dhrw9j] .tr-slide-hidden {
    opacity: 0;
    transform: translateX(30px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

[b-rle4dhrw9j] .tr-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-bottom: 20px;
}

[b-rle4dhrw9j] .tr-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

[b-rle4dhrw9j] .tr-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.55);
}

[b-rle4dhrw9j] .tr-dot-active {
    background: rgba(255, 255, 255, 0.35);
    width: 24px;
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

[b-rle4dhrw9j] .tr-dot-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 999px;
    animation: dotProgress-b-rle4dhrw9j 5s linear forwards;
}

[b-rle4dhrw9j] .tr-dot-paused.tr-dot-active::after {
    animation-play-state: paused;
}

@keyframes dotProgress-b-rle4dhrw9j {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Banner attribution */
[b-rle4dhrw9j] .tr-banner-attribution {
    margin-top: 16px;
}

/* FEEDBACK AREA */
[b-rle4dhrw9j] .tr-feedback-area {
    padding: 12px 176px 16px 80px;
    border-top: 1px solid #f4f4f5;
}

/* Feedback Read Mode */
[b-rle4dhrw9j] .tr-fb-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-radius: 8px;
    transition: background-color 0.15s;
}

[b-rle4dhrw9j] .tr-fb-wrap:hover { background: rgba(249, 250, 251, 0.6); }

[b-rle4dhrw9j] .tr-fb-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

[b-rle4dhrw9j] .tr-fb-icon { flex-shrink: 0; margin-top: 2px; }

[b-rle4dhrw9j] .tr-fb-text { display: flex; flex-direction: column; gap: 4px; }

[b-rle4dhrw9j] .tr-fb-quote {
    font-size: 13px;
    font-weight: 300;
    color: #374151;
    font-style: italic;
    line-height: 1.75;
}

[b-rle4dhrw9j] .tr-fb-author {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.5px;
}

[b-rle4dhrw9j] .tr-fb-edit-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    padding: 4px;
}

[b-rle4dhrw9j] .tr-fb-del-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    padding: 4px;
}

[b-rle4dhrw9j] .tr-fb-actions {
    position: absolute;
    top: 8px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

[b-rle4dhrw9j] .tr-fb-wrap:hover .tr-fb-edit-btn { opacity: 1; }
[b-rle4dhrw9j] .tr-fb-wrap:hover .tr-fb-del-btn { opacity: 1; }
[b-rle4dhrw9j] .tr-fb-edit-btn:hover { color: rgb(59, 130, 246); }
[b-rle4dhrw9j] .tr-fb-del-btn:hover { color: #ef4444; }

/* Feedback Input Row */
[b-rle4dhrw9j] .tr-fb-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 8px;
    box-shadow: 0 1px 8px rgba(59, 130, 246, 0.08);
}

[b-rle4dhrw9j] .tr-fb-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 300;
    color: #111827;
    font-family: inherit;
}

[b-rle4dhrw9j] .tr-fb-input::placeholder { color: #9ca3af; }

[b-rle4dhrw9j] .tr-fb-save-btn {
    background: none;
    border: none;
    color: #059669;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

[b-rle4dhrw9j] .tr-fb-save-btn:hover { color: #047857; }

[b-rle4dhrw9j] .tr-fb-save-btn:disabled,
[b-rle4dhrw9j] .tr-fb-save-btn-saving {
    color: #2563eb;
    opacity: 0.7;
    cursor: not-allowed;
}

[b-rle4dhrw9j] .tr-fb-save-btn:disabled:hover,
[b-rle4dhrw9j] .tr-fb-save-btn-saving:hover {
    color: #2563eb;
}

[b-rle4dhrw9j] .tr-fb-save-spin {
    animation: tr-fb-rotate-b-rle4dhrw9j 0.9s linear infinite;
}

@keyframes tr-fb-rotate-b-rle4dhrw9j {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

[b-rle4dhrw9j] .tr-fb-cancel-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

[b-rle4dhrw9j] .tr-fb-cancel-btn:hover { color: #6b7280; }

/* RESPONSIVE */
@media (max-width: 1280px) {
    #tr-content[b-rle4dhrw9j] { padding: 32px; padding-bottom: 60px; }
    #tr-banner[b-rle4dhrw9j] { padding: 36px; }
    [b-rle4dhrw9j] .tr-banner-name { font-size: 34px;}
}

@media (max-width: 1024px) {
    #tr-content[b-rle4dhrw9j] { padding: 24px; padding-bottom: 48px; }
    #tr-banner[b-rle4dhrw9j] { padding: 28px; }
    [b-rle4dhrw9j] .tr-banner-inner { flex-direction: column; gap: 28px; }
    [b-rle4dhrw9j] .tr-banner-divider { width: 100%; height: 1px; }
    [b-rle4dhrw9j] .tr-banner-name { font-size: 30px; }
    [b-rle4dhrw9j] .tr-consultant-cell { width: 22%; }
    [b-rle4dhrw9j] .tr-stats-cell { padding: 0 16px; }
    [b-rle4dhrw9j] .tr-feedback-area { padding: 12px 80px 16px 64px; }
}

@media (max-width: 768px) {
    #tr-content[b-rle4dhrw9j] { padding: 16px; padding-bottom: 32px; }
    #tr-banner[b-rle4dhrw9j] { padding: 24px; border-radius: 1.5rem; }
    [b-rle4dhrw9j] .tr-banner-name { font-size: 26px; }
    [b-rle4dhrw9j] .tr-banner-score-value { font-size: 28px; }
    #tr-overview-header[b-rle4dhrw9j] { flex-direction: column; align-items: flex-start; gap: 12px; }
    [b-rle4dhrw9j] .tr-overview-right { width: 100%; justify-content: space-between; }
    #tr-table-header[b-rle4dhrw9j] { display: none; }
    [b-rle4dhrw9j] .tr-row-main { flex-wrap: wrap; gap: 12px; }
    [b-rle4dhrw9j] .tr-rank-cell { width: auto; }
    [b-rle4dhrw9j] .tr-consultant-cell { width: auto; flex: 1; }
    [b-rle4dhrw9j] .tr-stats-cell { display:none }
    [b-rle4dhrw9j] .tr-score-cell { width: auto; }
    [b-rle4dhrw9j] .tr-recognize-cell { width: auto; }
    [b-rle4dhrw9j] .tr-action-cell { width: auto; }
    [b-rle4dhrw9j] .tr-feedback-area { padding: 12px 16px; }
}

@media (max-width: 480px) {
    #tr-banner[b-rle4dhrw9j] { padding: 20px; }
    [b-rle4dhrw9j] .tr-banner-stats { grid-template-columns: repeat(2, 1fr); }
    [b-rle4dhrw9j] .tr-stat-value { font-size: 16px; }
    [b-rle4dhrw9j] .tr-banner-name { font-size: 22px; }
}
/* /Components/Shared/AiRecommendationModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   AI Recommendation Modal – aim- prefix
   ═══════════════════════════════════════════ */

.aim-overlay[b-wek25cowdj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: g-fadeIn 0.2s ease-out;
}

.aim-modal[b-wek25cowdj] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 36px 40px;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: g-slideDown 0.25s ease-out;
    position: relative;
}

/* ── Loading ── */
.aim-loading[b-wek25cowdj] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* ── Header ── */
.aim-header[b-wek25cowdj] {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 28px;
}

.aim-score-wrap[b-wek25cowdj] {
    position: relative;
    width: 136px;
    height: 136px;
    flex-shrink: 0;
}

.aim-score-ring[b-wek25cowdj] {
    width: 100%;
    height: 100%;
}

.aim-score-progress[b-wek25cowdj] {
    transition: stroke-dashoffset 1s ease-out;
}

.aim-score-text[b-wek25cowdj] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.aim-score-value[b-wek25cowdj] {
    font-size: 2rem;
    font-weight: var(--g-fw-extrabold);
    color: var(--g-text-heading);
    line-height: 1;
    letter-spacing: -0.02em;
}

.aim-score-label[b-wek25cowdj] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-bold);
    color: var(--g-brand);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.aim-job-section[b-wek25cowdj] {
    flex: 1;
    min-width: 0;
}

.aim-title[b-wek25cowdj] {
    font-size: 1.25rem;
    font-weight: var(--g-fw-semibold);
    color: #2C3E50;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    line-height: var(--g-lh-tight);
}

.aim-job-card[b-wek25cowdj] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 14px 18px;
    border-radius: var(--g-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--g-border-card);
}

.aim-job-logo[b-wek25cowdj] {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    border: 1px solid var(--g-border-card);
    flex-shrink: 0;
    background: var(--g-bg-section);
}

.aim-job-logo img[b-wek25cowdj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aim-job-info[b-wek25cowdj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aim-job-name[b-wek25cowdj] {
    font-size: 0.9375rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    line-height: var(--g-lh-tight);
}

.aim-job-meta[b-wek25cowdj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-secondary);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Summary ── */
.aim-summary[b-wek25cowdj] {
    background: #EEF2F7;
    border: none;
    border-radius: var(--g-radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.aim-summary p[b-wek25cowdj] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: 1.6;
    margin: 0;
}

/* ── Skill Chips ── */
.aim-skills[b-wek25cowdj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.aim-chip[b-wek25cowdj] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
}

.aim-chip-match[b-wek25cowdj] {
    background: #dcfce7;
    color: #166534;
}

.aim-chip-missing[b-wek25cowdj] {
    background: #fef3c7;
    color: #92400e;
}

/* ── DB Status ── */
.aim-db-status[b-wek25cowdj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin-bottom: 24px;
    padding: 0 4px;
}

.aim-db-status svg[b-wek25cowdj] {
    flex-shrink: 0;
    color: var(--g-info);
    width: 18px;
    height: 18px;
}

/* ── Actions ── */
.aim-actions[b-wek25cowdj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #DDE3EB;
}

.aim-continue-btn[b-wek25cowdj] {
    padding: 0 28px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .aim-modal[b-wek25cowdj] {
        padding: 28px 24px;
        margin: 16px;
        max-width: 100%;
        border-radius: var(--g-radius-xl);
    }
    .aim-header[b-wek25cowdj] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .aim-score-wrap[b-wek25cowdj] { width: 116px; height: 116px; }
    .aim-score-value[b-wek25cowdj] { font-size: 1.625rem; }
    .aim-job-card[b-wek25cowdj] { justify-content: center; }
    .aim-summary[b-wek25cowdj] { padding: 16px 20px; }
}

@media (max-width: 480px) {
    .aim-modal[b-wek25cowdj] { padding: 24px 18px; }
    .aim-actions[b-wek25cowdj] {
        flex-direction: column;
        width: 100%;
    }
    .aim-actions .g-btn-cancel[b-wek25cowdj],
    .aim-actions .g-btn-primary[b-wek25cowdj] {
        width: 100%;
    }
    .aim-header[b-wek25cowdj] { gap: 16px; }
    .aim-score-wrap[b-wek25cowdj] { width: 104px; height: 104px; }
    .aim-score-value[b-wek25cowdj] { font-size: 1.5rem; }
    .aim-summary[b-wek25cowdj] { padding: 16px; }
}
/* /Components/Shared/AppDatePicker.razor.rz.scp.css */
.app-dp-wrap[b-llqtsusgju] { position: relative; display: block; width: 100%; }

.app-dp-btn[b-llqtsusgju] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
    color: var(--g-text-heading);
    font-size: var(--g-fs-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--g-transition);
    text-align: left;
}
.app-dp-btn:hover[b-llqtsusgju] { border-color: var(--g-gray-300); }
.app-dp-btn:focus-visible[b-llqtsusgju] { outline: none; border-color: var(--g-brand); box-shadow: 0 0 0 3px var(--g-brand-bg); }
.app-dp-btn svg[b-llqtsusgju] { color: var(--g-text-muted); flex-shrink: 0; }
.app-dp-btn-label[b-llqtsusgju] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dp-btn-disabled[b-llqtsusgju],
.app-dp-btn[disabled][b-llqtsusgju] {
    background: var(--g-gray-50);
    color: var(--g-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.app-dp-pop[b-llqtsusgju] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-card);
    border-radius: var(--g-radius-xl);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    z-index: 60;
    padding: 16px;
}
.app-dp-pop-up[b-llqtsusgju] {
    top: auto;
    bottom: calc(100% + 6px);
}
.app-dp-pop-end[b-llqtsusgju] {
    left: auto;
    right: 0;
}

.app-dp-nav[b-llqtsusgju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.app-dp-arrow[b-llqtsusgju] {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--g-radius-sm);
    color: var(--g-text-secondary);
    cursor: pointer;
    transition: background var(--g-transition);
    padding: 0;
}
.app-dp-arrow:hover[b-llqtsusgju] { background: var(--g-gray-100); }
.app-dp-month[b-llqtsusgju] { font-size: var(--g-fs-body); font-weight: 700; color: var(--g-text-heading); }

/* Direct month/year selection */
.app-dp-selects[b-llqtsusgju] { display: flex; align-items: center; gap: 6px; }
.app-dp-select[b-llqtsusgju] {
    font-size: var(--g-fs-sm, 0.8125rem);
    font-weight: 600;
    color: var(--g-text-heading);
    background: var(--g-bg-card, #fff);
    border: 1px solid var(--g-gray-200, #e2e8f0);
    border-radius: var(--g-radius-sm, 6px);
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--g-transition, 0.15s);
}
.app-dp-select:hover[b-llqtsusgju] { border-color: var(--g-gray-300, #cbd5e1); }
.app-dp-select:focus[b-llqtsusgju] { border-color: var(--g-brand, #2c7cff); }

.app-dp-weekdays[b-llqtsusgju] {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6875rem; font-weight: 600; color: var(--g-text-muted);
    margin-bottom: 6px;
}
.app-dp-days[b-llqtsusgju] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.app-dp-day-empty[b-llqtsusgju] { width: 36px; height: 36px; }
.app-dp-day[b-llqtsusgju] {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    border: none; background: transparent;
    border-radius: 50%;
    color: var(--g-text-body);
    font-size: 0.8125rem; font-weight: 500; font-family: inherit;
    cursor: pointer;
    transition: all var(--g-transition);
    padding: 0;
}
.app-dp-day:hover[b-llqtsusgju] { background: var(--g-gray-100); }
.app-dp-day-today[b-llqtsusgju] { background: var(--g-brand-bg); color: var(--g-brand); box-shadow: inset 0 0 0 1.5px var(--g-brand-border); }
.app-dp-day-selected[b-llqtsusgju] { background: var(--g-gray-900); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.app-dp-day-disabled[b-llqtsusgju],
.app-dp-day[disabled][b-llqtsusgju] { color: var(--g-text-muted); opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.app-dp-foot[b-llqtsusgju] {
    display: flex; justify-content: space-between;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--g-border-light);
}
.app-dp-link[b-llqtsusgju] {
    border: none; background: transparent;
    color: var(--g-brand);
    font-size: var(--g-fs-xs); font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--g-radius-sm);
}
.app-dp-link:hover[b-llqtsusgju] { background: var(--g-brand-bg); }
/* /Components/Shared/CandidateAlreadyRejectedModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* /Components/Shared/CandidateAlreadySubmittedModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* /Components/Shared/CandidateCheckResultModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* /Components/Shared/CandidateExistsModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* Ensure the modal container is relative to position the button */
.g-modal[b-cdxfi086ys] {
    position: relative;
}

/* The close button styling */
.g-modal-close-btn[b-cdxfi086ys] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 2;
}

/* Show button on hover over the modal */
.g-modal:hover .g-modal-close-btn[b-cdxfi086ys] {
    opacity: 1;
}

/* Hover effect for the button itself */
.g-modal-close-btn:hover[b-cdxfi086ys] {
    background-color: #f1f5f9;
    color: #ef4444;
}
/* /Components/Shared/CandidateFeedbackDrawer.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   CandidateFeedbackDrawer – Scoped Styles
   Uses ONLY --g-* design tokens from variables.css
   ════════════════════════════════════════════════════════════════ */

/* ===== BACKDROP ===== */
.cfd-backdrop[b-g87os3hkz7] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2000;
    animation: cfd-fade-in-b-g87os3hkz7 200ms var(--g-ease);
}

/* ===== PANEL ===== */
.cfd-panel[b-g87os3hkz7] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 790px);
    background: var(--g-bg-section);
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    outline: none;
    animation: cfd-slide-in-b-g87os3hkz7 280ms var(--g-ease);
}

@keyframes cfd-fade-in-b-g87os3hkz7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cfd-slide-in-b-g87os3hkz7 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ===== STICKY HEADER ===== */
.cfd-header[b-g87os3hkz7] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--g-bg-card);
    border-bottom: 1px solid var(--g-border);
    padding: var(--g-space-20) var(--g-space-24);
    padding-top: calc(var(--g-space-16) + env(safe-area-inset-top, 0px));
    z-index: 2;
    transition: padding 220ms var(--g-ease);
}
.cfd-header-rich[b-g87os3hkz7] { padding-top: var(--g-space-12); padding-bottom: var(--g-space-12); }

.cfd-header-content[b-g87os3hkz7] { flex: 1; min-width: 0; }

.cfd-header-simple[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfd-title[b-g87os3hkz7] {
    margin: 0;
    font-size: 12px;
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
}
.cfd-subtitle[b-g87os3hkz7] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}
.cfd-header-rich-row[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-12);
    min-width: 0;
}

.cfd-header-job[b-g87os3hkz7], .cfd-header-cand[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-10);
    min-width: 0;
    flex: 1 1 0;
}

.cfd-header-divider[b-g87os3hkz7] {
    width: 1px;
    height: 28px;
    background: var(--g-border);
    flex-shrink: 0;
}

.cfd-stack-min[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfd-mini-title[b-g87os3hkz7] {
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfd-mini-sub[b-g87os3hkz7] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cfd-job-thumb-wrap[b-g87os3hkz7] {
    position: relative;
    width: 36px; height: 36px; flex-shrink: 0;
}
.cfd-job-thumb-lg[b-g87os3hkz7] { width: 44px; height: 44px; }
.cfd-job-thumb[b-g87os3hkz7] {
    width: 100%; height: 100%;
    border-radius: var(--g-radius-md);
    object-fit: cover;
    border: 1px solid var(--g-border);
    background: var(--g-gray-100);
}
.cfd-job-client-dot[b-g87os3hkz7] {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--g-brand);
    border: 2px solid var(--g-bg-card);
}

.cfd-job-client-badge[b-g87os3hkz7] {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-bg-card);
    background: #fff;
}

.cfd-cand-thumb[b-g87os3hkz7] {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
    background: var(--g-gray-100);
}
.cfd-cand-thumb1[b-g87os3hkz7] {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
    background: var(--g-gray-100);
}
.cfd-cand-thumb-lg[b-g87os3hkz7] { width: 44px; height: 44px; }

.cfd-avatar-initials[b-g87os3hkz7] {
       width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: var(--g-fw-semibold);
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-transform: uppercase;
}
.cfd-avatar-initial[b-g87os3hkz7] {
       width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: var(--g-fw-semibold);
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-transform: uppercase;
}
.cfd-avatar-initials-lg[b-g87os3hkz7] { width: 36px; height: 36px; font-size: var(--g-fs-body); }

.cfd-close[b-g87os3hkz7] {
    background: none;
    border: none;
    color: var(--g-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: var(--g-space-12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--g-transition), color var(--g-transition);
}
.cfd-close:hover[b-g87os3hkz7] { background: var(--g-gray-100); color: var(--g-text-heading); }

/* ===== BODY ===== */
.cfd-body[b-g87os3hkz7] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--g-space-20) var(--g-space-24);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-16);
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.cfd-body[b-g87os3hkz7]::-webkit-scrollbar { width: 8px; }
.cfd-body[b-g87os3hkz7]::-webkit-scrollbar-thumb { background: var(--g-gray-300); border-radius: var(--g-radius-full); }
.cfd-body[b-g87os3hkz7]::-webkit-scrollbar-track { background: transparent; }

/* ===== CARD BASE ===== */
.cfd-card[b-g87os3hkz7] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-16) var(--g-space-20);
    box-shadow: var(--g-shadow-xs);
}
.cfd-card-head[b-g87os3hkz7] { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--g-space-12); }
.cfd-card-title[b-g87os3hkz7] {
    margin: 0 0 var(--g-space-12);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    letter-spacing: -0.01em;
}
.cfd-card-meta[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }

/* ===== CONTEXT CARD ===== */
.cfd-context[b-g87os3hkz7] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--g-space-12);
    align-items: stretch;
}
.cfd-context-side[b-g87os3hkz7] { display: flex; flex-direction: column; gap: var(--g-space-10); min-width: 0; }
.cfd-context-head[b-g87os3hkz7] { display: flex; align-items: center; gap: var(--g-space-10); min-width: 0; }
.cfd-stack[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfd-link-strong[b-g87os3hkz7] {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfd-link-strong:hover[b-g87os3hkz7] { color: var(--g-brand); }
.cfd-link-strong.cfd-link-plain[b-g87os3hkz7] { color: var(--g-text-primary); }
.cfd-link-strong.cfd-link-plain:hover[b-g87os3hkz7] {color: var(--g-brand); }
.cfd-sub[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-secondary); }

.cfd-chip-row[b-g87os3hkz7] { display: flex; flex-wrap: wrap; gap: var(--g-space-6); }
.cfd-chip[b-g87os3hkz7] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-label);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-full);
    padding: 3px 12px;
    font-weight: var(--g-fw-medium);
}
.cfd-meta-line[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.cfd-meta-line b[b-g87os3hkz7] { color: var(--g-text-label); font-weight: var(--g-fw-semibold); }
 
.cfd-icon-row[b-g87os3hkz7] { display: flex; gap: var(--g-space-6); }
.cfd-icon-btn[b-g87os3hkz7] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    color: var(--g-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--g-transition), color var(--g-transition), border-color var(--g-transition);
}
.cfd-icon-btn:hover[b-g87os3hkz7] { background: var(--g-brand-bg); color: var(--g-brand); border-color: var(--g-brand-border); }

.cfd-match-divider[b-g87os3hkz7] {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 0 var(--g-space-6);
}
.cfd-match-line[b-g87os3hkz7] { width: 1px; flex: 1; background: var(--g-border); min-height: 14px; }
.cfd-match-icon[b-g87os3hkz7] {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #a9a9a9;
    border: 1px solid #d0d0d0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===== STATUS GRID ===== */
.cfd-status-grid[b-g87os3hkz7] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.cfd-status-cell[b-g87os3hkz7] {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: var(--g-space-12) var(--g-space-6);
    border: none;
    border-right: 1px solid var(--g-border-light);
    background: transparent;
    text-align: center;
}
.cfd-status-cell:last-child[b-g87os3hkz7] { border-right: none; }
.cfd-status-num[b-g87os3hkz7] { font-size: 1.5rem; font-weight: var(--g-fw-bold); line-height: 1.1; }
.cfd-status-label[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-secondary); font-weight: var(--g-fw-medium); }
.cfd-num-blue[b-g87os3hkz7]   { color: var(--g-brand); }
.cfd-num-muted[b-g87os3hkz7]  { color: var(--g-text-muted); }
.cfd-num-amber[b-g87os3hkz7]  { color: var(--g-warning-text); }
.cfd-num-red[b-g87os3hkz7]    { color: var(--g-error-text); }
.cfd-num-green[b-g87os3hkz7]  { color: var(--g-success-text); }

/* ===== RATE ===== */
.cfd-rate-row[b-g87os3hkz7] { display: flex; align-items: center; gap: var(--g-space-16); }
.cfd-rate-col[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfd-rate-col-end[b-g87os3hkz7] { align-items: flex-end; text-align: right; }
.cfd-rate-label[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-muted); font-weight: var(--g-fw-medium); }
.cfd-rate-value[b-g87os3hkz7] {
    font-size: 1.4375rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    line-height: 1.15;
}
 .cfd-rate-unit[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-muted); font-weight: var(--g-fw-normal); margin-left: 2px; }

.cfd-rate-bar[b-g87os3hkz7] {
    flex: 1;
    display: flex; align-items: center; gap: var(--g-space-8);
    min-width: 80px;
}
.cfd-rate-line[b-g87os3hkz7] { flex: 1; height: 1px; background: var(--g-border); }
.cfd-rate-pill[b-g87os3hkz7] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    padding: 2px 10px;
    border-radius: var(--g-radius-full);
    white-space: nowrap;
}
.cfd-rate-pill-above[b-g87os3hkz7] { color: var(--g-error-text); background: transparent; }
.cfd-rate-pill-below[b-g87os3hkz7] { color: var(--g-success-text); background: transparent; }

.cfd-rate-foot[b-g87os3hkz7] {
    margin-top: var(--g-space-12);
    padding-top: var(--g-space-12);
    border-top: 1px solid var(--g-border-light);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--g-space-12);
}
.cfd-link-doc[b-g87os3hkz7] {
    background: none; border: none; cursor: pointer;
    color: var(--g-brand); font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0;
}
.cfd-link-doc:hover[b-g87os3hkz7] { text-decoration: underline; }

.cfd-toggle-wrap[b-g87os3hkz7] { display: flex; align-items: center; gap: var(--g-space-10); }
.cfd-toggle-label[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-label); }
.cfd-yn[b-g87os3hkz7] { display: inline-flex; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; }
.cfd-yn-btn[b-g87os3hkz7] {
    border: none; background: var(--g-bg-card);
    padding: 5px 14px;
    font-size: var(--g-fs-xs); font-weight: var(--g-fw-semibold);
    color: var(--g-text-label); cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
}
.cfd-yn-btn:hover[b-g87os3hkz7] { background: var(--g-gray-50); }
.cfd-yn-on[b-g87os3hkz7] { background: var(--g-success); color: var(--g-bg-card); }
.cfd-yn-on-no[b-g87os3hkz7] { background: var(--g-error); color: var(--g-bg-card); }
.cfd-yn-on:hover[b-g87os3hkz7] { background: var(--g-success); }
.cfd-yn-on-no:hover[b-g87os3hkz7] { background: var(--g-error); }

/* ===== SKILLS ===== */
.cfd-skills-row[b-g87os3hkz7] {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--g-space-16);
}
.cfd-skill-pills[b-g87os3hkz7] { display: flex; flex-wrap: wrap; gap: var(--g-space-6); flex: 1; }
.cfd-skill-pill[b-g87os3hkz7] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--g-brand-bg);
    color: var(--g-brand);
    border: 1px solid var(--g-brand-border);
    padding: 4px 10px;
    border-radius: var(--g-radius-full);
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-medium);
}
.cfd-skill-yrs[b-g87os3hkz7] {
    font-size: var(--g-fs-xxs);
    color: var(--g-text-muted);
    background: var(--g-bg-card);
    border-radius: var(--g-radius-full);
    padding: 0 6px;
    font-weight: var(--g-fw-semibold);
}
.cfd-skill-more[b-g87os3hkz7] {
    background: none; border: 1px dashed var(--g-border); cursor: pointer;
    border-radius: var(--g-radius-full);
    padding: 4px 10px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-label);
}
.cfd-skill-more:hover[b-g87os3hkz7] { background: var(--g-gray-50); border-color: var(--g-brand); color: var(--g-brand); }

.cfd-skill-score[b-g87os3hkz7] { display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; }
.cfd-skill-pct[b-g87os3hkz7] { font-size: var(--g-fs-display); font-weight: var(--g-fw-bold); color: var(--g-brand); line-height: 1; }
.cfd-skill-pct-label[b-g87os3hkz7] { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.cfd-skill-verdict[b-g87os3hkz7] { font-size: var(--g-fs-xxs); color: var(--g-warning-text); font-weight: var(--g-fw-semibold); margin-top: 2px; }

/* ===== FIT ANALYSIS ===== */
.cfd-fit-row[b-g87os3hkz7] {
    display: flex; align-items: center; gap: var(--g-space-20);
    flex-wrap: wrap;
}
.cfd-donut-wrap[b-g87os3hkz7] { flex-shrink: 0; }
.cfd-donut[b-g87os3hkz7] { display: block; }
[b-g87os3hkz7] .cfd-donut-label { font-size: 7px; fill: var(--g-text-muted); font-weight: var(--g-fw-medium); }
[b-g87os3hkz7] .cfd-donut-pct { font-size: 16px; font-weight: var(--g-fw-bold); fill: var(--g-text-heading); }
[b-g87os3hkz7] .cfd-donut-seg { transition: opacity 220ms var(--g-ease); cursor: pointer; }
[b-g87os3hkz7] .cfd-donut-seg:hover { opacity: 0.85; }
[b-g87os3hkz7] .cfd-donut-dim { opacity: 0.25; }
[b-g87os3hkz7] .cfd-donut-dim:hover { opacity: 0.55; }

.cfd-fit-legend[b-g87os3hkz7] { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.cfd-legend-row[b-g87os3hkz7] {
    display: flex; align-items: center; gap: var(--g-space-10);
    background: none; border: 1px solid transparent;
    padding: 8px 12px; border-radius: var(--g-radius-md);
    cursor: pointer; text-align: left;
    transition: background var(--g-transition), border-color var(--g-transition);
}
.cfd-legend-row:hover[b-g87os3hkz7] { background: var(--g-gray-50); }
.cfd-legend-active[b-g87os3hkz7] { background: var(--g-gray-50); border-color: var(--g-border-light); }
.cfd-legend-dot[b-g87os3hkz7] { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--g-text-muted); }
.cfd-legend-row[data-metric="AI_RESUME"] .cfd-legend-dot[b-g87os3hkz7] { background: #3b82f6; }
.cfd-legend-row[data-metric="LINKEDIN"]  .cfd-legend-dot[b-g87os3hkz7] { background: var(--g-success); }
.cfd-legend-row[data-metric="MATCHING_SKILLS"] .cfd-legend-dot[b-g87os3hkz7] { background: #f59e0b; }
.cfd-legend-row[data-metric="RECRUITER"] .cfd-legend-dot[b-g87os3hkz7] { background: var(--g-error); }
.cfd-legend-name[b-g87os3hkz7] { flex: 1; font-size: var(--g-fs-sm); color: var(--g-text-body); font-weight: var(--g-fw-medium); }
.cfd-legend-val[b-g87os3hkz7] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }

.cfd-link-summary[b-g87os3hkz7] {
    margin-top: var(--g-space-6);
    margin-left: var(--g-space-12);
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
    text-decoration: none;
    align-self: flex-start;
    font-weight: var(--g-fw-medium);
}
.cfd-link-summary:hover[b-g87os3hkz7] { color: var(--g-brand); text-decoration: underline; }

.cfd-overall-card[b-g87os3hkz7] {
    margin-top: var(--g-space-16);
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    border-left: 3px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    padding: var(--g-space-12) var(--g-space-16);
    transition: border-color var(--g-transition);
}
.cfd-overall-card[data-metric="AI_RESUME"][b-g87os3hkz7] { border-left-color: #3b82f6; }
.cfd-overall-card[data-metric="LINKEDIN"][b-g87os3hkz7]  { border-left-color: var(--g-success); }
.cfd-overall-card[data-metric="MATCHING_SKILLS"][b-g87os3hkz7] { border-left-color: #f59e0b; }
.cfd-overall-card[data-metric="RECRUITER"][b-g87os3hkz7] { border-left-color: var(--g-error); }
.cfd-overall-card[data-metric="OVERALL"][b-g87os3hkz7]   { border-left-color: var(--g-brand); }
.cfd-overall-card[data-metric="AI_RESUME"] .cfd-overall-dot[b-g87os3hkz7] { background: #3b82f6; }
.cfd-overall-card[data-metric="LINKEDIN"]  .cfd-overall-dot[b-g87os3hkz7] { background: var(--g-success); }
.cfd-overall-card[data-metric="MATCHING_SKILLS"] .cfd-overall-dot[b-g87os3hkz7] { background: #f59e0b; }
.cfd-overall-card[data-metric="RECRUITER"] .cfd-overall-dot[b-g87os3hkz7] { background: var(--g-error); }
.cfd-overall-card[data-metric="AI_RESUME"] .cfd-overall-pill[b-g87os3hkz7] { color: #3b82f6; border-color: #93c5fd; }
.cfd-overall-card[data-metric="LINKEDIN"]  .cfd-overall-pill[b-g87os3hkz7] { color: var(--g-success-text); border-color: var(--g-success-border); }
.cfd-overall-card[data-metric="MATCHING_SKILLS"] .cfd-overall-pill[b-g87os3hkz7] { color: #b45309; border-color: #fcd34d; }
.cfd-overall-card[data-metric="RECRUITER"] .cfd-overall-pill[b-g87os3hkz7] { color: var(--g-error-text); border-color: var(--g-error-border); }
.cfd-overall-head[b-g87os3hkz7] {
    display: flex; align-items: center; gap: var(--g-space-8);
    margin-bottom: var(--g-space-6);
}
.cfd-overall-dot[b-g87os3hkz7] { width: 8px; height: 8px; border-radius: 50%; background: var(--g-brand); }
.cfd-overall-title[b-g87os3hkz7] {
    font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading);
    flex: 1;
}
.cfd-overall-pill[b-g87os3hkz7] {
    font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold);
    background: var(--g-bg-card); color: var(--g-brand);
    border: 1px solid var(--g-brand-border);
    border-radius: var(--g-radius-full);
    padding: 2px 10px;
}
.cfd-overall-text[b-g87os3hkz7] {
    margin: 0;
    font-size: var(--g-fs-xs);
    color: var(--g-text-body);
    line-height: var(--g-lh-relaxed);
}

/* ===== PROFILE ANALYSIS ===== */
.cfd-profile-list[b-g87os3hkz7] { display: flex; flex-direction: column; gap: var(--g-space-8); }
.cfd-profile-item[b-g87os3hkz7] {
    display: flex; align-items: flex-start; gap: var(--g-space-10);
    padding: var(--g-space-10) var(--g-space-12);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
}
.cfd-profile-item > div[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 2px; }
.cfd-profile-icon[b-g87os3hkz7] {
    width: 22px; height: 22px;
    border-radius: var(--g-radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cfd-profile-ok .cfd-profile-icon[b-g87os3hkz7] { background: var(--g-success-bg); color: var(--g-success-text); }
.cfd-profile-warn .cfd-profile-icon[b-g87os3hkz7] { background: var(--g-warning-bg); color: var(--g-warning-text); }
.cfd-profile-ok .cfd-profile-title[b-g87os3hkz7] { color: var(--g-success-text); }
.cfd-profile-warn .cfd-profile-title[b-g87os3hkz7] { color: var(--g-warning-text); }
.cfd-profile-title[b-g87os3hkz7] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); }
.cfd-profile-text[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-body); }

/* ===== ACTIVITY ===== */
.cfd-activity-title[b-g87os3hkz7] { display: inline-flex; align-items: center; gap: 6px; color: var(--g-text-label); }
.cfd-timeline[b-g87os3hkz7] {
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
}
.cfd-tl-item[b-g87os3hkz7] {
    position: relative;
    padding-left: 32px;
    padding-bottom: var(--g-space-16);
}
.cfd-tl-item[b-g87os3hkz7]::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--g-border);
}
.cfd-tl-last[b-g87os3hkz7]::before { display: none; }

.cfd-tl-icon[b-g87os3hkz7] {
    position: absolute;
    left: 0; top: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--g-bg-card);
    z-index: 1;
}
.cfd-tl-approve[b-g87os3hkz7] { border: 2px solid var(--g-success); color: var(--g-success); }
.cfd-tl-submitted[b-g87os3hkz7] { border: 2px solid var(--g-text-muted); color: var(--g-text-muted); }
.cfd-tl-reject[b-g87os3hkz7] { border: 2px solid var(--g-error); color: var(--g-error); }
.cfd-tl-hold[b-g87os3hkz7] { border: 2px solid var(--g-warning); color: var(--g-warning); }
.cfd-tl-interview[b-g87os3hkz7] { border: 2px solid var(--g-brand); color: var(--g-brand); }
.cfd-tl-ai[b-g87os3hkz7] { border: 2px solid var(--g-brand); color: var(--g-brand); }

.cfd-tl-content[b-g87os3hkz7] { display: flex; flex-direction: column; gap: 4px; }
.cfd-tl-heading[b-g87os3hkz7] { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }
.cfd-tl-by[b-g87os3hkz7] { display: flex; align-items: center; gap: 6px; font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.cfd-tl-avatar[b-g87os3hkz7] { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.cfd-tl-user[b-g87os3hkz7] { color: var(--g-text-label); font-weight: var(--g-fw-medium); }
.cfd-tl-dot[b-g87os3hkz7] { color: var(--g-text-muted); }
.cfd-tl-when[b-g87os3hkz7] { color: var(--g-text-muted); }
.cfd-tl-msg[b-g87os3hkz7] {
    margin: 6px 0 0;
    font-size: var(--g-fs-xs);
    color: var(--g-text-body);
    line-height: var(--g-lh-relaxed);
    background: var(--g-bg-section);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    padding: var(--g-space-10) var(--g-space-12);
}

/* Interview date/time grid */
.cfd-tl-invite-grid[b-g87os3hkz7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-10);
    margin: 8px 0 4px;
}
.cfd-tl-invite-item[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    gap: var(--g-space-8);
    background: var(--g-bg-section);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    padding: var(--g-space-8) var(--g-space-10);
}
.cfd-tl-invite-icon[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--g-radius-sm);
    flex-shrink: 0;
}
.cfd-tl-invite-blue[b-g87os3hkz7] { background: #eff6ff; color: #3b82f6; }
.cfd-tl-invite-teal[b-g87os3hkz7] { background: #f0fdfa; color: #14b8a6; }
.cfd-tl-invite-amber[b-g87os3hkz7] { background: #fffbeb; color: #f59e0b; }
.cfd-tl-invite-violet[b-g87os3hkz7] { background: #f5f3ff; color: #8b5cf6; }
.cfd-tl-invite-label[b-g87os3hkz7] {
    display: block;
    font-size: 10px;
    color: var(--g-text-muted);
    letter-spacing: 0.02em;
}
.cfd-tl-invite-value[b-g87os3hkz7] {
    display: block;
    font-size: var(--g-fs-xs);
    font-weight: 600;
    color: var(--g-text-heading);
}

/* ===== STICKY FOOTER ===== */
.cfd-footer[b-g87os3hkz7] {
    flex-shrink: 0;
    background: var(--g-bg-card);
    border-top: 1px solid var(--g-border);
    padding: var(--g-space-12) var(--g-space-24);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--g-space-12);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
    z-index: 2;
}
.cfd-footer-meta[b-g87os3hkz7] { font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.cfd-footer-meta b[b-g87os3hkz7] { color: var(--g-text-label); font-weight: var(--g-fw-semibold); }
.cfd-footer-cta[b-g87os3hkz7] {
    background: var(--g-brand);
    color: var(--g-bg-card);
    border: none;
    padding: 10px 20px;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    font-weight: var(--g-fw-semibold);
    cursor: pointer;
    box-shadow: var(--g-shadow-xs);
    transition: background var(--g-transition), transform var(--g-transition);
}
.cfd-footer-cta:hover[b-g87os3hkz7] { background: var(--g-indigo-dark); transform: translateY(-1px); }
.cfd-footer-cta:active[b-g87os3hkz7] { transform: translateY(0); }

/* ===== RESUME MODAL (above drawer) ===== */
.cfd-resume-backdrop[b-g87os3hkz7] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2100;
    display: flex; align-items: center; justify-content: center;
    padding: var(--g-space-20);
}
.cfd-resume-modal[b-g87os3hkz7] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-xl);
    box-shadow: var(--g-shadow-lg);
    width: 100%; max-width: 960px; height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.cfd-resume-head[b-g87os3hkz7] {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--g-space-12) var(--g-space-20);
    border-bottom: 1px solid var(--g-border);
}
.cfd-resume-title[b-g87os3hkz7] { margin: 0; font-size: var(--g-fs-card-title); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }
.cfd-resume-body[b-g87os3hkz7] {
    flex: 1; overflow-y: auto;
    background: var(--g-gray-100);
}
.cfd-spinner[b-g87os3hkz7] {
    width: 32px; height: 32px;
    border: 3px solid var(--g-gray-200);
    border-top-color: var(--g-brand);
    border-radius: 50%;
    animation: cfd-spin-b-g87os3hkz7 0.7s linear infinite;
}
@keyframes cfd-spin-b-g87os3hkz7 { to { transform: rotate(360deg); } }

.cfd-resume-loading[b-g87os3hkz7] {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0;
}
.cfd-resume-loading-text[b-g87os3hkz7] {
    color: var(--g-text-muted); font-size: 14px; margin: 0;
}
.cfd-resume-docx[b-g87os3hkz7] {
    width: 100%; height: 100%; overflow: auto; background: #fff; border-radius: 8px; padding: 16px;
}
.cfd-resume-error[b-g87os3hkz7] {
    text-align: center; padding: 48px 0; color: #dc2626;
}
.cfd-resume-error svg[b-g87os3hkz7] { margin-bottom: 12px; }
.cfd-resume-error-text[b-g87os3hkz7] { font-weight: 500; margin: 0; }
.cfd-resume-empty[b-g87os3hkz7] {
    text-align: center; padding: 48px 0; color: var(--g-text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .cfd-status-grid[b-g87os3hkz7] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .cfd-panel[b-g87os3hkz7] { width: 100%; }
    .cfd-context[b-g87os3hkz7] { grid-template-columns: 1fr; }
    .cfd-match-divider[b-g87os3hkz7] { flex-direction: row; padding: var(--g-space-8) 0; }
    .cfd-match-line[b-g87os3hkz7] { width: auto; height: 1px; min-height: 0; flex: 1; }
    .cfd-meta-end[b-g87os3hkz7] { text-align: left; }
    .cfd-icon-row[b-g87os3hkz7] { justify-content: flex-start; }
    .cfd-rate-row[b-g87os3hkz7] { flex-direction: column; align-items: stretch; gap: var(--g-space-8); }
    .cfd-rate-col-end[b-g87os3hkz7] { align-items: flex-start; text-align: left; }
    .cfd-rate-bar[b-g87os3hkz7] { order: 3; }
    .cfd-skills-row[b-g87os3hkz7] { flex-direction: column-reverse; }
    .cfd-skill-score[b-g87os3hkz7] { flex-direction: row; align-items: baseline; gap: 8px; align-self: flex-start; }
    .cfd-fit-row[b-g87os3hkz7] { flex-direction: column; align-items: stretch; }
    .cfd-fit-legend[b-g87os3hkz7] { min-width: 0; }
    .cfd-header[b-g87os3hkz7] { padding: var(--g-space-12) var(--g-space-16); }
    .cfd-body[b-g87os3hkz7] { padding: var(--g-space-16); }
    .cfd-footer[b-g87os3hkz7] { padding: var(--g-space-12) var(--g-space-16); flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .cfd-status-grid[b-g87os3hkz7] { grid-template-columns: repeat(2, 1fr); }
    .cfd-status-num[b-g87os3hkz7] { font-size: 1.25rem; }
    .cfd-card[b-g87os3hkz7] { padding: var(--g-space-12) var(--g-space-16); }
    .cfd-footer-meta[b-g87os3hkz7] { flex: 1 1 100%; order: 2; }
    .cfd-footer-cta[b-g87os3hkz7] { flex: 1; }
    .cfd-resume-modal[b-g87os3hkz7] { height: 100vh; max-width: 100%; border-radius: 0; }
    .cfd-resume-doc[b-g87os3hkz7] { padding: var(--g-space-20); min-height: 800px; }
}

/* ═══ Shimmer Skeleton Loader ═══ */
@keyframes cfd-shimmer-b-g87os3hkz7 {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.cfd-shimmer-wrap[b-g87os3hkz7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0;
}

.cfd-shimmer-card[b-g87os3hkz7] {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 24px;
}

.cfd-shimmer-row[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cfd-shimmer-circle[b-g87os3hkz7] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cfd-shimmer-b-g87os3hkz7 1.05s linear infinite;
}

.cfd-shimmer-lines[b-g87os3hkz7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.cfd-shimmer-line[b-g87os3hkz7] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cfd-shimmer-b-g87os3hkz7 1.05s linear infinite;
}

.cfd-shimmer-line-full[b-g87os3hkz7] { width: 100%; }
.cfd-shimmer-line-lg[b-g87os3hkz7] { width: 80%; }
.cfd-shimmer-line-md[b-g87os3hkz7] { width: 50%; }
.cfd-shimmer-line-sm[b-g87os3hkz7] { width: 35%; }

.cfd-shimmer-bar-row[b-g87os3hkz7] {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.cfd-shimmer-bar[b-g87os3hkz7] {
    flex: 1;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cfd-shimmer-b-g87os3hkz7 1.05s linear infinite;
}

.cfd-shimmer-chip-row[b-g87os3hkz7] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cfd-shimmer-chip[b-g87os3hkz7] {
    width: 72px;
    height: 28px;
    border-radius: 14px;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cfd-shimmer-b-g87os3hkz7 1.05s linear infinite;
}

.cfd-shimmer-row-mt[b-g87os3hkz7] { margin-top: 20px; }
.cfd-shimmer-mb16[b-g87os3hkz7] { margin-bottom: 16px; }
.cfd-shimmer-mb12[b-g87os3hkz7] { margin-bottom: 12px; }
.cfd-shimmer-flex1[b-g87os3hkz7] { flex: 1; }

.cfd-resume-iframe[b-g87os3hkz7] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.cfd-shimmer-donut-row[b-g87os3hkz7] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.cfd-shimmer-donut[b-g87os3hkz7] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: cfd-shimmer-b-g87os3hkz7 1.05s linear infinite;
}

/* ── Agentic AI Report section ── */
.cfd-ai-spark[b-g87os3hkz7] { color: #f59e0b; }
.cfd-ai-heading[b-g87os3hkz7] { color: #ea580c; font-size: 11.5px; font-weight: 700; margin: 14px 0 5px; }
.cfd-ai-text[b-g87os3hkz7] { font-size: 13px; color: #334155; line-height: 1.5; margin: 0 0 4px; }
.cfd-ai-points[b-g87os3hkz7] { margin: 4px 0; padding-left: 18px; }
.cfd-ai-points li[b-g87os3hkz7] { font-size: 13px; color: #334155; line-height: 1.6; }
.cfd-ai-item[b-g87os3hkz7] { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.cfd-ai-item:last-child[b-g87os3hkz7] { border-bottom: none; }
.cfd-ai-q[b-g87os3hkz7] { font-size: 13px; font-weight: 600; color: #1e293b; margin: 0 0 4px; }
.cfd-ai-q-mark[b-g87os3hkz7] { color: #2563eb; font-weight: 700; margin-right: 4px; }
.cfd-ai-a[b-g87os3hkz7] { font-size: 12.5px; color: #334155; margin: 0; line-height: 1.5; }
.cfd-ai-a-mark[b-g87os3hkz7] { color: #16a34a; font-weight: 700; margin-right: 4px; }
/* /Components/Shared/CandidateModals/CandidateModalBase.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CandidateModalBase – AI Recommendation Modal
   ═══════════════════════════════════════════ */

/* ── Overlay ── */
.cs-modal-overlay[b-ruswxzin81] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: csModalFadeIn-b-ruswxzin81 0.2s ease-out;
}

@keyframes csModalFadeIn-b-ruswxzin81 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes csModalSlideDown-b-ruswxzin81 {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Modal Card ── */
.cs-eval-modal[b-ruswxzin81] {
    background: #fff;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: csModalSlideDown-b-ruswxzin81 0.25s ease-out;
    position: relative;
    overflow: hidden;
}

/* ── Modal Header ── */
.cs-modal-header[b-ruswxzin81] {
   display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 20px;
    border-bottom: 1px solid var(--bs-gray-100);
}

.cs-modal-heading[b-ruswxzin81] {
    font-size: var(--g-fs-popup-modal);
    font-weight: 700;
   color: var(--g-gray-800);
    margin: 0;
    line-height: 1.3;
}

.cs-modal-heading.cs-eval-title-reject[b-ruswxzin81] {
    color: var(--g-error, #ef4444);
}

.cs-modal-close-btn[b-ruswxzin81] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--g-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.cs-modal-close-btn:hover[b-ruswxzin81] {
    background: #f1f5f9;
    color: var(--g-text-body, #334155);
}

/* ── Two Cards Side by Side ── */
.cs-cards-row[b-ruswxzin81] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 32px 0;
}

.cs-profile-card[b-ruswxzin81] {
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.cs-card-label[b-ruswxzin81] {
       font-size: var(--g-fs-xxxs);
    font-weight: 700;
    color: var(--g-text-muted);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.cs-card-label-blue[b-ruswxzin81] {
    color: var(--g-brand, #2c7cff);
}

.cs-card-body[b-ruswxzin81] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Avatar image for candidate */
.cs-avatar-circle[b-ruswxzin81] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-primary-gradient);
}

.cs-avatar-initials[b-ruswxzin81] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1;
}

.cs-avatar-img[b-ruswxzin81] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Job requirement avatar */
.cs-req-avatar-wrap[b-ruswxzin81] {
    position: relative;
    flex-shrink: 0;
}

.cs-req-job-thumb[b-ruswxzin81] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    background: #f8fafc;
}

.cs-req-job-thumb img[b-ruswxzin81] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-req-client-badge[b-ruswxzin81] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-req-client-badge img[b-ruswxzin81] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card info */
.cs-card-info[b-ruswxzin81] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cs-card-name[b-ruswxzin81] {
    font-size: var(--g-fs-candidate-subtitle);
    font-weight: 700;
    color: var(--g-text-heading, #0f172a);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-card-role[b-ruswxzin81] {
    font-size: var(--g-space-12);
    color: var(--g-gray-500);
    font-weight: 400;
    line-height: 1.3;
}

/* Card meta row (location | experience) */
.cs-card-meta-row[b-ruswxzin81] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.cs-card-meta-item[b-ruswxzin81] {
      display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--g-text-secondary, #64748b);
    font-weight: 400;
    font-size: var(--g-space-12);
    color: var(--g-gray-500);
    text-transform: capitalize;
}

.cs-card-meta-item svg[b-ruswxzin81] {
    flex-shrink: 0;
    color: var(--g-gray-400);
}

.cs-card-meta-item-data[b-ruswxzin81] {
    font-weight: 400;
    font-size: var(--g-space-12);
    color: var(--g-gray-500);
    text-transform: capitalize;
}

.cs-card-meta-sep[b-ruswxzin81] {
    color: #cbd5e1;
    font-size: var(--g-fs-xxs, 0.6875rem);
}

/* ── Score + Competency + AI Body ── */
.cs-eval-body[b-ruswxzin81] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 24px 32px;
    background: #f8fafc;
    margin: 16px 32px 0;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.cs-eval-score[b-ruswxzin81] {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.cs-score-ring[b-ruswxzin81] {
    width: 100%;
    height: 100%;
}

.cs-score-progress[b-ruswxzin81] {
    transition: stroke-dashoffset 1s ease-out;
}

.cs-score-text[b-ruswxzin81] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cs-score-value[b-ruswxzin81] {
    font-size: var(--g-fs-chart-score, 32px);
    font-weight: 800;
    color: var(--g-text-heading, #0f172a);
    line-height: 1;
    letter-spacing: -0.02em;
}

.cs-score-label[b-ruswxzin81] {
        font-size: var(--g-space-8);
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ── Eval Content (right of score) ── */
.cs-eval-content[b-ruswxzin81] {
    flex: 1;
    min-width: 0;
}

/* Competency Alignment */
.cs-comp-heading[b-ruswxzin81] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 700;
    color: var(--sidebar-icon);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.cs-skill-pills[b-ruswxzin81] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cs-skill-pills-expanded[b-ruswxzin81] {
    flex-wrap: wrap;
}

.cs-skill-viewmore-btn[b-ruswxzin81] {
    background: none;
    border: none;
    color: var(--g-primary, #2563eb);
    font-size: var(--g-fs-xxs, 0.6875rem);
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.cs-skill-viewmore-btn:hover[b-ruswxzin81] {
    text-decoration: underline;
}

.cs-skill-pill[b-ruswxzin81] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius:6px;
    font-size: var(--g-fs-sm, 0.8125rem);
    font-weight: 600;
    white-space: nowrap;
}

.cs-skill-pill-ok[b-ruswxzin81] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.cs-skill-pill-ok svg[b-ruswxzin81] {
    color: var(--g-success, #22c55e);
}

.cs-skill-pill-warn[b-ruswxzin81] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.cs-skill-pill-warn svg[b-ruswxzin81] {
    color: #ef4444;
}

/* AI Recommendation */
.cs-ai-heading[b-ruswxzin81] {
    font-size: var(--g-fs-xs);
    font-weight: 700;
    color: var(--sidebar-icon);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-ai-dot[b-ruswxzin81] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g-brand, #2c7cff);
    display: inline-block;
}

.cs-ai-text[b-ruswxzin81] {
  font-size: var(--g-fs-section-subtitle);
    color: var(--sidebar-text);
    line-height: 1.65;
    margin: 0;
}

/* ── Middle Content Wrapper ── */
.cs-middle-wrap[b-ruswxzin81] {
    padding: 16px 32px 0;
}

/* ── Actions ── */
.cs-eval-actions[b-ruswxzin81] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px 24px;
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
}

/* ── Buttons (scoped for modal children via ::deep) ── */
[b-ruswxzin81] .cs-btn-modal-cancel {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 36px;
    display: flex;
    align-items: center;
}

[b-ruswxzin81] .cs-btn-modal-cancel:hover {
    background: #f8fafc;
}

[b-ruswxzin81] .cs-btn-modal-primary {
    padding: 8px 28px;
    border: none;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, opacity 0.15s;
    font-family: inherit;
    height: 36px;
}

[b-ruswxzin81] .cs-btn-modal-primary:hover {
    background: #1e293b;
}

[b-ruswxzin81] .cs-btn-modal-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

[b-ruswxzin81] .cs-btn-modal-reject {
    padding: 8px 28px;
    border: none;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
    font-family: inherit;
    height: 36px;
}

[b-ruswxzin81] .cs-btn-modal-reject:hover {
    background: #dc2626;
}

/* ── DB Status ── */
[b-ruswxzin81] .cs-eval-db-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--g-brand, #2c7cff);
    padding: 14px 18px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-weight: 600;
}

[b-ruswxzin81] .cs-eval-db-status svg {
    flex-shrink: 0;
    color: var(--g-brand, #2c7cff);
    width: 18px;
    height: 18px;
}

/* ── Existing Candidate Info ── */
[b-ruswxzin81] .cs-existing-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 8px;
}

[b-ruswxzin81] .cs-existing-info-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

[b-ruswxzin81] .cs-existing-info-status svg {
    flex-shrink: 0;
    color: #f59e0b;
    width: 18px;
    height: 18px;
}

[b-ruswxzin81] .cs-existing-info-detail {
    font-size: 12px;
    color: #78716c;
    padding-left: 26px;
}

[b-ruswxzin81] .cs-existing-info-detail strong {
    color: #44403c;
}

/* ── Challenge Input ── */
[b-ruswxzin81] .cs-challenge-field {
    margin-top: 12px;
    margin-bottom: 4px;
}

[b-ruswxzin81] .cs-challenge-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-text-body, #334155);
    margin-bottom: 8px;
}

[b-ruswxzin81] .cs-challenge-required {
    color: var(--g-error, #ef4444);
}

[b-ruswxzin81] .cs-challenge-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: var(--g-text-heading, #0f172a);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
    min-height: 80px;
    resize: vertical;
}

[b-ruswxzin81] .cs-challenge-input:focus {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(0, 111, 249, 0.1);
}

[b-ruswxzin81] .cs-challenge-input.cs-input-error {
    border-color: var(--g-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

[b-ruswxzin81] .cs-challenge-error {
    font-size: var(--g-fs-xxs, 0.6875rem);
    color: var(--g-error, #ef4444);
    margin-top: 4px;
    display: block;
}

/* ═══ RESPONSIVE ═══ */

@media (max-width: 1440px) {
    .cs-eval-modal[b-ruswxzin81] { max-width: 815px;max-height:580px; overflow-y: auto; }
    .cs-cards-row[b-ruswxzin81] { padding: 18px 28px 0; }
    .cs-eval-body[b-ruswxzin81] { margin: 14px 28px 0; padding: 20px 24px; }
    .cs-middle-wrap[b-ruswxzin81] { padding: 14px 28px 0; }
    .cs-eval-actions[b-ruswxzin81] { padding: 18px 28px 22px; }
}

@media (max-width: 1024px) {
    .cs-eval-modal[b-ruswxzin81] { max-width: 620px; }
    .cs-modal-header[b-ruswxzin81] { padding: 20px 24px 16px; }
    .cs-cards-row[b-ruswxzin81] { padding: 16px 24px 0; gap: 12px; }
    .cs-eval-body[b-ruswxzin81] { margin: 14px 24px 0; padding: 18px 20px; gap: 20px; }
    .cs-eval-score[b-ruswxzin81] { width: 110px; height: 110px; }
    .cs-score-value[b-ruswxzin81] { font-size: 1.5rem; }
    .cs-middle-wrap[b-ruswxzin81] { padding: 14px 24px 0; }
    .cs-eval-actions[b-ruswxzin81] { padding: 16px 24px 20px; }
}

@media (max-width: 768px) {
    .cs-eval-modal[b-ruswxzin81] { max-width: 520px; border-radius: 14px; }
    .cs-modal-header[b-ruswxzin81] { padding: 18px 20px 14px; }
    .cs-modal-heading[b-ruswxzin81] { font-size: var(--g-fs-section-title, 1.125rem); }
    .cs-cards-row[b-ruswxzin81] { grid-template-columns: 1fr; padding: 14px 20px 0; gap: 10px; }
    .cs-eval-body[b-ruswxzin81] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 14px 20px 0;
        padding: 18px 16px;
        gap: 16px;
    }
    .cs-eval-score[b-ruswxzin81] { width: 100px; height: 100px; }
    .cs-score-value[b-ruswxzin81] { font-size: var(--g-fs-page-title, 1.25rem); }
    .cs-skill-pills[b-ruswxzin81] { justify-content: center; }
    .cs-skill-pills-expanded[b-ruswxzin81] { flex-wrap: wrap; }
    .cs-ai-heading[b-ruswxzin81] { justify-content: center; }
    .cs-middle-wrap[b-ruswxzin81] { padding: 14px 20px 0; }
    .cs-eval-actions[b-ruswxzin81] { padding: 14px 20px 20px; }
    [b-ruswxzin81] .cs-existing-info { padding: 14px 16px; }
    [b-ruswxzin81] .cs-challenge-input { min-height: 70px; }
}

@media (max-width: 620px) {
    .cs-eval-modal[b-ruswxzin81] { max-width: 100%; margin: 12px; border-radius: 12px; }
    .cs-modal-header[b-ruswxzin81] { padding: 16px 16px 12px; }
    .cs-modal-heading[b-ruswxzin81] { font-size: var(--g-fs-card-title, 1rem); }
    .cs-cards-row[b-ruswxzin81] { padding: 12px 16px 0; gap: 8px; }
    .cs-profile-card[b-ruswxzin81] { padding: 12px 14px; }
    .cs-avatar-circle[b-ruswxzin81] { width: 36px; height: 36px; }
    .cs-req-job-thumb[b-ruswxzin81] { width: 36px; height: 36px; }
    .cs-req-client-badge[b-ruswxzin81] { width: 16px; height: 16px; }
    .cs-card-name[b-ruswxzin81] { font-size: var(--g-fs-xs, 0.75rem); }
    .cs-card-role[b-ruswxzin81] { font-size: var(--g-fs-xxs, 0.6875rem); }
    .cs-eval-body[b-ruswxzin81] { margin: 10px 16px 0; padding: 14px 14px; gap: 14px; }
    .cs-eval-score[b-ruswxzin81] { width: 88px; height: 88px; }
    .cs-score-value[b-ruswxzin81] { font-size: 1.25rem; }
    .cs-score-label[b-ruswxzin81] { font-size: var(--g-fs-xxs, 0.625rem); }
    .cs-skill-pill[b-ruswxzin81] { font-size: var(--g-fs-xxs, 0.625rem); padding: 4px 8px; }
    .cs-skill-pills[b-ruswxzin81] { }
    .cs-skill-pills-expanded[b-ruswxzin81] { flex-wrap: wrap; }
    .cs-ai-text[b-ruswxzin81] { font-size: 12px; }
    .cs-middle-wrap[b-ruswxzin81] { padding: 12px 16px 0; }
    .cs-eval-actions[b-ruswxzin81] {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        padding: 14px 16px 20px;
    }
    [b-ruswxzin81] .cs-btn-modal-cancel,
    [b-ruswxzin81] .cs-btn-modal-primary,
    [b-ruswxzin81] .cs-btn-modal-reject {
        width: 100%;
        justify-content: center;
    }
    [b-ruswxzin81] .cs-eval-db-status { font-size: 12px; gap: 8px; padding: 12px 14px; }
    [b-ruswxzin81] .cs-existing-info { padding: 12px 14px; }
    [b-ruswxzin81] .cs-existing-info-status { font-size: 12px; }
    [b-ruswxzin81] .cs-existing-info-detail { font-size: var(--g-fs-xxs, 0.6875rem); }
    [b-ruswxzin81] .cs-challenge-input { min-height: 60px; font-size: 12px; }
}
/* /Components/Shared/CandidateModals/ChallengeSubmissionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ChallengeSubmissionModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── DB Status ── */
.cs-eval-db-status[b-bv8vhkv4ob] {
   display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm, 13px);
    color: var(--g-brand);
    margin-bottom: 24px;
    font-weight: 600;
   }

.cs-eval-db-status svg[b-bv8vhkv4ob] {
    flex-shrink: 0;
    color: var(--g-info, #006ff9);
    width: 18px;
    height: 18px;
}

/* ── Challenge Input ── */
.cs-challenge-field[b-bv8vhkv4ob] {
    margin-bottom: 20px;
}

.cs-challenge-label[b-bv8vhkv4ob] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-text-body, #334155);
    margin-bottom: 8px;
}

.cs-challenge-required[b-bv8vhkv4ob] {
    color: var(--g-error, #ef4444);
}

.cs-challenge-input[b-bv8vhkv4ob] {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: var(--g-radius-md, 8px);
    background: #fff;
    color: var(--g-text-heading, #0f172a);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
    min-height: 80px;
    resize: vertical;
}

.cs-challenge-input:focus[b-bv8vhkv4ob] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(0, 111, 249, 0.1);
}

.cs-challenge-input.cs-input-error[b-bv8vhkv4ob] {
    border-color: var(--g-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.cs-challenge-error[b-bv8vhkv4ob] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    color: var(--g-error, #ef4444);
    margin-top: 4px;
    display: block;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-bv8vhkv4ob] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-bv8vhkv4ob] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateModals/ContinueSubmissionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ContinueSubmissionModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── Existing Candidate Info ── */
.cs-existing-info[b-9ozegj75t6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--g-radius-lg, 12px);
    margin-bottom: 20px;
}

.cs-existing-info-status[b-9ozegj75t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm, 13px);
    font-weight: 600;
    color: #92400e;
}

.cs-existing-info-status svg[b-9ozegj75t6] {
    flex-shrink: 0;
    color: #f59e0b;
    width: 18px;
    height: 18px;
}

.cs-existing-info-detail[b-9ozegj75t6] {
    font-size: 12px;
    color: #78716c;
    padding-left: 26px;
}

.cs-existing-info-detail strong[b-9ozegj75t6] {
    color: #44403c;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-9ozegj75t6] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-9ozegj75t6] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateModals/ExistingChallengeModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ExistingChallengeModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── Existing Candidate Info ── */
.cs-existing-info[b-jwrcrhwrtx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--g-radius-lg, 12px);
    margin-bottom: 20px;
}

.cs-existing-info-status[b-jwrcrhwrtx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm, 13px);
    font-weight: 600;
    color: #92400e;
}

.cs-existing-info-status svg[b-jwrcrhwrtx] {
    flex-shrink: 0;
    color: #f59e0b;
    width: 18px;
    height: 18px;
}

.cs-existing-info-detail[b-jwrcrhwrtx] {
    font-size: 12px;
    color: #78716c;
    padding-left: 26px;
}

.cs-existing-info-detail strong[b-jwrcrhwrtx] {
    color: #44403c;
}

/* ── Challenge Input ── */
.cs-challenge-field[b-jwrcrhwrtx] {
    margin-bottom: 20px;
}

.cs-challenge-label[b-jwrcrhwrtx] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-text-body, #334155);
    margin-bottom: 8px;
}

.cs-challenge-required[b-jwrcrhwrtx] {
    color: var(--g-error, #ef4444);
}

.cs-challenge-input[b-jwrcrhwrtx] {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: var(--g-radius-md, 8px);
    background: #fff;
    color: var(--g-text-heading, #0f172a);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
    min-height: 80px;
    resize: vertical;
}

.cs-challenge-input:focus[b-jwrcrhwrtx] {
    border-color: var(--g-brand, #2c7cff);
    box-shadow: 0 0 0 3px rgba(0, 111, 249, 0.1);
}

.cs-challenge-input.cs-input-error[b-jwrcrhwrtx] {
    border-color: var(--g-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.cs-challenge-error[b-jwrcrhwrtx] {
    font-size: var(--g-fs-xxs, 0.6875rem);
    color: var(--g-error, #ef4444);
    margin-top: 4px;
    display: block;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-jwrcrhwrtx] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-jwrcrhwrtx] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateModals/ExistingRejectModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ExistingRejectModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── Existing Candidate Info ── */
.cs-existing-info[b-0dgnjv378x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--g-radius-lg, 12px);
    margin-bottom: 20px;
}

.cs-existing-info-status[b-0dgnjv378x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-fs-sm, 13px);
    font-weight: 600;
    color: #92400e;
}

.cs-existing-info-status svg[b-0dgnjv378x] {
    flex-shrink: 0;
    color: #f59e0b;
    width: 18px;
    height: 18px;
}

.cs-existing-info-detail[b-0dgnjv378x] {
    font-size: 12px;
    color: #78716c;
    padding-left: 26px;
}

.cs-existing-info-detail strong[b-0dgnjv378x] {
    color: #44403c;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-0dgnjv378x] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-0dgnjv378x] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateModals/RejectSubmissionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   RejectSubmissionModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── DB Status ── */
.cs-eval-db-status[b-zwjs1dd99b] {
   display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm, 13px);
    color: var(--g-brand);
    margin-bottom: 24px;
    font-weight: 600;
}

.cs-eval-db-status svg[b-zwjs1dd99b] {
    flex-shrink: 0;
    color: var(--g-info, #006ff9);
    width: 18px;
    height: 18px;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-zwjs1dd99b] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-zwjs1dd99b] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateModals/SubmissionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SubmissionModal – scoped styles
   ═══════════════════════════════════════════ */

/* ── AI Evaluation Sections ── */
.cs-ai-section[b-iq7dws3c8w] {
    margin-bottom: 16px;
    padding: 0 4px;
}

.cs-ai-section-title[b-iq7dws3c8w] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--g-brand, #2c7cff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
}

.cs-ai-text[b-iq7dws3c8w] {
    font-size: 13px;
    color: var(--g-text-primary, #1e293b);
    line-height: 1.6;
    margin: 0;
}

.cs-ai-text-pre[b-iq7dws3c8w] {
    white-space: pre-wrap;
    font-size: 12px;
    background: #f8fafc;
    border-radius: 6px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
}

/* ── AI Chip Grid ── */
.cs-ai-grid[b-iq7dws3c8w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.cs-ai-chip[b-iq7dws3c8w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.cs-ai-chip-label[b-iq7dws3c8w] {
    font-size: var(--g-fs-xxs, 0.625rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--g-text-secondary, #64748b);
}

.cs-ai-chip-value[b-iq7dws3c8w] {
    font-size: 12px;
    font-weight: 600;
    color: var(--g-text-primary, #1e293b);
    word-break: break-word;
}

/* ── DB Status ── */
.cs-eval-db-status[b-iq7dws3c8w] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--g-fs-sm, 13px);
    color: var(--g-brand);
    margin-bottom: 24px;
    font-weight: 600;

}

.cs-eval-db-status svg[b-iq7dws3c8w] {
    flex-shrink: 0;
    color: var(--g-info, #006ff9);
    width: 18px;
    height: 18px;
}

/* ── Buttons ── */
.cs-btn-modal-cancel[b-iq7dws3c8w] {
    padding: 8px 22px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--g-text-secondary, #64748b);
    border-radius: var(--g-radius-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    height: 30px;
    display: flex;
    align-items: center;
}

.cs-btn-modal-cancel:hover[b-iq7dws3c8w] {
    background: #f8fafc;
}
/* /Components/Shared/CandidateNotAvailableModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* /Components/Shared/EmailNotFoundModal.razor.rz.scp.css */
/* Styles moved to global components.css (g-modal-*) */
/* /Components/Shared/FullPageLoader.razor.rz.scp.css */
/* Skeleton loader system — content-area only */

.fpl-overlay[b-6mfeb6ay9u] {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    min-height: calc(100vh - 120px);
    background: #f8fafc;
    overflow: auto;
    animation: fpl-fadeIn-b-6mfeb6ay9u 0.2s ease-out;
}

.fpl-shell[b-6mfeb6ay9u] {
    width: 100%;
    min-height: calc(100vh - 120px);
    padding: 16px 20px 24px;
    display: grid;
    grid-template-columns: 1fr;
}

.fpl-main[b-6mfeb6ay9u] {
    min-width: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== SHARED ELEMENTS ===== */

.fpl-content[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fpl-content-title[b-6mfeb6ay9u] {
    height: 26px;
    width: 250px;
    border-radius: 9px;
}

.fpl-content-subtitle[b-6mfeb6ay9u] {
    height: 14px;
    width: 360px;
    border-radius: 7px;
}

.fpl-cards-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fpl-card[b-6mfeb6ay9u] {
    height: 84px;
    border-radius: 12px;
}

.fpl-table[b-6mfeb6ay9u] {
    height: 240px;
    border-radius: 12px;
}

.fpl-toolbar-row[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fpl-search[b-6mfeb6ay9u] {
    height: 44px;
    width: min(420px, 100%);
    border-radius: 10px;
}

.fpl-toolbar-actions[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.fpl-btn[b-6mfeb6ay9u] {
    height: 40px;
    width: 112px;
    border-radius: 10px;
}

.fpl-btn--primary[b-6mfeb6ay9u] {
    width: 150px;
}

.fpl-th[b-6mfeb6ay9u] {
    height: 14px;
    border-radius: 7px;
}

.fpl-td[b-6mfeb6ay9u] {
    height: 38px;
    border-radius: 8px;
}

.fpl-avatar[b-6mfeb6ay9u] {
    height: 72px;
    width: 72px;
    border-radius: 50%;
}

.fpl-avatar-sm[b-6mfeb6ay9u] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpl-avatar-xs[b-6mfeb6ay9u] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpl-input-block[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-input-block--full[b-6mfeb6ay9u] {
    grid-column: 1 / -1;
}

.fpl-label[b-6mfeb6ay9u] {
    height: 12px;
    width: 140px;
    border-radius: 6px;
}

.fpl-input[b-6mfeb6ay9u] {
    height: 44px;
    border-radius: 10px;
}

.fpl-textarea[b-6mfeb6ay9u] {
    height: 140px;
    border-radius: 10px;
}

/* ===== VARIANT: MAX-WIDTH CONSTRAINTS ===== */

.fpl-main--dashboard[b-6mfeb6ay9u],
.fpl-main--table[b-6mfeb6ay9u],
.fpl-main--form[b-6mfeb6ay9u],
.fpl-main--detail[b-6mfeb6ay9u],
.fpl-main--navigation[b-6mfeb6ay9u],
.fpl-main--dashboard-index[b-6mfeb6ay9u],
.fpl-main--candidate-listnew[b-6mfeb6ay9u],
.fpl-main--job-list[b-6mfeb6ay9u],
.fpl-main--job-creation[b-6mfeb6ay9u],
.fpl-main--job-view[b-6mfeb6ay9u],
.fpl-main--candidate-view[b-6mfeb6ay9u],
.fpl-main--candidate-search[b-6mfeb6ay9u],
.fpl-main--candidate-submission[b-6mfeb6ay9u],
.fpl-main--candidate-feedback[b-6mfeb6ay9u],
.fpl-main--draft-review-pipeline[b-6mfeb6ay9u],
.fpl-main--top-recruiters[b-6mfeb6ay9u] {
    width: 100%;
}

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

.fpl-main--top-recruiters[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fpl-trc-banner[b-6mfeb6ay9u] {
    height: 340px;
    border-radius: 22px;
}

.fpl-trc-overview[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.fpl-trc-overview-left[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-trc-overview-title[b-6mfeb6ay9u] {
    height: 24px;
    width: 200px;
    border-radius: 8px;
}

.fpl-trc-overview-sub[b-6mfeb6ay9u] {
    height: 13px;
    width: 320px;
    border-radius: 6px;
}

.fpl-trc-overview-right[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fpl-trc-download[b-6mfeb6ay9u] {
    height: 36px;
    width: 130px;
    border-radius: 8px;
}

.fpl-trc-monthnav[b-6mfeb6ay9u] {
    height: 36px;
    width: 150px;
    border-radius: 8px;
}

.fpl-trc-head[b-6mfeb6ay9u],
.fpl-trc-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 50px 2.4fr 1fr 1fr 1fr 1fr 0.8fr 0.8fr 0.9fr;
    gap: 12px;
    align-items: center;
}

.fpl-trc-th[b-6mfeb6ay9u] {
    height: 12px;
    border-radius: 6px;
}

.fpl-trc-rows[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 6px;
}

.fpl-trc-rank[b-6mfeb6ay9u] {
    height: 32px;
    width: 32px;
    border-radius: 8px;
}

.fpl-trc-consultant[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fpl-trc-avatar[b-6mfeb6ay9u] {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpl-trc-consultant-info[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.fpl-trc-name[b-6mfeb6ay9u] {
    height: 14px;
    width: 70%;
    border-radius: 6px;
}

.fpl-trc-role[b-6mfeb6ay9u] {
    height: 11px;
    width: 45%;
    border-radius: 6px;
}

.fpl-trc-stat[b-6mfeb6ay9u] {
    height: 14px;
    width: 32px;
    border-radius: 6px;
    justify-self: center;
}

.fpl-trc-ring[b-6mfeb6ay9u] {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    justify-self: center;
}

.fpl-trc-recognize[b-6mfeb6ay9u] {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    justify-self: center;
}

.fpl-trc-feedback[b-6mfeb6ay9u] {
    height: 30px;
    width: 64px;
    border-radius: 8px;
    justify-self: center;
}

/* ===== CANDIDATE FEEDBACK ===== */

.fpl-main--candidate-feedback[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-cfb-header-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
}

.fpl-cfb-header[b-6mfeb6ay9u] {
    height: 56px;
    border-radius: 12px;
}

.fpl-cfb-header-meta[b-6mfeb6ay9u] {
    height: 56px;
    border-radius: 12px;
}

.fpl-cfb-layout[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fpl-cfb-left[b-6mfeb6ay9u],
.fpl-cfb-right[b-6mfeb6ay9u] {
    display: grid;
    gap: 12px;
}

.fpl-cfb-card[b-6mfeb6ay9u] {
    height: 128px;
    border-radius: 14px;
}

.fpl-cfb-card--hero[b-6mfeb6ay9u] {
    height: 170px;
}

.fpl-cfb-panel-head[b-6mfeb6ay9u] {
    height: 72px;
    border-radius: 14px;
}

.fpl-cfb-timeline-item[b-6mfeb6ay9u] {
    height: 180px;
    border-radius: 14px;
}

.fpl-cfb-footer[b-6mfeb6ay9u] {
    height: 52px;
    border-radius: 12px;
}

/* ===== JOB CREATION ===== */

.fpl-main--job-creation[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: calc(100vh - 160px);
}

.fpl-jc-head-row[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fpl-jc-head-left[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fpl-jc-back[b-6mfeb6ay9u] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.fpl-jc-title-wrap[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-jc-title[b-6mfeb6ay9u] {
    width: 240px;
    height: 22px;
    border-radius: 8px;
}

.fpl-jc-subtitle[b-6mfeb6ay9u] {
    width: 320px;
    height: 12px;
    border-radius: 6px;
}

.fpl-jc-action[b-6mfeb6ay9u] {
    width: 120px;
    height: 36px;
    border-radius: 10px;
}

.fpl-jc-banner[b-6mfeb6ay9u] {
    width: 100%;
    height: 170px;
    border-radius: 14px;
}

.fpl-jc-body[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 2.3fr 1fr;
    gap: 14px;
    flex: 1;
}

.fpl-jc-main-col[b-6mfeb6ay9u],
.fpl-jc-side-col[b-6mfeb6ay9u] {
    display: grid;
    gap: 14px;
    align-content: start;
}

.fpl-jc-card[b-6mfeb6ay9u] {
    height: 96px;
    border-radius: 14px;
}

.fpl-jc-card--xl[b-6mfeb6ay9u] {
    height: 170px;
}

.fpl-jc-card--lg[b-6mfeb6ay9u] {
    height: 220px;
}

.fpl-jc-side-card[b-6mfeb6ay9u] {
    height: 130px;
    border-radius: 14px;
}

.fpl-jc-side-card--lg[b-6mfeb6ay9u] {
    height: 240px;
}

/* ===== DASHBOARD INDEX ===== */

.fpl-di-top-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 16px;
}

.fpl-di-greeting[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-di-avatar-row[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fpl-di-avatar[b-6mfeb6ay9u] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.fpl-di-badge[b-6mfeb6ay9u] {
    width: 90px;
    height: 16px;
    border-radius: 8px;
}

.fpl-di-title[b-6mfeb6ay9u] {
    height: 32px;
    width: 200px;
    border-radius: 10px;
}

.fpl-di-subtitle[b-6mfeb6ay9u] {
    height: 14px;
    width: 90%;
    border-radius: 7px;
}

.fpl-di-timer[b-6mfeb6ay9u] {
    height: 40px;
    width: 180px;
    border-radius: 8px;
}

.fpl-di-cta-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
}

.fpl-di-targets[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-di-targets-date[b-6mfeb6ay9u] {
    width: 160px;
    height: 14px;
    border-radius: 7px;
}

.fpl-di-targets-banner[b-6mfeb6ay9u] {
    height: 44px;
    border-radius: 8px;
    width: 100%;
}

.fpl-di-targets-line[b-6mfeb6ay9u] {
    height: 16px;
    border-radius: 6px;
    width: 100%;
}

.fpl-di-performer[b-6mfeb6ay9u] {
    border-radius: 14px;
    min-height: 220px;
}

.fpl-di-bottom-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 16px;
}

.fpl-di-pipeline[b-6mfeb6ay9u],
.fpl-di-activity[b-6mfeb6ay9u],
.fpl-di-recruiters[b-6mfeb6ay9u],
.fpl-di-schedule[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fpl-di-right-col[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-di-panel-header[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fpl-di-panel-title[b-6mfeb6ay9u] {
    height: 18px;
    width: 100px;
    border-radius: 8px;
}

.fpl-di-panel-badge[b-6mfeb6ay9u] {
    height: 14px;
    width: 60px;
    border-radius: 6px;
}

.fpl-di-pipeline-lines[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-di-pipeline-line[b-6mfeb6ay9u] {
    height: 20px;
    width: 100%;
    border-radius: 6px;
}

.fpl-di-feed-items[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-di-feed-item[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.fpl-di-feed-dot[b-6mfeb6ay9u] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.fpl-di-feed-content[b-6mfeb6ay9u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fpl-di-feed-line-lg[b-6mfeb6ay9u] {
    height: 14px;
    width: 85%;
    border-radius: 6px;
}

.fpl-di-feed-line-sm[b-6mfeb6ay9u] {
    height: 12px;
    width: 55%;
    border-radius: 6px;
}

.fpl-di-feed-block[b-6mfeb6ay9u] {
    height: 40px;
    width: 100%;
    border-radius: 8px;
}

.fpl-di-recruiter-row[b-6mfeb6ay9u] {
    height: 44px;
    width: 100%;
    border-radius: 8px;
}

.fpl-di-calendar[b-6mfeb6ay9u] {
    height: 240px;
    width: 100%;
    border-radius: 10px;
}

/* ===== CANDIDATE LIST ===== */

.fpl-cln-header-row[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.fpl-cln-header-left[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-cln-headline[b-6mfeb6ay9u] {
    height: 28px;
    width: 180px;
    border-radius: 10px;
}

.fpl-cln-subline[b-6mfeb6ay9u] {
    height: 14px;
    width: 320px;
    border-radius: 7px;
}

.fpl-cln-tabs-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fpl-cln-tab[b-6mfeb6ay9u] {
    height: 36px;
    width: 130px;
    border-radius: 999px;
}

.fpl-cln-tab--active[b-6mfeb6ay9u] {
    width: 110px;
}

.fpl-cln-results[b-6mfeb6ay9u] {
    width: 70px;
    height: 16px;
    border-radius: 8px;
}

.fpl-cln-sort[b-6mfeb6ay9u] {
    width: 200px;
    height: 36px;
    border-radius: 8px;
}

.fpl-cln-table-wrap[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-cln-table-head[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 40px 1.5fr 1.5fr 90px 90px 120px 130px;
    gap: 12px;
    padding: 0 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.fpl-cln-list[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fpl-cln-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 40px 1.5fr 1.5fr 90px 90px 120px 130px;
    gap: 12px;
    align-items: center;
    padding: 16px 8px;
    border-bottom: 1px solid #f8fafc;
}

.fpl-cln-num[b-6mfeb6ay9u] {
    width: 20px;
    height: 14px;
    border-radius: 4px;
}

.fpl-cln-candidate-cell[b-6mfeb6ay9u],
.fpl-cln-job-cell[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fpl-cln-row-main[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.fpl-cln-line-lg[b-6mfeb6ay9u] {
    height: 14px;
    width: 85%;
    border-radius: 7px;
}

.fpl-cln-line-sm[b-6mfeb6ay9u] {
    height: 11px;
    width: 60%;
    border-radius: 6px;
}

.fpl-cln-score-circle[b-6mfeb6ay9u] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.fpl-cln-status[b-6mfeb6ay9u] {
    height: 18px;
    width: 80px;
    border-radius: 6px;
}

.fpl-cln-submitted-cell[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== JOB LIST ===== */

.fpl-main--job-list[b-6mfeb6ay9u] {
    max-width: none;
    margin: 0;
    padding: 0;
}

.fpl-jl-canvas[b-6mfeb6ay9u] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fpl-jl-header-card[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-jl-headline[b-6mfeb6ay9u] {
    height: 28px;
    width: 100px;
    border-radius: 9px;
}

.fpl-jl-subline[b-6mfeb6ay9u] {
    height: 13px;
    width: 340px;
    border-radius: 6px;
}

.fpl-jl-tabs-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fpl-jl-tab[b-6mfeb6ay9u] {
    height: 36px;
    width: 120px;
    border-radius: 999px;
}

.fpl-jl-tab--active[b-6mfeb6ay9u] {
    width: 110px;
}

.fpl-jl-result[b-6mfeb6ay9u] {
    width: 70px;
    height: 16px;
    border-radius: 9px;
}

.fpl-jl-sort[b-6mfeb6ay9u] {
    width: 170px;
    height: 36px;
    border-radius: 8px;
}

.fpl-jl-table-wrap[b-6mfeb6ay9u] {
    background: #ffffff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-jl-table-head[b-6mfeb6ay9u],
.fpl-jl-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 40px minmax(180px, 1.8fr) repeat(7, minmax(70px, 1fr));
    gap: 10px;
    align-items: center;
}

.fpl-jl-table-head[b-6mfeb6ay9u] {
    padding: 0 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.fpl-jl-table-rows[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fpl-jl-row[b-6mfeb6ay9u] {
    padding: 16px 8px;
    border-bottom: 1px solid #f8fafc;
}

.fpl-jl-job-cell[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fpl-jl-avatar-sm[b-6mfeb6ay9u] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.fpl-jl-job-lines[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.fpl-jl-line-lg[b-6mfeb6ay9u] {
    width: 85%;
    height: 13px;
    border-radius: 6px;
}

.fpl-jl-line-sm[b-6mfeb6ay9u] {
    width: 55%;
    height: 10px;
    border-radius: 5px;
}

/* ===== JOB VIEW ===== */

.fpl-jv-header[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-jv-back[b-6mfeb6ay9u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.fpl-jv-title-row[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fpl-jv-logo[b-6mfeb6ay9u] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.fpl-jv-title-lines[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fpl-jv-title[b-6mfeb6ay9u] {
    height: 18px;
    width: 200px;
    border-radius: 8px;
}

.fpl-jv-meta[b-6mfeb6ay9u] {
    height: 12px;
    width: 320px;
    border-radius: 6px;
}

.fpl-jv-banner[b-6mfeb6ay9u] {
    width: 100%;
    height: 180px;
    border-radius: 12px;
}

.fpl-jv-title-section[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fpl-jv-title-left[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-jv-job-name[b-6mfeb6ay9u] {
    height: 26px;
    width: 220px;
    border-radius: 8px;
}

.fpl-jv-job-meta[b-6mfeb6ay9u] {
    height: 13px;
    width: 350px;
    border-radius: 6px;
}

.fpl-jv-title-actions[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
}

.fpl-jv-body[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}

.fpl-jv-content[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-jv-section[b-6mfeb6ay9u] {
    height: 300px;
    border-radius: 12px;
    border: 1px solid #e7ebf2;
}

.fpl-jv-skills-section[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-jv-section-title[b-6mfeb6ay9u] {
    height: 18px;
    width: 60px;
    border-radius: 8px;
}

.fpl-jv-chips-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fpl-jv-chip[b-6mfeb6ay9u] {
    height: 32px;
    width: 90px;
    border-radius: 999px;
}

.fpl-jv-sidebar[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-jv-sidebar-card[b-6mfeb6ay9u] {
    height: 180px;
    border-radius: 12px;
    border: 1px solid #e7ebf2;
}

.fpl-jv-sidebar-card--tall[b-6mfeb6ay9u] {
    height: 220px;
}

/* ===== CANDIDATE VIEW ===== */

.fpl-cv-breadcrumb[b-6mfeb6ay9u] {
    height: 14px;
    width: 200px;
    border-radius: 6px;
}

.fpl-cv-header[b-6mfeb6ay9u] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.fpl-cv-avatar[b-6mfeb6ay9u] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fpl-cv-info[b-6mfeb6ay9u] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-cv-name[b-6mfeb6ay9u] {
    height: 24px;
    width: 260px;
    border-radius: 8px;
}

.fpl-cv-designation[b-6mfeb6ay9u] {
    height: 14px;
    width: 300px;
    border-radius: 6px;
}

.fpl-cv-meta-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 16px;
}

.fpl-cv-meta-item[b-6mfeb6ay9u] {
    height: 14px;
    width: 110px;
    border-radius: 6px;
}

.fpl-cv-stats[b-6mfeb6ay9u] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.fpl-cv-stat[b-6mfeb6ay9u] {
    width: 90px;
    height: 64px;
    border-radius: 10px;
}

.fpl-cv-tabs[b-6mfeb6ay9u] {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.fpl-cv-tab[b-6mfeb6ay9u] {
    height: 16px;
    width: 80px;
    border-radius: 6px;
}

.fpl-cv-body[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}

.fpl-cv-content[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-cv-card[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-cv-card--half[b-6mfeb6ay9u] {
    flex: 1;
}

.fpl-cv-card-title[b-6mfeb6ay9u] {
    height: 18px;
    width: 160px;
    border-radius: 8px;
}

.fpl-cv-card-line[b-6mfeb6ay9u] {
    height: 14px;
    width: 100%;
    border-radius: 6px;
}

.fpl-cv-card-line--short[b-6mfeb6ay9u] {
    width: 65%;
}

.fpl-cv-chips-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fpl-cv-chip[b-6mfeb6ay9u] {
    height: 32px;
    width: 90px;
    border-radius: 999px;
}

.fpl-cv-two-col[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fpl-cv-timeline[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-cv-timeline-item[b-6mfeb6ay9u] {
    height: 44px;
    width: 100%;
    border-radius: 8px;
}

.fpl-cv-sidebar[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-cv-sidebar-title[b-6mfeb6ay9u] {
    height: 16px;
    width: 120px;
    border-radius: 6px;
}

.fpl-cv-applied-card[b-6mfeb6ay9u] {
    height: 160px;
    border-radius: 12px;
    border: 1px solid #e7ebf2;
}

/* ===== CANDIDATE SEARCH ===== */

.fpl-cs-header[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpl-cs-title[b-6mfeb6ay9u] {
    height: 28px;
    width: 220px;
    border-radius: 10px;
}

.fpl-cs-subtitle[b-6mfeb6ay9u] {
    height: 14px;
    width: 360px;
    border-radius: 7px;
}

.fpl-cs-search-row[b-6mfeb6ay9u] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.fpl-cs-search[b-6mfeb6ay9u] {
    flex: 1;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #e7ebf2;
}

.fpl-cs-filter[b-6mfeb6ay9u] {
    width: 100px;
    height: 34px;
    border-radius: 8px;
}

.fpl-cs-empty[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 320px;
    justify-content: center;
}

.fpl-cs-empty-icon[b-6mfeb6ay9u] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.fpl-cs-empty-title[b-6mfeb6ay9u] {
    height: 20px;
    width: 280px;
    border-radius: 8px;
}

.fpl-cs-empty-desc[b-6mfeb6ay9u] {
    height: 14px;
    width: 400px;
    border-radius: 6px;
}

.fpl-cs-empty-chips[b-6mfeb6ay9u] {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.fpl-cs-empty-chip[b-6mfeb6ay9u] {
    height: 34px;
    width: 130px;
    border-radius: 999px;
}

/* ===== CANDIDATE SUBMISSION ===== */

.fpl-csub-header[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 10px;
    border-bottom: 3px solid #e7ebf2;
}

.fpl-csub-title[b-6mfeb6ay9u] {
    height: 24px;
    width: 200px;
    border-radius: 8px;
}

.fpl-csub-subtitle[b-6mfeb6ay9u] {
    height: 13px;
    width: 320px;
    border-radius: 6px;
}

.fpl-csub-body[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.fpl-csub-form[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-csub-form-card[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fpl-csub-form-title[b-6mfeb6ay9u] {
    height: 20px;
    width: 200px;
    border-radius: 8px;
}

.fpl-csub-form-desc[b-6mfeb6ay9u] {
    height: 13px;
    width: 300px;
    border-radius: 6px;
}

.fpl-csub-upload[b-6mfeb6ay9u] {
    height: 240px;
    border-radius: 12px;
    border: 2px dashed #d4e4fc;
}

.fpl-csub-actions[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fpl-csub-clear[b-6mfeb6ay9u] {
    height: 14px;
    width: 80px;
    border-radius: 6px;
}

.fpl-csub-sidebar[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fpl-csub-job-card[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fpl-csub-job-logo[b-6mfeb6ay9u] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.fpl-csub-job-title[b-6mfeb6ay9u] {
    height: 18px;
    width: 150px;
    border-radius: 8px;
}

.fpl-csub-job-company[b-6mfeb6ay9u] {
    height: 13px;
    width: 80px;
    border-radius: 6px;
}

.fpl-csub-job-stats[b-6mfeb6ay9u] {
    height: 50px;
    width: 100%;
    border-radius: 8px;
}

.fpl-csub-job-details[b-6mfeb6ay9u] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-csub-job-detail-line[b-6mfeb6ay9u] {
    height: 18px;
    width: 100%;
    border-radius: 6px;
}

.fpl-csub-skills-card[b-6mfeb6ay9u] {
    background: #fff;
    border: 1px solid #e7ebf2;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fpl-csub-skills-title[b-6mfeb6ay9u] {
    height: 16px;
    width: 120px;
    border-radius: 6px;
}

.fpl-csub-skill-line[b-6mfeb6ay9u] {
    height: 18px;
    width: 100%;
    border-radius: 6px;
}

/* ===== DRAFT REVIEW PIPELINE ===== */

.fpl-drp-layout[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fpl-drp-left[b-6mfeb6ay9u],
.fpl-drp-right[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-drp-toolbar[b-6mfeb6ay9u] {
    height: 52px;
    border-radius: 10px;
}

.fpl-drp-resume[b-6mfeb6ay9u] {
    height: 680px;
    border-radius: 12px;
}

.fpl-drp-header[b-6mfeb6ay9u] {
    height: 140px;
    border-radius: 12px;
}

.fpl-drp-card[b-6mfeb6ay9u] {
    height: 140px;
    border-radius: 12px;
}

/* ===== GENERIC DASHBOARD ===== */

.fpl-headline-row[b-6mfeb6ay9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fpl-headline[b-6mfeb6ay9u] {
    height: 28px;
    width: 300px;
    border-radius: 10px;
}

.fpl-pill[b-6mfeb6ay9u] {
    height: 30px;
    width: 132px;
    border-radius: 999px;
}

.fpl-metrics-grid[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.fpl-metric-card[b-6mfeb6ay9u] {
    height: 110px;
    border-radius: 14px;
}

.fpl-chart-row[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
}

.fpl-chart[b-6mfeb6ay9u] {
    height: 260px;
    border-radius: 14px;
}

/* ===== GENERIC TABLE ===== */

.fpl-table-header[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.fpl-table-rows[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-tr[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

/* ===== GENERIC FORM ===== */

.fpl-form-title[b-6mfeb6ay9u] {
    height: 30px;
    width: 280px;
    border-radius: 10px;
}

.fpl-form-subtitle[b-6mfeb6ay9u] {
    height: 14px;
    width: 360px;
    border-radius: 7px;
}

.fpl-form-grid[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fpl-form-actions[b-6mfeb6ay9u] {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== GENERIC DETAIL ===== */

.fpl-detail-top[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: center;
}

.fpl-detail-head[b-6mfeb6ay9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpl-detail-title[b-6mfeb6ay9u] {
    height: 24px;
    width: min(420px, 100%);
    border-radius: 9px;
}

.fpl-detail-meta[b-6mfeb6ay9u] {
    height: 14px;
    width: min(260px, 100%);
    border-radius: 7px;
}

.fpl-detail-cards[b-6mfeb6ay9u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fpl-detail-card[b-6mfeb6ay9u] {
    height: 130px;
    border-radius: 12px;
}

/* ===== SHIMMER ANIMATION ===== */

.fpl-shimmer[b-6mfeb6ay9u] {
    background: linear-gradient(90deg, #eceff5 0%, #dfe7f5 42%, #eceff5 100%);
    background-size: 280% 100%;
    animation: fpl-shimmer-b-6mfeb6ay9u 1.05s linear infinite;
}

/* ===== LOADING MESSAGE ===== */

.fpl-message[b-6mfeb6ay9u] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
    font-size: var(--g-fs-sm);
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e3e8f1;
    border-radius: 999px;
    padding: 8px 14px;
}

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

@media (max-width: 1024px) {
    .fpl-di-top-row[b-6mfeb6ay9u],
    .fpl-di-bottom-row[b-6mfeb6ay9u],
    .fpl-jv-body[b-6mfeb6ay9u],
    .fpl-cv-body[b-6mfeb6ay9u],
    .fpl-csub-body[b-6mfeb6ay9u],
    .fpl-drp-layout[b-6mfeb6ay9u],
    .fpl-cv-two-col[b-6mfeb6ay9u] {
        grid-template-columns: 1fr;
    }

    .fpl-cards-row[b-6mfeb6ay9u],
    .fpl-metrics-grid[b-6mfeb6ay9u],
    .fpl-detail-cards[b-6mfeb6ay9u],
    .fpl-chart-row[b-6mfeb6ay9u],
    .fpl-form-grid[b-6mfeb6ay9u] {
        grid-template-columns: 1fr;
    }

    .fpl-cln-table-head[b-6mfeb6ay9u],
    .fpl-cln-row[b-6mfeb6ay9u] {
        grid-template-columns: 40px 1fr 1fr;
    }

    .fpl-cln-score-circle[b-6mfeb6ay9u],
    .fpl-cln-status[b-6mfeb6ay9u],
    .fpl-cln-submitted-cell[b-6mfeb6ay9u] {
        display: none;
    }

    .fpl-jl-table-head[b-6mfeb6ay9u],
    .fpl-jl-row[b-6mfeb6ay9u] {
        grid-template-columns: 40px 1fr repeat(3, 80px);
    }

    .fpl-toolbar-row[b-6mfeb6ay9u] {
        flex-direction: column;
        align-items: stretch;
    }

    .fpl-toolbar-actions[b-6mfeb6ay9u] {
        justify-content: space-between;
    }

    .fpl-cv-stats[b-6mfeb6ay9u] {
        display: none;
    }

    .fpl-cv-header[b-6mfeb6ay9u] {
        flex-wrap: wrap;
    }

    .fpl-cs-search-row[b-6mfeb6ay9u] {
        flex-direction: column;
    }

    .fpl-cs-empty-desc[b-6mfeb6ay9u] {
        width: 90%;
    }
}

@media (max-width: 640px) {
    .fpl-cln-table-head[b-6mfeb6ay9u],
    .fpl-cln-row[b-6mfeb6ay9u] {
        grid-template-columns: 1fr;
    }

    .fpl-jl-table-head[b-6mfeb6ay9u],
    .fpl-jl-row[b-6mfeb6ay9u] {
        grid-template-columns: 1fr;
    }

    .fpl-cln-num[b-6mfeb6ay9u],
    .fpl-cln-table-head[b-6mfeb6ay9u] {
        display: none;
    }

    .fpl-btn[b-6mfeb6ay9u] {
        width: 100%;
    }
}

/* ===== KEYFRAMES ===== */

@keyframes fpl-shimmer-b-6mfeb6ay9u {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes fpl-fadeIn-b-6mfeb6ay9u {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== ADMIN PANEL SKELETONS ===== */
.fpl-main--admin-overview[b-6mfeb6ay9u],
.fpl-main--admin-list[b-6mfeb6ay9u],
.fpl-main--admin-split[b-6mfeb6ay9u],
.fpl-main--admin-form[b-6mfeb6ay9u] {
    gap: 16px;
}

/* white card chrome (containers, not shimmer themselves) */
.fpl-ao-banner[b-6mfeb6ay9u],
.fpl-ao-users[b-6mfeb6ay9u],
.fpl-al-head-card[b-6mfeb6ay9u],
.fpl-al-table-card[b-6mfeb6ay9u],
.fpl-as-head-card[b-6mfeb6ay9u],
.fpl-as-nav[b-6mfeb6ay9u],
.fpl-as-detail[b-6mfeb6ay9u],
.fpl-af-head-card[b-6mfeb6ay9u],
.fpl-af-card[b-6mfeb6ay9u] {
    background: var(--g-bg-card, #ffffff);
    border: 1px solid var(--g-gray-200, #e5e7eb);
    border-radius: 14px;
    padding: 20px 22px;
}

/* ---- admin-overview ---- */
.fpl-ao-title[b-6mfeb6ay9u] { height: 24px; width: 160px; border-radius: 8px; }
.fpl-ao-subtitle[b-6mfeb6ay9u] { height: 13px; width: 320px; border-radius: 6px; }
.fpl-ao-banner[b-6mfeb6ay9u] { display: flex; justify-content: space-between; align-items: center; }
.fpl-ao-banner-left[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 12px; }
.fpl-ao-banner-head[b-6mfeb6ay9u] { height: 16px; width: 160px; border-radius: 8px; }
.fpl-ao-banner-line[b-6mfeb6ay9u] { height: 22px; width: 220px; border-radius: 8px; }
.fpl-ao-banner-line--sm[b-6mfeb6ay9u] { width: 140px; height: 16px; }
.fpl-ao-banner-ring[b-6mfeb6ay9u] { width: 96px; height: 96px; border-radius: 50%; }
.fpl-ao-metrics[b-6mfeb6ay9u] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fpl-ao-metric[b-6mfeb6ay9u] { height: 120px; border-radius: 14px; }
.fpl-ao-users[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 14px; }
.fpl-ao-users-head[b-6mfeb6ay9u] { display: flex; justify-content: space-between; align-items: center; }
.fpl-ao-users-title[b-6mfeb6ay9u] { height: 18px; width: 120px; border-radius: 8px; }
.fpl-ao-users-btn[b-6mfeb6ay9u] { height: 38px; width: 120px; border-radius: 10px; }
.fpl-ao-search[b-6mfeb6ay9u] { height: 40px; width: min(360px, 100%); border-radius: 10px; }
.fpl-ao-thead[b-6mfeb6ay9u] { height: 14px; border-radius: 7px; }
.fpl-ao-row[b-6mfeb6ay9u] { display: flex; align-items: center; gap: 14px; }
.fpl-ao-row-main[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fpl-ao-line-lg[b-6mfeb6ay9u] { height: 14px; width: 180px; border-radius: 7px; }
.fpl-ao-line-sm[b-6mfeb6ay9u] { height: 11px; width: 220px; border-radius: 6px; }
.fpl-ao-cell[b-6mfeb6ay9u] { height: 14px; width: 90px; border-radius: 7px; }

/* ---- admin-list ---- */
.fpl-al-head-card[b-6mfeb6ay9u] { display: flex; justify-content: space-between; align-items: center; }
.fpl-al-head-left[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 10px; }
.fpl-al-headline[b-6mfeb6ay9u] { height: 24px; width: 140px; border-radius: 8px; }
.fpl-al-subline[b-6mfeb6ay9u] { height: 13px; width: 300px; border-radius: 6px; }
.fpl-al-action[b-6mfeb6ay9u] { height: 40px; width: 150px; border-radius: 10px; }
.fpl-al-table-card[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 14px; }
.fpl-al-thead[b-6mfeb6ay9u] { height: 16px; border-radius: 7px; }
.fpl-al-row[b-6mfeb6ay9u] { height: 46px; border-radius: 10px; }

/* ---- admin-split ---- */
.fpl-as-head-card[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 10px; }
.fpl-as-headline[b-6mfeb6ay9u] { height: 24px; width: 200px; border-radius: 8px; }
.fpl-as-subline[b-6mfeb6ay9u] { height: 13px; width: 320px; border-radius: 6px; }
.fpl-as-body[b-6mfeb6ay9u] { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.fpl-as-nav[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 12px; }
.fpl-as-nav-item[b-6mfeb6ay9u] { height: 48px; border-radius: 12px; }
.fpl-as-detail[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 14px; }
.fpl-as-detail-title[b-6mfeb6ay9u] { height: 22px; width: 160px; border-radius: 8px; }
.fpl-as-detail-label[b-6mfeb6ay9u] { height: 13px; width: 100px; border-radius: 6px; }
.fpl-as-input[b-6mfeb6ay9u] { height: 46px; border-radius: 10px; }
.fpl-as-detail-action[b-6mfeb6ay9u] { height: 38px; width: 150px; border-radius: 10px; align-self: flex-end; }
.fpl-as-detail-sub[b-6mfeb6ay9u] { height: 16px; width: 140px; border-radius: 7px; }
.fpl-as-thead[b-6mfeb6ay9u] { height: 14px; border-radius: 7px; }
.fpl-as-row[b-6mfeb6ay9u] { height: 44px; border-radius: 10px; }

/* ---- admin-form ---- */
.fpl-af-head-card[b-6mfeb6ay9u] { display: flex; justify-content: space-between; align-items: center; }
.fpl-af-head-left[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 10px; }
.fpl-af-title[b-6mfeb6ay9u] { height: 24px; width: 180px; border-radius: 8px; }
.fpl-af-subtitle[b-6mfeb6ay9u] { height: 13px; width: 280px; border-radius: 6px; }
.fpl-af-actions[b-6mfeb6ay9u] { display: flex; gap: 10px; }
.fpl-af-btn[b-6mfeb6ay9u] { height: 40px; width: 100px; border-radius: 10px; }
.fpl-af-btn--primary[b-6mfeb6ay9u] { width: 130px; }
.fpl-af-card[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 18px; }
.fpl-af-section-title[b-6mfeb6ay9u] { height: 18px; width: 200px; border-radius: 8px; }
.fpl-af-grid[b-6mfeb6ay9u] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fpl-af-field[b-6mfeb6ay9u] { display: flex; flex-direction: column; gap: 8px; }
.fpl-af-label[b-6mfeb6ay9u] { height: 12px; width: 110px; border-radius: 6px; }
.fpl-af-input[b-6mfeb6ay9u] { height: 44px; border-radius: 10px; }
.fpl-af-blocks[b-6mfeb6ay9u] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fpl-af-block[b-6mfeb6ay9u] { height: 120px; border-radius: 14px; }

@media (max-width: 900px) {
    .fpl-ao-metrics[b-6mfeb6ay9u], .fpl-af-grid[b-6mfeb6ay9u], .fpl-af-blocks[b-6mfeb6ay9u], .fpl-as-body[b-6mfeb6ay9u] { grid-template-columns: 1fr; }
}
/* /Components/Shared/InlineLoader.razor.rz.scp.css */
 
/* /Components/Shared/OtpConfirmModal.razor.rz.scp.css */
/* ── OTP Confirmation Modal ── */
.otp-overlay[b-52t26o4rg6] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    animation: otpFadeIn-b-52t26o4rg6 0.2s ease;
}

.otp-modal[b-52t26o4rg6] {
    width: 92%;
    max-width: 420px;
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: otpSlideUp-b-52t26o4rg6 0.25s ease;
}

/* ── Header ── */
.otp-modal-header[b-52t26o4rg6] {
    text-align: center;
    padding: 28px 28px 20px;
    background: linear-gradient(310deg, #1e293b 0%, #334155 100%);
    border-bottom: none;
}

.otp-shield-icon[b-52t26o4rg6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:var(--sidebar-active-bg);
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px var(--g-primary-shadow);
}

.otp-title[b-52t26o4rg6] {
    font-size: var(--g-fs-section-title);
    font-weight: var(--g-fw-bold);
    color: var(--g-bg-card);
    margin: 0 0 var(--g-space-6);
}

.otp-desc[b-52t26o4rg6] {
    font-size: var(--g-fs-sm);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: var(--g-lh-normal);
}

/* ── Body ── */
.otp-modal-body[b-52t26o4rg6] {
    padding: var(--g-space-24) 28px var(--g-space-20);
}

.otp-label[b-52t26o4rg6] {
    display: block;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.06em;
    color: var(--g-text-label);
    margin-bottom: var(--g-space-6);
    text-transform: uppercase;
}

.otp-input[b-52t26o4rg6] {
    width: 100%;
    padding: var(--g-space-12) 14px;
    font-size: var(--g-fs-section-title);
    font-weight: var(--g-fw-semibold);
    letter-spacing: 0.35em;
    text-align: center;
    color: var(--g-gray-800);
    background: var(--g-gray-50);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.otp-input:focus[b-52t26o4rg6] {
    border-color: var(--g-indigo);
    box-shadow: var(--g-focus-shadow);
    background: var(--g-bg-card);
}

.otp-input[b-52t26o4rg6]::placeholder {
    color: var(--g-gray-300);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-normal);
    letter-spacing: 0.02em;
}

.otp-error[b-52t26o4rg6] {
    display: flex;
    align-items: center;
    gap: var(--g-space-6);
    margin-top: var(--g-space-10);
    padding: var(--g-space-8) var(--g-space-12);
    font-size: var(--g-fs-xs);
    color: var(--g-error-text);
    background: var(--g-error-bg);
    border: 1px solid var(--g-error-border);
    border-radius: var(--g-radius-md);
}

.otp-resend-row[b-52t26o4rg6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-6);
    margin-top: var(--g-space-16);
}

.otp-resend-text[b-52t26o4rg6] {
    font-size: var(--g-fs-xs);
    color: var(--g-text-muted);
}

.otp-resend-btn[b-52t26o4rg6] {
    font-size: var(--g-fs-xs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-indigo);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.otp-resend-btn:hover[b-52t26o4rg6] {
    text-decoration: underline;
    color: var(--g-indigo);
}

.otp-resend-btn:focus-visible[b-52t26o4rg6] {
    outline: none;
    box-shadow: var(--g-focus-shadow);
    border-radius: var(--g-radius-xs);
}

/* ── Footer ── */
.otp-modal-footer[b-52t26o4rg6] {
    display: flex;
    gap: var(--g-space-12);
    padding: 0 28px var(--g-space-24);
}

.otp-btn-cancel[b-52t26o4rg6] {
    flex: 1;
    padding: 5px 22px;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-label);
    background: var(--g-gray-100);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    cursor: pointer;
    transition: background 0.15s;
}

.otp-btn-cancel:hover[b-52t26o4rg6] {
    background: var(--g-gray-200);
}

.otp-btn-cancel:focus-visible[b-52t26o4rg6] {
    outline: none;
    box-shadow: var(--g-focus-shadow);
}

.otp-btn-verify[b-52t26o4rg6] {
    flex: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-8);
    padding: 5px 22px;
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-bg-card);
    background: var(--sidebar-active-bg);
    border: none;
    border-radius: var(--g-radius-lg);
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.otp-btn-verify:hover[b-52t26o4rg6] {
    opacity: 0.92;
}

.otp-btn-verify:active[b-52t26o4rg6] {
    transform: scale(0.98);
}

.otp-btn-verify:focus-visible[b-52t26o4rg6] {
    outline: none;
    box-shadow: var(--g-focus-shadow);
}

/* ── Animations ── */
@keyframes otpFadeIn-b-52t26o4rg6 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes otpSlideUp-b-52t26o4rg6 {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Responsive: Tablet / Phone ── */
@media (max-width: 768px) {
    .otp-modal[b-52t26o4rg6] {
        max-width: 360px;
        border-radius: 14px;
    }

    .otp-modal-header[b-52t26o4rg6] {
        padding: 22px 22px 16px;
    }

    .otp-shield-icon[b-52t26o4rg6] {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }

    .otp-shield-icon svg[b-52t26o4rg6] {
        width: 26px;
        height: 26px;
    }

    .otp-title[b-52t26o4rg6] {
        font-size: var(--g-fs-card-title, 1rem);
    }

    .otp-desc[b-52t26o4rg6] {
        font-size: var(--g-fs-xs, 0.75rem);
    }

    .otp-modal-body[b-52t26o4rg6] {
        padding: 18px 22px 16px;
    }

    .otp-input[b-52t26o4rg6] {
        padding: 10px 12px;
        font-size: 1rem;
    }

    .otp-modal-footer[b-52t26o4rg6] {
        padding: 0 22px 20px;
    }

    .otp-btn-cancel[b-52t26o4rg6],
    .otp-btn-verify[b-52t26o4rg6] {
        padding: 10px 14px;
        font-size: var(--g-fs-sm, 0.8125rem);
    }
}

/* ── Responsive: Small Phones ── */
@media (max-width: 480px) {
    .otp-modal[b-52t26o4rg6] {
        width: 94%;
        max-width: 340px;
        border-radius: var(--g-radius-xl);
    }

    .otp-modal-header[b-52t26o4rg6] {
        padding: 18px 18px 14px;
    }

    .otp-shield-icon[b-52t26o4rg6] {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
    }

    .otp-shield-icon svg[b-52t26o4rg6] {
        width: 22px;
        height: 22px;
    }

    .otp-title[b-52t26o4rg6] {
        font-size: var(--g-fs-body, 0.875rem);
    }

    .otp-desc[b-52t26o4rg6] {
        font-size: var(--g-fs-xxs, 0.6875rem);
    }

    .otp-modal-body[b-52t26o4rg6] {
        padding: 14px 18px 14px;
    }

    .otp-label[b-52t26o4rg6] {
        font-size: var(--g-fs-xxs, 0.625rem);
    }

    .otp-input[b-52t26o4rg6] {
        padding: 9px 10px;
        font-size: var(--g-fs-body, 0.875rem);
        border-radius: var(--g-radius-md);
    }

    .otp-modal-footer[b-52t26o4rg6] {
        padding: 0 18px 16px;
        gap: 8px;
    }

    .otp-btn-cancel[b-52t26o4rg6],
    .otp-btn-verify[b-52t26o4rg6] {
        padding: 9px 12px;
        font-size: 0.75rem;
        border-radius: var(--g-radius-md);
    }

    .otp-resend-text[b-52t26o4rg6],
    .otp-resend-btn[b-52t26o4rg6] {
        font-size: 0.72rem;
    }
}

/* ── Timer ── */
.otp-timer[b-52t26o4rg6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #eef6ff;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm, 0.8125rem);
    color: var(--g-brand, #2c7cff);
}

.otp-timer strong[b-52t26o4rg6] {
    font-variant-numeric: tabular-nums;
}

.otp-expired[b-52t26o4rg6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff0f0;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm, 0.8125rem);
    color: #dc3545;
}

.otp-input.expired[b-52t26o4rg6] {
    opacity: 0.5;
    background: #f8f9fa;
    cursor: not-allowed;
}

.otp-resend-btn.active[b-52t26o4rg6] {
    color: #fff;
    background: #2c7cff;
    padding: 6px 14px;
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-xs, 0.75rem);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.otp-resend-btn.active:hover[b-52t26o4rg6] {
    background: #1a6bef;
    text-decoration: none;
}

.otp-resend-disabled[b-52t26o4rg6] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
    opacity: 0.7;
}

.otp-btn-verify:disabled[b-52t26o4rg6] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Shared/ResumeOutdatedModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Resume Outdated Modal – rom- prefix
   ═══════════════════════════════════════════ */

.rom-overlay[b-29ezkjidnq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: g-fadeIn 0.2s ease-out;
}

.rom-modal[b-29ezkjidnq] {
    background: var(--g-bg-card);
    border-radius: var(--g-radius-2xl);
    padding: 36px 40px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: g-slideDown 0.25s ease-out;
    text-align: center;
}

.rom-icon-wrap[b-29ezkjidnq] {
    margin-bottom: 16px;
}

.rom-warning-icon[b-29ezkjidnq] {
    color: #f59e0b;
}

.rom-title[b-29ezkjidnq] {
    font-size: 1.25rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    margin: 0 0 12px;
}

.rom-message[b-29ezkjidnq] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-body);
    line-height: 1.6;
    margin: 0 0 20px;
}

.rom-date-badge[b-29ezkjidnq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--g-radius-lg);
    padding: 8px 16px;
    font-size: var(--g-fs-xs);
    color: #92400e;
    font-weight: var(--g-fw-semibold);
    margin-bottom: 24px;
}

.rom-age-tag[b-29ezkjidnq] {
    background: #f59e0b;
    color: #fff;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.6875rem;
    font-weight: var(--g-fw-bold);
}

.rom-actions[b-29ezkjidnq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #DDE3EB;
}

@media (max-width: 480px) {
    .rom-modal[b-29ezkjidnq] { padding: 24px 18px; }
    .rom-actions[b-29ezkjidnq] {
        flex-direction: column;
        width: 100%;
    }
    .rom-actions .g-btn-cancel[b-29ezkjidnq],
    .rom-actions .g-btn-primary[b-29ezkjidnq] {
        width: 100%;
    }
}
/* /Components/Shared/UsersList.razor.rz.scp.css */
/* ═══════════════════════════════════════
   UsersList Component Styles
   ═══════════════════════════════════════ */

.users-section[b-4oqh3tyc7x] {
    font-family: var(--g-font-sans);
    -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.users-header[b-4oqh3tyc7x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title[b-4oqh3tyc7x] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--g-text-heading);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.section-subtitle[b-4oqh3tyc7x] {
    font-size: var(--g-fs-sm);
    color: var(--g-text-secondary);
    margin: 0;
}

/* btn-add-user → uses global .g-btn-primary */

/* ── Search Bar ── */
.search-bar[b-4oqh3tyc7x] {
    position: relative;
    margin-bottom: 16px;
    max-width: 280px;
}

.search-icon[b-4oqh3tyc7x] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    font-size: 0.875rem;
}

.search-input[b-4oqh3tyc7x] {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    font-size: var(--g-fs-sm);
    color: var(--g-text-body); 
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input[b-4oqh3tyc7x]::placeholder {
    color: var(--g-text-muted);
}

.search-input:focus[b-4oqh3tyc7x] {
    border-color: var(--g-focus-border);
    box-shadow: var(--g-focus-shadow);
    background: var(--g-bg-card);
}

 

.users-table[b-4oqh3tyc7x] {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead th[b-4oqh3tyc7x] {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--g-border-light);
    background: var(--g-gray-50);
    white-space: nowrap;
    text-align: left;
}

.users-table tbody td[b-4oqh3tyc7x] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--g-border-light);
    font-size: 0.8125rem;
    color: var(--g-text-body);
    vertical-align: middle;
}

.users-table tbody tr:hover[b-4oqh3tyc7x] {
    background: var(--g-gray-50);
}

.users-table tbody tr:last-child td[b-4oqh3tyc7x] {
    border-bottom: none;
}

/* ── User Cell ── */
.user-cell[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-4oqh3tyc7x] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.user-avatar-img[b-4oqh3tyc7x] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: url('/images/avatar%20user.png') center/cover no-repeat #e2e8f0;
}

.user-info[b-4oqh3tyc7x] {
    display: flex;
    flex-direction: column;
}

.user-name[b-4oqh3tyc7x] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading);
}

.user-name-link[b-4oqh3tyc7x] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--g-text-heading);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.user-name-link:hover[b-4oqh3tyc7x] {
    color: var(--g-indigo);
    text-decoration: underline;
}

.user-email[b-4oqh3tyc7x] {
    font-size: 0.75rem;
    color: var(--g-text-muted);
}

/* ── Role Badges ── */
.role-badge[b-4oqh3tyc7x] {
    display: inline-block;
    padding: 3px 0px;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
 

/* ── Status Badge ── */
.status-badge[b-4oqh3tyc7x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
}

.status-dot[b-4oqh3tyc7x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.active[b-4oqh3tyc7x] {
    background: var(--g-success-bg);
    color: var(--g-success-text);
}

.status-badge.active .status-dot[b-4oqh3tyc7x] {
    background: var(--g-success);
}

.status-badge.inactive[b-4oqh3tyc7x] {
    background: var(--g-error-bg);
    color: var(--g-error-text);
}

.status-badge.inactive .status-dot[b-4oqh3tyc7x] {
    background: var(--g-error);
}

.activity-text[b-4oqh3tyc7x] {
    color: var(--g-text-secondary);
    font-size: 0.8125rem;
}

/* ── Actions ── */
.actions-cell[b-4oqh3tyc7x] {
    display: flex;
    gap: 4px;
}

.dropdown-wrap[b-4oqh3tyc7x] {
    position: relative;
}

/* btn-icon → uses global .g-btn-icon */

.action-dropdown[b-4oqh3tyc7x] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 160px;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    padding: 4px 0;
}

.action-dropdown-item[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--g-text-body);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.action-dropdown-item:hover[b-4oqh3tyc7x] {
    background: var(--g-gray-50);
}

.action-dropdown-item svg[b-4oqh3tyc7x] {
    color: var(--g-text-secondary);
    flex-shrink: 0;
}

/* ── Mobile Cards (hidden on desktop) ── */
.users-cards-wrap[b-4oqh3tyc7x] {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.user-card[b-4oqh3tyc7x] {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-lg);
    padding: 14px;
}

.user-card-top[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.user-card-meta[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 48px;
}

.user-card-meta .activity-text[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .section-title[b-4oqh3tyc7x] {
        font-size: 1rem;
    }

    .section-subtitle[b-4oqh3tyc7x] {
        font-size: 0.75rem;
    }

    .users-table-wrap[b-4oqh3tyc7x] {
        overflow-x: auto;
    }

    .users-table thead th[b-4oqh3tyc7x] {
        font-size: 0.625rem;
        padding: 10px 12px;
    }

    .users-table tbody td[b-4oqh3tyc7x] {
        padding: 10px 12px;
        font-size: 0.75rem;
    }

    .user-name-link[b-4oqh3tyc7x] {
        font-size: 0.75rem;
    }

    .user-email[b-4oqh3tyc7x] {
        font-size: 0.6875rem;
    }

    .role-badge[b-4oqh3tyc7x] {
        font-size: 0.625rem;
        padding: 2px 8px;
    }

    .status-badge[b-4oqh3tyc7x] {
        font-size: 0.6875rem;
    }

    .activity-text[b-4oqh3tyc7x] {
        font-size: 0.6875rem;
    }

    .search-bar[b-4oqh3tyc7x] {
        max-width: 220px;
    }

    .search-input[b-4oqh3tyc7x] {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .users-header[b-4oqh3tyc7x] {
        flex-direction: column;
        gap: 12px;
    }

    .g-btn-primary[b-4oqh3tyc7x] {
        width: 100%;
        justify-content: center;
    }

    .users-table-wrap[b-4oqh3tyc7x] {
        display: none;
    }

    .users-cards-wrap[b-4oqh3tyc7x] {
        display: flex;
    }
}

@media (max-width: 480px) {
    .user-card-meta[b-4oqh3tyc7x] {
        padding-left: 0;
    }
}

.limit-warning-msg[b-4oqh3tyc7x] {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #fff1f2; /* Soft red background */
    color: #e11d48; /* Deep red text */
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #ffe4e6;
    line-height: 0;
}