* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

:root {
    --primary: #f97316;
    --primary-dark: #c2410c;
    --background: #f5f7f6;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --danger: #dc2626;
    }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    }

/* ==========================================
    GENERAL
    ========================================== */
    .hidden {
    display: none !important;
    }

/* ==========================================
    LOGIN
    ========================================== */
    .auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
    radial-gradient(
    circle at top right,
    rgba(22, 163, 74, 0.12),
    transparent 35%
    ),
    #f5f7f6;
    padding: 24px;
    }

.login-card {
    width: 100%;
    max-width: 440px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08);
    }

/* BRAND */
    .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 42px;
    }

.brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    }

.brand-logo.small {
    width: 38px;
    height: 38px;
    font-size: 18px;
    }

.brand h1 {
    font-size: 19px;
    font-weight: 800;
    }

.brand span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
    }

/* LOGIN HEADING */
    .login-heading {
    margin-bottom: 30px;
    }

.login-heading h2 {
    font-size: 30px;
    margin-bottom: 8px;
    }

.login-heading p {
    color: var(--muted);
    font-size: 14px;
    }

/* FORM */
    .form-group {
    margin-bottom: 20px;
    }

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    }

.form-group input {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
    }

.form-group input:focus {
    border-color: var(--primary);
    box-shadow:
    0 0 0 3px rgba(22, 163, 74, 0.1);
    }

/* LOGIN BUTTON */
    .login-button {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    }

.login-button:hover {
    background: var(--primary-dark);
    }

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    }

/* ERROR */
    .error-message {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 14px;
    min-height: 18px;
    }

/* ==========================================
    DASHBOARD
    ========================================== */
    .dashboard-page {
    min-height: 100vh;
    }

/* TOPBAR */
/* =====================================================
    HRMS HEADER NAVIGATION + SIDEBAR
    ===================================================== */
    .topbar {
    height: 72px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 0 26px;
    gap: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    }

.topbar-brand strong {
    display: block;
    font-size: 14px;
    }

.topbar-brand span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 22px;
    }

.user-info {
    text-align: right;
    }

.user-info strong {
    display: block;
    font-size: 13px;
    }

.user-info span {
    display: block;
    font-size: 11px;
    color: var(--primary);
    margin-top: 3px;
    }

.logout-button {
    border: 1px solid var(--border);
    background: white;
    border-radius: 8px;
    padding: 9px 15px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    }

.logout-button:hover {
    background: #f9fafb;
    }

/* CONTENT */
    .dashboard-content {
    max-width: 1400px;
    margin: auto;
    padding: 42px 32px;
    }

/* HEADING */
    .eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    }

.page-heading h1 {
    font-size: 32px;
    margin-top: 7px;
    }

.page-heading p {
    color: var(--muted);
    margin-top: 7px;
    font-size: 14px;
    }

/* STATS */
    .stats-grid {
    display: grid;
    grid-template-columns:
    repeat(4, 1fr);
    gap: 18px;
    margin-top: 34px;
    }

.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 15px;
    }

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #fff7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    }

.stat-card span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    }

.stat-card strong {
    display: block;
    font-size: 21px;
    margin-top: 4px;
    }

.status-online {
    color: var(--primary);
    font-size: 18px !important;
    }

/* MODULES */
    .modules-section {
    margin-top: 48px;
    }

.section-heading h2 {
    font-size: 20px;
    }

.section-heading p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
    }

.modules-grid {
    display: grid;
    grid-template-columns:
    repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
    }

.module-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 25px;
    cursor: pointer;
    transition: 0.2s;
    }

.module-card:hover {
    transform: translateY(-2px);
    border-color: #fed7aa;
    box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.05);
    }

.module-icon {
    font-size: 22px;
    margin-bottom: 15px;
    }

.module-card h3 {
    font-size: 15px;
    }

.module-card p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
    }

/* ==========================================
    RESPONSIVE
    ========================================== */
@media (max-width: 900px) {
    .stats-grid {
    grid-template-columns:
    repeat(2, 1fr);
    }

.modules-grid {
    grid-template-columns:
    repeat(2, 1fr);
    }
    }

@media (max-width: 600px) {
    .login-card {
    padding: 28px;
    }

.topbar {
    padding: 0 18px;
    }

.user-info {
    display: none;
    }

.dashboard-content {
    padding: 28px 18px;
    }

.stats-grid,
    .modules-grid {
    grid-template-columns: 1fr;
    }
    }

/* =====================================================
    EMPLOYEE DIRECTORY
    ===================================================== */
    .employees-page {
    min-height: calc(100vh - 72px);
    background: #f5f7f6;
    padding: 32px;
    }

.employees-header {
    max-width: 1470px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    }

.employees-header h1 {
    font-size: 28px;
    color: #1f2937;
    margin-top: 6px;
    }

.employees-header p {
    color: #6b7280;
    font-size: 13px;
    margin-top: 5px;
    }

.back-button {
    border: 1px solid #e5e7eb;
    background: white;
    color: #1f2937;
    border-radius: 9px;
    padding: 10px 17px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    }

.back-button:hover {
    border-color: #f97316;
    color: #f97316;
    }

/* =====================================================
    EMPLOYEE STAT CARDS
    ===================================================== */
    .employee-stats {
    max-width: 1470px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
    repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 26px;
    }

.employee-stat {
    min-height: 88px;
    border-radius: 17px;
    padding: 18px 23px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.08);
    }

.employee-stat::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -25px;
    top: -35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    }

.employee-stat span {
    display: block;
    font-size: 13px;
    position: relative;
    z-index: 2;
    }

.employee-stat strong {
    display: block;
    font-size: 30px;
    margin-top: 5px;
    position: relative;
    z-index: 2;
    }

.employee-stat.total {
    background:
    linear-gradient(
    135deg,
    #f97316,
    #fb923c
    );
    }

.employee-stat.active {
    background:
    linear-gradient(
    135deg,
    #f97316,
    #fb923c
    );
    }

.employee-stat.inactive {
    background:
    linear-gradient(
    135deg,
    #ef2939,
    #f04444
    );
    }

/* =====================================================
    SEARCH / FILTERS
    ===================================================== */
    .employee-controls {
    max-width: 1470px;
    margin: 0 auto 22px;
    display: grid;
    grid-template-columns:
    1fr 220px 180px;
    gap: 12px;
    }

.search-box {
    height: 45px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 9px;
    }

.search-box span {
    color: #9ca3af;
    font-size: 20px;
    }

.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13px;
    background: transparent;
    }

.employee-controls select {
    height: 45px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 10px;
    padding: 0 9px;
    color: #374151;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    }

/* =====================================================
    EMPLOYEE GRID
    ===================================================== */
    .employee-grid {
    max-width: 1470px;
    margin: 0 auto;
    display: grid;
    grid-template-columns:
    repeat(5, minmax(0, 1fr));
    gap: 18px;
    }

/* =====================================================
    EMPLOYEE CARD
    ===================================================== */
    .employee-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    min-height: 300px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
    }

.employee-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background:
    linear-gradient(
    90deg,
    #ff6a00,
    #ff4050
    );
    }

.employee-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -42px;
    top: -42px;
    border-radius: 50%;
    background: rgba(255, 102, 102, 0.07);
    }

.employee-card:hover {
    transform: translateY(-4px);
    border-color: #dbe5e0;
    box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.08);
    }

.employee-photo-wrapper {
    width: 88px;
    height: 88px;
    margin: 7px auto 17px;
    border-radius: 50%;
    padding: 3px;
    background: white;
    border: 2px solid #ffe0bd;
    box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.09);
    position: relative;
    z-index: 2;
    }

.employee-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    }

.employee-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #c2410c;
    font-size: 25px;
    font-weight: 800;
    }

.employee-name {
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
    min-height: 21px;
    }

.employee-title {
    font-size: 15px;
    color: #374151;
    line-height: 1.35;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8edf0;
    }

.employee-department {
    font-size: 12px;
    color: #65748b;
    margin-top: 12px;
    min-height: 16px;
    }

.employee-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 11px;
    padding: 4px 13px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    }

.employee-status.active {
    background: #ffedd5;
    color: #ea580c;
    }

.employee-status.inactive {
    background: #fee2e2;
    color: #dc2626;
    }

/* =====================================================
    LOADING / EMPTY
    ===================================================== */
    .employees-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #6b7280;
    font-size: 14px;
    }

.employees-empty {
    grid-column: 1 / -1;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    padding: 70px 20px;
    text-align: center;
    color: #6b7280;
    }

/* =====================================================
    RESPONSIVE
    ===================================================== */
@media (max-width: 1250px) {
    .employee-grid {
    grid-template-columns:
    repeat(4, minmax(0, 1fr));
    }
    }

@media (max-width: 1000px) {
    .employee-grid {
    grid-template-columns:
    repeat(3, minmax(0, 1fr));
    }
    }

@media (max-width: 750px) {
    .employee-stats {
    grid-template-columns: 1fr;
    }

.employee-controls {
    grid-template-columns: 1fr;
    }

.employee-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr));
    }

.employees-page {
    padding: 20px;
    }
    }

@media (max-width: 500px) {
    .employee-grid {
    grid-template-columns: 1fr;
    }

.employees-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    }
    }

/* =====================================================
    CLICKABLE EMPLOYEE STAT CARDS
    ===================================================== */
    .clickable-card {
    cursor: pointer;
    }

.employee-stat.clickable-card {
    cursor: pointer;
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
    }

.employee-stat.clickable-card:hover {
    transform: translateY(-3px);
    box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.12);
    filter: brightness(1.03);
    }

.employee-stat.clickable-card:active {
    transform: translateY(-1px);
    }

/* =====================================================
    CLICKABLE CARDS - POINTER CURSOR
    ===================================================== */
    .clickable-card {
    cursor: pointer;
    }

/* Dashboard employee cards */
    #totalEmployeesCard,
    #activeEmployeesCard,
    #employeesModule {
    cursor: pointer;
    }

/* Employee Directory cards */
    #directoryTotalCard,
    #directoryActiveCard,
    #directoryInactiveCard {
    cursor: pointer;
    }

/* Hover effect */
    #totalEmployeesCard:hover,
    #activeEmployeesCard:hover,
    #employeesModule:hover,
    #directoryTotalCard:hover,
    #directoryActiveCard:hover,
    #directoryInactiveCard:hover {
    cursor: pointer;
    user-select: none;
    }

.topbar {
    height: 72px;
    position: relative;
    z-index: 1000;
    padding: 0 26px;
    gap: 24px;
    }

.topbar-brand {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    }

/* =====================================================
    CENTER HEADER NAVIGATION
    ===================================================== */
    .main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 1;
    }

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    }

.nav-button {
    border: none;
    background: transparent;
    color: #4b5563;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: 0.2s ease;
    white-space: nowrap;
    }

.nav-button:hover {
    background: #fff7ed;
    color: var(--primary);
    }

.nav-button.active {
    background: #fff7ed;
    color: var(--primary-dark);
    }

.hrms-sidebar {
    position: fixed;
    left: 0;
    top: 72px;
    bottom: 0;
    width: 245px;
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 25px 14px 18px;
    display: flex;
    flex-direction: column;
    z-index: 900;
    }

.sidebar-header {
    padding: 0 12px 18px;
    border-bottom: 1px solid #eef0f2;
    }

.sidebar-eyebrow {
    display: block;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    }

.sidebar-header h2 {
    font-size: 19px;
    color: #111827;
    }

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 15px;
    }

.sidebar-button {
    width: 100%;
    min-height: 43px;
    border: 1px solid transparent;
    background: transparent;
    color: #4b5563;
    border-radius: 9px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: 0.2s ease;
    }

.sidebar-button:hover {
    background: #f8faf9;
    color: var(--primary-dark);
    }

.sidebar-button.active {
    background: #fff7ed;
    color: var(--primary-dark);
    border-color: #fed7aa;
    font-weight: 700;
    }

.sidebar-button-icon {
    width: 25px;
    text-align: center;
    font-size: 15px;
    flex: 0 0 25px;
    }

.sidebar-footer {
    margin-top: auto;
    padding: 16px 12px 4px;
    border-top: 1px solid #eef0f2;
    }

.sidebar-footer span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #374151;
    }

.sidebar-footer small {
    display: block;
    margin-top: 4px;
    color: #9ca3af;
    font-size: 10px;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page {
    margin-left: 245px;
    }

.dashboard-content {
    max-width: none;
    padding: 42px 42px;
    }

.employees-page {
    min-height: calc(100vh - 72px);
    padding: 32px 42px;
    }

.module-placeholder-page {
    min-height: calc(100vh - 72px);
    background: var(--background);
    padding: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    }

.module-placeholder-card {
    width: min(720px, 100%);
    margin-top: 70px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
    }

.placeholder-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 18px;
    background: #fff7ed;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    }

.module-placeholder-card h1 {
    margin-top: 10px;
    font-size: 28px;
    color: #1f2937;
    }

.module-placeholder-card p {
    margin: 10px auto 0;
    max-width: 500px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    }

.placeholder-badge {
    display: inline-flex;
    margin-top: 18px;
    padding: 7px 13px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    }

/* Dashboard cards remain clickable */
    #totalEmployeesCard,
    #activeEmployeesCard,
    #employeesModule {
    cursor: pointer;
    }

/* Responsive navigation */
@media (max-width: 1150px) {
    .main-nav {
    gap: 1px;
    }

.nav-button {
    padding: 0 8px;
    font-size: 11px;
    }

.hrms-sidebar {
    width: 220px;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page,
    .candidates-page {
    margin-left: 220px;
    }
    }

@media (max-width: 900px) {
    .topbar {
    padding: 0 18px;
    }

.main-nav {
    display: none;
    }

.hrms-sidebar {
    position: relative;
    top: auto;
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 14px;
    }

.sidebar-header {
    display: none;
    }

.sidebar-menu {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 0;
    }

.sidebar-button {
    width: auto;
    min-width: 145px;
    }

.sidebar-footer {
    display: none;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page,
    .candidates-page {
    margin-left: 0;
    }

.dashboard-content {
    padding: 28px 20px;
    }

.employees-page {
    padding: 24px 20px;
    }

.module-placeholder-page {
    padding: 24px 20px;
    }
    }

@media (max-width: 600px) {
    .topbar {
    height: 64px;
    }

.hrms-sidebar {
    top: auto;
    }

.topbar-brand span {
    display: none;
    }

.topbar-right {
    gap: 8px;
    }

.sidebar-button {
    min-width: 100%;
    }

.module-placeholder-card {
    padding: 35px 22px;
    margin-top: 25px;
    }
    }

/* =====================================================
    EMPLOYEE PROFILE MODE
    The profile replaces the normal HRMS sidebar.
    ===================================================== */
    .dashboard-page.profile-mode .hrms-sidebar {
    display: none !important;
    }

.dashboard-page.profile-mode .dashboard-content,
    .dashboard-page.profile-mode .employees-page,
    .dashboard-page.profile-mode .module-placeholder-page {
    margin-left: 0;
    }

/* =====================================================
    EMPLOYEE PROFILE
    ===================================================== */
/*
    Employee Profile has its own fixed sidebar.
    The global HRMS sidebar is hidden while profile is open.
*/
    .dashboard-page.profile-mode .hrms-sidebar {
    display: none !important;
    }

/* =====================================================
    PROFILE PAGE WRAPPER
    ===================================================== */
    .employee-profile-page {
    min-height: calc(100vh - 72px);
    width: 100%;
    margin-left: 0;
    display: block;
    background: #f5f7f6;
    }

/* =====================================================
    FIXED EMPLOYEE PROFILE SIDEBAR
    ===================================================== */
    .employee-profile-sidebar {
    position: fixed;
    left: 0;
    top: 72px;
    bottom: 0;
    width: 285px;
    height: auto;
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 25px 15px 20px;
    overflow-y: auto;
    z-index: 900;
    }

/* =====================================================
    PROFILE SIDEBAR TITLE
    ===================================================== */
    .profile-sidebar-title {
    padding: 0 12px 20px;
    border-bottom: 1px solid #eef0f2;
    }

.profile-sidebar-title .eyebrow {
    color: var(--primary);
    }

.profile-sidebar-title h2 {
    margin-top: 5px;
    font-size: 21px;
    color: #1f2937;
    }

/* =====================================================
    BACK BUTTON
    ===================================================== */
    .profile-back-button {
    width: 100%;
    margin: 16px 0 18px;
    min-height: 48px;
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: var(--primary-dark);
    border-radius: 12px;
    padding: 0 14px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
    }

.profile-back-button:hover {
    background: #ffedd5;
    transform: translateY(-1px);
    box-shadow:
    0 5px 15px rgba(22, 163, 74, 0.10);
    }

/* =====================================================
    PROFILE NAVIGATION
    ===================================================== */
    .employee-profile-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    }

.profile-nav-button {
    width: 100%;
    min-height: 46px;
    border: 1px solid transparent;
    background: transparent;
    color: #374151;
    border-radius: 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
    }

.profile-nav-button span:first-child {
    width: 24px;
    text-align: center;
    flex: 0 0 24px;
    font-size: 15px;
    }

.profile-nav-button:hover {
    background: #fff7ed;
    color: var(--primary-dark);
    }

.profile-nav-button.active {
    background:
    linear-gradient(
    135deg,
    #f97316,
    #fb923c
    );
    color: #ffffff;
    font-weight: 700;
    box-shadow:
    0 5px 14px
    rgba(22, 163, 74, 0.16);
    }

/* =====================================================
    PROFILE MAIN CONTENT
    ===================================================== */
    .employee-profile-main {
    min-width: 0;
    margin-left: 285px;
    padding: 30px 28px 60px;
    }

/* =====================================================
    PROFILE CONTENT
    ===================================================== */
    .employee-profile-content {
    width: 100%;
    max-width: 100%;
    }

/* =====================================================
    PROFILE HERO
    ===================================================== */
    .employee-profile-hero {
    min-height: 118px;
    border-radius: 20px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    color: #ffffff;
    background:
    linear-gradient(
    115deg,
    #f97316 0%,
    #fb923c 100%
    );
    box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.10);
    margin-bottom: 20px;
    }

.profile-hero-photo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 50%;
    padding: 3px;
    background: #ffffff;
    border: 2px solid
    rgba(255, 255, 255, 0.65);
    overflow: hidden;
    box-shadow:
    0 5px 15px
    rgba(0, 0, 0, 0.12);
    }

.profile-hero-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    }

.profile-hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    }

.profile-hero-info {
    min-width: 0;
    flex: 1;
    }

.profile-hero-info h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    }

.profile-hero-info p {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.95;
    }

.profile-hero-status {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid
    rgba(255, 255, 255, 0.45);
    background:
    rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 800;
    }

/* =====================================================
    PROFILE SECTION CARDS
    ===================================================== */
    .profile-section-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 24px;
    margin-bottom: 16px;
    box-shadow:
    0 4px 18px
    rgba(0, 0, 0, 0.035);
    }

/*
    IMPORTANT:
    JavaScript uses this class to turn
    each sidebar item into its own page.
*/
    .profile-section-card.profile-page-hidden {
    display: none !important;
    }

/* =====================================================
    PROFILE SECTION TITLE
    ===================================================== */
    .profile-section-title {
    margin-bottom: 20px;
    }

.profile-section-title h2 {
    font-size: 22px;
    font-weight: 500;
    color: #1f2937;
    }

/* =====================================================
    PROFILE INFO GRID
    ===================================================== */
    .profile-info-grid {
    display: grid;
    grid-template-columns:
    repeat(
    3,
    minmax(0, 1fr)
    );
    gap: 16px;
    }

.profile-info-item {
    min-height: 52px;
    padding: 15px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    font-size: 13px;
    color: #374151;
    }

.profile-info-label {
    color: #374151;
    margin-right: 5px;
    }

.profile-info-value {
    font-weight: 700;
    color: #172033;
    }

/* =====================================================
    SUBSECTION TITLE
    ===================================================== */
    .profile-subsection-title {
    margin:
    12px 0
    12px;
    font-size: 14px;
    color: #374151;
    font-weight: 600;
    }

/* =====================================================
    DOCUMENT GRID
    ===================================================== */
    .profile-documents-grid {
    display: grid;
    grid-template-columns:
    repeat(
    3,
    minmax(0, 1fr)
    );
    gap: 16px;
    }

/* =====================================================
    PROFILE LOADING
    ===================================================== */
    .profile-loading {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: #6b7280;
    font-size: 14px;
    }

/* =====================================================
    PROFILE ERROR
    ===================================================== */
    .profile-error {
    padding: 25px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 16px;
    color: #be123c;
    font-size: 14px;
    }

.employee-card {
    user-select: none;
    cursor: pointer;
    }

.employee-card:focus-visible {
    outline:
    3px solid
    rgba(22, 163, 74, 0.25);
    outline-offset: 2px;
    }

/* =====================================================
    PROFILE RESPONSIVE
    ===================================================== */
@media (max-width: 1150px) {
    .employee-profile-sidebar {
    width: 245px;
    }

.employee-profile-main {
    margin-left: 245px;
    }

.profile-info-grid,
    .profile-documents-grid {
    grid-template-columns:
    repeat(
    2,
    minmax(0, 1fr)
    );
    }
    }

@media (max-width: 900px) {
    .employee-profile-page {
    display: block;
    }

.employee-profile-sidebar {
    position: relative;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom:
    1px solid
    var(--border);
    padding: 16px;
    }

.employee-profile-main {
    margin-left: 0;
    padding: 20px;
    }

.employee-profile-nav {
    display: grid;
    grid-template-columns:
    repeat(
    2,
    minmax(0, 1fr)
    );
    }
    }

@media (max-width: 650px) {
    .employee-profile-hero {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px;
    }

.profile-hero-info h1 {
    font-size: 24px;
    }

.profile-hero-status {
    margin-left: 98px;
    margin-top: -10px;
    }

.profile-info-grid,
    .profile-documents-grid,
    .employee-profile-nav {
    grid-template-columns: 1fr;
    }
    }

/* =====================================================
    FINAL HEADER POSITION FIX
    ===================================================== */
/* Main HRMS header */
    .dashboard-page > .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 26px !important;
    }

/* Create space below fixed header */
    .dashboard-page {
    padding-top: 72px !important;
    min-height: 100vh !important;
    }

/* Profile page starts exactly below header */
    .dashboard-page.profile-mode .employee-profile-page {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    min-height: calc(100vh - 72px) !important;
    }

/* Profile sidebar stays directly below header */
    .dashboard-page.profile-mode .employee-profile-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 72px !important;
    bottom: 0 !important;
    width: 285px !important;
    height: calc(100vh - 72px) !important;
    z-index: 9000 !important;
    overflow-y: auto !important;
    }

/* Profile content starts beside sidebar */
    .dashboard-page.profile-mode .employee-profile-main {
    margin-left: 285px !important;
    padding: 30px 28px 60px !important;
    min-width: 0 !important;
    }

.dashboard-page.profile-mode .employee-profile-hero {
    position: relative !important;
    margin-top: 0 !important;
    }

/* =====================================================
    MOBILE
    ===================================================== */
@media (max-width: 900px) {
    .dashboard-page > .topbar {
    height: 64px !important;
    }

.dashboard-page {
    padding-top: 64px !important;
    }

.dashboard-page.profile-mode .employee-profile-sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: 100 !important;
    }

.dashboard-page.profile-mode .employee-profile-main {
    margin-left: 0 !important;
    padding: 20px !important;
    }

.dashboard-page.profile-mode .employee-profile-page {
    min-height: calc(100vh - 64px) !important;
    }
    }

/* =====================================================
    FAMILY & DEPENDENTS
    CLEAN PREMIUM GREEN TABLE
    ===================================================== */
    .family-dependents-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #ffffff;
    box-sizing: border-box;
    }

.family-dependents-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #7c2d12;
    }

/* =====================================================
    TABLE HEADER
    ===================================================== */
    .family-dependents-table thead th {
    background: #ffedd5;
    color: #9a3412;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border-right: 1px solid #fed7aa;
    border-bottom: 1px solid #fdba74;
    white-space: nowrap;
    }

.family-dependents-table thead th:first-child {
    text-align: center;
    width: 6%;
    }

.family-dependents-table thead th:nth-child(2) {
    width: 23%;
    }

.family-dependents-table thead th:nth-child(3) {
    width: 15%;
    }

.family-dependents-table thead th:nth-child(4) {
    width: 17%;
    }

.family-dependents-table thead th:nth-child(5) {
    width: 16%;
    }

.family-dependents-table thead th:nth-child(6) {
    width: 10%;
    }

.family-dependents-table thead th:nth-child(7) {
    width: 13%;
    }

/* =====================================================
    TABLE BODY
    ===================================================== */
    .family-dependents-table tbody td {
    padding: 12px 14px;
    background: #ffffff;
    color: #334155;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.family-dependents-table tbody td:first-child {
    text-align: center;
    color: #64748b;
    font-weight: 600;
    }

.family-dependents-table tbody tr:last-child td {
    border-bottom: none;
    }

.family-dependents-table th:last-child,
    .family-dependents-table td:last-child {
    border-right: none;
    }

/* =====================================================
    HOVER
    ===================================================== */
    .family-dependents-table tbody tr {
    transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
    }

.family-dependents-table tbody tr:hover td {
    background: #fffaf5;
    }

/* =====================================================
    ATTACHMENT LINK
    ===================================================== */
    .family-attachment-link {
    color: #f97316;
    font-weight: 600;
    text-decoration: none;
    }

.family-attachment-link:hover {
    color: #c2410c;
    text-decoration: underline;
    }

/* =====================================================
    LOADING / EMPTY / ERROR
    ===================================================== */
    .family-dependents-loading,
    .family-dependents-empty,
    .family-dependents-error {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    }

.family-dependents-error {
    color: #dc2626;
    }

@media (max-width: 900px) {
    .family-dependents-table {
    font-size: 12px;
    }

.family-dependents-table thead th,
    .family-dependents-table tbody td {
    padding: 10px 9px;
    }
    }

@media (max-width: 650px) {
    .family-dependents-table-wrap {
    overflow-x: auto;
    }

.family-dependents-table {
    min-width: 760px;
    table-layout: fixed;
    }
    }

/* =====================================================
    FAMILY & DEPENDENTS — FULL WIDTH OVERRIDE
    ===================================================== */
    #profileFamilyGrid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    }

/* TABLE CONTAINER */
    #profileFamilyGrid .family-dependents-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #ffffff;
    }

/* TABLE */
    #profileFamilyGrid .family-dependents-table {
    display: table;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    }

/* =====================================================
    COLUMN WIDTHS
    ===================================================== */
    #profileFamilyGrid .family-dependents-table th:nth-child(1),
    #profileFamilyGrid .family-dependents-table td:nth-child(1) {
    width: 6%;
    text-align: center;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(2),
    #profileFamilyGrid .family-dependents-table td:nth-child(2) {
    width: 22%;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(3),
    #profileFamilyGrid .family-dependents-table td:nth-child(3) {
    width: 13%;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(4),
    #profileFamilyGrid .family-dependents-table td:nth-child(4) {
    width: 16%;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(5),
    #profileFamilyGrid .family-dependents-table td:nth-child(5) {
    width: 16%;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(6),
    #profileFamilyGrid .family-dependents-table td:nth-child(6) {
    width: 10%;
    }

#profileFamilyGrid .family-dependents-table th:nth-child(7),
    #profileFamilyGrid .family-dependents-table td:nth-child(7) {
    width: 17%;
    }

/* =====================================================
    HEADER
    ===================================================== */
    #profileFamilyGrid .family-dependents-table thead th {
    background: #ffedd5;
    color: #9a3412;
    padding: 13px 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    box-sizing: border-box;
    }

#profileFamilyGrid .family-dependents-table thead th:first-child {
    text-align: center;
    }

/* =====================================================
    BODY
    ===================================================== */
    #profileFamilyGrid .family-dependents-table tbody td {
    padding: 13px 12px;
    font-size: 13px;
    color: #334155;
    background: #ffffff;
    border-right: 1px solid #e5ebe7;
    border-bottom: 1px solid #e5ebe7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    }

#profileFamilyGrid .family-dependents-table tbody td:first-child {
    text-align: center;
    color: #64748b;
    font-weight: 600;
    }

/* REMOVE LAST BORDERS */
    #profileFamilyGrid .family-dependents-table th:last-child,
    #profileFamilyGrid .family-dependents-table td:last-child {
    border-right: none;
    }

#profileFamilyGrid .family-dependents-table tbody tr:last-child td {
    border-bottom: none;
    }

#profileFamilyGrid .family-dependents-table tbody tr:hover td {
    background: #f4fcf6;
    }

/* =====================================================
    ATTACHMENT
    ===================================================== */
    #profileFamilyGrid .family-attachment-link {
    color: #f97316;
    font-weight: 600;
    text-decoration: none;
    }

#profileFamilyGrid .family-attachment-link:hover {
    color: #c2410c;
    text-decoration: underline;
    }

/* =====================================================
    MOBILE ONLY
    ===================================================== */
@media (max-width: 700px) {
    #profileFamilyGrid .family-dependents-table-wrap {
    overflow-x: auto;
    }

#profileFamilyGrid .family-dependents-table {
    min-width: 760px !important;
    }
    }

/* =====================================================
    COMPENSATION DETAILS
    SALARY HISTORY
    ===================================================== */
    .salary-history-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dfe8e2;
    border-radius: 14px;
    overflow: hidden;
    }

/* =====================================================
    SALARY TOP BAR
    ===================================================== */
    .salary-history-topbar {
    width: 100%;
    padding: 18px 20px;
    background: #f8faf9;
    border-bottom: 1px solid #e5ebe7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    }

.salary-current-summary {
    display: flex;
    align-items: center;
    gap: 45px;
    }

.salary-current-summary > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    }

.salary-current-summary span {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    }

.salary-current-summary strong {
    font-size: 19px;
    color: #9a3412;
    font-weight: 800;
    }

/* =====================================================
    HISTORY TOGGLE
    ===================================================== */
    .salary-history-toggle {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
    }

.salary-history-toggle:hover {
    background: #ffedd5;
    border-color: #fdba74;
    transform: translateY(-1px);
    }

/* =====================================================
    SALARY HISTORY TABLE
    ===================================================== */
    .salary-history-table-wrap {
    width: 100%;
    overflow-x: auto;
    }

.salary-history-table {
    width: 100%;
    min-width: 850px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 12px;
    color: #334155;
    }

.salary-history-table thead th {
    background: #ffedd5;
    color: #9a3412;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    padding: 13px 12px;
    border-right: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    white-space: nowrap;
    }

.salary-history-table thead th:nth-child(1) {
    width: 14%;
    }

.salary-history-table thead th:nth-child(2) {
    width: 16%;
    }

.salary-history-table thead th:nth-child(3) {
    width: 16%;
    }

.salary-history-table thead th:nth-child(4) {
    width: 16%;
    }

.salary-history-table thead th:nth-child(5) {
    width: 12%;
    }

.salary-history-table thead th:nth-child(6) {
    width: 26%;
    }

.salary-history-table tbody td {
    padding: 13px 12px;
    background: #ffffff;
    color: #334155;
    border-right: 1px solid #e5ebe7;
    border-bottom: 1px solid #e5ebe7;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.salary-history-table tbody tr {
    transition: background 0.18s ease;
    }

.salary-history-table tbody tr:hover td {
    background: #fffaf5;
    }

/* Remove final borders */
    .salary-history-table th:last-child,
    .salary-history-table td:last-child {
    border-right: none;
    }

.salary-history-table tbody tr:last-child td {
    border-bottom: none;
    }

/* =====================================================
    SALARY VALUES
    ===================================================== */
    .salary-history-table tbody td:nth-child(2),
    .salary-history-table tbody td:nth-child(3),
    .salary-history-table tbody td:nth-child(4) {
    font-weight: 700;
    color: #7c2d12;
    }

/* Percentage */
    .salary-history-table tbody td:nth-child(5) {
    font-weight: 700;
    color: #f97316;
    }

/* Remarks */
    .salary-history-table tbody td:nth-child(6) {
    color: #64748b;
    }

/* =====================================================
    LOADING
    ===================================================== */
    .salary-history-loading {
    width: 100%;
    padding: 35px 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    }

/* =====================================================
    ERROR
    ===================================================== */
    .salary-history-error {
    width: 100%;
    padding: 25px;
    text-align: center;
    color: #dc2626;
    background: #fff7f7;
    font-size: 13px;
    }

/* =====================================================
    EMPTY
    ===================================================== */
    .salary-history-empty {
    width: 100%;
    padding: 35px 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    }

/* =====================================================
    HIDDEN HISTORY
    ===================================================== */
    .salary-history-table-wrap.hidden {
    display: none !important;
    }

@media (max-width: 900px) {
    .salary-history-topbar {
    align-items: flex-start;
    flex-direction: column;
    }

.salary-current-summary {
    width: 100%;
    gap: 30px;
    }

.salary-history-toggle {
    align-self: flex-end;
    }
    }

@media (max-width: 600px) {
    .salary-history-topbar {
    padding: 15px;
    }

.salary-current-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    }

.salary-history-toggle {
    align-self: flex-start;
    }
    }

/* =====================================================
    COMPENSATION DETAILS — FINAL PREMIUM OVERRIDES
    Full-width green HRMS layout
    ===================================================== */
    .compensation-section-card {
    width: 100% !important;
    max-width: 100% !important;
    }

.compensation-section-card .profile-subsection-title {
    margin: 18px 0 10px !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    }

.compensation-section-card .profile-subsection-title:first-of-type {
    margin-top: 4px !important;
    }

/* =====================================================
    SALARY DETAILS
    ===================================================== */
    #profileSalaryGrid,
    #profileBenefitsGrid,
    #profileDeductionsGrid,
    #profilePayrollGrid,
    #profileCompensationHistoryGrid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-history-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    }

#profileSalaryGrid .salary-history-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 2px 0 12px !important;
    gap: 20px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-current-summary {
    display: flex !important;
    align-items: center !important;
    gap: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    }

#profileSalaryGrid .salary-current-summary > div {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    }

#profileSalaryGrid .salary-current-summary span {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    }

#profileSalaryGrid .salary-current-summary strong {
    color: #1f2937 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    }

#profileSalaryGrid .salary-history-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 98px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: none !important;
    border-radius: 9px !important;
    background: #ff6b00 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .2s ease, transform .2s ease !important;
    }

#profileSalaryGrid .salary-history-toggle:hover {
    background: #e85d00 !important;
    transform: translateY(-1px);
    }

#profileSalaryGrid .salary-history-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    }

#profileSalaryGrid .salary-history-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-history-table thead th {
    height: 38px !important;
    padding: 9px 12px !important;
    background: #ffbd78 !important;
    color: #111827 !important;
    border: 1px solid #ffffff !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-history-table th:nth-child(1),
    #profileSalaryGrid .salary-history-table td:nth-child(1) { width: 15% !important; }

#profileSalaryGrid .salary-history-table th:nth-child(2),
    #profileSalaryGrid .salary-history-table td:nth-child(2) { width: 16% !important; }

#profileSalaryGrid .salary-history-table th:nth-child(3),
    #profileSalaryGrid .salary-history-table td:nth-child(3) { width: 16% !important; }

#profileSalaryGrid .salary-history-table th:nth-child(4),
    #profileSalaryGrid .salary-history-table td:nth-child(4) { width: 18% !important; }

#profileSalaryGrid .salary-history-table th:nth-child(5),
    #profileSalaryGrid .salary-history-table td:nth-child(5) { width: 13% !important; }

#profileSalaryGrid .salary-history-table th:nth-child(6),
    #profileSalaryGrid .salary-history-table td:nth-child(6) { width: 22% !important; }

#profileSalaryGrid .salary-history-table tbody td {
    height: 38px !important;
    padding: 9px 13px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #dfe3e8 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-history-table tbody tr:hover td {
    background: #f8fafc !important;
    }

#profileSalaryGrid .salary-history-table-wrap.hidden {
    display: none !important;
    }

#profileSalaryGrid .salary-history-loading,
    #profileSalaryGrid .salary-history-error,
    #profileSalaryGrid .salary-history-empty {
    width: 100% !important;
    padding: 24px !important;
    text-align: center !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    }

#profileSalaryGrid .salary-history-loading,
    #profileSalaryGrid .salary-history-empty {
    color: #64748b !important;
    }

#profileSalaryGrid .salary-history-error {
    color: #dc2626 !important;
    }

/* =====================================================
    BENEFITS & ALLOWANCES
    ===================================================== */
    #profileBenefitsGrid .employee-benefits-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #fed7aa !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    }

#profileBenefitsGrid .employee-benefits-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 12px !important;
    color: #7c2d12 !important;
    }

#profileBenefitsGrid .employee-benefits-table th,
    #profileBenefitsGrid .employee-benefits-table td {
    box-sizing: border-box !important;
    }

#profileBenefitsGrid .employee-benefits-table thead th {
    height: 40px !important;
    padding: 10px 11px !important;
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border-right: 1px solid #fed7aa !important;
    border-bottom: 1px solid #fdba74 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    }

/* 9 columns = 100% */
    #profileBenefitsGrid .employee-benefits-table th:nth-child(1),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(1) { width: 13% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(2),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(2) { width: 7% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(3),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(3) { width: 9% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(4),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(4) { width: 9% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(5),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(5) { width: 18% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(6),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(6) { width: 7% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(7),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(7) { width: 10% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(8),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(8) { width: 18% !important; }

#profileBenefitsGrid .employee-benefits-table th:nth-child(9),
    #profileBenefitsGrid .employee-benefits-table td:nth-child(9) { width: 9% !important; }

#profileBenefitsGrid .employee-benefits-table tbody td {
    min-height: 42px !important;
    padding: 10px 11px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    vertical-align: middle !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    }

#profileBenefitsGrid .employee-benefits-table tbody tr:hover td {
    background: #fffaf5 !important;
    }

#profileBenefitsGrid .employee-benefits-table th:last-child,
    #profileBenefitsGrid .employee-benefits-table td:last-child {
    border-right: none !important;
    }

#profileBenefitsGrid .employee-benefits-table tbody tr:last-child td {
    border-bottom: none !important;
    }

#profileBenefitsGrid .benefit-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    }

#profileBenefitsGrid .benefit-status-active {
    background: #ffedd5 !important;
    color: #f97316 !important;
    }

#profileBenefitsGrid .benefit-status-pending {
    background: #fef3c7 !important;
    color: #d97706 !important;
    }

#profileBenefitsGrid .benefit-status-availed {
    background: #ffedd5 !important;
    color: #c2410c !important;
    }

#profileBenefitsGrid .benefit-status-default {
    background: #f1f5f9 !important;
    color: #64748b !important;
    }

#profileBenefitsGrid .employee-benefits-loading,
    #profileBenefitsGrid .employee-benefits-empty,
    #profileBenefitsGrid .employee-benefits-error {
    width: 100% !important;
    padding: 24px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #64748b !important;
    box-sizing: border-box !important;
    }

#profileBenefitsGrid .employee-benefits-error {
    color: #dc2626 !important;
    }

/* =====================================================
    OTHER COMPENSATION BLOCKS
    ===================================================== */
    #profileDeductionsGrid,
    #profilePayrollGrid,
    #profileCompensationHistoryGrid {
    min-height: 0 !important;
    }

@media (max-width: 900px) {
    #profileSalaryGrid .salary-history-topbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    }

#profileSalaryGrid .salary-current-summary {
    gap: 24px !important;
    flex-wrap: wrap !important;
    }

#profileBenefitsGrid .employee-benefits-table-wrap,
    #profileSalaryGrid .salary-history-table-wrap {
    overflow-x: auto !important;
    }

#profileBenefitsGrid .employee-benefits-table {
    min-width: 1050px !important;
    }

#profileSalaryGrid .salary-history-table {
    min-width: 900px !important;
    }
    }

@media (max-width: 600px) {
    #profileSalaryGrid .salary-current-summary {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    }

#profileSalaryGrid .salary-history-toggle {
    align-self: flex-start !important;
    }
    }

/* =====================================================
    FINAL COMPENSATION POLISH
    SALARY HISTORY — PREMIUM GREEN THEME
    ===================================================== */
    #profileSalaryGrid .salary-history-container {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #dce9e1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.05) !important;
    }

#profileSalaryGrid .salary-history-topbar {
    min-height: 58px !important;
    padding: 13px 16px !important;
    background: #f8fcf9 !important;
    border-bottom: 1px solid #e3eee7 !important;
    border-radius: 14px 14px 0 0 !important;
    }

#profileSalaryGrid .salary-current-summary {
    gap: 42px !important;
    }

#profileSalaryGrid .salary-current-summary > div {
    gap: 7px !important;
    }

#profileSalaryGrid .salary-current-summary span {
    color: #476254 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    }

#profileSalaryGrid .salary-current-summary strong {
    color: #9a3412 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    }

#profileSalaryGrid .salary-history-toggle {
    min-width: 98px !important;
    height: 30px !important;
    padding: 0 15px !important;
    border: 1px solid #fed7aa !important;
    border-radius: 8px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 5px rgba(22, 163, 74, 0.15) !important;
    }

#profileSalaryGrid .salary-history-toggle:hover {
    background: #c2410c !important;
    border-color: #c2410c !important;
    transform: translateY(-1px) !important;
    }

#profileSalaryGrid .salary-history-table-wrap {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 0 14px 14px !important;
    }

#profileSalaryGrid .salary-history-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    }

#profileSalaryGrid .salary-history-table thead th {
    height: 40px !important;
    padding: 10px 12px !important;
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border: 1px solid #cce8d5 !important;
    border-top: none !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    }

#profileSalaryGrid .salary-history-table tbody td {
    height: 39px !important;
    padding: 9px 13px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2ebe5 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    }

#profileSalaryGrid .salary-history-table tbody td:nth-child(2),
    #profileSalaryGrid .salary-history-table tbody td:nth-child(3),
    #profileSalaryGrid .salary-history-table tbody td:nth-child(4) {
    color: #7c2d12 !important;
    font-weight: 600 !important;
    }

#profileSalaryGrid .salary-history-table tbody td:nth-child(5) {
    color: #f97316 !important;
    font-weight: 700 !important;
    }

#profileSalaryGrid .salary-history-table tbody tr:hover td {
    background: #f5fbf7 !important;
    }

#profileSalaryGrid .salary-history-table tbody tr:last-child td {
    border-bottom: none !important;
    }

#profileSalaryGrid .salary-history-table th:last-child,
    #profileSalaryGrid .salary-history-table td:last-child {
    border-right: none !important;
    }

@media (max-width: 900px) {
    #profileSalaryGrid .salary-history-table-wrap {
    overflow-x: auto !important;
    }

#profileSalaryGrid .salary-history-table {
    min-width: 850px !important;
    }
    }

/* =====================================================
    EMPLOYEE JOURNEY — MATCHED TARGET UI
    ===================================================== */
    .profile-journey-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

/* =====================================================
    TOP STAT CARDS — 3 COLUMNS
    ===================================================== */
    .journey-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    }

.journey-stat {
    min-height: 54px;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    box-shadow: none;
    }

.journey-stat-icon {
    display: none;
    }

.journey-stat span {
    display: block;
    color: #315a86;
    font-size: 12px;
    line-height: 1.2;
    }

.journey-stat strong {
    display: block;
    margin-top: 1px;
    color: #1828ff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.1;
    }

.journey-stat.warning .journey-stat-icon,
    .journey-stat.pip .journey-stat-icon,
    .journey-stat.award .journey-stat-icon,
    .journey-stat.performance .journey-stat-icon {
    display: none;
    }

/* =====================================================
    CHART ROW — 2 EQUAL CARDS
    ===================================================== */
    .journey-chart-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    }

.journey-chart-card {
    min-height: 155px;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    padding: 10px 12px 8px;
    box-shadow: none;
    }

.journey-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 27px;
    margin-bottom: 2px;
    }

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b6f75;
    font-size: 12px;
    white-space: nowrap;
    }

.legend-item i {
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 0;
    }

.legend-item.projects i { background: #6366f1; }

.legend-item.awards i { background: #10b981; }

.legend-item.promotions i { background: #6b6d46; }

.legend-item.warnings i { background: #ef4444; }

.legend-item.pips i { background: #f59e0b; }

.journey-canvas-wrap {
    position: relative;
    width: 100%;
    height: 118px;
    }

.journey-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    }

.journey-canvas-wrap.pie-wrap {
    height: 118px;
    }

/* =====================================================
    TIMELINE CARD
    ===================================================== */
    .journey-timeline-card {
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 13px 20px 16px;
    box-shadow: none;
    }

.journey-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    }

.journey-card-heading h3 {
    color: #1f2937;
    font-size: 17px;
    font-weight: 400;
    margin: 0;
    }

.journey-event-count {
    display: none;
    }

.journey-timeline {
    position: relative;
    margin-left: 7px;
    padding-left: 22px;
    }

.journey-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 5px;
    width: 1px;
    background: #cfd8df;
    }

.journey-timeline-item {
    position: relative;
    min-height: 46px;
    padding-bottom: 8px;
    }

.journey-timeline-item:last-child {
    padding-bottom: 0;
    }

.journey-timeline-dot {
    position: absolute;
    left: -22px;
    top: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    z-index: 2;
    background: #fb923c;
    }

.journey-timeline-item.joined .journey-timeline-dot {
    background: #6366f1;
    }

.journey-timeline-item.promotion .journey-timeline-dot {
    background: #fb923c;
    }

.journey-timeline-item.award .journey-timeline-dot {
    background: #10b981;
    }

.journey-timeline-item.project .journey-timeline-dot {
    background: #6366f1;
    }

.journey-timeline-item.warning .journey-timeline-dot {
    background: #ef4444;
    }

.journey-timeline-item.pip .journey-timeline-dot {
    background: #f59e0b;
    }

.journey-timeline-item.training .journey-timeline-dot {
    background: #10b981;
    }

.journey-timeline-content h4 {
    color: #101010;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    }

.journey-timeline-content p {
    color: #5f7184;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
    }

.journey-empty {
    min-height: 150px;
    border: 1px dashed #cbd5d1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 25px;
    background: #fafcfb;
    }

.journey-empty-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffedd5;
    color: #c2410c;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
    }

.journey-empty strong {
    color: #374151;
    font-size: 13px;
    }

.journey-empty p {
    max-width: 520px;
    color: #8a94a3;
    font-size: 11px;
    line-height: 1.6;
    margin-top: 5px;
    }

.journey-loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #6b7280;
    font-size: 12px;
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    }

.journey-loading-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid #ffedd5;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: journeySpin .7s linear infinite;
    }

@keyframes journeySpin {
    to {
    transform: rotate(360deg);
    }
    }

@media (max-width: 1000px) {
    .journey-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.journey-chart-row {
    grid-template-columns: 1fr;
    }
    }

@media (max-width: 650px) {
    .journey-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.journey-chart-row {
    grid-template-columns: 1fr;
    }

.journey-chart-legend {
    gap: 8px;
    }
    }

/* ============================================================
    EMPLOYEE JOURNEY — CHART STRUCTURE FIX
    ============================================================ */
    .journey-chart-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    align-items:stretch;
    }

.journey-chart-card{
    min-width:0;
    height:300px;
    background:#fff;
    border:1px solid #dfe4ea;
    border-radius:6px;
    padding:10px 14px;
    box-sizing:border-box;
    overflow:hidden;
    }

.journey-chart-legend{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    min-height:28px;
    margin-bottom:4px;
    }

.journey-canvas-wrap{
    position:relative;
    width:100%;
    height:245px;
    }

.journey-canvas-wrap canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
    }

.journey-canvas-wrap.pie-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    height:245px;
    }

.journey-canvas-wrap.pie-wrap canvas{
    width:220px !important;
    height:220px !important;
    max-width:220px !important;
    max-height:220px !important;
    }

/* Tablet */
@media (max-width:900px){
    .journey-chart-row{
    grid-template-columns:1fr;
    }

.journey-chart-card{
    height:290px;
    }

.journey-canvas-wrap{
    height:235px;
    }

.journey-canvas-wrap.pie-wrap{
    height:235px;
    }
    }

/* Mobile */
@media (max-width:600px){
    .journey-chart-card{
    height:270px;
    padding:8px;
    }

.journey-chart-legend{
    gap:10px;
    font-size:11px;
    }

.journey-canvas-wrap{
    height:220px;
    }

.journey-canvas-wrap.pie-wrap{
    height:220px;
    }

.journey-canvas-wrap.pie-wrap canvas{
    width:190px !important;
    height:190px !important;
    max-width:190px !important;
    max-height:190px !important;
    }
    }

/* ============================================================
    EMPLOYEE ASSETS — PREMIUM CLEAN UI
    Supabase: employee_assets
    ============================================================ */
    #profileAssetsGrid{
    width:100%;
    }

.employee-assets-page{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    }

.employee-assets-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    }

.employee-assets-summary-card{
    min-height:62px;
    padding:11px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px solid #e2e8e4;
    border-radius:9px;
    box-shadow:0 2px 8px rgba(15,23,42,.035);
    box-sizing:border-box;
    transition:.18s ease;
    }

.employee-assets-summary-card:hover{
    border-color:#bfe5ca;
    box-shadow:0 5px 16px rgba(22,163,74,.07);
    transform:translateY(-1px);
    }

.employee-assets-summary-card span{
    color:#687789;
    font-size:11px;
    font-weight:500;
    line-height:1.2;
    }

.employee-assets-summary-card strong{
    margin-top:4px;
    color:#123b27;
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    }

.employee-assets-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    }

.employee-asset-card{
    min-width:0;
    padding:15px 17px 14px;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-left:3px solid #fb923c;
    border-radius:9px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    box-sizing:border-box;
    transition:.18s ease;
    }

.employee-asset-card:hover{
    border-color:#cfe2d5;
    border-left-color:#f97316;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
    transform:translateY(-1px);
    }

.employee-asset-card.asset-returned{
    border-left-color:#94a3b8;
    }

.employee-asset-card-title{
    margin-bottom:11px;
    color:#122b46;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
    }

.employee-asset-details{
    display:flex;
    flex-direction:column;
    gap:5px;
    }

.employee-asset-details > div{
    display:flex;
    gap:4px;
    color:#173b5f;
    font-size:11.5px;
    line-height:1.35;
    }

.employee-asset-details strong{
    color:#102f4d;
    font-weight:700;
    }

.employee-asset-details span{
    min-width:0;
    }

.asset-inline-status{
    font-weight:700;
    }

.asset-status-in-use{
    color:#f97316 !important;
    }

.asset-status-returned{
    color:#ef4444 !important;
    }

.asset-status-default{
    color:#64748b !important;
    }

.asset-return-request-button{
    margin-top:13px;
    height:30px;
    padding:0 12px;
    border:1px solid #f97316;
    border-radius:6px;
    background:#fb923c;
    color:#ffffff;
    font-size:10.5px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(22,163,74,.12);
    transition:.18s ease;
    }

.asset-return-request-button:hover{
    background:#c2410c;
    border-color:#c2410c;
    transform:translateY(-1px);
    }

.asset-agreement-link{
    width:max-content;
    margin-top:3px;
    color:#c2410c;
    font-size:10.5px;
    font-weight:600;
    text-decoration:none;
    }

.asset-agreement-link:hover{
    text-decoration:underline;
    }

.employee-assets-history-card{
    width:100%;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-radius:10px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    padding:12px 13px 13px;
    box-sizing:border-box;
    }

.employee-assets-history-heading{
    min-height:27px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 2px 10px;
    }

.employee-assets-history-heading > div{
    display:flex;
    align-items:center;
    gap:7px;
    }

.employee-assets-history-icon{
    color:#f97316;
    font-size:14px;
    }

.employee-assets-history-heading h3{
    margin:0;
    color:#173b5f;
    font-size:13px;
    font-weight:700;
    }

.employee-assets-history-count{
    color:#6b7c8e;
    font-size:10.5px;
    font-weight:500;
    }

.employee-assets-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #dfe7e2;
    border-radius:6px;
    }

.employee-assets-table{
    width:100%;
    min-width:850px;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:11px;
    color:#334155;
    }

.employee-assets-table thead th{
    height:34px;
    padding:7px 8px;
    background:#ffedd5;
    color:#9a3412;
    border:1px solid #cce8d5;
    text-align:center;
    font-size:10.5px;
    font-weight:700;
    white-space:nowrap;
    }

.employee-assets-table tbody td{
    height:34px;
    padding:7px 8px;
    background:#ffffff;
    color:#334155;
    border:1px solid #e1e8e3;
    vertical-align:middle;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }

.employee-assets-table tbody tr:nth-child(even) td{
    background:#f8fcf9;
    }

.employee-assets-table tbody tr:hover td{
    background:#effbf3;
    }

.employee-assets-table th:nth-child(1){width:8%;}

.employee-assets-table th:nth-child(2){width:16%;}

.employee-assets-table th:nth-child(3){width:15%;}

.employee-assets-table th:nth-child(4){width:11%;}

.employee-assets-table th:nth-child(5){width:11%;}

.employee-assets-table th:nth-child(6){width:10%;}

.employee-assets-table th:nth-child(7){width:10%;}

.employee-assets-table th:nth-child(8){width:19%;}

.asset-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:45px;
    font-weight:700;
    }

.employee-assets-loading{
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#718096;
    font-size:11px;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-radius:9px;
    }

.employee-assets-spinner{
    width:14px;
    height:14px;
    border:2px solid #ffedd5;
    border-top-color:#f97316;
    border-radius:50%;
    animation:employeeAssetsSpin .7s linear infinite;
    }

@keyframes employeeAssetsSpin{
    to{transform:rotate(360deg);}
    }

.employee-assets-empty{
    min-height:170px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:25px;
    background:#fbfdfb;
    border:1px dashed #cbded1;
    border-radius:9px;
    }

.employee-assets-empty-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
    border-radius:50%;
    background:#ecfdf3;
    color:#f97316;
    font-size:15px;
    }

.employee-assets-empty strong{
    color:#435267;
    font-size:12px;
    font-weight:600;
    }

.employee-assets-empty p{
    margin:5px 0 0;
    color:#8a96a6;
    font-size:10.5px;
    }

.asset-return-request-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:230px;
    padding:12px 14px;
    background:#ffffff;
    border:1px solid #fed7aa;
    border-left:3px solid #fb923c;
    border-radius:9px;
    box-shadow:0 10px 30px rgba(15,23,42,.12);
    opacity:0;
    transform:translateY(8px);
    transition:.22s ease;
    }

.asset-return-request-toast.show{
    opacity:1;
    transform:translateY(0);
    }

.asset-return-request-toast strong{
    color:#9a3412;
    font-size:11px;
    }

.asset-return-request-toast span{
    color:#64748b;
    font-size:10px;
    }

@media (max-width:850px){
    .employee-assets-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
    }

.employee-assets-card-grid{
    grid-template-columns:1fr;
    }
    }

@media (max-width:600px){
    .employee-assets-summary{
    grid-template-columns:1fr;
    }

.employee-assets-summary-card{
    min-height:58px;
    }
    }

/* ============================================================
    CONNEXA — EMPLOYEE ASSETS
    Premium Clean Green UI
    ============================================================ */
    #profileAssetsSection{
    width:100%;
    }

#profileAssetsSection .profile-section-title{
    margin-bottom:16px;
    }

#profileAssetsSection .profile-section-title h2{
    color:#123b27;
    font-size:18px;
    font-weight:600;
    letter-spacing:-.2px;
    }

/* ---------- Asset Overview ---------- */
    .assets-overview{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
    }

.asset-summary-card{
    position:relative;
    min-height:70px;
    padding:12px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px solid #e1e8e3;
    border-radius:10px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    transition:all .18s ease;
    }

.asset-summary-card:hover{
    border-color:#b9ddc6;
    box-shadow:0 6px 18px rgba(22,101,52,.07);
    transform:translateY(-1px);
    }

.asset-summary-label{
    color:#68788a;
    font-size:11px;
    font-weight:500;
    line-height:1.3;
    }

.asset-summary-value{
    margin-top:3px;
    color:#123b27;
    font-size:15px;
    font-weight:650;
    line-height:1.2;
    }

.asset-summary-value.green{
    color:#c2410c;
    }

/* ---------- Asset Cards ---------- */
    .assets-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
    }

.asset-card{
    position:relative;
    min-width:0;
    padding:16px 17px 15px;
    background:#ffffff;
    border:1px solid #e1e8e3;
    border-left:3px solid #fb923c;
    border-radius:10px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
    }

.asset-card:hover{
    border-color:#b8dec5;
    border-left-color:#f97316;
    box-shadow:0 7px 20px rgba(15,23,42,.07);
    transform:translateY(-1px);
    }

.asset-card.returned{
    border-left-color:#cbd5e1;
    }

.asset-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:11px;
    }

.asset-card-title{
    margin:0;
    color:#12385c;
    font-size:14px;
    font-weight:650;
    line-height:1.35;
    }

.asset-type-badge{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#ecfdf3;
    color:#c2410c;
    border:1px solid #fed7aa;
    font-size:9px;
    font-weight:600;
    line-height:1;
    }

.asset-card-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 16px;
    }

.asset-detail{
    min-width:0;
    color:#516276;
    font-size:11px;
    line-height:1.45;
    }

.asset-detail-label{
    color:#718096;
    font-weight:500;
    }

.asset-detail-value{
    color:#374151;
    font-weight:500;
    overflow-wrap:anywhere;
    }

.asset-status{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 7px;
    border-radius:999px;
    font-size:9.5px;
    font-weight:600;
    }

.asset-status.in-use{
    background:#ffedd5;
    color:#c2410c;
    }

.asset-status.returned{
    background:#f1f5f9;
    color:#64748b;
    }

.asset-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:11px;
    border-top:1px solid #edf1ee;
    }

.asset-remarks{
    min-width:0;
    color:#718096;
    font-size:10.5px;
    line-height:1.4;
    }

.asset-action-button{
    flex:0 0 auto;
    border:0;
    border-radius:6px;
    padding:7px 11px;
    background:#f97316;
    color:#ffffff;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(22,163,74,.16);
    transition:all .18s ease;
    }

.asset-action-button:hover{
    background:#c2410c;
    box-shadow:0 4px 10px rgba(22,163,74,.22);
    transform:translateY(-1px);
    }

.asset-action-button:active{
    transform:translateY(0);
    }

/* ---------- Asset History ---------- */
    .asset-history-card{
    background:#ffffff;
    border:1px solid #e1e8e3;
    border-radius:10px;
    padding:14px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    }

.asset-history-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    }

.asset-history-title{
    display:flex;
    align-items:center;
    gap:7px;
    color:#123b27;
    font-size:13px;
    font-weight:650;
    }

.asset-history-count{
    color:#64748b;
    font-size:10px;
    font-weight:500;
    }

.asset-history-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #dce7df;
    border-radius:7px;
    }

.asset-history-table{
    width:100%;
    min-width:700px;
    border-collapse:separate;
    border-spacing:0;
    color:#26372d;
    font-size:10.5px;
    }

.asset-history-table thead th{
    padding:8px 9px;
    background:#fb923c;
    color:#ffffff;
    border-right:1px solid rgba(255,255,255,.28);
    border-bottom:1px solid #f97316;
    font-size:10px;
    font-weight:600;
    text-align:left;
    white-space:nowrap;
    }

.asset-history-table thead th:first-child{
    border-top-left-radius:6px;
    }

.asset-history-table thead th:last-child{
    border-right:0;
    border-top-right-radius:6px;
    }

.asset-history-table tbody td{
    padding:8px 9px;
    background:#ffffff;
    border-right:1px solid #e3ebe5;
    border-bottom:1px solid #e3ebe5;
    white-space:nowrap;
    }

.asset-history-table tbody tr:nth-child(even) td{
    background:#f7fbf8;
    }

.asset-history-table tbody tr:hover td{
    background:#ecfdf3;
    }

.asset-history-table tbody td:last-child{
    border-right:0;
    }

.asset-history-table tbody tr:last-child td{
    border-bottom:0;
    }

.asset-history-table .status-in-use{
    color:#c2410c;
    font-weight:600;
    }

.asset-history-table .status-returned{
    color:#64748b;
    font-weight:600;
    }

/* ---------- Empty / Loading ---------- */
    .assets-empty{
    min-height:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:22px;
    background:#fbfdfb;
    border:1px dashed #cfded4;
    border-radius:9px;
    }

.assets-empty strong{
    color:#435267;
    font-size:12px;
    font-weight:600;
    }

.assets-empty p{
    margin:5px 0 0;
    color:#8997a5;
    font-size:10.5px;
    }

.assets-loading{
    min-height:130px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#718096;
    font-size:11px;
    }

.assets-loading-spinner{
    width:14px;
    height:14px;
    border:2px solid #ffedd5;
    border-top-color:#f97316;
    border-radius:50%;
    animation:assetsSpin .7s linear infinite;
    }

@keyframes assetsSpin{
    to{transform:rotate(360deg);}
    }

/* ---------- Responsive ---------- */
@media (max-width:850px){
    .assets-card-grid{
    grid-template-columns:1fr;
    }

.asset-card-details{
    grid-template-columns:1fr 1fr;
    }
    }

@media (max-width:650px){
    .assets-overview{
    grid-template-columns:1fr 1fr;
    }

.asset-card-details{
    grid-template-columns:1fr;
    }

.asset-card-footer{
    align-items:flex-start;
    flex-direction:column;
    }

.asset-action-button{
    width:100%;
    }
    }

@media (max-width:420px){
    .assets-overview{
    grid-template-columns:1fr;
    }

.asset-card{
    padding:14px;
    }
    }

/* ============================================================
    CONNEXA — ASSETS PAGE
    FINAL GREEN PREMIUM LAYOUT OVERRIDE
    IMPORTANT:
    #profileAssetsGrid originally inherits .profile-info-grid.
    This override removes that constraint so the Assets module
    uses the full employee-profile content width.
    ============================================================ */
    #profileAssetsSection #profileAssetsGrid{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    grid-template-columns:none !important;
    gap:0 !important;
    }

#profileAssetsSection .employee-assets-page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    gap:14px;
    }

/* ---------- Summary ---------- */
    #profileAssetsSection .employee-assets-summary{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    }

#profileAssetsSection .employee-assets-summary-card{
    min-height:70px;
    padding:12px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#ffffff;
    border:1px solid #e1e8e3;
    border-radius:9px;
    box-shadow:0 2px 8px rgba(15,23,42,.035);
    box-sizing:border-box;
    transition:all .18s ease;
    }

#profileAssetsSection .employee-assets-summary-card:hover{
    border-color:#b9dec6;
    box-shadow:0 6px 16px rgba(22,101,52,.07);
    transform:translateY(-1px);
    }

#profileAssetsSection .employee-assets-summary-card span{
    display:block;
    color:#607087;
    font-size:11px;
    line-height:1.3;
    font-weight:500;
    }

#profileAssetsSection .employee-assets-summary-card strong{
    display:block;
    margin-top:4px;
    color:#123b27;
    font-size:14px;
    line-height:1.2;
    font-weight:650;
    }

#profileAssetsSection .employee-assets-card-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    }

#profileAssetsSection .employee-asset-card{
    width:100%;
    min-width:0;
    min-height:190px;
    padding:16px 18px 14px;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-left:3px solid #fb923c;
    border-radius:9px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    transition:all .18s ease;
    }

#profileAssetsSection .employee-asset-card:hover{
    border-color:#b9ddc6;
    border-left-color:#f97316;
    box-shadow:0 7px 18px rgba(15,23,42,.065);
    transform:translateY(-1px);
    }

#profileAssetsSection .employee-asset-card.asset-returned{
    border-left-color:#cbd5e1;
    }

#profileAssetsSection .employee-asset-card-title{
    margin:0 0 12px;
    color:#102f50;
    font-size:14px;
    line-height:1.35;
    font-weight:650;
    }

#profileAssetsSection .employee-asset-details{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:28px;
    row-gap:6px;
    }

#profileAssetsSection .employee-asset-details > div{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:4px;
    color:#526476;
    font-size:11px;
    line-height:1.45;
    }

#profileAssetsSection .employee-asset-details strong{
    flex:0 0 auto;
    color:#374151;
    font-weight:600;
    }

#profileAssetsSection .employee-asset-details span:not(.asset-inline-status){
    min-width:0;
    overflow-wrap:anywhere;
    }

#profileAssetsSection .asset-inline-status{
    display:inline-flex;
    align-items:center;
    padding:2px 6px;
    border-radius:999px;
    font-size:9.5px;
    font-weight:600;
    }

#profileAssetsSection .asset-inline-status.in-use{
    color:#c2410c;
    background:#ffedd5;
    }

#profileAssetsSection .asset-inline-status.returned{
    color:#64748b;
    background:#f1f5f9;
    }

#profileAssetsSection .employee-asset-actions{
    margin-top:13px;
    padding-top:10px;
    border-top:1px solid #edf1ee;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    }

#profileAssetsSection .asset-return-request-btn{
    border:0;
    border-radius:6px;
    padding:7px 11px;
    background:#fb923c;
    color:#ffffff;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(34,197,94,.16);
    transition:all .18s ease;
    }

#profileAssetsSection .asset-return-request-btn:hover{
    background:#f97316;
    box-shadow:0 4px 10px rgba(22,163,74,.20);
    transform:translateY(-1px);
    }

/* ---------- History ---------- */
    #profileAssetsSection .employee-assets-history-card{
    width:100%;
    box-sizing:border-box;
    padding:14px;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-radius:9px;
    box-shadow:0 2px 9px rgba(15,23,42,.035);
    }

#profileAssetsSection .employee-assets-history-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    }

#profileAssetsSection .employee-assets-history-heading > div{
    display:flex;
    align-items:center;
    gap:7px;
    }

#profileAssetsSection .employee-assets-history-icon{
    color:#f97316;
    font-size:13px;
    }

#profileAssetsSection .employee-assets-history-heading h3{
    margin:0;
    color:#123b27;
    font-size:13px;
    font-weight:650;
    }

#profileAssetsSection .employee-assets-history-count{
    color:#718096;
    font-size:10px;
    font-weight:500;
    }

#profileAssetsSection .employee-assets-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #dce7df;
    border-radius:7px;
    }

#profileAssetsSection .employee-assets-table{
    width:100%;
    min-width:760px;
    border-collapse:separate;
    border-spacing:0;
    font-size:10.5px;
    color:#26372d;
    }

#profileAssetsSection .employee-assets-table thead th{
    padding:8px 9px;
    background:#fb923c;
    color:#ffffff;
    border-right:1px solid rgba(255,255,255,.28);
    border-bottom:1px solid #f97316;
    font-size:10px;
    font-weight:600;
    text-align:left;
    white-space:nowrap;
    }

#profileAssetsSection .employee-assets-table thead th:first-child{
    border-top-left-radius:6px;
    }

#profileAssetsSection .employee-assets-table thead th:last-child{
    border-right:0;
    border-top-right-radius:6px;
    }

#profileAssetsSection .employee-assets-table tbody td{
    padding:8px 9px;
    background:#ffffff;
    border-right:1px solid #e3ebe5;
    border-bottom:1px solid #e3ebe5;
    white-space:nowrap;
    }

#profileAssetsSection .employee-assets-table tbody tr:nth-child(even) td{
    background:#f7fbf8;
    }

#profileAssetsSection .employee-assets-table tbody tr:hover td{
    background:#ecfdf3;
    }

#profileAssetsSection .employee-assets-table tbody td:last-child{
    border-right:0;
    }

#profileAssetsSection .employee-assets-table tbody tr:last-child td{
    border-bottom:0;
    }

/* ---------- Loading / Empty ---------- */
    #profileAssetsSection .employee-assets-loading{
    width:100%;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#718096;
    font-size:11px;
    background:#ffffff;
    border:1px solid #e1e7e3;
    border-radius:9px;
    }

#profileAssetsSection .employee-assets-spinner{
    width:14px;
    height:14px;
    border:2px solid #ffedd5;
    border-top-color:#f97316;
    border-radius:50%;
    animation:employeeAssetsSpin .7s linear infinite;
    }

@keyframes employeeAssetsSpin{
    to{transform:rotate(360deg);}
    }

@media (max-width:900px){
    #profileAssetsSection .employee-assets-card-grid{
    grid-template-columns:1fr;
    }
    }

@media (max-width:650px){
    #profileAssetsSection .employee-assets-summary{
    grid-template-columns:1fr 1fr;
    }

#profileAssetsSection .employee-asset-details{
    grid-template-columns:1fr;
    }
    }

@media (max-width:480px){
    #profileAssetsSection .employee-assets-summary{
    grid-template-columns:1fr;
    }

#profileAssetsSection .employee-asset-card{
    padding:14px;
    }
    }

/* ============================================================
    CONNEXA — EMPLOYEE DOCUMENTS
    Premium Clean Supabase Style
    Documents ONLY
    ============================================================ */
    #profileDocumentsSection{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    }

#profileDocumentsSection .profile-section-title{
    margin:0 0 16px;
    }

#profileDocumentsSection .profile-section-title h2{
    margin:0;
    color:#123b27;
    font-size:18px;
    font-weight:650;
    letter-spacing:-.2px;
    }

#profileDocumentsSection #profileDocumentsGrid{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
    }

/* Three Supabase-style document cards */
    #profileDocumentsSection .employee-documents-page{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:32px;
    align-items:start;
    box-sizing:border-box;
    }

#profileDocumentsSection .employee-documents-category{
    width:100%;
    min-width:0;
    background:#ffffff;
    border:1px solid #e3e9e6;
    border-radius:16px;
    padding:12px;
    box-sizing:border-box;
    box-shadow:0 5px 18px rgba(15,23,42,.055);
    overflow:hidden;
    transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
    }

#profileDocumentsSection .employee-documents-category:hover{
    border-color:#d4e3da;
    box-shadow:0 8px 24px rgba(15,23,42,.075);
    }

#profileDocumentsSection .employee-documents-category-header{
    width:100%;
    min-height:54px;
    padding:0 8px;
    margin:0;
    border:0;
    outline:none;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:#092b50;
    font-family:inherit;
    font-size:16px;
    font-weight:650;
    text-align:left;
    cursor:pointer;
    box-sizing:border-box;
    transition:color .18s ease, background .18s ease;
    }

#profileDocumentsSection .employee-documents-category-header:hover{
    color:#0f5132;
    }

#profileDocumentsSection .employee-documents-chevron{
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#123b67;
    font-size:14px;
    line-height:1;
    border-radius:50%;
    transition:
    transform .2s ease,
    background .18s ease,
    color .18s ease;
    }

#profileDocumentsSection
    .employee-documents-category-header:hover
    .employee-documents-chevron{
    background:#f0f8f3;
    color:#c2410c;
    }

/* Closed = chevron points down, opened = chevron points up */
    #profileDocumentsSection
    .employee-documents-category.collapsed
    .employee-documents-chevron{
    transform:rotate(0deg);
    }

#profileDocumentsSection
    .employee-documents-category:not(.collapsed)
    .employee-documents-chevron{
    transform:rotate(180deg);
    }

#profileDocumentsSection .employee-documents-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:8px 7px 4px;
    max-height:1000px;
    opacity:1;
    overflow:hidden;
    transition:
    max-height .25s ease,
    opacity .2s ease,
    padding .25s ease;
    }

#profileDocumentsSection
    .employee-documents-category.collapsed
    .employee-documents-list{
    max-height:0 !important;
    opacity:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    overflow:hidden !important;
    }

#profileDocumentsSection .employee-document-item{
    width:100%;
    min-height:50px;
    padding:0 16px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#f7f9fb;
    border:1px solid transparent;
    border-radius:10px;
    color:#374151;
    text-decoration:none;
    transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
    }

#profileDocumentsSection .employee-document-item:hover{
    background:#f0faf3;
    border-color:#d6e8dc;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
    }

#profileDocumentsSection .employee-document-item.uploaded{
    cursor:pointer;
    }

#profileDocumentsSection .employee-document-item.uploaded:hover{
    transform:translateY(-1px);
    }

#profileDocumentsSection .employee-document-name{
    min-width:0;
    color:#374151;
    font-size:14px;
    font-weight:500;
    line-height:1.35;
    overflow-wrap:anywhere;
    }

#profileDocumentsSection .employee-document-status{
    flex:0 0 auto;
    color:#91a0b1;
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
    }

#profileDocumentsSection .employee-document-status.uploaded{
    color:#c2410c;
    font-weight:600;
    }

#profileDocumentsSection .employee-documents-loading{
    width:100%;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border:1px dashed #d4ded8;
    border-radius:12px;
    color:#718096;
    font-size:13px;
    box-sizing:border-box;
    }

#profileDocumentsSection .employee-documents-empty{
    width:100%;
    min-height:140px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    background:#fbfdfb;
    border:1px dashed #cfded4;
    border-radius:10px;
    box-sizing:border-box;
    }

#profileDocumentsSection .employee-documents-empty strong{
    color:#435267;
    font-size:13px;
    font-weight:600;
    }

#profileDocumentsSection .employee-documents-empty p{
    max-width:520px;
    margin:6px 0 0;
    color:#8a97a5;
    font-size:11px;
    line-height:1.5;
    }

#profileDocumentsSection .employee-documents-empty.error{
    border-color:#fecaca;
    background:#fffafa;
    }

#profileDocumentsSection .employee-documents-empty.error strong{
    color:#b91c1c;
    }

@media (max-width:1100px){
    #profileDocumentsSection .employee-documents-page{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    }
    }

@media (max-width:700px){
    #profileDocumentsSection .employee-documents-page{
    grid-template-columns:1fr;
    gap:12px;
    }

#profileDocumentsSection .employee-documents-category{
    padding:10px;
    }

#profileDocumentsSection .employee-documents-category-header{
    min-height:48px;
    font-size:14px;
    }

#profileDocumentsSection .employee-document-item{
    min-height:48px;
    padding:0 12px;
    }

#profileDocumentsSection .employee-document-name{
    font-size:13px;
    }

#profileDocumentsSection .employee-document-status{
    font-size:10px;
    }
    }

@media (max-width:480px){
    #profileDocumentsSection .employee-document-item{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:10px 12px;
    }

#profileDocumentsSection .employee-document-status{
    white-space:normal;
    }
    }

/* Documents — slightly smaller typography */
    #profileDocumentsSection .employee-documents-category-header{
    font-size:13px;
    }

#profileDocumentsSection .employee-document-name{
    font-size:12px;
    }

#profileDocumentsSection .employee-document-status{
    font-size:10px;
    }

/* =====================================================
    RECRUITMENT DASHBOARD
    ===================================================== */
    .recruitment-dashboard-page {
    min-height: calc(100vh - 72px);
    margin-left: 245px;
    background: var(--background);
    padding: 34px 42px 50px;
    }

.recruitment-dashboard-shell {
    max-width: 1480px;
    margin: 0 auto;
    }

.recruitment-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    }

.recruitment-page-header h1 {
    margin-top: 7px;
    font-size: 31px;
    line-height: 1.15;
    color: #1f2937;
    }

.recruitment-page-header p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    }

.recruitment-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #d8f2e3;
    border-radius: 20px;
    background: #effcf5;
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    }

.recruitment-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fb923c;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
    }

.recruitment-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
    }

.recruitment-overview-card {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.035);
    }

.recruitment-overview-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 800;
    }

.recruitment-overview-icon.green { background: #fff7ed; color: #f97316; }

.recruitment-overview-icon.blue { background: #eff6ff; color: #2563eb; }

.recruitment-overview-icon.purple { background: #f5f3ff; color: #7c3aed; }

.recruitment-overview-icon.orange { background: #fff7ed; color: #ea580c; }

.recruitment-overview-card span {
    display: block;
    color: #64748b;
    font-size: 12px;
    }

.recruitment-overview-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2937;
    font-size: 27px;
    line-height: 1;
    }

.recruitment-overview-card small {
    display: block;
    margin-top: 7px;
    color: #9ca3af;
    font-size: 10px;
    }

.recruitment-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.9fr);
    gap: 18px;
    }

.recruitment-panel {
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.035);
    overflow: hidden;
    }

.recruitment-panel-header {
    min-height: 76px;
    padding: 19px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf0f2;
    }

.recruitment-panel-header h2 {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.2;
    }

.recruitment-panel-header p {
    margin-top: 5px;
    color: #8a94a3;
    font-size: 11px;
    }

.recruitment-panel-label,
    .recruitment-count-badge {
    padding: 6px 10px;
    border-radius: 20px;
    background: #f5f7f6;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    }

.recruitment-pipeline-panel {
    min-height: 305px;
    }

.recruitment-pipeline {
    padding: 21px;
    }

.recruitment-stage {
    margin-bottom: 18px;
    }

.recruitment-stage:last-child {
    margin-bottom: 0;
    }

.recruitment-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    }

.recruitment-stage-top span {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    }

.recruitment-stage-top strong {
    color: #94a3b8;
    font-size: 11px;
    }

.recruitment-stage-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 20px;
    background: #f1f5f9;
    }

.recruitment-stage-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #fed7aa;
    }

.recruitment-empty-state {
    min-height: 220px;
    padding: 30px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    }

.recruitment-empty-state.compact {
    min-height: 228px;
    }

.recruitment-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff7ed;
    color: #f97316;
    font-size: 19px;
    font-weight: 700;
    }

.recruitment-empty-state strong {
    color: #334155;
    font-size: 13px;
    }

.recruitment-empty-state p {
    max-width: 350px;
    margin-top: 7px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.6;
    }

.recruitment-jobs-panel {
    grid-column: 1;
    }

.recruitment-actions-panel {
    grid-column: 2;
    grid-row: 2;
    min-height: 305px;
    }

.recruitment-activity-panel {
    grid-column: 2;
    grid-row: 1;
    min-height: 305px;
    }

.recruitment-action-list {
    padding: 12px;
    }

.recruitment-action-card {
    width: 100%;
    min-height: 70px;
    padding: 11px 10px;
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: 0.18s ease;
    }

.recruitment-action-card + .recruitment-action-card {
    margin-top: 3px;
    }

.recruitment-action-card:hover {
    background: #f8faf9;
    border-color: #e3eee8;
    }

.recruitment-action-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff7ed;
    color: #f97316;
    font-size: 14px;
    font-weight: 800;
    }

.recruitment-action-card strong {
    display: block;
    color: #334155;
    font-size: 12px;
    }

.recruitment-action-card small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 10px;
    }

.recruitment-action-arrow {
    color: #94a3b8;
    font-size: 16px;
    text-align: right;
    transition: 0.18s ease;
    }

.recruitment-action-card:hover .recruitment-action-arrow {
    color: #f97316;
    transform: translateX(2px);
    }

@media (max-width: 1150px) {
    .recruitment-dashboard-page {
    margin-left: 220px;
    padding: 30px 28px 42px;
    }

.recruitment-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.recruitment-main-grid {
    grid-template-columns: 1fr;
    }

.recruitment-activity-panel,
    .recruitment-jobs-panel,
    .recruitment-actions-panel {
    grid-column: 1;
    grid-row: auto;
    }
    }

@media (max-width: 900px) {
    .recruitment-dashboard-page {
    margin-left: 0;
    padding: 26px 20px 38px;
    }
    }

@media (max-width: 600px) {
    .recruitment-dashboard-page {
    padding: 22px 16px 30px;
    }

.recruitment-page-header {
    flex-direction: column;
    margin-bottom: 20px;
    }

.recruitment-page-header h1 {
    font-size: 26px;
    }

.recruitment-overview-grid {
    grid-template-columns: 1fr;
    }

.recruitment-panel-header {
    padding: 16px;
    }

.recruitment-pipeline {
    padding: 17px;
    }
    }

/* =====================================================
    JOB MANAGEMENT
    ===================================================== */
    .job-management-page {
    min-height: calc(100vh - 72px);
    margin-left: 245px;
    background: var(--background);
    padding: 34px 42px 50px;
    }

.job-management-shell {
    max-width: 1480px;
    margin: 0 auto;
    }

.job-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
    }

.job-page-header h1 {
    margin-top: 7px;
    font-size: 31px;
    line-height: 1.15;
    color: #1f2937;
    }

.job-page-header p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    }

.job-primary-button,
    .job-empty-button {
    border: 0;
    border-radius: 10px;
    background: #f97316;
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
    }

.job-primary-button {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    box-shadow: 0 5px 14px rgba(22, 163, 74, 0.16);
    }

.job-primary-button:hover,
    .job-empty-button:hover {
    background: #c2410c;
    transform: translateY(-1px);
    }

.job-primary-button span {
    font-size: 17px;
    line-height: 1;
    }

.job-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
    }

.job-stat-card {
    min-height: 100px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.035);
    }

.job-stat-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
    }

.job-stat-icon.green {
    background: #fff7ed;
    color: #f97316;
    }

.job-stat-icon.blue {
    background: #eff6ff;
    color: #2563eb;
    }

.job-stat-icon.gray {
    background: #f3f4f6;
    color: #64748b;
    }

.job-stat-icon.orange {
    background: #fff7ed;
    color: #ea580c;
    }

.job-stat-card span {
    display: block;
    color: #64748b;
    font-size: 11px;
    }

.job-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #1f2937;
    font-size: 25px;
    line-height: 1;
    }

.job-management-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.035);
    overflow: hidden;
    }

.job-list-header {
    min-height: 77px;
    padding: 18px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf0f2;
    }

.job-list-header h2 {
    color: #1f2937;
    font-size: 16px;
    }

.job-list-header p {
    margin-top: 5px;
    color: #8a94a3;
    font-size: 11px;
    }

.job-list-count {
    padding: 6px 10px;
    border-radius: 20px;
    background: #f5f7f6;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    }

.job-controls {
    padding: 16px 21px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 170px 190px;
    gap: 10px;
    border-bottom: 1px solid #edf0f2;
    }

.job-search-box {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    }

.job-search-box span {
    color: #94a3b8;
    font-size: 17px;
    }

.job-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 11px;
    }

.job-search-box input::placeholder {
    color: #a1aab7;
    }

.job-filter-select {
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    outline: 0;
    background: #ffffff;
    color: #475569;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    }

.job-empty-state {
    min-height: 390px;
    padding: 50px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    }

.job-empty-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #fff7ed;
    color: #f97316;
    font-size: 22px;
    font-weight: 700;
    }

.job-empty-state strong {
    color: #334155;
    font-size: 14px;
    }

.job-empty-state p {
    max-width: 410px;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.65;
    }

.job-empty-button {
    min-height: 38px;
    margin-top: 18px;
    padding: 0 15px;
    font-size: 11px;
    }

@media (max-width: 1150px) {
    .job-management-page {
    margin-left: 220px;
    padding: 30px 28px 42px;
    }

.job-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.job-controls {
    grid-template-columns: 1fr 1fr;
    }

.job-search-box {
    grid-column: 1 / -1;
    }
    }

@media (max-width: 900px) {
    .job-management-page {
    margin-left: 0;
    padding: 26px 20px 38px;
    }
    }

@media (max-width: 600px) {
    .job-management-page {
    padding: 22px 16px 30px;
    }

.job-page-header {
    flex-direction: column;
    margin-bottom: 20px;
    }

.job-page-header h1 {
    font-size: 26px;
    }

.job-primary-button {
    width: 100%;
    justify-content: center;
    }

.job-stats-grid {
    grid-template-columns: 1fr;
    }

.job-controls {
    grid-template-columns: 1fr;
    padding: 14px;
    }

.job-search-box {
    grid-column: auto;
    }

.job-list-header {
    padding: 16px;
    }
    }

.job-management-page {
    min-height: calc(100vh - 72px);
    margin-left: 245px;
    background: var(--background);
    padding: 34px 42px 50px;
    }

@media (max-width: 1150px) {
    .job-management-page {
    margin-left: 220px;
    padding: 30px 28px 42px;
    }

.job-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.job-controls {
    grid-template-columns: 1fr 1fr;
    }

.job-search-box {
    grid-column: 1 / -1;
    }
    }

@media (max-width: 900px) {
    .job-management-page {
    margin-left: 0;
    padding: 26px 20px 38px;
    }
    }

@media (max-width: 600px) {
    .job-management-page {
    padding: 22px 16px 30px;
    }

.job-page-header {
    flex-direction: column;
    margin-bottom: 20px;
    }

.job-page-header h1 {
    font-size: 26px;
    }

.job-primary-button {
    width: 100%;
    justify-content: center;
    }

.job-stats-grid {
    grid-template-columns: 1fr;
    }

.job-controls {
    grid-template-columns: 1fr;
    padding: 14px;
    }

.job-search-box {
    grid-column: auto;
    }

.job-list-header {
    padding: 16px;
    }
    }

/* ============================================================
    CREATE JOB MODAL
    ============================================================ */
    body.create-job-modal-open {
    overflow: hidden !important;
    height: 100vh;
    }

.create-job-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    box-sizing: border-box;
    }

.create-job-modal.hidden {
    display: none !important;
    }

.create-job-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    }

.create-job-dialog {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe4e9;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    animation: createJobModalIn 0.18s ease-out;
    }

@keyframes createJobModalIn {
    from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    }

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

.create-job-modal-header {
    min-height: 78px;
    padding: 17px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf0f2;
    box-sizing: border-box;
    }

.create-job-modal-header h2 {
    margin-top: 4px;
    color: #1f2937;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    }

.create-job-modal-header p {
    margin-top: 5px;
    color: #8a94a3;
    font-size: 11px;
    line-height: 1.5;
    }

.create-job-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 9px;
    background: #f5f7f9;
    color: #64748b;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: 0.16s ease;
    }

.create-job-close:hover {
    background: #eef1f4;
    color: #1e293b;
    }

.create-job-form {
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px 0;
    }

.create-job-form::-webkit-scrollbar {
    width: 7px;
    }

.create-job-form::-webkit-scrollbar-track {
    background: #f8fafc;
    }

.create-job-form::-webkit-scrollbar-thumb {
    background: #d5dbe2;
    border-radius: 10px;
    }

.create-job-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    }

.create-job-field {
    min-width: 0;
    }

.create-job-field-full {
    grid-column: 1 / -1;
    }

.create-job-field label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    }

.create-job-field label span {
    color: #ef4444;
    }

.create-job-field input,
    .create-job-field select,
    .create-job-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce2e8;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 11px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

.create-job-field input,
    .create-job-field select {
    height: 40px;
    padding: 0 11px;
    }

.create-job-field textarea {
    min-height: 104px;
    padding: 11px;
    resize: vertical;
    line-height: 1.55;
    }

.create-job-field input::placeholder,
    .create-job-field textarea::placeholder {
    color: #a0a9b5;
    }

.create-job-field input:focus,
    .create-job-field select:focus,
    .create-job-field textarea:focus {
    border-color: #86d9aa;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.09);
    }

.create-job-field small {
    display: block;
    margin-top: 5px;
    color: #9aa4b2;
    font-size: 9px;
    }

.create-job-form-footer {
    position: sticky;
    bottom: 0;
    margin: 22px -22px 0;
    padding: 13px 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #edf0f2;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.035);
    }

.create-job-cancel-button,
    .create-job-save-button {
    min-width: 88px;
    height: 37px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.16s ease;
    }

.create-job-cancel-button {
    border: 1px solid #dce2e8;
    background: #ffffff;
    color: #64748b;
    }

.create-job-cancel-button:hover {
    background: #f8fafc;
    }

.create-job-save-button {
    border: 1px solid #f97316;
    background: #f97316;
    color: #ffffff;
    }

.create-job-save-button:hover {
    background: #c2410c;
    border-color: #c2410c;
    }

@media (max-width: 700px) {
    .create-job-modal {
    padding: 12px;
    }

.create-job-dialog {
    max-height: calc(100vh - 24px);
    border-radius: 15px;
    }

.create-job-form-grid {
    grid-template-columns: 1fr;
    }

.create-job-field-full {
    grid-column: auto;
    }

.create-job-modal-header {
    padding: 15px 16px;
    }

.create-job-form {
    padding: 17px 16px 0;
    }

.create-job-form-footer {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    }
    }

/* ============================================================
    CREATE JOB — JOB DESCRIPTION SECTION
    ============================================================ */
    .create-job-description-section {
    margin-top: 2px;
    padding-top: 3px;
    }

.create-job-section-heading {
    margin-bottom: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf0f2;
    }

.create-job-section-heading h3 {
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    }

.create-job-section-heading p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.45;
    }

.create-job-description-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    }

.create-job-description-grid .create-job-field {
    min-width: 0;
    }

.create-job-description-grid textarea {
    min-height: 145px;
    }

/* ============================================================
    CREATE JOB — MODAL POSITION
    Slightly lower so it does not feel stuck to the top.
    ============================================================ */
    .create-job-modal {
    align-items: flex-start;
    padding-top: 58px;
    padding-bottom: 30px;
    }

.create-job-dialog {
    max-height: calc(100vh - 88px);
    }

/* ============================================================
    CREATE JOB — SMALLER SPACING
    ============================================================ */
    .create-job-form {
    padding-top: 17px;
    }

.create-job-form-grid {
    gap: 14px 18px;
    }

@media (max-width: 700px) {
    .create-job-modal {
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 18px;
    }

.create-job-dialog {
    max-height: calc(100vh - 36px);
    }

.create-job-description-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    }
    }

/* ============================================================
    RECRUITMENT JOBS — SUPABASE DATA TABLE
    ============================================================ */
    .jobs-table-container {
    width: 100%;
    }

.job-loading-state,
    .job-error-state {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #64748b;
    font-size: 12px;
    }

.job-error-state strong {
    color: #b91c1c;
    font-size: 13px;
    }

.job-error-state p {
    max-width: 520px;
    margin-top: 7px;
    color: #94a3b8;
    font-size: 11px;
    }

.job-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    }

.job-status-badge.published {
    background: #fff7ed;
    color: #c2410c;
    }

.job-status-badge.draft {
    background: #f3f4f6;
    color: #64748b;
    }

.job-status-badge.closed {
    background: #fef2f2;
    color: #b91c1c;
    }

.job-action-button:disabled,
    .create-job-save-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    }

.jobs-table tbody td strong {
    color: #1f2937;
    }

/* ============================================================
    RECRUITMENT JOB MANAGEMENT — FINAL SAVED-JOBS CSS
    Keeps the table clean after Supabase data is rendered.
    ============================================================ */
    #jobsTableContainer {
    width: 100%;
    margin-top: 0;
    box-sizing: border-box;
    }

#jobsTableContainer .jobs-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e4e9ee;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
    }

#jobsTableContainer .jobs-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: #ffffff;
    }

#jobsTableContainer .jobs-table thead th {
    height: 40px;
    padding: 0 12px;
    background: #f7f9fb;
    color: #5d7188;
    border-bottom: 1px solid #dfe5eb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    }

#jobsTableContainer .jobs-table tbody td {
    height: 64px;
    padding: 10px 12px;
    background: #ffffff;
    color: #18324f;
    border-bottom: 1px solid #e8edf1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: middle;
    }

#jobsTableContainer .jobs-table tbody tr:last-child td {
    border-bottom: none;
    }

#jobsTableContainer .jobs-table tbody tr {
    transition: background .15s ease;
    }

#jobsTableContainer .jobs-table tbody tr:hover td {
    background: #fbfefc;
    }

#jobsTableContainer .jobs-table tbody td:first-child {
    color: #536b84;
    font-size: 11px;
    font-weight: 600;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(2) {
    min-width: 185px;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(2) strong {
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(7) {
    color: #334e68;
    font-weight: 600;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(8) {
    text-align: left;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(10) {
    min-width: 78px;
    }

#jobsTableContainer .job-status-badge {
    min-width: 72px;
    height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 700;
    line-height: 25px;
    text-transform: capitalize;
    }

#jobsTableContainer .job-status-badge.published {
    background: #eafaf1;
    color: #159447;
    border: 1px solid #ccefdc;
    }

#jobsTableContainer .job-status-badge.draft {
    background: #f5f6f8;
    color: #65758a;
    border: 1px solid #e5e8ec;
    }

#jobsTableContainer .job-status-badge.closed {
    background: #fff1f1;
    color: #d14343;
    border: 1px solid #f5d4d4;
    }

#jobsTableContainer .job-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    }

#jobsTableContainer .job-action-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #f3f5f7;
    color: #31506f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
    }

#jobsTableContainer .job-action-button:hover {
    background: #e9f9f1;
    color: #159447;
    transform: translateY(-1px);
    }

#jobsTableContainer .job-loading-state {
    min-height: 190px;
    border: 1px solid #e4e9ee;
    border-radius: 10px;
    background: #ffffff;
    }

#jobsTableContainer .job-error-state {
    min-height: 150px;
    padding: 30px;
    border: 1px solid #f0d5d5;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
    }

#jobsTableContainer .job-empty-state {
    min-height: 220px;
    padding: 38px 20px;
    border: 1px dashed #dce4ea;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
    }

/* Keep the job list section from stretching awkwardly after data loads. */
    .job-list-card,
    .job-management-list-card,
    .jobs-list-card {
    overflow: hidden;
    }

/* Saved-job stats remain aligned with the HRMS card system. */
    .job-stats-grid {
    align-items: stretch;
    }

.job-stat-card {
    box-sizing: border-box;
    }

/* Scrollbar only belongs to the table area, not the whole page. */
    #jobsTableContainer .jobs-table-wrap::-webkit-scrollbar {
    height: 7px;
    }

#jobsTableContainer .jobs-table-wrap::-webkit-scrollbar-track {
    background: #f5f7f8;
    border-radius: 10px;
    }

#jobsTableContainer .jobs-table-wrap::-webkit-scrollbar-thumb {
    background: #cfd8df;
    border-radius: 10px;
    }

@media (max-width: 900px) {
    #jobsTableContainer .jobs-table {
    min-width: 1050px;
    }

#jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    padding-left: 10px;
    padding-right: 10px;
    }
    }

@media (max-width: 600px) {
    #jobsTableContainer .jobs-table {
    min-width: 980px;
    }

#jobsTableContainer .jobs-table tbody td {
    height: 58px;
    font-size: 11px;
    }
    }

/* Final spacing correction */
    #jobsTableContainer {
    margin-top: 18px !important;
    }

#jobsTableContainer .jobs-table-wrap {
    box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

/* ============================================================
    RECRUITMENT JOB TABLE — GREEN TINT
    ============================================================ */
    #jobsTableContainer .jobs-table-wrap {
    border-color: #d5eadf !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.055) !important;
    }

#jobsTableContainer .jobs-table thead th {
    background: #eefaf3 !important;
    color: #27734a !important;
    border-bottom-color: #d2eadc !important;
    }

#jobsTableContainer .jobs-table tbody td {
    background: #ffffff !important;
    border-bottom-color: #e3f0e8 !important;
    }

#jobsTableContainer .jobs-table tbody tr:hover td {
    background: #f4fcf7 !important;
    }

#jobsTableContainer .jobs-table tbody td:first-child {
    color: #3b7657 !important;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(2) strong {
    color: #174f32 !important;
    }

#jobsTableContainer .job-status-badge.published {
    background: #e9f9f0 !important;
    color: #c2410c !important;
    border-color: #c8ebd6 !important;
    }

#jobsTableContainer .job-status-badge.draft {
    background: #f1f8f4 !important;
    color: #527463 !important;
    border-color: #dcece3 !important;
    }

#jobsTableContainer .job-action-button {
    background: #eff9f3 !important;
    color: #28724b !important;
    }

#jobsTableContainer .job-action-button:hover {
    background: #dff5e8 !important;
    color: #c2410c !important;
    }

#jobsTableContainer .jobs-table-wrap::-webkit-scrollbar-track {
    background: #eef8f2 !important;
    }

#jobsTableContainer .jobs-table-wrap::-webkit-scrollbar-thumb {
    background: #b9ddc8 !important;
    }

/* ============================================================
    JOB ACTIONS — VIEW / EDIT / CLOSE
    ============================================================ */
    #jobsTableContainer .job-action-buttons {
    gap: 6px !important;
    }

#jobsTableContainer .job-action-button.view {
    background: #ff761c !important;
    color: #ffffff !important;
    }

#jobsTableContainer .job-action-button.edit {
    background: #eff9f3 !important;
    color: #28724b !important;
    }

#jobsTableContainer .job-action-button.close {
    background: #fff2f2 !important;
    color: #dc4545 !important;
    }

#jobsTableContainer .job-action-button.view:hover {
    background: #f2670e !important;
    color: #ffffff !important;
    }

#jobsTableContainer .job-action-button.edit:hover {
    background: #dff5e8 !important;
    color: #c2410c !important;
    }

#jobsTableContainer .job-action-button.close:hover {
    background: #ffe0e0 !important;
    color: #c83232 !important;
    }

/* ============================================================
    JOB ACTION MODALS
    ============================================================ */
    body.job-action-modal-open {
    overflow: hidden !important;
    height: 100vh;
    }

.job-action-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    }

.job-action-modal.hidden {
    display: none !important;
    }

.job-action-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    }

.job-action-dialog,
    .job-confirm-dialog {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid #dfe6e2;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    border-radius: 17px;
    }

.job-action-dialog {
    width: min(900px, 100%);
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    }

.job-action-header {
    min-height: 76px;
    padding: 17px 21px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #edf1ef;
    }

.job-action-header h2 {
    margin-top: 4px;
    color: #1f2937;
    font-size: 20px;
    font-weight: 700;
    }

.job-action-header p {
    margin-top: 5px;
    color: #8a94a3;
    font-size: 11px;
    }

.job-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #f3f7f5;
    color: #64748b;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    }

.job-modal-close:hover {
    background: #e9f5ee;
    color: #c2410c;
    }

/* ============================================================
    VIEW JOB
    ============================================================ */
    .job-view-dialog {
    overflow-y: auto;
    }

.job-view-content {
    padding: 21px;
    overflow-y: auto;
    }

.job-detail-hero {
    padding: 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #dceee4;
    border-radius: 13px;
    background: #f5fcf8;
    }

.job-detail-id {
    color: #3b7657;
    font-size: 10px;
    font-weight: 700;
    }

.job-detail-hero h3 {
    margin-top: 5px;
    color: #1f2937;
    font-size: 21px;
    }

.job-detail-hero p {
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    }

.job-detail-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    }

.job-detail-item,
    .job-detail-section {
    padding: 14px;
    border: 1px solid #e4ece7;
    border-radius: 11px;
    background: #ffffff;
    }

.job-detail-item span {
    display: block;
    color: #8a94a3;
    font-size: 10px;
    }

.job-detail-item strong {
    display: block;
    margin-top: 5px;
    color: #29445f;
    font-size: 12px;
    }

.job-detail-section {
    grid-column: 1 / -1;
    background: #fbfefc;
    }

.job-detail-section h4 {
    color: #246540;
    font-size: 12px;
    }

.job-detail-section p {
    margin-top: 7px;
    color: #526274;
    font-size: 11px;
    line-height: 1.7;
    white-space: pre-wrap;
    }

/* ============================================================
    EDIT JOB
    ============================================================ */
    .edit-job-form {
    min-height: 0;
    overflow-y: auto;
    padding: 20px 21px 0;
    }

.edit-job-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 17px;
    }

.edit-job-field {
    min-width: 0;
    }

.edit-job-full {
    grid-column: 1 / -1;
    }

.edit-job-field label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    }

.edit-job-field label span {
    color: #ef4444;
    }

.edit-job-field input,
    .edit-job-field select,
    .edit-job-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce4e0;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 11px;
    }

.edit-job-field input,
    .edit-job-field select {
    height: 40px;
    padding: 0 11px;
    }

.edit-job-field textarea {
    padding: 10px 11px;
    resize: vertical;
    line-height: 1.55;
    }

.edit-job-field input:focus,
    .edit-job-field select:focus,
    .edit-job-field textarea:focus {
    border-color: #86d9aa;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .09);
    }

.job-action-footer {
    position: sticky;
    bottom: 0;
    margin: 21px -21px 0;
    padding: 12px 21px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #edf1ef;
    }

.job-cancel-button,
    .job-save-button,
    .job-close-confirm-button {
    min-width: 88px;
    height: 37px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    }

.job-cancel-button {
    border: 1px solid #dce4e0;
    background: #ffffff;
    color: #64748b;
    }

.job-save-button {
    border: 1px solid #f97316;
    background: #f97316;
    color: #ffffff;
    }

.job-save-button:hover {
    background: #c2410c;
    }

/* ============================================================
    CLOSE CONFIRMATION
    ============================================================ */
    .job-confirm-dialog {
    width: min(410px, 100%);
    padding: 27px;
    text-align: center;
    }

.job-confirm-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff3f3;
    color: #dc4545;
    font-size: 19px;
    font-weight: 800;
    }

.job-confirm-dialog h2 {
    color: #1f2937;
    font-size: 18px;
    }

.job-confirm-dialog p {
    margin: 9px auto 0;
    max-width: 310px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
    }

.job-confirm-actions {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 9px;
    }

.job-close-confirm-button {
    border: 1px solid #dc4545;
    background: #dc4545;
    color: #ffffff;
    }

.job-close-confirm-button:hover {
    background: #c93636;
    }

/* ============================================================
    RESPONSIVE ACTION MODALS
    ============================================================ */
@media (max-width: 700px) {
    .job-action-modal {
    padding: 14px;
    }

.job-action-dialog {
    max-height: calc(100vh - 28px);
    }

.edit-job-grid,
    .job-detail-grid {
    grid-template-columns: 1fr;
    }

.edit-job-full,
    .job-detail-section {
    grid-column: auto;
    }

.job-detail-hero {
    flex-direction: column;
    }
    }

/* ============================================================
    EDIT JOB MODAL — SAME POSITION AS CREATE JOB MODAL
    ============================================================ */
/* Keep View/Edit/Close modals below the HRMS header instead of
    centering tall dialogs, which was causing the Edit Job header
    to be cut off at the top. */
    .job-action-modal {
    align-items: flex-start !important;
    padding-top: 92px !important;
    padding-bottom: 28px !important;
    }

/* Edit dialog gets its own internal scroll when the form is tall.
    The top header and bottom buttons remain visible. */
    .job-edit-dialog {
    max-height: calc(100vh - 120px) !important;
    }

.job-edit-dialog .edit-job-form {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    }

.job-edit-dialog .job-action-header {
    flex: 0 0 auto;
    }

.job-edit-dialog .job-action-footer {
    flex: 0 0 auto;
    }

/* View modal follows the same top position while keeping its
    content scrollable. */
    .job-view-dialog {
    max-height: calc(100vh - 120px) !important;
    }

@media (max-width: 700px) {
    .job-action-modal {
    align-items: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: 18px !important;
    }

.job-edit-dialog,
    .job-view-dialog {
    max-height: calc(100vh - 42px) !important;
    }
    }

/* ============================================================
    CREATE / EDIT JOB — SAME DESIGN SYSTEM
    ============================================================ */
/* Edit Job now intentionally uses the exact Create Job form
    classes, so both forms share one visual system. */
    .edit-job-form.create-job-form {
    padding: 20px 22px 0 !important;
    }

.edit-job-form .create-job-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    }

.edit-job-form .create-job-field-full {
    grid-column: 1 / -1;
    }

.edit-job-form .create-job-field label {
    color: #334155;
    }

.edit-job-form .create-job-field input,
    .edit-job-form .create-job-field select,
    .edit-job-form .create-job-field textarea {
    border-color: #dce2e8;
    background: #ffffff;
    }

.edit-job-form .create-job-field input:focus,
    .edit-job-form .create-job-field select:focus,
    .edit-job-form .create-job-field textarea:focus {
    border-color: #86d9aa;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.09);
    }

/* Same green button as Create Job. */
    #saveEditJobButton,
    #confirmCloseJobButton {
    border: 1px solid #f97316 !important;
    background: #f97316 !important;
    color: #ffffff !important;
    }

#saveEditJobButton:hover,
    #confirmCloseJobButton:hover {
    border-color: #c2410c !important;
    background: #c2410c !important;
    }

/* Same Cancel button as Create Job. */
    [data-close-edit-job] {
    font-family: inherit;
    }

/* Remove old red Close button styling from the confirmation. */
    .job-close-confirm-button {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    }

/* Keep Edit footer identical to Create Job footer. */
    .edit-job-form .create-job-form-footer {
    margin-left: -22px !important;
    margin-right: -22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    }

@media (max-width: 700px) {
    .edit-job-form .create-job-form-grid {
    grid-template-columns: 1fr;
    }

.edit-job-form .create-job-field-full {
    grid-column: auto;
    }
    }

/* ============================================================
    JOB STATUS CHANGE — DRAFT / PUBLISHED / CLOSED
    ============================================================ */
    .job-status-dialog {
    width: min(430px, 100%);
    }

.job-status-options {
    margin-top: 18px;
    display: grid;
    gap: 8px;
    }

.job-status-option {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dce8e1;
    border-radius: 10px;
    background: #ffffff;
    color: #29445f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
    }

.job-status-option:hover {
    background: #effaf4;
    border-color: #a9ddbe;
    color: #c2410c;
    transform: translateY(-1px);
    }

.job-status-option.published {
    color: #c2410c;
    }

.job-status-option.closed {
    color: #527463;
    }

.job-status-option.draft {
    color: #526b61;
    }

.job-status-option-arrow {
    font-size: 18px;
    line-height: 1;
    color: #9aabb0;
    }

.job-status-option:hover .job-status-option-arrow {
    color: #c2410c;
    }

.job-status-option.is-saving {
    opacity: .65;
    pointer-events: none;
    }

.job-status-dialog .job-confirm-actions {
    margin-top: 14px;
    }

/* ============================================================
    JOB ACTIONS — THREE DOT STATUS MENU
    ============================================================ */
    #jobsTableContainer .job-more-wrapper {
    position: relative;
    display: inline-flex;
    }

#jobsTableContainer .job-action-button.more {
    background: #eff9f3 !important;
    color: #28724b !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    }

#jobsTableContainer .job-action-button.more:hover {
    background: #dff5e8 !important;
    color: #c2410c !important;
    }

.job-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 165px;
    padding: 5px;
    border: 1px solid #dce8e1;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    }

.job-more-menu.hidden {
    display: none !important;
    }

.job-more-item {
    width: 100%;
    min-height: 35px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #29445f;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    }

.job-more-item:hover {
    background: #effaf4;
    color: #c2410c;
    }

.job-more-item.close-status {
    color: #527463;
    }

.job-more-item.close-status:hover {
    background: #effaf4;
    color: #c2410c;
    }

/* Keep the close confirmation on the same green theme. */
    .job-status-dialog .job-confirm-icon {
    background: #eff9f3;
    color: #c2410c;
    }

.job-status-dialog .create-job-save-button {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    }

.job-status-dialog .create-job-save-button:hover {
    background: #c2410c !important;
    border-color: #c2410c !important;
    }

/* ============================================================
    STATUS CHANGE — IN-POPUP OPTIONS
    ============================================================ */
    .job-status-dialog {
    width: min(430px, 100%);
    }

.job-status-popup-options {
    margin-top: 18px;
    }

.job-status-popup-option {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #dce8e1;
    border-radius: 10px;
    background: #ffffff;
    color: #29445f;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: .16s ease;
    margin-bottom: 8px;
    }

.job-status-popup-option:hover {
    background: #effaf4;
    border-color: #a9ddbe;
    color: #c2410c;
    }

.job-status-popup-option.draft {
    color: #527463;
    }

.job-status-popup-option.published {
    color: #c2410c;
    }

.job-status-popup-option.closed {
    color: #c2410c;
    }

.job-close-confirm-inside-popup {
    display: flex;
    justify-content: center;
    gap: 9px;
    }

.job-status-dialog .job-confirm-icon {
    background: #eff9f3;
    color: #c2410c;
    }

.job-status-dialog #jobStatusPopupIcon {
    background: #eff9f3;
    color: #c2410c;
    }

.job-status-dialog #jobStatusPopupTitle {
    color: #1f2937;
    }

/* ============================================================
    FINAL ACTIONS — VIEW / EDIT / STATUS POPUP
    ============================================================ */
    #jobsTableContainer .job-action-button.status {
    background: #eff9f3 !important;
    color: #28724b !important;
    font-size: 15px;
    font-weight: 700;
    }

#jobsTableContainer .job-action-button.status:hover {
    background: #dff5e8 !important;
    color: #c2410c !important;
    }

/* Hide any legacy three-dot menu if older markup exists. */
    #jobsTableContainer .job-more-wrapper,
    #jobsTableContainer .job-more-menu,
    #jobsTableContainer [data-job-more] {
    display: none !important;
    }

/* Status popup stays a proper modal, not a dropdown. */
    #closeJobConfirmModal {
    z-index: 7000 !important;
    }

#closeJobConfirmModal .job-confirm-dialog {
    width: min(430px, calc(100vw - 32px));
    padding: 28px;
    }

#closeJobConfirmModal .job-status-popup-option {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0 0 8px;
    border: 1px solid #dce8e1;
    border-radius: 10px;
    background: #ffffff;
    color: #28724b;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    }

#closeJobConfirmModal .job-status-popup-option:hover {
    background: #effaf4;
    border-color: #a9ddbe;
    }

#closeJobConfirmModal .job-close-confirm-inside-popup {
    display: flex;
    justify-content: center;
    gap: 9px;
    }

/* ============================================================
    STATUS POPUP — FINAL BUTTON CLICK FIX
    ============================================================ */
    #jobStatusOptions {
    position: relative;
    z-index: 20;
    }

#jobStatusOptions .job-status-popup-option {
    position: relative;
    z-index: 21;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin-bottom: 8px;
    padding: 0 14px;
    pointer-events: auto !important;
    cursor: pointer !important;
    }

#jobStatusOptions .job-close-confirm-inside-popup {
    position: relative;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    }

#jobStatusOptions button {
    pointer-events: auto !important;
    }

/* ============================================================
/* =====================================================
    RECRUITMENT CANDIDATES
    Compact job-wise hiring pipeline — Image 1 layout
    ===================================================== */
    .candidates-page {
    min-height: calc(100vh - 72px);
    margin-left: 245px;
    padding: 18px 13px 28px;
    background: #f5f7f6;
    }

.candidates-job-list {
    width: 100%;
    }

.candidate-job-card {
    width: 100%;
    margin-bottom: 18px;
    padding: 22px 24px 25px;
    background: #ffffff;
    border: 1px solid #edf0f3;
    border-radius: 22px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.045);
    }

.candidate-job-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    }

.candidate-job-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    }

.candidate-job-heading p {
    margin: 6px 0 0;
    color: #60748b;
    font-size: 13px;
    line-height: 1.4;
    }

.candidate-job-heading p span {
    color: #9aa7b5;
    padding: 0 2px;
    }

.candidate-job-status {
    min-width: 101px;
    height: 34px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    }

.candidate-job-status.published {
    background: #d9f8e6;
    color: #109548;
    }

.candidate-job-status.closed {
    background: #fde2e2;
    color: #d71919;
    }

.candidate-job-status.draft {
    background: #f3f4f6;
    color: #64748b;
    }

.candidate-status-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
    }

.candidate-status-button {
    min-width: 0;
    height: 48px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid #ff9a54;
    border-radius: 11px;
    background: #fff8ef;
    color: #e85c0b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    }

.candidate-status-button span:first-child {
    flex: 0 0 auto;
    font-size: 12px;
    }

.candidate-status-button span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    }

.candidate-status-button:hover,
    .candidate-status-button.selected {
    background: #fff1df;
    border-color: #ff7b27;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 123, 39, .08);
    }

.candidate-status-button.all {
    font-weight: 700;
    }

.candidate-status-button.hired,
    .candidate-status-button.rejected {
    color: #e85c0b;
    }

.candidates-loading,
    .candidates-empty-state {
    min-height: 220px;
    width: 100%;
    padding: 38px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #dce4ea;
    border-radius: 18px;
    background: #ffffff;
    color: #64748b;
    text-align: center;
    }

.candidates-empty-state strong {
    margin-top: 10px;
    color: #1f2937;
    font-size: 15px;
    }

.candidates-empty-state p {
    margin-top: 6px;
    font-size: 12px;
    }

.candidates-empty-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff7ed;
    color: #f97316;
    font-size: 21px;
    }

.dashboard-page.profile-mode .candidates-page {
    margin-left: 0;
    }

@media (max-width: 1150px) {
    .candidates-page {
    margin-left: 220px;
    }

.candidate-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    }

@media (max-width: 900px) {
    .candidates-page {
    margin-left: 0;
    padding: 24px 20px;
    }

.candidate-job-header {
    flex-direction: column;
    }

.candidate-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    }

@media (max-width: 600px) {
    .candidates-page {
    padding: 16px 12px;
    }

.candidate-job-card {
    padding: 18px;
    border-radius: 17px;
    }

.candidate-status-grid {
    grid-template-columns: 1fr;
    }

.candidate-status-button {
    width: 100%;
    }
    }

/* ============================================================
    CANDIDATES — SAME CARD WIDTH, 30% SHORTER / SMALLER CONTENT
    ============================================================ */
    .candidates-page {
    width: 100% !important;
    max-width: none !important;
    }

/* Card width stays exactly the same; only its height is reduced
    through vertical spacing/padding. */
    .candidate-job-card {
    width: 100% !important;
    padding: 15px 24px 17px !important;
    margin-bottom: 13px !important;
    border-radius: 18px !important;
    }

/* Job heading/content ~30% smaller */
    .candidate-job-heading h2 {
    font-size: 17px !important;
    line-height: 1.15 !important;
    }

.candidate-job-heading p {
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    }

.candidate-total {
    min-height: 24px !important;
    margin-top: 5px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
    border-radius: 14px !important;
    }

/* Status pill ~30% smaller */
    .candidate-job-status {
    min-width: 72px !important;
    height: 25px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    font-size: 9px !important;
    }

/* Buttons ~30% smaller */
    .candidate-status-grid {
    gap: 6px !important;
    margin-top: 15px !important;
    }

.candidate-status-button {
    height: 34px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    }

.candidate-status-button span:first-child {
    font-size: 9px !important;
    }

/* Keep seven buttons on first row and three on second row. */
@media (min-width: 1151px) {
    .candidate-status-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
    }

/* ============================================================
    CANDIDATES — REDUCE CARD + BUTTON WIDTH
    Font sizes remain unchanged.
    ============================================================ */
/* Candidates content/card area becomes 70% width */
    .candidates-page {
    width: 70% !important;
    max-width: 70% !important;
    }

/* Cards follow the reduced content width */
    .candidate-job-card {
    width: 100% !important;
    max-width: 100% !important;
    }

/* Keep the existing 7-column layout, so buttons become
    proportionally narrower with the smaller card width. */
    .candidate-status-grid {
    width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

/* Font size stays exactly as in the previous version. */
    .candidate-status-button {
    font-size: 9px !important;
    }

.candidate-job-heading h2 {
    font-size: 17px !important;
    }

/* ============================================================
    CANDIDATES — FIT THE PAGE BETTER
    Slightly wider than the previous 70% version.
    ============================================================ */
    .candidates-page {
    width: 90% !important;
    max-width: 90% !important;
    }

.candidate-job-card {
    width: 100% !important;
    max-width: 100% !important;
    }

.candidate-status-grid {
    width: 100% !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

/* ============================================================
    CANDIDATES — 6 BUTTONS PER ROW
    Slightly narrower cards, slightly wider buttons.
    ============================================================ */
    .candidates-page {
    width: 86% !important;
    max-width: 86% !important;
    }

.candidate-status-grid {
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    }

.candidate-status-button {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

/* ============================================================
    CANDIDATES — 5% NARROWER CARDS + BUTTONS
    ============================================================ */
    .candidates-page {
    width: 81% !important;
    max-width: 81% !important;
    }

/* Buttons become 5% narrower while staying in 6-column layout. */
    .candidate-status-button {
    width: 95% !important;
    justify-self: start !important;
    }

/* ============================================================
    CANDIDATES — 1% WIDER
    ============================================================ */
    .candidates-page {
    width: 82% !important;
    max-width: 82% !important;
    }

.candidate-status-button {
    width: 96% !important;
    }

/* ============================================================
    CANDIDATES — 0.4% WIDER
    ============================================================ */
    .candidates-page {
    width: 82.4% !important;
    max-width: 82.4% !important;
    }

.candidate-status-button {
    width: 96.4% !important;
    }

/* ============================================================
    CONFINALITY HRMS — LEAVE DASHBOARD
    Matches the Leave Dashboard design provided by the user.
    ============================================================ */
    .leave-dashboard-page {
    width: 100%;
    min-height: calc(100vh - 72px);
    background: #f7f9fc;
    overflow: auto;
    }

.leave-dashboard-shell {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
    }

/* ------------------------------------------------------------
    HEADER
    ------------------------------------------------------------ */
    .leave-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    }

.leave-dashboard-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    }

.leave-dashboard-title-icon {
    font-size: 29px;
    line-height: 1;
    margin-top: 1px;
    }

.leave-dashboard-header h1 {
    margin: 0;
    color: #111827;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    }

.leave-dashboard-header p {
    margin: 5px 0 0;
    color: #60708a;
    font-size: 14px;
    }

.leave-dashboard-date {
    padding: 11px 22px;
    border: 1px solid #e1e5eb;
    border-radius: 9px;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
    white-space: nowrap;
    }

/* ------------------------------------------------------------
    SUMMARY CARDS
    ------------------------------------------------------------ */
    .leave-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    }

.leave-stat-card {
    position: relative;
    min-height: 142px;
    padding: 20px;
    border: 1px solid #dfe4eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    }

.leave-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    bottom: 17px;
    width: 4px;
    background: #ff6b1a;
    border-radius: 0 4px 4px 0;
    }

.leave-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffd3ae;
    border-radius: 10px;
    background: #fff9f4;
    font-size: 20px;
    margin-bottom: 12px;
    }

.leave-stat-label {
    display: block;
    color: #62738f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.65px;
    margin-bottom: 3px;
    }

.leave-stat-card strong {
    display: block;
    color: #111827;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    }

/* ------------------------------------------------------------
    DASHBOARD PANELS
    ------------------------------------------------------------ */
    .leave-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 38px 20px;
    }

.leave-dashboard-panel {
    min-height: 247px;
    border: 1px solid #dfe4eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    }

.leave-panel-header {
    padding: 22px 20px 17px;
    border-bottom: 1px solid #e4e8ee;
    }

.leave-panel-header h2 {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
    }

.leave-list,
    .leave-department-list {
    min-height: 78px;
    padding: 0 20px;
    }

.leave-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    color: #8a96a8;
    font-size: 13px;
    text-align: center;
    }

/* ------------------------------------------------------------
    TODAY'S LEAVES
    ------------------------------------------------------------ */
    .leave-list-item {
    min-height: 58px;
    padding: 15px 0;
    border-bottom: 1px solid #e7ebf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    }

.leave-list-item:last-child {
    border-bottom: none;
    }

.leave-list-person {
    min-width: 0;
    }

.leave-list-person strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    }

.leave-list-person span {
    display: block;
    margin-top: 5px;
    color: #60708a;
    font-size: 12px;
    }

.leave-list-department {
    color: #6480a4;
    font-size: 11px;
    margin-left: 3px;
    }

.leave-status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    }

.leave-status-badge.approved {
    background: #ffedd5;
    border: 1px solid #fdba74;
    color: #f97316;
    }

.leave-status-badge.pending {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
    }

.leave-status-badge.rejected {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    }

.leave-panel-footer {
    margin: 0 20px 20px;
    padding: 12px 16px;
    background: #fff8ef;
    color: #54708e;
    font-size: 12px;
    border-top: 1px solid #ffd9b7;
    }

.leave-panel-footer strong {
    color: #ff6415;
    margin-left: 4px;
    }

/* ------------------------------------------------------------
    PENDING REQUESTS
    ------------------------------------------------------------ */
    .leave-pending-item {
    min-height: 77px;
    padding: 17px 0;
    border-bottom: 1px solid #e7ebf0;
    }

.leave-pending-item:last-child {
    border-bottom: none;
    }

.leave-pending-name {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    }

.leave-pending-department {
    color: #6480a4;
    font-size: 11px;
    margin-left: 3px;
    }

.leave-pending-detail {
    margin-top: 7px;
    color: #60708a;
    font-size: 12px;
    }

/* ------------------------------------------------------------
    DEPARTMENT SNAPSHOT
    ------------------------------------------------------------ */
    .leave-department-item {
    padding: 15px 0;
    border-bottom: 1px solid #e7ebf0;
    }

.leave-department-item:last-child {
    border-bottom: none;
    }

.leave-department-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
    }

.leave-department-name {
    color: #173b5f;
    font-size: 13px;
    font-weight: 700;
    }

.leave-department-counts {
    display: flex;
    align-items: center;
    gap: 22px;
    color: #7a8798;
    font-size: 9px;
    text-transform: uppercase;
    }

.leave-department-counts strong {
    display: block;
    color: #111827;
    font-size: 14px;
    text-align: center;
    }

.leave-department-progress {
    width: 100%;
    height: 7px;
    background: #edf1f4;
    border-radius: 999px;
    overflow: hidden;
    }

.leave-department-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: #ff6b1a;
    border-radius: inherit;
    transition: width 0.25s ease;
    }

/* ------------------------------------------------------------
    LOW LEAVE BALANCE
    ------------------------------------------------------------ */
    .leave-low-balance-item {
    min-height: 64px;
    padding: 15px 0;
    border-bottom: 1px solid #e7ebf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    }

.leave-low-balance-item:last-child {
    border-bottom: none;
    }

.leave-low-balance-person strong {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    }

.leave-low-balance-person span {
    display: block;
    margin-top: 4px;
    color: #718096;
    font-size: 11px;
    }

.leave-low-balance-value {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    }

/* ------------------------------------------------------------
    LEAVE DASHBOARD LOADING / ERROR
    ------------------------------------------------------------ */
    .leave-dashboard-loading,
    .leave-dashboard-error {
    padding: 45px 20px;
    text-align: center;
    color: #718096;
    font-size: 13px;
    }

.leave-dashboard-error {
    color: #dc2626;
    }

/* ------------------------------------------------------------
    RESPONSIVE
    ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .leave-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.leave-dashboard-grid {
    grid-template-columns: 1fr;
    }
    }

@media (max-width: 900px) {
    .leave-dashboard-shell {
    padding: 24px 20px;
    }
    }

@media (max-width: 600px) {
    .leave-dashboard-header {
    flex-direction: column;
    }

.leave-stat-grid {
    grid-template-columns: 1fr;
    }

.leave-dashboard-header h1 {
    font-size: 25px;
    }

.leave-dashboard-date {
    align-self: flex-start;
    }

.leave-dashboard-grid {
    gap: 18px;
    }

.leave-dashboard-panel {
    min-height: 220px;
    }

.leave-list-item {
    align-items: flex-start;
    flex-direction: column;
    }

.leave-department-top {
    align-items: flex-start;
    flex-direction: column;
    }

.leave-department-counts {
    width: 100%;
    justify-content: flex-end;
    }
    }

/* ============================================================
    LEAVE DASHBOARD — FINAL LAYOUT FIX
    ============================================================ */
/* The Leave page sits beside the fixed 245px HRMS sidebar.
    width: calc(...) prevents the page from becoming wider than
    the viewport and removes the horizontal scrollbar. */
    .leave-dashboard-page {
    width: calc(100% - 245px) !important;
    margin-left: 245px !important;
    min-height: calc(100vh - 72px);
    background: #f7f9fc;
    overflow-x: hidden !important;
    overflow-y: auto;
    box-sizing: border-box;
    }

.leave-dashboard-shell {
    width: 100% !important;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 42px 50px;
    box-sizing: border-box;
    }

/* Four summary cards remain in one equal-width row.
    Their content remains compact without breaking the grid. */
    .leave-stat-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    box-sizing: border-box;
    }

.leave-stat-grid .leave-stat-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    }

/* Main panels remain two equal columns. */
    .leave-dashboard-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 20px;
    box-sizing: border-box;
    }

.leave-dashboard-grid .leave-dashboard-panel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    }

/* Keep all dashboard content inside its grid cell. */
    .leave-stat-card,
    .leave-dashboard-panel {
    max-width: 100%;
    min-width: 0;
    }

/* ============================================================
    RESPONSIVE
    ============================================================ */
@media (max-width: 1100px) {
    .leave-dashboard-page {
    width: calc(100% - 220px) !important;
    margin-left: 220px !important;
    }

.leave-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.leave-dashboard-grid {
    grid-template-columns: 1fr;
    }
    }

@media (max-width: 900px) {
    .leave-dashboard-page {
    width: 100% !important;
    margin-left: 0 !important;
    }

.leave-dashboard-shell {
    padding: 24px 20px;
    }

.leave-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    }

@media (max-width: 600px) {
    .leave-stat-grid {
    grid-template-columns: 1fr;
    }

.leave-dashboard-shell {
    padding: 20px 16px 35px;
    }

.leave-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    }
    }

/* ============================================================
    LEAVE DASHBOARD — COMPACT DESIGN (MATCH REFERENCE IMAGE)
    ============================================================ */
    .leave-dashboard-header {
    margin-bottom: 20px !important;
    }

.leave-dashboard-header h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.3px !important;
    }

.leave-dashboard-header p {
    font-size: 13px !important;
    margin-top: 3px !important;
    }

/* Compact summary cards */
    .leave-stat-card {
    min-height: 145px !important;
    height: auto !important;
    padding: 16px !important;
    }

.leave-stat-card::before {
    top: 15px !important;
    bottom: 15px !important;
    }

.leave-stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    margin-bottom: 9px !important;
    }

.leave-stat-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 3px !important;
    }

.leave-stat-card strong {
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    }

/* Compact content panels */
    .leave-dashboard-panel {
    min-height: 248px !important;
    height: auto !important;
    }

.leave-panel-header {
    padding: 16px 20px 14px !important;
    }

.leave-panel-header h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    }

.leave-list,
    .leave-department-list {
    min-height: 58px !important;
    padding: 0 20px !important;
    }

.leave-empty-state {
    min-height: 70px !important;
    font-size: 12px !important;
    }

.leave-list-item {
    min-height: 52px !important;
    padding: 12px 0 !important;
    }

.leave-panel-footer {
    margin-bottom: 14px !important;
    padding: 10px 14px !important;
    }

.leave-pending-item {
    min-height: 62px !important;
    padding: 13px 0 !important;
    }

.leave-department-item {
    padding: 12px 0 !important;
    }

@media (max-width: 600px) {
    .leave-dashboard-header h1 {
    font-size: 22px !important;
    font-weight: 650 !important;
    }
    }

/* ============================================================
    LEAVE DASHBOARD — FINAL UI
    Same heading treatment as People / Recruitment.
    Cards use a compact minimum height and auto-grow with content.
    ============================================================ */
/* Keep the Leave page correctly positioned beside the HRMS sidebar. */
    .leave-dashboard-page {
    width: calc(100% - 245px) !important;
    margin-left: 245px !important;
    min-height: calc(100vh - 72px);
    background: #f7f9fc;
    overflow-x: hidden !important;
    overflow-y: auto;
    box-sizing: border-box;
    }

.leave-dashboard-shell {
    width: 100% !important;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 42px 50px;
    box-sizing: border-box;
    }

/* ------------------------------------------------------------
    HEADING — People / Recruitment style
    People uses 28px, #1f2937, normal page-heading treatment.
    ------------------------------------------------------------ */
    .leave-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    }

.leave-dashboard-header h1 {
    margin: 6px 0 0;
    font-size: 28px !important;
    line-height: 1.15;
    font-weight: 700 !important;
    color: #1f2937 !important;
    letter-spacing: 0;
    }

.leave-dashboard-header p {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 13px;
    }

/* ------------------------------------------------------------
    TOP CARDS — 30% LESS HEIGHT, AUTO-GROW WITH DATA
    ------------------------------------------------------------ */
    .leave-stat-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    box-sizing: border-box;
    }

.leave-stat-card {
    width: 100%;
    min-width: 0;
    min-height: 100px !important;
    height: auto !important;
    padding: 12px 16px !important;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #dfe4eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    }

.leave-stat-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
    border-radius: 9px;
    margin-bottom: 7px !important;
    }

.leave-stat-label {
    font-size: 11px !important;
    line-height: 1.2;
    margin-bottom: 2px !important;
    }

.leave-stat-card strong {
    font-size: 28px !important;
    line-height: 1.05;
    font-weight: 800;
    }

/* ------------------------------------------------------------
    MAIN CARDS — 30% LESS MINIMUM HEIGHT, AUTO-GROW
    ------------------------------------------------------------ */
    .leave-dashboard-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 20px;
    box-sizing: border-box;
    }

.leave-dashboard-panel {
    width: 100%;
    min-width: 0;
    min-height: 173px !important;
    height: auto !important;
    box-sizing: border-box;
    border: 1px solid #dfe4eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    }

/* Header remains compact. Content can make the card taller naturally. */
    .leave-panel-header {
    padding: 16px 20px 12px !important;
    }

.leave-panel-header h2 {
    font-size: 17px;
    font-weight: 800;
    }

/* Don't force empty-state height to make cards unnecessarily tall. */
    .leave-empty-state {
    min-height: 55px !important;
    padding: 18px 12px;
    box-sizing: border-box;
    }

/* Lists grow naturally as records are added. */
    .leave-list,
    .leave-department-list {
    min-height: 0 !important;
    }

.leave-list-item,
    .leave-pending-item,
    .leave-low-balance-item {
    min-height: 0;
    }

@media (max-width: 1100px) {
    .leave-dashboard-page {
    width: calc(100% - 220px) !important;
    margin-left: 220px !important;
    }

.leave-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.leave-dashboard-grid {
    grid-template-columns: 1fr;
    }
    }

@media (max-width: 900px) {
    .leave-dashboard-page {
    width: 100% !important;
    margin-left: 0 !important;
    }

.leave-dashboard-shell {
    padding: 24px 20px 40px;
    }
    }

@media (max-width: 600px) {
    .leave-stat-grid {
    grid-template-columns: 1fr;
    }

.leave-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    }

.leave-dashboard-header h1 {
    font-size: 28px !important;
    }
    }

/* ============================================================
    EMPLOYEE JOURNEY — FINAL LAYOUT + TABLE FIX
    Paste this at the END of style.css
    ============================================================ */
/* =========================
    MAIN JOURNEY LAYOUT
    ========================= */
    .profile-journey-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    }

/* =========================
    JOURNEY STAT CARDS
    ========================= */
    .journey-stat-grid {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    }

.journey-stat {
    min-height: 76px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    }

.journey-stat span {
    font-size: 12px !important;
    }

.journey-stat strong {
    margin-top: 5px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    }

/* =========================
    CHART ROW
    ========================= */
    .journey-chart-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    }

/* =========================
    CHART CARD
    ========================= */
    .journey-chart-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 390px !important;
    min-height: 390px !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e1e7e3 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow:
    0 3px 14px rgba(15, 23, 42, 0.04) !important;
    }

/* =========================
    CHART LEGEND
    ========================= */
    .journey-chart-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    min-height: 42px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f0f2f3 !important;
    }

.legend-item {
    font-size: 12px !important;
    gap: 7px !important;
    }

.legend-item i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex: 0 0 10px !important;
    }

/* =========================
    CHART CANVAS
    ========================= */
    .journey-canvas-wrap {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    min-height: 310px !important;
    }

.journey-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    }

/* =========================
    PIE / DONUT CHART
    ========================= */
    .journey-canvas-wrap.pie-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 310px !important;
    min-height: 310px !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 285px !important;
    height: 285px !important;
    max-width: 100% !important;
    max-height: 285px !important;
    }

/* =========================
    CLICKABLE JOURNEY STATS
    ========================= */
    .journey-stat {
    cursor: pointer !important;
    transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease !important;
    }

.journey-stat:hover {
    transform: translateY(-2px) !important;
    border-color: #fed7aa !important;
    box-shadow:
    0 8px 22px rgba(22, 163, 74, 0.08) !important;
    }

/* ============================================================
    JOURNEY DETAILS TABLE
    Promotions / Awards / Warnings / PIP
    ============================================================ */
/*
    Multiple possible wrappers covered because
    the tables are generated dynamically by JavaScript.
*/
    .journey-details,
    .journey-detail-card,
    .journey-details-card,
    .journey-table-card,
    .profile-journey-details,
    .profile-journey-table,
    .journey-popup-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e1e7e3 !important;
    border-radius: 14px !important;
    padding: 18px !important;
    overflow: hidden !important;
    box-shadow:
    0 5px 18px rgba(15, 23, 42, 0.05) !important;
    }

/* Table horizontal wrapper */
    .journey-table-wrap,
    .journey-details-table-wrap,
    .profile-journey-table-wrap,
    .journey-popup-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    }

/* Dynamic tables */
    .journey-details table,
    .journey-detail-card table,
    .journey-details-card table,
    .journey-table-card table,
    .profile-journey-details table,
    .profile-journey-table table,
    .journey-popup-content table,
    .journey-table-wrap table,
    .journey-details-table-wrap table {
    width: 100% !important;
    min-width: 720px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    font-size: 12px !important;
    color: #334155 !important;
    background: #ffffff !important;
    }

/* Table header */
    .journey-details table thead th,
    .journey-detail-card table thead th,
    .journey-details-card table thead th,
    .journey-table-card table thead th,
    .profile-journey-details table thead th,
    .profile-journey-table table thead th,
    .journey-popup-content table thead th,
    .journey-table-wrap table thead th,
    .journey-details-table-wrap table thead th {
    padding: 13px 15px !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    border-bottom: 1px solid #fed7aa !important;
    border-right: 1px solid #ffedd5 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: nowrap !important;
    }

/* Table body */
    .journey-details table tbody td,
    .journey-detail-card table tbody td,
    .journey-details-card table tbody td,
    .journey-table-card table tbody td,
    .profile-journey-details table tbody td,
    .profile-journey-table table tbody td,
    .journey-popup-content table tbody td,
    .journey-table-wrap table tbody td,
    .journey-details-table-wrap table tbody td {
    padding: 13px 15px !important;
    border-bottom: 1px solid #edf1ee !important;
    border-right: 1px solid #f1f5f2 !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
    }

.journey-details table th:last-child,
    .journey-details table td:last-child,
    .journey-detail-card table th:last-child,
    .journey-detail-card table td:last-child,
    .journey-details-card table th:last-child,
    .journey-details-card table td:last-child,
    .journey-table-card table th:last-child,
    .journey-table-card table td:last-child,
    .profile-journey-details table th:last-child,
    .profile-journey-details table td:last-child,
    .profile-journey-table table th:last-child,
    .profile-journey-table table td:last-child,
    .journey-popup-content table th:last-child,
    .journey-popup-content table td:last-child {
    border-right: none !important;
    }

.journey-details table tbody tr:last-child td,
    .journey-detail-card table tbody tr:last-child td,
    .journey-details-card table tbody tr:last-child td,
    .journey-table-card table tbody tr:last-child td,
    .profile-journey-details table tbody tr:last-child td,
    .profile-journey-table table tbody tr:last-child td,
    .journey-popup-content table tbody tr:last-child td {
    border-bottom: none !important;
    }

.journey-details table tbody tr:hover td,
    .journey-detail-card table tbody tr:hover td,
    .journey-details-card table tbody tr:hover td,
    .journey-table-card table tbody tr:hover td,
    .profile-journey-details table tbody tr:hover td,
    .profile-journey-table table tbody tr:hover td,
    .journey-popup-content table tbody tr:hover td {
    background: #f8fcf9 !important;
    }

/* =========================
    DETAIL HEADING
    ========================= */
    .journey-details h2,
    .journey-details h3,
    .journey-detail-card h2,
    .journey-detail-card h3,
    .journey-details-card h2,
    .journey-details-card h3,
    .journey-table-card h2,
    .journey-table-card h3,
    .profile-journey-details h2,
    .profile-journey-details h3,
    .journey-popup-content h2,
    .journey-popup-content h3 {
    margin: 0 0 16px !important;
    color: #123b27 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    }

/* =========================
    EMPTY STATE
    ========================= */
    .journey-details .empty,
    .journey-detail-card .empty,
    .journey-details-card .empty,
    .journey-table-card .empty,
    .profile-journey-details .empty,
    .profile-journey-table .empty {
    padding: 45px 20px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    }

/* =========================
    TABLET
    ========================= */
@media (max-width: 1150px) {
    .journey-chart-row {
    grid-template-columns: 1fr 1fr !important;
    }

.journey-chart-card {
    height: 360px !important;
    min-height: 360px !important;
    }

.journey-canvas-wrap,
    .journey-canvas-wrap.pie-wrap {
    height: 280px !important;
    min-height: 280px !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 250px !important;
    height: 250px !important;
    max-height: 250px !important;
    }
    }

/* =========================
    SMALL LAPTOP / TABLET
    ========================= */
@media (max-width: 900px) {
    .journey-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

.journey-chart-row {
    grid-template-columns: 1fr !important;
    }

.journey-chart-card {
    height: 380px !important;
    min-height: 380px !important;
    }

.journey-canvas-wrap,
    .journey-canvas-wrap.pie-wrap {
    height: 300px !important;
    min-height: 300px !important;
    }
    }

/* =========================
    MOBILE
    ========================= */
@media (max-width: 650px) {
    .journey-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

.journey-chart-card {
    height: 330px !important;
    min-height: 330px !important;
    padding: 12px !important;
    }

.journey-chart-legend {
    gap: 10px !important;
    min-height: 50px !important;
    }

.journey-canvas-wrap,
    .journey-canvas-wrap.pie-wrap {
    height: 250px !important;
    min-height: 250px !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 210px !important;
    height: 210px !important;
    max-height: 210px !important;
    }

.journey-details,
    .journey-detail-card,
    .journey-details-card,
    .journey-table-card,
    .profile-journey-details,
    .profile-journey-table,
    .journey-popup-content {
    padding: 12px !important;
    }

.journey-details table,
    .journey-detail-card table,
    .journey-details-card table,
    .journey-table-card table,
    .profile-journey-details table,
    .profile-journey-table table,
    .journey-popup-content table {
    min-width: 620px !important;
    }
    }

/* ============================================================
    EMPLOYEE JOURNEY — FINAL SCREENSHOT STYLE
    Paste at END of style.css
    ============================================================ */
/* ============================================================
    MAIN JOURNEY AREA
    ============================================================ */
    #profileJourneyGrid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

/* ============================================================
    JOURNEY STATS
    ============================================================ */
    .journey-stat-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 0;
    }

.journey-stat {
    min-height: 58px !important;
    padding: 8px 12px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d9dee5 !important;
    border-radius: 6px !important;
    box-sizing: border-box;
    cursor: default;
    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
    }

.journey-stat-clickable {
    cursor: pointer;
    }

.journey-stat span {
    font-size: 11px !important;
    font-weight: 500;
    color: #526274;
    line-height: 1.2;
    }

.journey-stat strong {
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #273a91;
    }

/* Hover */
    .journey-stat-clickable:hover {
    border-color: #f59e0b !important;
    box-shadow:
    0 2px 8px rgba(245, 158, 11, 0.12);
    transform: translateY(-1px);
    }

/* Active / Open Card */
    .journey-stat-clickable.is-open {
    border-color: #f59e0b !important;
    box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.18),
    0 3px 10px rgba(245, 158, 11, 0.08);
    }

/* ============================================================
    CHART ROW
    ============================================================ */
    .journey-chart-row {
    width: 100%;
    display: grid !important;
    grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch;
    margin-top: 0;
    }

/* ============================================================
    CHART CARDS
    ============================================================ */
    .journey-chart-card {
    width: 100% !important;
    height: 158px !important;
    min-height: 158px !important;
    padding: 8px 10px !important;
    background: #ffffff;
    border: 1px solid #d9dee5 !important;
    border-radius: 7px !important;
    box-sizing: border-box;
    overflow: hidden;
    }

/* ============================================================
    CHART LEGEND
    ============================================================ */
    .journey-chart-legend {
    width: 100%;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
    flex-wrap: nowrap;
    margin: 0 !important;
    padding: 0 !important;
    }

.legend-item {
    display: inline-flex !important;
    align-items: center;
    gap: 5px !important;
    font-size: 11px !important;
    color: #5b6470;
    white-space: nowrap;
    }

.legend-item i {
    width: 10px !important;
    height: 10px !important;
    display: inline-block;
    border-radius: 0 !important;
    flex-shrink: 0;
    }

/* ============================================================
    BAR CHART AREA
    ============================================================ */
    .journey-canvas-wrap {
    position: relative !important;
    width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    overflow: hidden;
    }

.journey-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    }

/* ============================================================
    PIE CHART
    ============================================================ */
    .journey-canvas-wrap.pie-wrap {
    width: 100% !important;
    height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 105px !important;
    height: 105px !important;
    max-width: 105px !important;
    max-height: 105px !important;
    }

/* ============================================================
    JOURNEY DETAILS PANEL
    Promotion / Awards / Warnings / PIPs / Projects
    ============================================================ */
    .journey-details-panel {
    width: 100%;
    background: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 7px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 !important;
    padding: 8px !important;
    }

.journey-details-panel[hidden] {
    display: none !important;
    }

/* ============================================================
    DETAILS HEADER
    ============================================================ */
    .journey-details-header {
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    }

.journey-details-header h3 {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #263746;
    }

/* Close Button */
    .journey-details-close {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #fff7ed !important;
    color: #d97706 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    }

.journey-details-close:hover {
    background: #ffedd5 !important;
    color: #b45309 !important;
    transform: rotate(90deg);
    }

/* ============================================================
    TABLE WRAPPER
    ============================================================ */
    .journey-details-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e6ea;
    box-sizing: border-box;
    }

/* ============================================================
    DETAILS TABLE
    ============================================================ */
    .journey-details-table {
    width: 100% !important;
    min-width: 650px;
    border-collapse: collapse !important;
    table-layout: fixed;
    font-size: 11px !important;
    color: #2f3c48;
    }

/* Table Header */
    .journey-details-table thead th {
    padding: 6px 10px !important;
    background: linear-gradient(
    90deg,
    #ffd59b 0%,
    #ffc47d 100%
    ) !important;
    color: #263746 !important;
    border-right: 1px solid rgba(255,255,255,0.75) !important;
    border-bottom: 1px solid #efb76e !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap;
    }

.journey-details-table thead th:last-child {
    border-right: none !important;
    }

/* Table Rows */
    .journey-details-table tbody td {
    padding: 6px 10px !important;
    background: #ffffff;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 10px !important;
    font-weight: 400;
    color: #334155 !important;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
    }

.journey-details-table tbody tr:nth-child(even) td {
    background: #fffbf3;
    }

.journey-details-table tbody tr:hover td {
    background: #fff5e6 !important;
    }

.journey-details-table tbody td:last-child {
    border-right: none !important;
    }

.journey-details-table tbody tr:last-child td {
    border-bottom: none !important;
    }

/* ============================================================
    EMPTY STATE
    ============================================================ */
    .journey-details-empty {
    padding: 22px !important;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    }

/* ============================================================
    TIMELINE
    ============================================================ */
    .journey-timeline-card {
    width: 100% !important;
    min-height: 210px;
    padding: 14px 16px !important;
    background: #ffffff;
    border: 1px solid #d9dee5 !important;
    border-radius: 16px !important;
    box-sizing: border-box;
    margin-top: 12px !important;
    }

.journey-card-heading {
    margin-bottom: 12px !important;
    }

.journey-card-heading h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #263746 !important;
    }

/* ============================================================
    TIMELINE ITEMS
    ============================================================ */
    .journey-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    }

.journey-timeline-item {
    position: relative;
    padding-left: 28px !important;
    min-height: 34px;
    }

.journey-timeline-item::before {
    width: 14px !important;
    height: 14px !important;
    left: 0 !important;
    }

.journey-timeline-item::after {
    left: 6px !important;
    }

.journey-timeline-item:last-child::after {
    display: none;
    }

/* Timeline text */
    .journey-timeline-date,
    .journey-timeline-item strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #263746 !important;
    }

.journey-timeline-item p,
    .journey-timeline-description {
    margin-top: 3px !important;
    font-size: 11px !important;
    color: #64748b !important;
    }

@media (max-width: 900px) {
    .journey-chart-row {
    grid-template-columns: 1fr !important;
    }

.journey-chart-card {
    height: 180px !important;
    min-height: 180px !important;
    }

.journey-canvas-wrap {
    height: 130px !important;
    }

.journey-canvas-wrap.pie-wrap {
    height: 130px !important;
    }
    }

@media (max-width: 650px) {
    .journey-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    }

.journey-chart-legend {
    gap: 7px !important;
    }

.legend-item {
    font-size: 9px !important;
    }

.journey-details-panel {
    padding: 6px !important;
    }

.journey-timeline-card {
    padding: 12px !important;
    }
    }

/* ============================================================
    EMPLOYEE JOURNEY — STRONG DETAILS TABLE FIX
    PASTE AT VERY END OF style.css
    ============================================================ */
/* ============================================================
    OPEN DETAILS PANEL
    ============================================================ */
    .journey-details-panel {
    width: 100% !important;
    margin: 16px 0 24px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 2px solid #f59e0b !important;
    border-radius: 14px !important;
    box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(245, 158, 11, 0.12) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    }

.journey-details-header {
    min-height: 46px !important;
    padding: 0 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 14px !important;
    }

.journey-details-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    }

/* ============================================================
    CLOSE BUTTON
    ============================================================ */
    .journey-details-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #fff7ed !important;
    color: #c2410c !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    }

.journey-details-close:hover {
    background: #f97316 !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
    }

.journey-details-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    }

/* ============================================================
    TABLE
    ============================================================ */
    .journey-details-table {
    width: 100% !important;
    min-width: 700px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    background: #ffffff !important;
    font-size: 13px !important;
    }

/* ============================================================
    TABLE HEADER — STRONG ORANGE
    ============================================================ */
    .journey-details-table thead th {
    padding: 13px 16px !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255,255,255,0.35) !important;
    border-bottom: 2px solid #d97706 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: left !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    }

.journey-details-table thead th:first-child {
    border-top-left-radius: 8px !important;
    }

.journey-details-table thead th:last-child {
    border-top-right-radius: 8px !important;
    border-right: none !important;
    }

/* ============================================================
    TABLE BODY
    ============================================================ */
    .journey-details-table tbody td {
    padding: 14px 16px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
    }

/* Alternate Row */
    .journey-details-table tbody tr:nth-child(even) td {
    background: #fff7ed !important;
    }

.journey-details-table tbody tr:hover td {
    background: #ffedd5 !important;
    color: #1e293b !important;
    }

/* ============================================================
    CLICKED STAT CARD
    ============================================================ */
    .journey-stat-clickable.is-open {
    background: #fffaf0 !important;
    border: 2px solid #f59e0b !important;
    box-shadow:
    0 5px 15px rgba(245, 158, 11, 0.14) !important;
    }

.journey-details-empty {
    padding: 40px 20px !important;
    background: #fffaf0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    }

/* ============================================================
    EMPLOYEE JOURNEY — 30% COMPACT + PIE CHART FIX
    PASTE THIS AT THE VERY END OF style.css
    ============================================================ */
/* ============================================================
    EMPLOYEE JOURNEY MAIN CONTAINER
    ============================================================ */
    #profileJourneyGrid {
    gap: 8px !important;
    }

/* ============================================================
    STAT CARDS — 30% SMALLER
    ============================================================ */
    .journey-stat-grid {
    gap: 6px !important;
    }

.journey-stat {
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    }

.journey-stat span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    }

.journey-stat strong {
    margin-top: 2px !important;
    font-size: 11px !important;
    }

/* ============================================================
    CHART ROW — COMPACT
    ============================================================ */
    .journey-chart-row {
    gap: 8px !important;
    margin-top: 2px !important;
    }

/* ============================================================
    CHART CARDS — 30% SMALLER
    ============================================================ */
    .journey-chart-card {
    height: 125px !important;
    min-height: 125px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    overflow: visible !important;
    }

/* ============================================================
    LEGENDS
    ============================================================ */
    .journey-chart-legend {
    height: 24px !important;
    min-height: 24px !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    }

.legend-item {
    font-size: 10px !important;
    }

.legend-item i {
    width: 8px !important;
    height: 8px !important;
    }

/* ============================================================
    BAR CHART
    ============================================================ */
    .journey-canvas-wrap {
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    position: relative !important;
    overflow: visible !important;
    }

.journey-canvas-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    }

/* ============================================================
    PIE / DONUT CHART — FORCE VISIBLE
    ============================================================ */
    .journey-canvas-wrap.pie-wrap {
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    }

/*
    IMPORTANT:
    Canvas ko CSS se 105px / 285px force nahi karenge.
    Chart.js apna canvas correctly calculate karega.
*/
    .journey-canvas-wrap.pie-wrap canvas {
    display: block !important;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    visibility: visible !important;
    opacity: 1 !important;
    }

/* ============================================================
    OPEN DETAILS PANEL — COMPACT
    ============================================================ */
    .journey-details-panel {
    margin: 10px 0 16px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    }

.journey-details-header {
    min-height: 32px !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
    }

.journey-details-header h3 {
    font-size: 14px !important;
    }

.journey-details-close {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 18px !important;
    }

/* ============================================================
    DETAILS TABLE — COMPACT BUT CLEAR
    ============================================================ */
    .journey-details-table {
    font-size: 11px !important;
    }

.journey-details-table thead th {
    padding: 8px 12px !important;
    font-size: 10px !important;
    }

.journey-details-table tbody td {
    padding: 8px 12px !important;
    font-size: 11px !important;
    }

/* ============================================================
    TIMELINE — 30% SMALLER
    ============================================================ */
    .journey-timeline-card {
    min-height: 150px !important;
    padding: 12px 14px !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
    }

.journey-card-heading {
    margin-bottom: 8px !important;
    }

.journey-card-heading h3 {
    font-size: 14px !important;
    }

.journey-timeline {
    gap: 8px !important;
    }

.journey-timeline-item {
    min-height: 28px !important;
    padding-left: 24px !important;
    }

.journey-timeline-item::before {
    width: 12px !important;
    height: 12px !important;
    }

.journey-timeline-item::after {
    left: 5px !important;
    }

.journey-timeline-date,
    .journey-timeline-item strong {
    font-size: 12px !important;
    }

.journey-timeline-item p,
    .journey-timeline-description {
    margin-top: 2px !important;
    font-size: 10px !important;
    }

@media (max-width: 900px) {
    .journey-chart-card {
    height: 140px !important;
    min-height: 140px !important;
    }

.journey-canvas-wrap,
    .journey-canvas-wrap.pie-wrap {
    height: 100px !important;
    min-height: 100px !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 95px !important;
    height: 95px !important;
    }
    }

/* ============================================================
    EMPLOYEE JOURNEY — REMOVE ARROWS + IMPROVE PIE CHART
    ============================================================ */
/* ============================================================
    REMOVE ARROWS FROM JOURNEY CARDS
    ============================================================ */
/* Agar arrow text ke through aa raha hai */
    .journey-stat .arrow,
    .journey-stat-arrow,
    .journey-stat-clickable::after,
    .journey-stat::after {
    display: none !important;
    }

/* Agar JS mein direct arrow character span mein hai */
    .journey-stat span:last-child:not(:first-child) {
/* Only arrow/helper element hide */
    }

/* ============================================================
    JOURNEY CARDS - CLEAN CENTER ALIGNMENT
    ============================================================ */
    .journey-stat {
    height: 42px !important;
    min-height: 42px !important;
    padding: 5px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    }

/* Remove unnecessary spacing created by arrow */
    .journey-stat span {
    margin: 0 !important;
    }

.journey-stat strong {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    }

/* ============================================================
    PIE CHART CARD
    ============================================================ */
    .journey-chart-card {
    height: 145px !important;
    min-height: 145px !important;
    padding: 8px 12px !important;
    }

/* Legend */
    .journey-chart-legend {
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #edf0f2 !important;
    margin-bottom: 5px !important;
    }

/* ============================================================
    PIE CHART — FIX PROPER CIRCLE SIZE
    ============================================================ */
    .journey-canvas-wrap.pie-wrap {
    height: 98px !important;
    min-height: 98px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    }

/*
    IMPORTANT:
    Canvas ko equal square ratio dete hain
    taake thin / oval shape na bane.
*/
    .journey-canvas-wrap.pie-wrap canvas {
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
    min-height: 98px !important;
    max-width: 98px !important;
    max-height: 98px !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    }

/* ============================================================
    BAR CHART SAME HEIGHT
    ============================================================ */
    .journey-canvas-wrap:not(.pie-wrap) {
    height: 98px !important;
    min-height: 98px !important;
    }

/* ============================================================
    ACTIVE CARD
    ============================================================ */
    .journey-stat-clickable.is-open {
    background: #fffaf0 !important;
    border: 2px solid #f59e0b !important;
    }

/* ============================================================
    PIE CHART — PERFECT CIRCLE FIX
    ============================================================ */
    .journey-chart-card {
    height: 150px !important;
    min-height: 150px !important;
    padding: 8px 12px !important;
    }

/* Pie chart container */
    .journey-canvas-wrap.pie-wrap {
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    }

/*
    IMPORTANT:
    Canvas ka width/height force remove
    Chart.js khud correct aspect ratio maintain karega.
*/
    .journey-canvas-wrap.pie-wrap canvas {
    width: auto !important;
    height: auto !important;
    max-width: 108px !important;
    max-height: 108px !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    }

/* Chart.js canvas parent */
    .journey-canvas-wrap.pie-wrap {
    aspect-ratio: auto !important;
    }

/* Bar chart ko bhi balanced rakhein */
    .journey-canvas-wrap:not(.pie-wrap) {
    height: 108px !important;
    min-height: 108px !important;
    }

/* ============================================================
    EMPLOYEE JOURNEY CHARTS — FINAL RESPONSIVE FIX
    ============================================================ */
/* Chart row */
    .journey-chart-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    }

/* Chart cards */
    .journey-chart-card {
    width: 100% !important;
    height: 155px !important;
    min-height: 155px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    }

.journey-chart-legend {
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    }

/* ============================================================
    BAR CHART CONTAINER
    ============================================================ */
    .journey-canvas-wrap:not(.pie-wrap) {
    position: relative !important;
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    display: block !important;
    overflow: hidden !important;
    }

/* IMPORTANT:
    Canvas ka fixed width/height remove.
*/
    .journey-canvas-wrap:not(.pie-wrap) canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    }

/* ============================================================
    PIE CHART CONTAINER
    ============================================================ */
    .journey-canvas-wrap.pie-wrap {
    position: relative !important;
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    }

/* Pie canvas ko manually 88px, 98px etc force NAHI karna */
    .journey-canvas-wrap.pie-wrap canvas {
    position: relative !important;
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    }

@media (max-width: 900px) {
    .journey-chart-row {
    grid-template-columns: 1fr !important;
    }

.journey-chart-card {
    height: 180px !important;
    }

.journey-canvas-wrap:not(.pie-wrap),
    .journey-canvas-wrap.pie-wrap {
    height: 130px !important;
    min-height: 130px !important;
    }

.journey-canvas-wrap.pie-wrap canvas {
    width: 125px !important;
    height: 125px !important;
    min-width: 125px !important;
    min-height: 125px !important;
    max-width: 125px !important;
    max-height: 125px !important;
    }
    }

/* =====================================================
    COMPENSATION & BENEFITS — EXPANDABLE DETAIL TABLES
    ===================================================== */
    #profileBenefitsGrid .benefit-row-expandable {
    cursor: pointer !important;
    transition: background-color 0.18s ease !important;
    }

#profileBenefitsGrid .benefit-row-expandable > td {
    cursor: pointer !important;
    }

#profileBenefitsGrid .benefit-row-expandable:hover > td {
    background: #fff7ed !important;
    }

#profileBenefitsGrid .benefit-row-expandable.is-open > td {
    background: #fff7ed !important;
    }

#profileBenefitsGrid .benefit-type-cell {
    display: table-cell !important;
    }

#profileBenefitsGrid .benefit-type-cell > span:first-child {
    display: inline-block !important;
    vertical-align: middle !important;
    }

#profileBenefitsGrid .benefit-expand-indicator {
    display: inline-block !important;
    margin-left: 7px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
    }

#profileBenefitsGrid .benefit-row-expandable.is-open .benefit-expand-indicator {
    transform: rotate(180deg) !important;
    }

#profileBenefitsGrid .benefit-detail-row > td {
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    }

#profileBenefitsGrid .benefit-detail-panel {
    width: 100% !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    background: #f8fcf9 !important;
    border-top: 1px solid #fed7aa !important;
    border-bottom: 1px solid #fed7aa !important;
    }

#profileBenefitsGrid .benefit-detail-panel-header {
    margin-bottom: 14px !important;
    }

#profileBenefitsGrid .benefit-detail-eyebrow {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #c2410c !important;
    }

#profileBenefitsGrid .benefit-detail-panel h3 {
    margin: 0 !important;
    color: #7c2d12 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    }

#profileBenefitsGrid .benefit-detail-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid #fed7aa !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    }

#profileBenefitsGrid .benefit-detail-table {
    width: 100% !important;
    min-width: 820px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    }

#profileBenefitsGrid .benefit-detail-table th {
    padding: 11px 12px !important;
    text-align: left !important;
    white-space: nowrap !important;
    background: #ffedd5 !important;
    color: #9a3412 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #fed7aa !important;
    }

#profileBenefitsGrid .benefit-detail-table td {
    padding: 11px 12px !important;
    vertical-align: middle !important;
    color: #7c2d12 !important;
    font-size: 12px !important;
    border-bottom: 1px solid #edf3ef !important;
    white-space: nowrap !important;
    }

#profileBenefitsGrid .benefit-detail-table tbody tr:last-child td {
    border-bottom: 0 !important;
    }

#profileBenefitsGrid .benefit-detail-table tbody tr:hover td {
    background: #f7fdf8 !important;
    }

#profileBenefitsGrid .benefit-detail-loading,
    #profileBenefitsGrid .benefit-detail-empty {
    padding: 22px !important;
    text-align: center !important;
    color: #5d6f65 !important;
    background: #ffffff !important;
    border: 1px dashed #cfe0d5 !important;
    border-radius: 10px !important;
    }

#profileBenefitsGrid .benefit-detail-empty.error {
    color: #b42318 !important;
    background: #fffafa !important;
    border-color: #f3c7c3 !important;
    }

/* ============================================================
    JOB MANAGEMENT — FINAL COMPACT TABLE WIDTH FIX
    This block intentionally overrides earlier Job Management rules.
    ============================================================ */
    #jobsTableContainer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    }

#jobsTableContainer .jobs-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    }

#jobsTableContainer .jobs-table {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed !important;
    }

#jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    }

/* Job ID */
    #jobsTableContainer .jobs-table th:nth-child(1),
    #jobsTableContainer .jobs-table td:nth-child(1) {
    width: 7%;
    }

/* Job Title */
    #jobsTableContainer .jobs-table th:nth-child(2),
    #jobsTableContainer .jobs-table td:nth-child(2) {
    width: 16%;
    min-width: 0 !important;
    }

/* Department */
    #jobsTableContainer .jobs-table th:nth-child(3),
    #jobsTableContainer .jobs-table td:nth-child(3) {
    width: 10%;
    }

/* Employment Type */
    #jobsTableContainer .jobs-table th:nth-child(4),
    #jobsTableContainer .jobs-table td:nth-child(4) {
    width: 11%;
    }

/* Location */
    #jobsTableContainer .jobs-table th:nth-child(5),
    #jobsTableContainer .jobs-table td:nth-child(5) {
    width: 9%;
    }

/* Experience */
    #jobsTableContainer .jobs-table th:nth-child(6),
    #jobsTableContainer .jobs-table td:nth-child(6) {
    width: 9%;
    }

/* Salary */
    #jobsTableContainer .jobs-table th:nth-child(7),
    #jobsTableContainer .jobs-table td:nth-child(7) {
    width: 10%;
    }

/* Closing Date */
    #jobsTableContainer .jobs-table th:nth-child(8),
    #jobsTableContainer .jobs-table td:nth-child(8) {
    width: 10%;
    }

/* Status */
    #jobsTableContainer .jobs-table th:nth-child(9),
    #jobsTableContainer .jobs-table td:nth-child(9) {
    width: 8%;
    }

/* Actions */
    #jobsTableContainer .jobs-table th:nth-child(10),
    #jobsTableContainer .jobs-table td:nth-child(10) {
    width: 10%;
    min-width: 0 !important;
    }

#jobsTableContainer .jobs-table tbody td:nth-child(2),
    #jobsTableContainer .jobs-table tbody td:nth-child(10) {
    min-width: 0 !important;
    }

#jobsTableContainer .job-action-buttons {
    gap: 5px;
    white-space: nowrap;
    }

#jobsTableContainer .job-action-button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    }

/* Keep responsive screens scrollable without forcing the desktop table wider */
@media (max-width: 900px) {
    #jobsTableContainer .jobs-table {
    min-width: 850px !important;
    table-layout: fixed !important;
    }
    }

@media (max-width: 600px) {
    #jobsTableContainer .jobs-table {
    min-width: 820px !important;
    }

#jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    padding-left: 7px;
    padding-right: 7px;
    }
    }

/* ============================================================
    JOB MANAGEMENT — EXTRA COMPACT COLUMN WIDTHS
    ============================================================ */
@media (min-width: 901px) {
    #jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    padding-left: 6px !important;
    padding-right: 6px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(1),
    #jobsTableContainer .jobs-table td:nth-child(1) {
    width: 6% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(2),
    #jobsTableContainer .jobs-table td:nth-child(2) {
    width: 15% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(3),
    #jobsTableContainer .jobs-table td:nth-child(3) {
    width: 9% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(4),
    #jobsTableContainer .jobs-table td:nth-child(4) {
    width: 10% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(5),
    #jobsTableContainer .jobs-table td:nth-child(5) {
    width: 8% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(6),
    #jobsTableContainer .jobs-table td:nth-child(6) {
    width: 8% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(7),
    #jobsTableContainer .jobs-table td:nth-child(7) {
    width: 9% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(8),
    #jobsTableContainer .jobs-table td:nth-child(8) {
    width: 9% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(9),
    #jobsTableContainer .jobs-table td:nth-child(9) {
    width: 7% !important;
    }

#jobsTableContainer .jobs-table th:nth-child(10),
    #jobsTableContainer .jobs-table td:nth-child(10) {
    width: 9% !important;
    }
    }

/* ============================================================
    JOB MANAGEMENT — COMPACT + NO RIGHT-SIDE CUT
    ============================================================ */
    #jobsTableContainer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    }

#jobsTableContainer .jobs-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    }

#jobsTableContainer .jobs-table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    }

/* Keep columns compact based on actual content */
    #jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    }

/* Compact individual columns */
    #jobsTableContainer .jobs-table th:nth-child(1),
    #jobsTableContainer .jobs-table td:nth-child(1) {
    width: 76px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(2),
    #jobsTableContainer .jobs-table td:nth-child(2) {
    width: 190px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(3),
    #jobsTableContainer .jobs-table td:nth-child(3) {
    width: 115px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(4),
    #jobsTableContainer .jobs-table td:nth-child(4) {
    width: 105px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(5),
    #jobsTableContainer .jobs-table td:nth-child(5) {
    width: 90px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(6),
    #jobsTableContainer .jobs-table td:nth-child(6) {
    width: 100px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(7),
    #jobsTableContainer .jobs-table td:nth-child(7) {
    width: 100px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(8),
    #jobsTableContainer .jobs-table td:nth-child(8) {
    width: 125px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(9),
    #jobsTableContainer .jobs-table td:nth-child(9) {
    width: 105px !important;
    }

#jobsTableContainer .jobs-table th:nth-child(10),
    #jobsTableContainer .jobs-table td:nth-child(10) {
    width: 115px !important;
    }

/* Prevent action buttons from being squeezed or cut */
    #jobsTableContainer .job-action-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content;
    }

#jobsTableContainer .job-action-button {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    }

#jobsTableContainer .jobs-table-wrap::-webkit-scrollbar {
    height: 8px;
    }

@media (max-width: 900px) {
    #jobsTableContainer .jobs-table {
    min-width: 1020px !important;
    }
    }

/* =========================================================
    CONNEXA / HRMS — PREMIUM COMPACT ORANGE DESIGN SYSTEM
    FINAL GLOBAL UI OVERRIDE
    ========================================================= */
    :root {
    --primary: #f97316;
    --primary-dark: #c2410c;
    --primary-light: #fff7ed;
    --primary-soft: #ffedd5;
    --primary-border: #fed7aa;
    --background: #f7f7f8;
    --card: #ffffff;
    --text: #1f2937;
    --text-strong: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --border-soft: #eef0f2;
    --danger: #dc2626;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .035);
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, .045);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, .07);
    }

* {
    box-sizing: border-box;
    }

html {
    font-size: 14px;
    }

body,
    button,
    input,
    select,
    textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

body {
    background: var(--background);
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    }

button,
    input,
    select,
    textarea {
    font-size: 12px;
    }

button {
    font-weight: 600;
    }

button,
    input,
    select,
    textarea {
    border-radius: var(--radius-sm);
    }

button {
    transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
    }

/* =========================================================
    GLOBAL TYPOGRAPHY — SMALLER, CLEANER, CONSISTENT
    ========================================================= */
    h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    letter-spacing: -.02em;
    }

.page-heading h1,
    .employees-header h1 {
    font-size: 24px !important;
    line-height: 1.2;
    }

.page-heading p,
    .employees-header p {
    font-size: 12px !important;
    margin-top: 4px !important;
    }

.eyebrow,
    .sidebar-eyebrow {
    font-size: 9px !important;
    letter-spacing: 1.25px !important;
    }

.section-heading h2,
    .profile-section-title h2,
    .module-placeholder-card h1 {
    font-size: 18px !important;
    }

.section-heading p,
    .module-placeholder-card p {
    font-size: 12px !important;
    }

/* =========================================================
    FIXED TOPBAR
    ========================================================= */
    .dashboard-page > .topbar,
    .topbar {
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 18px !important;
    gap: 16px !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.02);
    }

.dashboard-page {
    padding-top: 62px !important;
    }

.topbar-brand {
    gap: 9px !important;
    }

.topbar-brand strong {
    font-size: 13px !important;
    }

.topbar-brand span {
    font-size: 9px !important;
    }

.brand-logo,
    .brand-logo.small {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    box-shadow: 0 5px 14px rgba(249,115,22,.18);
    }

.topbar-right {
    gap: 12px !important;
    }

.user-info strong {
    font-size: 11px !important;
    }

.user-info span {
    font-size: 9px !important;
    color: var(--primary) !important;
    }

.logout-button,
    .back-button,
    .profile-back-button {
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: #374151 !important;
    }

.logout-button:hover,
    .back-button:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary-dark) !important;
    }

/* =========================================================
    CENTER NAVIGATION
    ========================================================= */
    .main-nav {
    gap: 2px !important;
    }

.nav-button {
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    }

.nav-button:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    }

.nav-button.active {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    }

/* =========================================================
    MAIN SIDEBAR — COMPACT PREMIUM
    ========================================================= */
    .hrms-sidebar {
    top: 62px !important;
    width: 218px !important;
    padding: 16px 10px 12px !important;
    background: #fff !important;
    border-right: 1px solid var(--border) !important;
    }

.sidebar-header {
    padding: 0 9px 12px !important;
    }

.sidebar-header h2 {
    font-size: 15px !important;
    }

.sidebar-menu {
    gap: 3px !important;
    padding-top: 10px !important;
    }

.sidebar-button {
    min-height: 35px !important;
    padding: 0 9px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    }

.sidebar-button-icon {
    width: 20px !important;
    flex: 0 0 20px !important;
    font-size: 13px !important;
    }

.sidebar-button:hover {
    background: #fffaf5 !important;
    color: var(--primary-dark) !important;
    }

.sidebar-button.active {
    background: linear-gradient(135deg, #fff1e6, #ffedd5) !important;
    color: var(--primary-dark) !important;
    border-color: #fed7aa !important;
    box-shadow: inset 3px 0 0 var(--primary);
    }

.sidebar-footer {
    padding: 10px 9px 2px !important;
    }

.sidebar-footer span {
    font-size: 10px !important;
    }

.sidebar-footer small {
    font-size: 9px !important;
    }

/* Global content offset */
    .dashboard-content,
    .employees-page,
    .module-placeholder-page,
    .candidates-page {
    margin-left: 218px !important;
    }

.dashboard-content {
    padding: 26px 28px !important;
    }

.employees-page {
    min-height: calc(100vh - 62px) !important;
    padding: 24px 28px !important;
    }

.module-placeholder-page {
    min-height: calc(100vh - 62px) !important;
    padding: 26px 28px !important;
    }

/* =========================================================
    CARDS — CONSISTENT PREMIUM SYSTEM
    ========================================================= */
    .stat-card,
    .module-card,
    .employee-card,
    .employee-stat,
    .profile-section-card,
    .module-placeholder-card,
    .employees-empty,
    .family-dependents-table-wrap {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
    }

.stat-card {
    padding: 14px !important;
    gap: 11px !important;
    min-height: 76px;
    }

.stats-grid {
    gap: 12px !important;
    margin-top: 22px !important;
    }

.stat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    background: var(--primary-light) !important;
    }

.stat-card span {
    font-size: 10px !important;
    }

.stat-card strong {
    font-size: 18px !important;
    margin-top: 2px !important;
    }

.modules-section {
    margin-top: 30px !important;
    }

.modules-grid {
    gap: 12px !important;
    margin-top: 14px !important;
    }

.module-card {
    padding: 16px !important;
    }

.module-card:hover,
    .employee-card:hover,
    .employee-stat:hover,
    .profile-section-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--primary-border) !important;
    box-shadow: var(--shadow-md) !important;
    }

.module-icon {
    font-size: 18px !important;
    margin-bottom: 9px !important;
    }

.module-card h3 {
    font-size: 13px !important;
    }

.module-card p {
    font-size: 10px !important;
    line-height: 1.45;
    margin-top: 4px !important;
    }

/* =========================================================
    EMPLOYEE DIRECTORY
    ========================================================= */
    .employees-header {
    margin-bottom: 16px !important;
    }

.employee-stats {
    gap: 12px !important;
    margin-bottom: 16px !important;
    }

.employee-stat {
    min-height: 72px !important;
    padding: 13px 16px !important;
    }

.employee-stat span {
    font-size: 10px !important;
    }

.employee-stat strong {
    font-size: 23px !important;
    margin-top: 2px !important;
    }

.employee-stat.total {
    background: linear-gradient(135deg, #ea580c, #fb923c) !important;
    }

.employee-stat.active {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    }

.employee-controls {
    grid-template-columns: minmax(0,1fr) 190px 150px !important;
    gap: 9px !important;
    margin-bottom: 15px !important;
    }

.search-box,
    .employee-controls select {
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    }

.search-box {
    padding: 0 11px !important;
    gap: 7px !important;
    }

.search-box span {
    font-size: 15px !important;
    }

.employee-grid {
    gap: 12px !important;
    }

.employee-card {
    min-height: 238px !important;
    padding: 14px !important;
    }

.employee-card::before {
    height: 3px !important;
    background: linear-gradient(90deg, #f97316, #fb923c) !important;
    }

.employee-photo-wrapper {
    width: 62px !important;
    height: 62px !important;
    margin: 4px auto 10px !important;
    border-color: var(--primary-border) !important;
    }

.employee-avatar {
    font-size: 18px !important;
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    }

.employee-name {
    font-size: 13px !important;
    min-height: 17px !important;
    }

.employee-title {
    font-size: 11px !important;
    min-height: 32px !important;
    margin-top: 5px !important;
    padding-bottom: 8px !important;
    }

.employee-department {
    font-size: 10px !important;
    margin-top: 8px !important;
    }

.employee-status {
    margin-top: 7px !important;
    padding: 3px 9px !important;
    font-size: 9px !important;
    }

.employee-status.active {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    }

/* =========================================================
    BUTTON SYSTEM
    ========================================================= */
    .login-button,
    .primary-button,
    .save-button,
    .submit-button,
    .add-button,
    .action-button.primary {
    min-height: 34px !important;
    border-radius: 8px !important;
    padding: 0 13px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 5px 14px rgba(249,115,22,.14);
    }

.login-button:hover,
    .primary-button:hover,
    .save-button:hover,
    .submit-button:hover,
    .add-button:hover,
    .action-button.primary:hover {
    background: linear-gradient(135deg, #ea580c, #f97316) !important;
    transform: translateY(-1px);
    }

/* =========================================================
    FORMS
    ========================================================= */
    .form-group {
    margin-bottom: 13px !important;
    }

.form-group label {
    font-size: 11px !important;
    margin-bottom: 5px !important;
    }

.form-group input,
    input,
    select,
    textarea {
    border-color: #e5e7eb;
    }

.form-group input {
    height: 34px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    }

input:focus,
    select:focus,
    textarea:focus,
    .form-group input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.10) !important;
    }

/* =========================================================
    PROFILE — COMPACT
    ========================================================= */
    .dashboard-page.profile-mode .employee-profile-sidebar {
    top: 62px !important;
    width: 245px !important;
    height: calc(100vh - 62px) !important;
    padding: 16px 10px !important;
    }

.profile-sidebar-title {
    padding: 0 9px 12px !important;
    }

.profile-sidebar-title h2 {
    font-size: 16px !important;
    }

.profile-back-button {
    margin: 11px 0 12px !important;
    background: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary-dark) !important;
    }

.profile-nav-button {
    min-height: 36px !important;
    padding: 0 9px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    }

.profile-nav-button span:first-child {
    width: 20px !important;
    flex: 0 0 20px !important;
    font-size: 13px !important;
    }

.profile-nav-button:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    }

.profile-nav-button.active {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    box-shadow: 0 5px 14px rgba(249,115,22,.16) !important;
    }

.dashboard-page.profile-mode .employee-profile-main {
    margin-left: 245px !important;
    padding: 22px 24px 45px !important;
    }

.employee-profile-hero {
    min-height: 92px !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    gap: 15px !important;
    background: linear-gradient(115deg, #ea580c, #fb923c) !important;
    margin-bottom: 14px !important;
    }

.profile-hero-photo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    }

.profile-hero-info h1 {
    font-size: 22px !important;
    }

.profile-hero-info p {
    margin-top: 3px !important;
    font-size: 11px !important;
    }

.profile-hero-status {
    padding: 5px 10px !important;
    font-size: 10px !important;
    }

.profile-section-card {
    padding: 17px 18px !important;
    margin-bottom: 12px !important;
    }

.profile-section-title {
    margin-bottom: 13px !important;
    }

.profile-section-title h2 {
    font-size: 16px !important;
    }

.profile-info-grid,
    .profile-documents-grid {
    gap: 10px !important;
    }

.profile-info-item {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    }

.profile-subsection-title {
    margin: 9px 0 !important;
    font-size: 12px !important;
    }

/* =========================================================
    TABLES — SMALL, PREMIUM, NO OVERFLOW CUTTING
    ========================================================= */
    .table-wrap,
    .jobs-table-wrap,
    .family-dependents-table-wrap,
    #jobsTableContainer {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
    }

table {
    font-size: 11px;
    }

.family-dependents-table thead th,
    #profileFamilyGrid .family-dependents-table thead th {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
    padding: 9px 10px !important;
    font-size: 10px !important;
    }

.family-dependents-table tbody td,
    #profileFamilyGrid .family-dependents-table tbody td {
    padding: 9px 10px !important;
    font-size: 10px !important;
    }

.family-dependents-table tbody tr:hover td {
    background: #fffaf5 !important;
    }

.family-attachment-link {
    color: var(--primary) !important;
    }

/* =========================================================
    PLACEHOLDER / EMPTY STATES
    ========================================================= */
    .module-placeholder-card {
    margin-top: 40px !important;
    padding: 32px !important;
    }

.placeholder-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 14px !important;
    border-radius: 13px !important;
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    font-size: 22px !important;
    }

.placeholder-badge {
    margin-top: 12px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    }

/* =========================================================
    RESPONSIVE SAFETY
    ========================================================= */
@media (max-width: 1150px) {
    .hrms-sidebar {
    width: 200px !important;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page,
    .candidates-page {
    margin-left: 200px !important;
    }

.dashboard-page.profile-mode .employee-profile-sidebar {
    width: 220px !important;
    }

.dashboard-page.profile-mode .employee-profile-main {
    margin-left: 220px !important;
    }

.main-nav {
    gap: 0 !important;
    }

.nav-button {
    padding: 0 7px !important;
    font-size: 9px !important;
    }
    }

@media (max-width: 900px) {
    .dashboard-page > .topbar,
    .topbar {
    height: 58px !important;
    min-height: 58px !important;
    }

.dashboard-page {
    padding-top: 58px !important;
    }

.main-nav {
    display: none !important;
    }

.hrms-sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding: 10px !important;
    }

.sidebar-menu {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding-top: 0 !important;
    }

.sidebar-button {
    width: auto !important;
    min-width: 125px !important;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page,
    .candidates-page {
    margin-left: 0 !important;
    }

.dashboard-content,
    .employees-page,
    .module-placeholder-page {
    padding: 20px 16px !important;
    }

.employee-controls {
    grid-template-columns: 1fr 160px !important;
    }

.employee-controls > :last-child {
    grid-column: span 2;
    }

.dashboard-page.profile-mode .employee-profile-sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    }

.dashboard-page.profile-mode .employee-profile-main {
    margin-left: 0 !important;
    padding: 18px 16px 35px !important;
    }
    }

@media (max-width: 650px) {
    .page-heading h1,
    .employees-header h1 {
    font-size: 21px !important;
    }

.topbar-right .user-info {
    display: none !important;
    }

.employee-controls {
    grid-template-columns: 1fr !important;
    }

.employee-controls > :last-child {
    grid-column: auto;
    }

.employee-stats,
    .stats-grid,
    .modules-grid {
    gap: 9px !important;
    }

.sidebar-button {
    width: 100% !important;
    min-width: 100% !important;
    }

.employee-profile-hero {
    align-items: center !important;
    }

.profile-hero-status {
    margin-left: auto !important;
    margin-top: 0 !important;
    }
    }

/* =========================================================
    COMPACT CARD ALIGNMENT — CANDIDATES STYLE REFERENCE
    Recruitment Dashboard + Job Management + Leave Dashboard
    ========================================================= */
/* Header navigation buttons — slightly larger */
    .main-nav {
    gap: 5px !important;
    }

.nav-button {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    }

/* Keep Recruitment Dashboard metric cards compact like Candidates */
    .recruitment-dashboard .stat-card,
    .recruitment-page .stat-card,
    .recruitment-dashboard .stats-grid .stat-card {
    min-height: 0 !important;
    height: 104px !important;
    padding: 15px 20px !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .045) !important;
    }

.recruitment-dashboard .stat-card .stat-icon,
    .recruitment-page .stat-card .stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 20px !important;
    }

.recruitment-dashboard .stat-card strong,
    .recruitment-page .stat-card strong {
    font-size: 25px !important;
    }

/* Job Management metric cards — same compact visual weight */
    .job-management-page .employee-stat,
    .jobs-page .employee-stat,
    .job-management-page .stat-card,
    .jobs-page .stat-card {
    min-height: 0 !important;
    height: 104px !important;
    padding: 15px 20px !important;
    border-radius: 18px !important;
    }

/* Leave Dashboard cards — reduce height and match Candidates-style compactness */
    .leave-dashboard .stat-card,
    .leave-page .stat-card,
    .leave-dashboard .leave-stat-card,
    .leave-page .leave-stat-card {
    min-height: 0 !important;
    height: 112px !important;
    padding: 15px 18px !important;
    border-radius: 18px !important;
    }

.leave-dashboard .stat-icon,
    .leave-page .stat-icon,
    .leave-dashboard .leave-stat-icon,
    .leave-page .leave-stat-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    }

/* Fallback selectors for current markup where page-specific wrapper is absent.
    These preserve Candidates cards and only target dashboard summary sections. */
    #recruitmentModule .stat-card,
    #jobManagementModule .stat-card,
    #leaveModule .stat-card {
    min-height: 0 !important;
    height: 104px !important;
    padding: 15px 20px !important;
    border-radius: 18px !important;
    }

/* Main content cards: slightly tighter, but Candidates page proportions stay unchanged */
    .recruitment-dashboard .dashboard-card,
    .recruitment-dashboard .pipeline-card,
    .recruitment-dashboard .activity-card,
    .job-management-page .jobs-container,
    .job-management-page .jobs-card,
    .leave-dashboard .leave-card,
    .leave-dashboard .dashboard-card {
    border-radius: 18px !important;
    }

/* Avoid oversized empty areas caused by minimum heights */
    .recruitment-dashboard .pipeline-card,
    .recruitment-dashboard .activity-card,
    .leave-dashboard .dashboard-card,
    .leave-dashboard .leave-card {
    min-height: 0 !important;
    }

/* Tablet safety */
@media (max-width: 900px) {
    .nav-button {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    }

.recruitment-dashboard .stat-card,
    .recruitment-page .stat-card,
    .job-management-page .employee-stat,
    .jobs-page .employee-stat,
    .leave-dashboard .stat-card,
    .leave-page .stat-card {
    height: auto !important;
    min-height: 92px !important;
    }
    }

/* =========================================================
    CONTENT DENSITY FIX
    Recruitment + Job Management + Leave Dashboard
    Reduce excess gray background / empty vertical space
    ========================================================= */
/* Make the overall application background cleaner and less gray */
    body,
    .dashboard-page {
    background: #fafafa !important;
    }

/* Reduce main page vertical padding */
    .dashboard-content,
    .employees-page,
    .module-placeholder-page {
    padding-top: 20px !important;
    padding-bottom: 24px !important;
    }

/* Recruitment / Jobs / Leave headings */
    .page-heading,
    .employees-header {
    margin-bottom: 14px !important;
    }

/* Summary cards closer together */
    .stats-grid,
    .employee-stats {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    gap: 12px !important;
    }

/* Recruitment dashboard main panels */
    .recruitment-dashboard,
    .recruitment-page,
    .leave-dashboard,
    .leave-page,
    .job-management-page,
    .jobs-page {
    padding-bottom: 12px !important;
    }

.recruitment-dashboard .dashboard-grid,
    .recruitment-dashboard .recruitment-grid,
    .recruitment-page .dashboard-grid,
    .leave-dashboard .dashboard-grid,
    .leave-page .dashboard-grid {
    margin-top: 16px !important;
    gap: 16px !important;
    }

/* Remove unnecessary fixed/min heights that create large gray empty areas */
    .recruitment-dashboard .pipeline-card,
    .recruitment-dashboard .activity-card,
    .recruitment-page .pipeline-card,
    .recruitment-page .activity-card,
    .leave-dashboard .dashboard-card,
    .leave-dashboard .leave-card,
    .leave-page .dashboard-card,
    .leave-page .leave-card,
    .job-management-page .jobs-container,
    .jobs-page .jobs-container {
    min-height: unset !important;
    }

/* Recruitment dashboard cards — tighter */
    .recruitment-dashboard .pipeline-card,
    .recruitment-dashboard .activity-card,
    .recruitment-page .pipeline-card,
    .recruitment-page .activity-card {
    margin-bottom: 0 !important;
    }

/* Reduce recruitment pipeline empty spacing */
    .recruitment-dashboard .pipeline-list,
    .recruitment-page .pipeline-list,
    .recruitment-dashboard .pipeline-content,
    .recruitment-page .pipeline-content {
    padding-bottom: 12px !important;
    }

/* Job Management — table starts closer to filters/header */
    .job-management-page .jobs-container,
    .jobs-page .jobs-container {
    margin-top: 14px !important;
    }

.job-management-page .jobs-header,
    .jobs-page .jobs-header {
    padding: 18px 22px 12px !important;
    }

.job-management-page .employee-controls,
    .jobs-page .employee-controls {
    margin-bottom: 12px !important;
    }

/* Leave Dashboard — significantly tighter vertical structure */
    .leave-dashboard .stats-grid,
    .leave-page .stats-grid {
    margin-bottom: 18px !important;
    }

.leave-dashboard .dashboard-grid,
    .leave-page .dashboard-grid {
    gap: 16px !important;
    margin-top: 0 !important;
    }

/* Empty state cards should only be as tall as needed */
    .leave-dashboard .dashboard-card,
    .leave-dashboard .leave-card,
    .leave-page .dashboard-card,
    .leave-page .leave-card {
    height: auto !important;
    }

.leave-dashboard .dashboard-card .card-body,
    .leave-dashboard .leave-card .card-body,
    .leave-page .dashboard-card .card-body,
    .leave-page .leave-card .card-body {
    padding: 20px 26px !important;
    }

/* General section gaps */
    .modules-section {
    margin-top: 20px !important;
    }

.section-heading {
    margin-bottom: 10px !important;
    }

/* Candidate-style compact outer content width and spacing */
@media (min-width: 901px) {
    .dashboard-content,
    .employees-page,
    .module-placeholder-page {
    min-height: auto !important;
    }
    }

/* =========================================================
    FINAL CONTENT BACKGROUND FIX
    Make Recruitment / Jobs / Leave use the SAME content canvas
    behavior as the Candidates page.
    ========================================================= */
/* Candidate page visual canvas */
    .employees-page {
    background: #f8fafc !important;
    }

/* Force all HRMS modules onto the same canvas */
    .dashboard-content,
    .module-placeholder-page,
    .candidates-page,
    .employees-page,
    .recruitment-dashboard,
    .recruitment-page,
    .job-management-page,
    .jobs-page,
    .leave-dashboard,
    .leave-page {
    background: #f8fafc !important;
    }

/* Remove nested gray wrappers / layers */
    .dashboard-content > *,
    .module-placeholder-page > *,
    .recruitment-dashboard > *,
    .recruitment-page > *,
    .job-management-page > *,
    .jobs-page > *,
    .leave-dashboard > *,
    .leave-page > * {
    background-color: transparent;
    }

/* Restore white only on actual cards/panels */
    .stat-card,
    .employee-stat,
    .employee-card,
    .module-card,
    .pipeline-card,
    .activity-card,
    .dashboard-card,
    .leave-card,
    .jobs-container,
    .jobs-card,
    .profile-section-card,
    .family-dependents-table-wrap,
    .employees-empty,
    .module-placeholder-card {
    background: #ffffff !important;
    }

/* If recruitment / leave markup uses generic sections, keep
    their actual panels white while the page canvas stays Candidates-style */
    .recruitment-dashboard .card,
    .recruitment-page .card,
    .job-management-page .card,
    .jobs-page .card,
    .leave-dashboard .card,
    .leave-page .card {
    background: #ffffff !important;
    }

/* Remove excessive viewport/min-height gray blocks */
    .dashboard-content,
    .module-placeholder-page,
    .recruitment-dashboard,
    .recruitment-page,
    .job-management-page,
    .jobs-page,
    .leave-dashboard,
    .leave-page {
    min-height: 0 !important;
    height: auto !important;
    }

/* Match Candidates page horizontal content footprint */
    .recruitment-dashboard,
    .recruitment-page,
    .job-management-page,
    .jobs-page,
    .leave-dashboard,
    .leave-page {
    width: 100% !important;
    max-width: none !important;
    }

/* Candidate-style compact vertical flow */
    .recruitment-dashboard > :last-child,
    .recruitment-page > :last-child,
    .job-management-page > :last-child,
    .jobs-page > :last-child,
    .leave-dashboard > :last-child,
    .leave-page > :last-child {
    margin-bottom: 0 !important;
    }

/* Neutralize old gradient/gray page backgrounds */
    main,
    .main-content,
    .content-area,
    .module-content,
    .page-content {
    background-color: transparent !important;
    }

/* The visible content area after sidebar must always use same base */
    .dashboard-page {
    background: #f8fafc !important;
    }

/* Do not allow a nested recruitment/leave wrapper to paint gray */
    [class*="recruitment"] [class*="content"],
    [class*="recruitment"] [class*="wrapper"],
    [class*="leave"] [class*="content"],
    [class*="leave"] [class*="wrapper"],
    [class*="job"] [class*="content"],
    [class*="job"] [class*="wrapper"] {
    background-color: transparent;
    }

.candidates-page {
    width: 84% !important;
    max-width: 84% !important;
    }

.candidate-status-button {
    width: 100% !important;
    }

.job-management-shell {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    }

/* JOB MANAGEMENT — 20% MORE COMPACT */
    .job-management-page {
    padding: 24px 22px 30px !important;
    }

.job-management-shell {
    width: 100% !important;
    max-width: none !important;
    }

/* Main Jobs content */
    .job-page-header {
    margin-bottom: 18px !important;
    }

.job-page-header h1 {
    font-size: 25px !important;
    }

/* JOB MANAGEMENT — REDUCE CONTENT WIDTH BY 40% */
    .job-management-shell {
    width: 84.4% !important;
    max-width: 84.4% !important;
    margin-left: -30px !important;
    margin-right: 6
    0px !important;
    }

/* JOB MANAGEMENT TABLE — 20% SMALLER + COLUMN WIDTHS FIXED */
/* JOB MANAGEMENT TABLE — FIX COLUMN ALIGNMENT */
@media (min-width: 901px) {
    #jobsTableContainer .jobs-table {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    }

#jobsTableContainer .jobs-table thead th,
    #jobsTableContainer .jobs-table tbody td {
    padding: 8px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

#jobsTableContainer .jobs-table thead th {
    font-size: 11px !important;
    }

#jobsTableContainer .jobs-table tbody td {
    font-size: 12px !important;
    }

/* 1 — JOB ID */
    #jobsTableContainer .jobs-table th:nth-child(1),
    #jobsTableContainer .jobs-table td:nth-child(1) {
    width: 9% !important;
    }

/* 2 — JOB TITLE */
    #jobsTableContainer .jobs-table th:nth-child(2),
    #jobsTableContainer .jobs-table td:nth-child(2) {
    width: 15% !important;
    }

/* 3 — DEPARTMENT */
    #jobsTableContainer .jobs-table th:nth-child(3),
    #jobsTableContainer .jobs-table td:nth-child(3) {
    width: 8% !important;
    }

/* 4 — LOCATION */
    #jobsTableContainer .jobs-table th:nth-child(4),
    #jobsTableContainer .jobs-table td:nth-child(4) {
    width: 6% !important;
    }

/* 5 — EMPLOYMENT TYPE */
    #jobsTableContainer .jobs-table th:nth-child(5),
    #jobsTableContainer .jobs-table td:nth-child(5) {
    width: 9% !important;
    }

/* 6 — EXPERIENCE */
    #jobsTableContainer .jobs-table th:nth-child(6),
    #jobsTableContainer .jobs-table td:nth-child(6) {
    width: 7% !important;
    }

/* 7 — SALARY */
    #jobsTableContainer .jobs-table th:nth-child(7),
    #jobsTableContainer .jobs-table td:nth-child(7) {
    width: 8% !important;
    }

/* 8 — STATUS */
    #jobsTableContainer .jobs-table th:nth-child(8),
    #jobsTableContainer .jobs-table td:nth-child(8) {
    width: 9% !important;
    }

/* 9 — CLOSING DATE */
    #jobsTableContainer .jobs-table th:nth-child(9),
    #jobsTableContainer .jobs-table td:nth-child(9) {
    width: 12% !important;
    }

/* 10 — ACTIONS */
    #jobsTableContainer .jobs-table th:nth-child(10),
    #jobsTableContainer .jobs-table td:nth-child(10) {
    width: 10% !important;
    text-align: center !important;
    }
    }

/* REMOVE JOB MANAGEMENT HORIZONTAL SCROLL */
    html,
    body {
    overflow-x: hidden !important;
    }

@media (min-width: 901px) {
    .job-management-page {
    overflow-x: hidden !important;
    }

#jobsTableContainer {
    max-width: 100% !important;
    overflow-x: hidden !important;
    }

.job-management-page,
    .job-management-page * {
    box-sizing: border-box !important;
    }
    }

/* FIX LEFT SIDE 2PX CUT */
@media (min-width: 901px) {
    .job-management-page,
    #jobManagementPage {
    padding-left: 2px !important;
    box-sizing: border-box !important;
    }

.job-management-shell {
    margin-left: 0 !important;
    }
    }

/* FINAL 2PX BALANCE — LEFT + RIGHT CUT FIX */
@media (min-width: 901px) {
    .job-management-page,
    #jobManagementPage {
    padding-left: 2px !important;
    padding-right: 25px !important;
    width: calc(100% - 245px) !important;
    max-width: calc(100% - 245px) !important;
    margin-left: 245px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    }

.job-management-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    }
    }

/* =========================================================
    RECRUITMENT DASHBOARD — EXTRA WIDE / COMPACT
    ========================================================= */
@media (min-width: 901px) {
    .recruitment-dashboard-page {
    padding-left: 1px !important;
    padding-right: 12px !important;
    }

.recruitment-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    }

/* Top 4 cards closer */
    .recruitment-overview-grid {
    gap: 10px !important;
    }

/* Bottom Pipeline + Activity section */
    .recruitment-dashboard-grid,
    .recruitment-main-grid {
    gap: 14px !important;
    width: 100% !important;
    }
    }

/* =========================================================
    RECRUITMENT DASHBOARD — SINGLE BACKGROUND FIX
    ========================================================= */
    .recruitment-dashboard-page,
    .recruitment-dashboard-page::before,
    .recruitment-dashboard-page::after,
    .recruitment-dashboard-shell {
    background: #f8fafc !important;
    }

/* Remove any inner background layer */
    .recruitment-dashboard-page > *,
    .recruitment-dashboard-shell > * {
    background-color: transparent;
    }

/* Keep actual cards white */
    .recruitment-overview-card,
    .recruitment-card,
    .pipeline-card,
    .activity-card {
    background: #ffffff !important;
    }

/* =========================================================
    LEAVE DASHBOARD — MINIMUM LEFT / RIGHT GAP
    ========================================================= */
@media (min-width: 901px) {
    .leave-dashboard-page {
    padding-left: 1px !important;
    padding-right: 22px !important;
    }

.leave-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

/* Cards ke darmiyan bhi compact gap */
    .leave-stat-grid {
    gap: 10px !important;
    }

.leave-dashboard-grid {
    gap: 14px !important;
    width: 100% !important;
    }
    }

/* =====================================================
    EMPLOYEE DIRECTORY - STATUS & STAT CARD COLORS
    ===================================================== */
/* TOTAL EMPLOYEES - ORANGE */
    #directoryTotalCard,
    .employee-stat.total {
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    }

/* ACTIVE EMPLOYEES - GREEN */
    #directoryActiveCard,
    .employee-stat.active-stat {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    }

/* INACTIVE EMPLOYEES - RED */
    #directoryInactiveCard,
    .employee-stat.inactive-stat {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: #ffffff !important;
    }

/* EMPLOYEE CARD - ACTIVE STATUS */
    .employee-status.active,
    .employee-status-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    }

/* EMPLOYEE CARD - INACTIVE STATUS */
    .employee-status.inactive,
    .employee-status-inactive {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    }

/* =========================================================
    CANDIDATE DETAILS / STAGE-WISE PIPELINE
    ========================================================= */
    .candidate-details-view {
    padding: 14px 20px 28px;
    }

.candidate-details-topbar {
    margin-bottom: 14px;
    }

.candidate-back-button {
    border: 0;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(249, 115, 22, .18);
    }

.candidate-vacancy-hero {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 20px;
    padding: 18px 22px;
    min-height: 104px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .035);
    }

.candidate-vacancy-hero h1 {
    font-size: 25px;
    color: #1f2937;
    margin: 0 0 10px;
    }

.candidate-vacancy-meta {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    }

.candidate-vacancy-status {
    min-width: 102px;
    text-align: center;
    padding: 9px 15px;
    border-radius: 999px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    }

.candidate-vacancy-status.published,
    .candidate-vacancy-status.open {
    background: #dcfce7;
    color: #166534;
    }

.candidate-stage-tabs {
    display: grid;
    grid-template-columns: repeat(8, minmax(150px, 1fr));
    gap: 10px;
    margin: 16px 0 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    }

.candidate-stage-tab {
    min-height: 51px;
    border: 1px solid #fdba74;
    background: #fffaf5;
    border-radius: 12px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9a4a12;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: .18s ease;
    }

.candidate-stage-tab strong {
    margin-left: auto;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f97316;
    color: #fff;
    font-size: 11px;
    }

.candidate-stage-tab.active {
    background: linear-gradient(135deg, #f97316, #fb923c);
    border-color: #f97316;
    color: #fff;
    box-shadow: 0 6px 16px rgba(249, 115, 22, .2);
    }

.candidate-stage-tab.active strong {
    background: #fff;
    color: #f97316;
    }

.candidate-stage-tab.hired {
    border-color: #86efac;
    color: #15803d;
    background: #f0fdf4;
    }

.candidate-stage-tab.hired strong {
    background: #22c55e;
    }

.candidate-stage-tab.rejected {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
    }

.candidate-stage-tab.rejected strong {
    background: #ef4444;
    }

.candidate-stage-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 10px;
    }

.candidate-stage-heading-row h2 {
    font-size: 17px;
    color: #334155;
    font-weight: 500;
    }

.candidate-stage-count {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    }

.candidate-table-shell {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(15, 23, 42, .03);
    }

.candidate-table-loading,
    .candidate-table-empty {
    padding: 32px 24px;
    color: #64748b;
    text-align: center;
    font-size: 13px;
    }

.candidate-table-empty strong {
    display: block;
    color: #334155;
    margin-bottom: 6px;
    }

.candidate-table-wrap {
    width: 100%;
    overflow-x: auto;
    }

.candidate-details-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    }

.candidate-details-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 12px;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
    }

.candidate-details-table td {
    padding: 10px 12px;
    color: #334155;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
    }

.candidate-details-table tbody tr:hover {
    background: #fffaf5;
    }

.candidate-resume-link {
    color: #ea580c;
    font-weight: 700;
    text-decoration: none;
    }

.candidate-stage-input {
    width: 190px;
    height: 36px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    outline: none;
    background: #fff;
    }

.candidate-stage-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1);
    }

.candidate-action-select {
    min-width: 155px;
    height: 36px;
    border: 1px solid #fdba74;
    border-radius: 8px;
    padding: 0 9px;
    background: #fffaf5;
    color: #9a4a12;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    }

@media (max-width: 900px) {
    .candidate-details-view {
    padding: 14px 12px 24px;
    }

.candidate-stage-tabs {
    display: flex;
    grid-template-columns: none;
    }

.candidate-stage-tab {
    min-width: 165px;
    }
    }

@media (max-width: 650px) {
    .candidate-vacancy-hero {
    padding: 16px;
    border-radius: 15px;
    }

.candidate-vacancy-hero h1 {
    font-size: 20px;
    }

.candidate-vacancy-status {
    min-width: auto;
    padding: 7px 10px;
    }

.candidate-back-button {
    min-height: 40px;
    font-size: 12px;
    }
    }

/* =========================================================
    CANDIDATE PIPELINE DETAILS — COMPACT STAGE LAYOUT
    6 BUTTONS FIRST ROW + 5 BUTTONS SECOND ROW
    Same visual language as Candidates page
    ========================================================= */
    .candidate-details-view {
    padding: 10px 14px 20px !important;
    }

.candidate-details-topbar {
    margin-bottom: 10px !important;
    }

.candidate-back-button {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    }

.candidate-vacancy-hero {
    padding: 14px 16px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    gap: 12px !important;
    }

.candidate-vacancy-hero h1 {
    font-size: 20px !important;
    margin: 0 0 6px !important;
    }

.candidate-vacancy-meta {
    font-size: 11px !important;
    }

.candidate-vacancy-status {
    min-width: 90px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
    }

/* Exactly 6 columns on first row and remaining 5 on second row */
    .candidate-stage-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 10px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    }

/* Match existing Candidates page stage button styling */
    .candidate-stage-tab {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    border: 1px solid #ff9a54 !important;
    border-radius: 11px !important;
    background: #fff8ef !important;
    color: #e85c0b !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-shadow: none !important;
    }

.candidate-stage-tab:hover {
    background: #fff1df !important;
    border-color: #ff7b27 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(255, 123, 39, .08) !important;
    }

.candidate-stage-tab.active {
    background: #fff1df !important;
    border-color: #ff7b27 !important;
    color: #e85c0b !important;
    box-shadow: 0 4px 10px rgba(255, 123, 39, .08) !important;
    }

.candidate-stage-tab strong {
    margin-left: auto !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    flex: 0 0 20px !important;
    border-radius: 50% !important;
    background: #f97316 !important;
    color: #fff !important;
    font-size: 9px !important;
    }

.candidate-stage-tab.active strong {
    background: #f97316 !important;
    color: #fff !important;
    }

.candidate-stage-tab.hired,
    .candidate-stage-tab.rejected {
    color: #e85c0b !important;
    background: #fff8ef !important;
    border-color: #ff9a54 !important;
    }

.candidate-stage-tab.hired strong,
    .candidate-stage-tab.rejected strong {
    background: #f97316 !important;
    color: #fff !important;
    }

.candidate-stage-heading-row {
    margin: 2px 0 8px !important;
    }

.candidate-stage-heading-row h2 {
    font-size: 15px !important;
    margin: 0 !important;
    }

.candidate-stage-count {
    font-size: 10px !important;
    }

.candidate-table-shell {
    border-radius: 13px !important;
    }

.candidate-details-table {
    font-size: 10px !important;
    }

.candidate-details-table th {
    padding: 8px 9px !important;
    font-size: 9px !important;
    letter-spacing: .15px !important;
    }

.candidate-details-table td {
    padding: 8px 9px !important;
    font-size: 10px !important;
    }

.candidate-stage-input {
    width: 145px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    }

.candidate-action-select {
    min-width: 125px !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    }

.candidate-table-loading,
    .candidate-table-empty {
    padding: 24px 18px !important;
    font-size: 11px !important;
    }

/* Tablet: keep 2-row concept, reduce to practical 3 + remaining rows */
@media (max-width: 900px) {
    .candidate-stage-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
    }

.candidate-stage-tab {
    min-width: 0 !important;
    }
    }

/* Mobile: 2 buttons per row, no stage-button horizontal scroller */
@media (max-width: 650px) {
    .candidate-details-view {
    padding: 10px !important;
    }

.candidate-stage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    }

.candidate-stage-tab {
    font-size: 9px !important;
    padding: 0 7px !important;
    }

.candidate-vacancy-hero h1 {
    font-size: 17px !important;
    }
    }

/* =========================================================
    RECRUITMENT OVERVIEW — FINAL PREMIUM DASHBOARD
    ========================================================= */
    .recruitment-dashboard-page{width:100%;min-width:0;background:transparent}

.recruitment-dashboard-shell{width:100%;max-width:1540px;margin:0 auto;padding:26px 28px 40px}

.recruitment-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:2px 0 24px;margin-bottom:22px;border-bottom:1px solid rgba(15,23,42,.08)}

.recruitment-eyebrow,.recruitment-section-eyebrow{display:block;margin-bottom:7px;color:#16a34a;font-size:10px;font-weight:800;letter-spacing:.13em}

.recruitment-page-header h1{margin:0;color:#172033;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.035em}

.recruitment-page-header p{margin:8px 0 0;color:#8a96a8;font-size:12px;line-height:1.6}

.recruitment-header-actions{display:flex;align-items:center;gap:10px}

.recruitment-live-status{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #e7edf2;border-radius:9px;background:#fff;color:#64748b;font-size:11px;font-weight:700}

.recruitment-live-status i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.11)}

.recruitment-primary-btn{height:36px;padding:0 14px;border:0;border-radius:9px;background:#22c55e;color:#fff;font-size:12px;font-weight:750;cursor:pointer;box-shadow:0 7px 16px rgba(34,197,94,.16)}

.recruitment-primary-btn:hover{background:#16a34a}

.recruitment-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}

.recruitment-kpi-card{min-width:0;padding:17px 17px 15px;border:1px solid #e8edf2;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.025)}

.recruitment-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}

.recruitment-kpi-label{color:#7a8798;font-size:11px;font-weight:700}

.recruitment-kpi-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;font-size:14px;font-weight:800}

.recruitment-kpi-icon.jobs{color:#15803d;background:rgba(34,197,94,.11)}

.recruitment-kpi-icon.candidates{color:#2563eb;background:rgba(59,130,246,.10)}

.recruitment-kpi-icon.pipeline{color:#7c3aed;background:rgba(124,58,237,.10)}

.recruitment-kpi-icon.interviews{color:#c2410c;background:rgba(249,115,22,.11)}

.recruitment-kpi-icon.joining{color:#0f766e;background:rgba(20,184,166,.10)}

.recruitment-kpi-card>strong{display:block;color:#172033;font-size:27px;line-height:1;font-weight:800;letter-spacing:-.04em}

.recruitment-kpi-card>small{display:block;margin-top:7px;color:#a0a9b6;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.recruitment-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.9fr);grid-template-areas:"pipeline applications" "positions positions" "progress actions";gap:18px}

.recruitment-pipeline-panel{grid-area:pipeline}

.recruitment-applications-panel{grid-area:applications}

.recruitment-positions-panel{grid-area:positions}

.recruitment-progress-panel{grid-area:progress}

.recruitment-actions-panel{grid-area:actions}

.recruitment-panel{min-width:0;padding:20px;border:1px solid #e8edf2;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(15,23,42,.025)}

.recruitment-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}

.recruitment-panel-header h2{margin:0;color:#243044;font-size:15px;line-height:1.3;font-weight:800;letter-spacing:-.015em}

.recruitment-panel-header p{margin:5px 0 0;color:#99a5b4;font-size:11px;line-height:1.5}

.recruitment-soft-badge{padding:6px 9px;border-radius:8px;background:#f3f6f8;color:#6b7788;font-size:10px;font-weight:750;white-space:nowrap}

.recruitment-text-action{padding:2px;border:0;background:transparent;color:#16a34a;font-size:11px;font-weight:750;cursor:pointer}

.recruitment-pipeline-list{display:grid;gap:12px}

.recruitment-pipeline-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}

.recruitment-pipeline-row-top span{color:#637083;font-size:11px;font-weight:700}

.recruitment-pipeline-row-top strong{color:#172033;font-size:13px;font-weight:800}

.recruitment-pipeline-track,.recruitment-progress-track{height:6px;overflow:hidden;border-radius:999px;background:#edf1f4}

.recruitment-pipeline-track i,.recruitment-progress-track i{display:block;height:100%;border-radius:inherit;background:#22c55e;transition:width .4s ease}

.recruitment-pipeline-row:nth-child(2) i{background:#38bdf8}

.recruitment-pipeline-row:nth-child(3) i{background:#a78bfa}

.recruitment-pipeline-row:nth-child(4) i{background:#f59e0b}

.recruitment-pipeline-row:nth-child(5) i{background:#fb7185}

.recruitment-pipeline-row:nth-child(6) i{background:#14b8a6}

.recruitment-pipeline-row:nth-child(7) i{background:#16a34a}

.recruitment-recent-list{display:grid}

.recruitment-recent-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eef2f5}

.recruitment-recent-item:first-child{padding-top:0}

.recruitment-recent-item:last-child{padding-bottom:0;border-bottom:0}

.recruitment-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eefbf1;color:#15803d;font-size:10px;font-weight:800}

.recruitment-recent-info{min-width:0;display:grid;gap:3px}

.recruitment-recent-info strong{overflow:hidden;color:#374151;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}

.recruitment-recent-info small{overflow:hidden;color:#98a3b1;font-size:10px;text-overflow:ellipsis;white-space:nowrap}

.recruitment-recent-meta{display:grid;justify-items:end;gap:4px}

.recruitment-recent-meta small{color:#a2acb8;font-size:9px}

.recruitment-stage-chip{padding:4px 6px;border-radius:6px;background:#f3f4f6;color:#667085;font-size:8px;font-weight:800;white-space:nowrap}

.stage-final-interview{background:#fff4e5;color:#b45309}

.stage-culture-fit{background:#f3e8ff;color:#7e22ce}

.stage-offer-placed,.stage-joining-awaited{background:#eaf8ee;color:#15803d}

.recruitment-table-wrap{overflow-x:auto}

.recruitment-jobs-table{width:100%;border-collapse:collapse}

.recruitment-jobs-table th{padding:0 12px 10px 0;border-bottom:1px solid #edf1f4;color:#9aa5b3;font-size:9px;font-weight:800;text-align:left;text-transform:uppercase;letter-spacing:.05em}

.recruitment-jobs-table td{padding:13px 12px 13px 0;border-bottom:1px solid #f0f3f5;color:#718096;font-size:11px}

.recruitment-jobs-table tr:last-child td{border-bottom:0}

.recruitment-jobs-table td strong{color:#334155;font-size:11px;font-weight:800}

.recruitment-candidate-count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:7px;background:#f3f6f8;color:#526174;font-size:10px;font-weight:800}

.recruitment-job-status{display:inline-block;padding:5px 8px;border-radius:6px;background:#eaf8ee;color:#15803d;font-size:9px;font-weight:800;text-transform:capitalize}

.recruitment-progress-list{display:grid;gap:15px}

.recruitment-progress-item{padding-bottom:14px;border-bottom:1px solid #eef2f5}

.recruitment-progress-item:last-child{padding-bottom:0;border-bottom:0}

.recruitment-progress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}

.recruitment-progress-head div{min-width:0;display:grid;gap:3px}

.recruitment-progress-head strong{overflow:hidden;color:#374151;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}

.recruitment-progress-head small,.recruitment-progress-caption{color:#98a3b1;font-size:9px}

.recruitment-progress-head>span{color:#64748b;font-size:9px;font-weight:750;white-space:nowrap}

.recruitment-progress-caption{display:block;margin-top:6px}

.recruitment-action-list{display:grid;gap:9px}

.recruitment-action-card{width:100%;display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #edf1f4;border-radius:10px;background:#fff;text-align:left;cursor:pointer;transition:.16s ease}

.recruitment-action-card:hover{border-color:#bfe7ca;background:#fbfffc;transform:translateX(2px)}

.recruitment-action-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:#eefbf1;color:#16a34a;font-size:15px;font-weight:800}

.recruitment-action-card>span:nth-child(2){min-width:0;display:grid;gap:3px}

.recruitment-action-card strong{color:#3a4657;font-size:11px;font-weight:800}

.recruitment-action-card small{color:#99a4b1;font-size:9px}

.recruitment-action-card b{color:#a0a9b5;font-size:16px;font-weight:500}

.recruitment-empty-state{padding:24px 12px;border:1px dashed #dce4ea;border-radius:10px;background:#fbfcfd;color:#99a5b4;font-size:11px;text-align:center}

@media(max-width:1200px){.recruitment-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:920px){.recruitment-dashboard-shell{padding:22px 20px 32px}

.recruitment-dashboard-grid{grid-template-columns:1fr;grid-template-areas:"pipeline" "applications" "positions" "progress" "actions"}

.recruitment-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:620px){.recruitment-dashboard-shell{padding:18px 14px 28px}

.recruitment-page-header{align-items:flex-start;flex-direction:column}

.recruitment-header-actions{width:100%;justify-content:space-between}

.recruitment-kpi-grid{grid-template-columns:1fr}

.recruitment-panel{padding:16px}

.recruitment-page-header h1{font-size:25px}

.recruitment-recent-item{grid-template-columns:34px minmax(0,1fr)}

.recruitment-recent-meta{grid-column:2;justify-items:start}

.recruitment-jobs-table{min-width:650px}}

/* KPI CARDS — 40% MORE COMPACT */
    .recruitment-kpi-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
    }

.recruitment-kpi-card{
    padding:11px 12px 10px;
    border-radius:11px;
    }

.recruitment-kpi-top{
    margin-bottom:9px;
    }

.recruitment-kpi-card > strong{
    font-size:21px;
    }

.recruitment-kpi-card > small{
    margin-top:4px;
    font-size:9px;
    }

/* ORANGE THEME */
    .recruitment-eyebrow,
    .recruitment-section-eyebrow,
    .recruitment-text-action{
    color:#f97316;
    }

.recruitment-primary-btn{
    background:#f97316;
    box-shadow:0 6px 14px rgba(249,115,22,.16);
    }

.recruitment-primary-btn:hover{
    background:#ea580c;
    }

.recruitment-live-status i{
    background:#f97316;
    box-shadow:0 0 0 3px rgba(249,115,22,.12);
    }

/* Primary orange icons */
    .recruitment-kpi-icon.jobs,
    .recruitment-kpi-icon.joining{
    color:#ea580c;
    background:rgba(249,115,22,.11);
    }

.recruitment-kpi-icon.candidates{
    color:#c2410c;
    background:rgba(249,115,22,.09);
    }

/* Pipeline orange */
    .recruitment-pipeline-track i,
    .recruitment-progress-track i{
    background:#f97316;
    }

.recruitment-pipeline-row:nth-child(2) i{
    background:#fb923c;
    }

.recruitment-pipeline-row:nth-child(3) i{
    background:#f59e0b;
    }

.recruitment-pipeline-row:nth-child(4) i{
    background:#ea580c;
    }

.recruitment-pipeline-row:nth-child(5) i{
    background:#fb7185;
    }

.recruitment-pipeline-row:nth-child(6) i{
    background:#fdba74;
    }

.recruitment-pipeline-row:nth-child(7) i{
    background:#c2410c;
    }

/* Orange action icons */
    .recruitment-action-icon{
    color:#ea580c;
    background:#fff3e8;
    }

.recruitment-action-card:hover{
    border-color:#fdba74;
    background:#fffaf5;
    }

.recruitment-stage-chip.stage-offer-placed,
    .recruitment-stage-chip.stage-joining-awaited{
    background:#fff3e8;
    color:#c2410c;
    }

/* =====================================================
    RECRUITMENT DASHBOARD — COMPACT TOP LEFT CARDS
    ===================================================== */
    .recruitment-kpi-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    }

/* Compact cards — no full row stretching */
    .recruitment-kpi-card{
    flex: 0 0 175px !important;
    width: 175px !important;
    max-width: 175px !important;
    min-height: 100px !important;
    padding: 13px 14px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    }

/* Make content compact */
    .recruitment-kpi-top{
    margin-bottom: 10px !important;
    }

.recruitment-kpi-card > strong{
    font-size: 23px !important;
    }

.recruitment-kpi-card > small{
    margin-top: 5px !important;
    font-size: 9px !important;
    }

/* Orange brand theme */
    .recruitment-eyebrow,
    .recruitment-section-eyebrow,
    .recruitment-text-action{
    color: #f97316 !important;
    }

.recruitment-primary-btn{
    background: #f97316 !important;
    box-shadow: 0 6px 14px rgba(249,115,22,.16) !important;
    }

.recruitment-primary-btn:hover{
    background: #ea580c !important;
    }

.recruitment-live-status i{
    background: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
    }

.recruitment-kpi-icon.jobs,
    .recruitment-kpi-icon.joining{
    color: #ea580c !important;
    background: #fff1e6 !important;
    }

.recruitment-kpi-icon.candidates,
    .recruitment-kpi-icon.pipeline,
    .recruitment-kpi-icon.interviews{
    color: #f97316 !important;
    background: #fff5ed !important;
    }

.recruitment-pipeline-track i,
    .recruitment-progress-track i{
    background: #f97316 !important;
    }

.recruitment-action-icon{
    color: #ea580c !important;
    background: #fff1e6 !important;
    }

.recruitment-action-card:hover{
    border-color: #fdba74 !important;
    background: #fffaf5 !important;
    }

/* =========================================================
    RECRUITMENT DASHBOARD — FULL COMPACT LAYOUT OVERRIDE
    ========================================================= */
/* PAGE CONTENT — top aur left gap reduce */
    .recruitment-dashboard-shell{
    max-width: 1180px !important;
    margin: 0 !important;
    padding: 10px 16px 30px 12px !important;
    }

/* HEADER — top se bilkul close */
    .recruitment-page-header{
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    }

/* PAGE TITLE compact */
    .recruitment-page-header h1{
    font-size: 26px !important;
    }

.recruitment-page-header p{
    margin-top: 4px !important;
    }

/* =========================================================
    TOP KPI CARDS
    ========================================================= */
    .recruitment-kpi-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    margin-bottom: 12px !important;
    }

.recruitment-kpi-card{
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    min-height: 88px !important;
    padding: 11px !important;
    box-sizing: border-box !important;
    }

.recruitment-kpi-card > strong{
    font-size: 21px !important;
    }

.recruitment-kpi-card > small{
    font-size: 8px !important;
    }

/* =========================================================
    MAIN DASHBOARD — ALL CARDS COMPACT
    ========================================================= */
    .recruitment-dashboard-grid{
    display: grid !important;
    grid-template-columns: 470px 320px !important;
    grid-template-areas:
    "pipeline applications"
    "positions positions"
    "progress actions" !important;
    gap: 12px !important;
    width: max-content !important;
    max-width: 100% !important;
    align-items: start !important;
    }

/* ALL MAIN CARDS */
    .recruitment-panel{
    padding: 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    }

/* Individual widths */
    .recruitment-pipeline-panel{
    width: 470px !important;
    }

.recruitment-applications-panel{
    width: 320px !important;
    }

.recruitment-positions-panel{
    width: 802px !important;
    }

.recruitment-progress-panel{
    width: 470px !important;
    }

.recruitment-actions-panel{
    width: 320px !important;
    }

/* Section headers compact */
    .recruitment-panel-header{
    margin-bottom: 12px !important;
    }

.recruitment-panel-header h2{
    font-size: 14px !important;
    }

.recruitment-panel-header p{
    margin-top: 3px !important;
    font-size: 10px !important;
    }

/* Pipeline compact */
    .recruitment-pipeline-list{
    gap: 8px !important;
    }

.recruitment-pipeline-row-top{
    margin-bottom: 5px !important;
    }

.recruitment-pipeline-track{
    height: 5px !important;
    }

/* Recent applications compact */
    .recruitment-recent-item{
    padding: 7px 0 !important;
    }

/* Open Positions compact */
    .recruitment-jobs-table td{
    padding: 9px 10px 9px 0 !important;
    }

/* Hiring Progress compact */
    .recruitment-progress-list{
    gap: 10px !important;
    }

.recruitment-progress-item{
    padding-bottom: 10px !important;
    }

/* Quick actions compact */
    .recruitment-action-list{
    gap: 7px !important;
    }

.recruitment-action-card{
    padding: 8px !important;
    min-height: 54px !important;
    }

/* =========================================================
    ORANGE THEME
    ========================================================= */
    .recruitment-eyebrow,
    .recruitment-section-eyebrow,
    .recruitment-text-action{
    color: #f97316 !important;
    }

.recruitment-primary-btn{
    background: #f97316 !important;
    box-shadow: 0 5px 12px rgba(249,115,22,.16) !important;
    }

.recruitment-live-status i{
    background: #f97316 !important;
    }

.recruitment-kpi-icon{
    color: #ea580c !important;
    background: #fff1e6 !important;
    }

.recruitment-pipeline-row:nth-child(2) i{
    background: #fb923c !important;
    }

.recruitment-pipeline-row:nth-child(3) i{
    background: #f59e0b !important;
    }

.recruitment-pipeline-row:nth-child(4) i{
    background: #ea580c !important;
    }

.recruitment-pipeline-row:nth-child(5) i{
    background: #fb7185 !important;
    }

.recruitment-pipeline-row:nth-child(6) i{
    background: #fdba74 !important;
    }

.recruitment-pipeline-row:nth-child(7) i{
    background: #c2410c !important;
    }

/* =========================================================
    RESPONSIVE
    ========================================================= */
@media (max-width: 950px){
    .recruitment-dashboard-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
    "pipeline"
    "applications"
    "positions"
    "progress"
    "actions" !important;
    width: 100% !important;
    }

.recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: 100% !important;
    }
    }

@media (max-width: 600px){
    .recruitment-dashboard-shell{
    padding: 8px 10px 25px !important;
    }

.recruitment-kpi-card{
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: none !important;
    }
    }

/* Move header actions closer to the title */
    .recruitment-page-header{
    justify-content: flex-start !important;
    align-items: flex-end !important;
    gap: 180px !important;
    }

/* Prevent actions from stretching to the far right */
    .recruitment-header-actions{
    margin-left: 20px !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
    }

/* =========================================================
    RECRUITMENT DASHBOARD — REMOVE RIGHT SIDE BLANK AREA
    ========================================================= */
/* Use full available content area */
    .recruitment-dashboard-shell{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 20px 30px 12px !important;
    }

/* Main dashboard fills available width */
    .recruitment-dashboard-grid{
    width: 100% !important;
    max-width: none !important;
    grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.85fr) !important;
    gap: 12px !important;
    grid-template-areas:
    "pipeline applications"
    "positions positions"
    "progress actions" !important;
    }

/* Remove fixed widths */
    .recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: auto !important;
    max-width: none !important;
    }

/* Open positions should fill both columns */
    .recruitment-positions-panel{
    width: 100% !important;
    }

/* Hiring progress and actions fill their grid columns */
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: 100% !important;
    }

/* Keep KPI cards compact but don't force dashboard width */
    .recruitment-kpi-grid{
    width: 100% !important;
    justify-content: flex-start !important;
    }

/* Header uses available space cleanly */
    .recruitment-page-header{
    width: 100% !important;
    box-sizing: border-box !important;
    }

/* Keep Live Data + Create Job near left */
    .recruitment-header-actions{
    margin-left: 20px !important;
    margin-right: 0 !important;
    }

@media (max-width: 950px){
    .recruitment-dashboard-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
    "pipeline"
    "applications"
    "positions"
    "progress"
    "actions" !important;
    }

.recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: 100% !important;
    }
    }

/* =========================================================
    RECRUITMENT DASHBOARD — BALANCED FULL WIDTH LAYOUT
    ========================================================= */
/* Full available page area */
    .recruitment-dashboard-shell{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 18px 30px 12px !important;
    box-sizing: border-box !important;
    }

/* ---------------------------------------------------------
    TOP KPI CARDS — small but balanced
    --------------------------------------------------------- */
    .recruitment-kpi-grid{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(140px, 175px)) !important;
    justify-content: start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    }

.recruitment-kpi-card{
    width: 100% !important;
    max-width: 175px !important;
    min-height: 92px !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    border-radius: 11px !important;
    }

.recruitment-kpi-top{
    margin-bottom: 8px !important;
    }

.recruitment-kpi-card > small{
    margin-top: 4px !important;
    font-size: 9px !important;
    }

/* ---------------------------------------------------------
    MAIN CARDS — smaller but fill dashboard properly
    --------------------------------------------------------- */
    .recruitment-dashboard-grid{
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
/* Both cards more compact and balanced */
    grid-template-columns:
    minmax(420px, 1.35fr)
    minmax(300px, 0.85fr) !important;
    gap: 12px !important;
    grid-template-areas:
    "pipeline applications"
    "positions positions"
    "progress actions" !important;
    }

/* Remove old fixed widths */
    .recruitment-panel,
    .recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    }

/* Make all section cards compact */
    .recruitment-panel{
    padding: 14px !important;
    border-radius: 12px !important;
    }

/* ---------------------------------------------------------
    Compact content inside cards
    --------------------------------------------------------- */
    .recruitment-panel-header{
    margin-bottom: 12px !important;
    }

.recruitment-pipeline-list{
    gap: 8px !important;
    }

.recruitment-pipeline-row-top{
    margin-bottom: 4px !important;
    }

.recruitment-pipeline-track,
    .recruitment-progress-track{
    height: 5px !important;
    }

.recruitment-recent-item{
    padding: 7px 0 !important;
    }

.recruitment-jobs-table td{
    padding: 9px 10px 9px 0 !important;
    }

.recruitment-progress-list{
    gap: 10px !important;
    }

.recruitment-progress-item{
    padding-bottom: 9px !important;
    }

.recruitment-action-list{
    gap: 7px !important;
    }

.recruitment-action-card{
    padding: 8px !important;
    min-height: 50px !important;
    }

/* ---------------------------------------------------------
    Responsive
    --------------------------------------------------------- */
@media (max-width: 1100px){
    .recruitment-kpi-grid{
    grid-template-columns: repeat(3, minmax(140px, 175px)) !important;
    }

.recruitment-dashboard-grid{
    grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .85fr) !important;
    }
    }

@media (max-width: 850px){
    .recruitment-kpi-grid{
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }

.recruitment-kpi-card{
    max-width: none !important;
    }

.recruitment-dashboard-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
    "pipeline"
    "applications"
    "positions"
    "progress"
    "actions" !important;
    }
    }

@media (max-width: 560px){
    .recruitment-dashboard-shell{
    padding: 8px 10px 25px !important;
    }

.recruitment-kpi-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    }

.recruitment-kpi-card{
    min-height: 85px !important;
    }
    }

/* =========================================================
    RECRUITMENT DASHBOARD — FINAL CLEAN PREMIUM LAYOUT
    ========================================================= */
/* ---------- PAGE ---------- */
    #recruitmentDashboardPage,
    .recruitment-dashboard-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f8fafc !important;
    }

.recruitment-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 18px 32px 12px !important;
    box-sizing: border-box !important;
    }

/* ---------- HEADER ---------- */
    .recruitment-page-header {
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #e8edf2 !important;
    box-sizing: border-box !important;
    }

.recruitment-page-header h1 {
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    }

.recruitment-page-header p {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    }

.recruitment-eyebrow,
    .recruitment-section-eyebrow {
    margin-bottom: 2px !important;
    color: #f97316 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    }

.recruitment-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    }

.recruitment-live-status {
    height: 32px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    }

.recruitment-primary-btn {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: #f97316 !important;
    font-size: 11px !important;
    }

/* =========================================================
    MAIN DASHBOARD GRID
    No fixed pixel widths
    ========================================================= */
    .recruitment-dashboard-grid,
    .recruitment-main-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, .85fr) !important;
    grid-template-areas:
    "pipeline applications"
    "positions positions"
    "progress actions" !important;
    gap: 12px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    }

/* Reset all old fixed widths */
    .recruitment-panel,
    .recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel,
    .recruitment-activity-panel,
    .recruitment-jobs-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    }

/* Top 5 cards ki TOTAL width bhi same */
    .recruitment-kpi-grid{
    width: 83.5% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: start !important;
    }

/* Har top card equal width */
    .recruitment-kpi-card{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    }

/* Header bhi same content width ke according */
    .recruitment-page-header{
    width: 75% !important;
    max-width: 100% !important;
    }

/* =========================================================
    RECRUITMENT DASHBOARD — 60% LEFT / 40% RIGHT
    ========================================================= */
    .recruitment-dashboard-grid{
    grid-template-columns: 50fr 50fr !important;
    width: 83.8% !important;
    max-width: 100% !important;
    gap: 12px !important;
    }

/* Ensure all cards follow the grid width correctly */
    .recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    }

/* Open Positions spans both columns */
    .recruitment-positions-panel{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    }

/* =========================================================
    RECRUITMENT DASHBOARD — FINAL POSITIONING FIX
    ========================================================= */
@media (min-width: 901px) {
/* LEFT SIDE GAP REDUCE BY APPROX. 5% */
    .recruitment-dashboard-page {
    padding-left: 0 !important;
    }

.recruitment-dashboard-shell {
    margin-left: 0 !important;
    padding-left: 0 !important;
    }

/* Keep dashboard content aligned from left */
    .recruitment-page-header,
    .recruitment-kpi-grid,
    .recruitment-dashboard-grid,
    .recruitment-main-grid {
    margin-left: 0 !important;
    }

/* =====================================================
    LIVE DATA + CREATE JOB — MOVE TO RIGHT SIDE
    ===================================================== */
    .recruitment-page-header {
    width: 82% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    }

.recruitment-header-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: 30% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    }
    }

/* =========================================================
    RECRUITMENT DASHBOARD — REDUCE ACTUAL LEFT GAP
    ========================================================= */
/* Internal wrappers ka left spacing remove */
    .recruitment-dashboard-shell{
    margin-left: 1px !important;
    padding-left: 0 !important;
    width: 99% !important;
    }

/* Har main section same left position se start ho */
    .recruitment-page-header,
    .recruitment-kpi-grid,
    .recruitment-dashboard-grid{
    margin-left: 0 !important;
    }

/* Prevent horizontal overflow */
    #recruitmentDashboardPage{
    overflow-x: hidden !important;
    }

/* =========================================================
    FINAL SMALL SPACING + CREATE JOB BUTTON SIZE
    ========================================================= */
/* Dashboard bottom par slight clean spacing */
    #recruitmentDashboardPage,
    .recruitment-dashboard-page{
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
    }

.recruitment-dashboard-shell{
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
    }

/* Create Job button — slightly smaller */
    .recruitment-primary-btn{
    height: 29px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    }

/* Button icon bhi compact */
    .recruitment-primary-btn i,
    .recruitment-primary-btn svg{
    width: 12px !important;
    height: 12px !important;
    }

/* ============================================================
    LEAVE BALANCE PAGE
    ============================================================ */
    .leave-balance-page {
    width: calc(100% - 245px);
    margin-left: 245px;
    min-height: calc(100vh - 72px);
    background: #f7f9fc;
    overflow-x: hidden;
    box-sizing: border-box;
    }

.leave-balance-shell {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 42px 50px;
    box-sizing: border-box;
    }

.leave-balance-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    }

.leave-balance-title-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    }

.leave-balance-title-icon {
    font-size: 30px;
    line-height: 1;
    margin-top: 2px;
    }

.leave-balance-header h1 {
    margin: 0;
    color: #1f2937;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.5px;
    }

.leave-balance-header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    }

.leave-balance-date {
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    }

.leave-balance-table-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #fed7aa;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }

.leave-balance-table-wrap {
    width: 100%;
    overflow-x: auto;
    }

.leave-balance-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    table-layout: fixed;
    }

.leave-balance-table thead {
    background: linear-gradient(135deg, #f97316, #fb6a1a);
    }

.leave-balance-table thead th {
    padding: 15px 13px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    }

.leave-balance-table thead th:first-child {
    width: 19%;
    text-align: left;
    padding-left: 20px;
    }

.leave-balance-table thead th:nth-child(2) { width: 12%; }

.leave-balance-table thead th:nth-child(3),
    .leave-balance-table thead th:nth-child(4),
    .leave-balance-table thead th:nth-child(5) { width: 16%; }

.leave-balance-table thead th:nth-child(6) { width: 10%; }

.leave-balance-table thead th:last-child { width: 11%; }

.leave-balance-table tbody tr {
    border-bottom: 1px solid #f1e5db;
    }

.leave-balance-table tbody tr:hover {
    background: #fffaf6;
    }

.leave-balance-table tbody td {
    padding: 18px 13px;
    text-align: center;
    vertical-align: middle;
    }

.leave-balance-table tbody td:first-child {
    text-align: left;
    padding-left: 20px;
    }

.leave-balance-employee {
    display: flex;
    flex-direction: column;
    gap: 4px;
    }

.leave-balance-employee strong {
    color: #1f2937;
    font-size: 13px;
    font-weight: 800;
    }

.leave-balance-employee span {
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    }

.leave-balance-joining-date {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    }

.leave-balance-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    }

.leave-balance-group > div {
    width: 100%;
    max-width: 190px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #ffffff;
    }

.leave-balance-group > div span {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    font-size: 11px;
    font-weight: 700;
    border-right: 1px solid #f3d8c2;
    }

.leave-balance-group > div span:last-child {
    border-right: none;
    }

.leave-balance-group > div .remaining {
    color: #ea580c;
    }

.leave-balance-group small {
    color: #94a3b8;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    }

.leave-balance-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 7px 13px;
    border: 1px solid #fdba74;
    border-radius: 999px;
    background: #fffaf5;
    color: #c2410c;
    font-size: 10px;
    font-weight: 700;
    }

.leave-balance-total {
    color: #1f2937;
    font-size: 16px;
    font-weight: 800;
    }

.leave-balance-loading,
    .leave-balance-empty,
    .leave-balance-error {
    padding: 45px 20px !important;
    text-align: center !important;
    color: #64748b;
    font-size: 13px;
    }

.leave-balance-error {
    color: #dc2626;
    }

.leave-balance-error small {
    display: block;
    margin-top: 7px;
    color: #94a3b8;
    }

@media (max-width: 1100px) {
    .leave-balance-page {
    width: calc(100% - 220px);
    margin-left: 220px;
    }

.leave-balance-shell {
    padding: 26px 24px 40px;
    }
    }

@media (max-width: 900px) {
    .leave-balance-page {
    width: 100%;
    margin-left: 0;
    }

.leave-balance-shell {
    padding: 24px 20px 40px;
    }
    }

@media (max-width: 600px) {
    .leave-balance-header {
    flex-direction: column;
    }

.leave-balance-header h1 {
    font-size: 25px;
    }

.leave-balance-date {
    align-self: flex-start;
    }

.leave-balance-shell {
    padding: 20px 14px 30px;
    }
    }

/* ============================================================
    LEAVE BALANCE — FINAL HEADER / SPACING / SCROLL FIX
    Matches Job Management heading layout
    ============================================================ */
/* Main content: approximately 0.5 inch left gap */
    .leave-balance-shell {
    max-width: none !important;
    margin: 0 !important;
    padding: 38px 48px 50px 48px !important;
    }

/* Header structure */
    .leave-balance-header {
    position: relative;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 30px !important;
    }

/* Hide old clipboard icon */
    .leave-balance-title-icon {
    display: none !important;
    }

/* Add the same eyebrow style as Job Management */
    .leave-balance-title-row {
    display: block !important;
    }

.leave-balance-title-row > div::before {
    content: "LEAVE";
    display: block;
    margin-bottom: 13px;
    color: #d86a20;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    }

/* Same visual hierarchy as Job Management */
    .leave-balance-header h1 {
    margin: 0 !important;
    color: #2b3b50 !important;
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    }

.leave-balance-header p {
    margin: 10px 0 0 !important;
    color: #617085 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    }

/* Date alignment */
    .leave-balance-date {
    margin-top: 0 !important;
    padding: 14px 24px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    }

/* Remove horizontal / bottom scrollbar */
    .leave-balance-page,
    .leave-balance-shell,
    .leave-balance-table-card {
    overflow-x: hidden !important;
    }

.leave-balance-table-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    }

/* Make table fit container instead of forcing bottom scroll */
    .leave-balance-table {
    min-width: 0 !important;
    width: 100% !important;
    }

/* Compact table columns so all content stays visible */
    .leave-balance-table thead th,
    .leave-balance-table tbody td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

.leave-balance-group > div {
    max-width: 170px !important;
    }

/* Responsive */
@media (max-width: 1200px) {
    .leave-balance-shell {
    padding-left: 36px !important;
    padding-right: 36px !important;
    }

.leave-balance-header h1 {
    font-size: 32px !important;
    }

.leave-balance-header p {
    font-size: 16px !important;
    }

.leave-balance-table {
    font-size: 11px;
    }

.leave-balance-group > div {
    max-width: 150px !important;
    }
    }

@media (max-width: 900px) {
    .leave-balance-shell {
    padding-left: 24px !important;
    padding-right: 24px !important;
    }

/* On smaller screens allow the browser to handle content safely */
    .leave-balance-table-wrap {
    overflow-x: auto !important;
    }

.leave-balance-table {
    min-width: 980px !important;
    }
    }

/* ============================================================
    LEAVE BALANCE — FINAL ORANGE / LEFT GAP FIX
    ============================================================ */
/* Force active sidebar button to orange */
    .sidebar-button.active,
    .sidebar-button.leave-balance-active,
    .sidebar-button.active.leave-balance-active {
    background: #ff6b16 !important;
    color: #ffffff !important;
    border-color: #ff6b16 !important;
    }

.sidebar-button.active *,
    .sidebar-button.leave-balance-active *,
    .sidebar-button.active.leave-balance-active * {
    color: #ffffff !important;
    }

/* Keep orange on hover as well */
    .sidebar-button.active:hover,
    .sidebar-button.leave-balance-active:hover {
    background: #f35f0a !important;
    color: #ffffff !important;
    }

/* Reduce left gap */
    .leave-balance-shell {
    padding-left: 24px !important;
    padding-right: 40px !important;
    }

/* Make Leave Balance heading orange */
    .leave-balance-header h1 {
    color: #f97316 !important;
    }

/* Keep LEAVE eyebrow orange */
    .leave-balance-title-row > div::before {
    color: #f97316 !important;
    }

/* Smaller screens */
@media (max-width: 1200px) {
    .leave-balance-shell {
    padding-left: 20px !important;
    padding-right: 24px !important;
    }
    }

@media (max-width: 900px) {
    .leave-balance-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
    }
    }

/* ============================================================
    LEAVE BALANCE HEADER — MATCH RECRUITMENT OVERVIEW
    ============================================================ */
/* Match Recruitment Overview content spacing */
    .leave-balance-shell {
    padding-top: 38px !important;
    padding-left: 24px !important;
    padding-right: 40px !important;
    }

/* Recruitment Overview style heading container */
    .leave-balance-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 30px !important;
    }

.leave-balance-title-icon {
    display: none !important;
    }

.leave-balance-title-row {
    display: block !important;
    }

.leave-balance-title-row > div::before {
    content: "LEAVE" !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    color: #d86a20 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    }

/* EXACT Recruitment Overview heading hierarchy */
    .leave-balance-header h1 {
    margin: 0 !important;
    color: #2b3b50 !important;
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    }

/* EXACT Recruitment Overview description style */
    .leave-balance-header p {
    margin: 10px 0 0 0 !important;
    color: #617085 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    }

/* Date remains aligned with heading area */
    .leave-balance-date {
    margin-top: 0 !important;
    }

@media (max-width: 1200px) {
    .leave-balance-shell {
    padding-left: 20px !important;
    padding-right: 24px !important;
    }

.leave-balance-header h1 {
    font-size: 32px !important;
    }

.leave-balance-header p {
    font-size: 16px !important;
    }
    }

@media (max-width: 900px) {
    .leave-balance-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
    }

.leave-balance-header h1 {
    font-size: 28px !important;
    }

.leave-balance-header p {
    font-size: 15px !important;
    }
    }

/* ============================================================
    LEAVE BALANCE — FINAL MATCH TO JOB MANAGEMENT HEADER
    Left + right gap reduced, same heading hierarchy
    ============================================================ */
/* Cancel any previous scaling/zoom fixes */
    .leave-balance-page,
    .leave-balance-shell {
    transform: none !important;
    zoom: 1 !important;
    box-sizing: border-box !important;
    }

/* Same compact horizontal content spacing as Job Management */
    .leave-balance-page {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
    }

.leave-balance-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 34px 34px 40px 34px !important;
    }

/* Header layout */
    .leave-balance-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    }

.leave-balance-title-row {
    display: block !important;
    min-width: 0 !important;
    }

/* Same RECRUITMENT-style eyebrow */
    .leave-balance-title-row > div::before {
    content: "LEAVE" !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    color: #d86a20 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    }

/* Match Job Management heading */
    .leave-balance-header h1 {
    margin: 0 !important;
    color: #2b3b50 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
    }

/* Match Job Management subtitle */
    .leave-balance-header p {
    margin: 10px 0 0 0 !important;
    color: #617085 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    }

/* Keep date within the same reduced right gap */
    .leave-balance-date {
    flex: 0 0 auto !important;
    margin: 0 !important;
    }

/* Table uses the same left/right boundaries as the heading */
    .leave-balance-table-card,
    .leave-balance-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    }

.leave-balance-table-wrap {
    overflow-x: hidden !important;
    }

.leave-balance-table {
    width: 100% !important;
    min-width: 0 !important;
    }

/* Responsive spacing */
@media (max-width: 1200px) {
    .leave-balance-shell {
    padding-left: 28px !important;
    padding-right: 28px !important;
    }
    }

@media (max-width: 900px) {
    .leave-balance-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
    }

.leave-balance-header {
    gap: 16px !important;
    }

.leave-balance-table-wrap {
    overflow-x: auto !important;
    }

.leave-balance-table {
    min-width: 980px !important;
    }
    }

/* ============================================================
    LEAVE BALANCE — FINAL SIZE & SPACING UPDATE
    ============================================================ */
/* Left + Right gap = 20px */
    .leave-balance-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
    }

/* LEAVE — same bright orange as sidebar active button */
    .leave-balance-title-row > div::before {
    content: "LEAVE" !important;
    color: #ff6b1a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    }

/* Leave Balances heading */
    .leave-balance-header h1 {
    font-size: 25px !important;
    color: #2b3b50 !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    }

/* Description */
    .leave-balance-header p {
    font-size: 10px !important;
    color: #617085 !important;
    line-height: 1.45 !important;
    }

/* ============================================================
    LEAVE BALANCE — FINAL RIGHT SIDE OVERFLOW FIX
    ============================================================ */
@media (min-width: 1101px) {
    .leave-balance-page {
    width: calc(100vw - 245px) !important;
    max-width: calc(100vw - 245px) !important;
    margin-left: 245px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    }
    }

@media (min-width: 901px) and (max-width: 1100px) {
    .leave-balance-page {
    width: calc(100vw - 220px) !important;
    max-width: calc(100vw - 220px) !important;
    margin-left: 220px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    }
    }

@media (max-width: 900px) {
    .leave-balance-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
    }
    }

/* Main content stays inside page */
    .leave-balance-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 1px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    }

/* Table card cannot exceed available area */
    .leave-balance-table-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    }

/* Important: table wrapper */
    .leave-balance-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    }

/* Force table inside available width */
    .leave-balance-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    }

/* All columns remain inside table */
    .leave-balance-table th,
    .leave-balance-table td {
    min-width: 0 !important;
    max-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    }

/* Percentage widths total = 100% */
    .leave-balance-table th:nth-child(1),
    .leave-balance-table td:nth-child(1) {
    width: 19% !important;
    }

.leave-balance-table th:nth-child(2),
    .leave-balance-table td:nth-child(2) {
    width: 11% !important;
    }

.leave-balance-table th:nth-child(3),
    .leave-balance-table td:nth-child(3),
    .leave-balance-table th:nth-child(4),
    .leave-balance-table td:nth-child(4),
    .leave-balance-table th:nth-child(5),
    .leave-balance-table td:nth-child(5) {
    width: 16% !important;
    }

.leave-balance-table th:nth-child(6),
    .leave-balance-table td:nth-child(6) {
    width: 9% !important;
    }

.leave-balance-table th:nth-child(7),
    .leave-balance-table td:nth-child(7) {
    width: 13% !important;
    }

/* Internal balance boxes stay inside their cells */
    .leave-balance-group,
    .leave-balance-group > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    }

/* ============================================================
    LEAVE HISTORY — CLEAN FULL-WIDTH STYLESHEET
    Replace the old Leave History CSS completely with this file.
============================================================ */
#leaveHistoryPage,
.leave-history-page {
/* Desktop sidebar is 252px wide */
    width: calc(100% - 220px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(100vh - 74px);
    margin: 0 0 0 220px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: var(--background, transparent);
}

.leave-history-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 28px 30px 50px !important;
    box-sizing: border-box !important;
}

.leave-history-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 28px !important;
    padding: 0;
    box-sizing: border-box;
}

.leave-history-title-row {
    flex: 1;
    min-width: 0;
    display: block;
}

.leave-history-icon {
    display: none !important;
}

.leave-history-eyebrow {
    margin: 0 0 14px !important;
    color: #ff6b1a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
}

.leave-history-heading-content h1,
.leave-history-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #2b3b50 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.4px !important;
}

.leave-history-heading-content p,
.leave-history-header p {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: #617085 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

.leave-history-date {
    flex: 0 0 auto;
    min-width: 160px;
    margin: 0;
    padding: 10px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid #d9dee6;
    border-radius: 15px;
    color: #526174;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(15,23,42,.06);
}

/* ---------- TABLE CARD ---------- */
.leave-history-table-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(15,23,42,.05);
}

.leave-history-table-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: auto;
}

.leave-history-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    border-collapse: collapse;
    table-layout: fixed !important;
}

/* ---------- COLUMN WIDTHS — EXACT 100% ---------- */
.leave-history-table th:nth-child(1),
.leave-history-table td:nth-child(1) { width: 15% !important; }

.leave-history-table th:nth-child(2),
.leave-history-table td:nth-child(2) { width: 16% !important; }

.leave-history-table th:nth-child(3),
.leave-history-table td:nth-child(3) { width: 15% !important; }

.leave-history-table th:nth-child(4),
.leave-history-table td:nth-child(4) { width: 15% !important; }

.leave-history-table th:nth-child(5),
.leave-history-table td:nth-child(5) { width: 15% !important; }

.leave-history-table th:nth-child(6),
.leave-history-table td:nth-child(6) { width: 8% !important; }

.leave-history-table th:nth-child(7),
.leave-history-table td:nth-child(7) { width: 16% !important; }

/* ---------- TABLE HEADER ---------- */
.leave-history-table thead {
    background: linear-gradient(180deg, #ff852f 0%, #ff7419 100%);
}

.leave-history-table th {
    height: 45px;
    padding: 10px 16px !important;
    box-sizing: border-box;
    color: #fff;
    text-align: left;
    font-size: 11px !important;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

/* ---------- TABLE BODY ---------- */
.leave-history-table tbody tr {
    height: 49px;
    background: #fff;
    border-bottom: 1px solid #e8edf2;
}

.leave-history-table tbody tr:last-child {
    border-bottom: none;
}

.leave-history-table tbody tr:hover {
    background: #fffaf5;
}

.leave-history-table td {
    height: 49px;
    padding: 9px 16px !important;
    box-sizing: border-box;
    color: #27364a;
    text-align: left;
    vertical-align: middle;
    font-size: 11px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leave-history-table td:first-child,
.leave-history-employee {
    color: #243246;
    font-size: 12px !important;
    font-weight: 800;
}

.leave-history-table th:nth-child(6),
.leave-history-table td:nth-child(6),
.leave-history-days {
    text-align: center;
    font-size: 12px !important;
    font-weight: 800;
}

.leave-history-table th:nth-child(7),
.leave-history-table td:nth-child(7) {
    text-align: center;
}

/* ---------- STATUS ---------- */
.leave-history-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 5px 12px;
    border-radius: 999px;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 800;
    text-transform: lowercase;
}

.leave-history-status.approved {
    background: #e3f5eb;
    border: 1px solid #a8dfc0;
    color: #237044;
}

.leave-history-status.pending {
    background: #fff7df;
    border: 1px solid #f1d28b;
    color: #9b6518;
}

.leave-history-status.rejected {
    background: #fee9e9;
    border: 1px solid #f3b7b7;
    color: #c43b3b;
}

.leave-history-status.cancelled,
.leave-history-status.canceled {
    background: #edf0f4;
    border: 1px solid #d7dde5;
    color: #64748b;
}

/* ---------- STATES ---------- */
.leave-history-loading,
.leave-history-empty,
.leave-history-error {
    padding: 55px 20px !important;
    text-align: center !important;
    color: #718096 !important;
    font-size: 14px !important;
    white-space: normal !important;
}

.leave-history-error {
    color: #dc2626 !important;
}

/* ---------- PAGINATION ---------- */
.leave-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 20px;
    border-top: 1px solid #e8edf2;
    background: #fff;
}

.leave-history-pagination:empty {
    display: none;
}

.leave-history-page-button {
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ed;
    background: #fff;
    border-radius: 8px;
    color: #526174;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.leave-history-page-button:hover:not(:disabled) {
    border-color: #f97316;
    color: #f97316;
    background: #fff7ed;
}

.leave-history-page-button.active {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

.leave-history-page-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------- SIDEBAR FOCUS ---------- */
.sidebar-button,
.sidebar-button:focus,
.sidebar-button:focus-visible,
.sidebar-button:active,
.sidebar-button.active {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
    .leave-history-shell {
    padding: 26px 24px 45px !important;
    }
}

@media (max-width: 900px) {
    #leaveHistoryPage,
    .leave-history-page {
    width: 100% !important;
    min-height: auto;
    margin-left: 0 !important;
    }

.leave-history-shell {
    padding: 22px 18px 40px !important;
    }

.leave-history-header {
    flex-direction: column;
    gap: 16px;
    }

.leave-history-date {
    align-self: flex-start;
    }

.leave-history-table-wrap {
    overflow-x: auto;
    }

.leave-history-table {
    min-width: 760px !important;
    }
}

@media (max-width: 600px) {
    .leave-history-shell {
    padding: 20px 14px 35px !important;
    }

.leave-history-heading-content h1,
    .leave-history-header h1 {
    font-size: 24px !important;
    }
}

/* ============================================================
    DEPARTMENT-WISE ANALYTICS
    MATCH LEAVE HISTORY CONTENT SPACING
============================================================ */
.department-analytics-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.department-analytics-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 34px 30px 50px 1px !important;
    box-sizing: border-box !important;
}

.department-analytics-header {
    margin: 0 0 28px !important;
}

.department-analytics-eyebrow {
    margin: 0 0 14px !important;
    color: #ff6b1a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
}

.department-analytics-header h1 {
    margin: 0 !important;
    color: #2b3b50 !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.department-analytics-header p {
    margin: 10px 0 0 !important;
    color: #617085 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.department-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

.department-analytics-card {
    background: #ffffff !important;
    border: 1px solid #f1c28d !important;
    border-radius: 20px !important;
    padding: 24px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

.department-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
}

.department-card-top h2 {
    margin: 0 0 6px !important;
    color: #2b3b50 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.department-card-top > div:first-child > span {
    color: #718096 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.department-on-leave {
    white-space: nowrap !important;
    color: #617085 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.department-on-leave strong {
    color: #f35f0a !important;
    font-weight: 800 !important;
}

.department-status-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.department-status {
    min-height: 78px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fffaf4 !important;
    border: 1px solid #f1d2ae !important;
    border-radius: 15px !important;
}

.department-status strong {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.department-status span {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.department-status.approved strong { color: #14804a !important; }

.department-status.pending strong { color: #e56610 !important; }

.department-status.rejected strong { color: #d42b2b !important; }

.department-leave-bars {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.department-leave-row { width: 100% !important; }

.department-leave-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-bottom: 6px !important;
}

.department-leave-label span {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.department-leave-label strong {
    color: #e56610 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.department-progress-track {
    width: 100% !important;
    height: 10px !important;
    overflow: hidden !important;
    background: #f3e8d9 !important;
    border-radius: 999px !important;
}

.department-progress-fill {
    height: 100% !important;
    min-width: 0 !important;
    background: #ff6714 !important;
    border-radius: inherit !important;
    transition: width 0.35s ease !important;
}

.department-analytics-loading,
.department-analytics-empty,
.department-analytics-error {
    grid-column: 1 / -1 !important;
    padding: 70px 20px !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #f1d2ae !important;
    border-radius: 18px !important;
    color: #718096 !important;
    font-size: 14px !important;
}

.department-analytics-error {
    color: #dc2626 !important;
}

@media (min-width: 1101px) {
    .department-analytics-page {
    width: calc(100vw - 245px) !important;
    max-width: calc(100vw - 245px) !important;
    margin-left: 245px !important;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .department-analytics-page {
    width: calc(100vw - 220px) !important;
    max-width: calc(100vw - 220px) !important;
    margin-left: 220px !important;
    }
}

@media (max-width: 900px) {
    .department-analytics-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    }

.department-analytics-shell {
    padding: 28px 20px 40px !important;
    }

.department-analytics-grid {
    grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .department-analytics-shell {
    padding: 20px 14px 35px !important;
    }

.department-card-top {
    flex-direction: column !important;
    gap: 10px !important;
    }

.department-on-leave {
    white-space: normal !important;
    }

.department-status-grid {
    gap: 8px !important;
    }

.department-analytics-card {
    padding: 18px !important;
    }

.department-analytics-header h1 {
    font-size: 24px !important;
    }
}

/* ============================================================
    DEPARTMENT ANALYTICS — COMPACT CARD OVERRIDE
============================================================ */
.department-analytics-grid {
    gap: 18px !important;
}

.department-analytics-card {
    padding: 16px 18px !important;
    border-radius: 17px !important;
}

.department-card-top {
    margin-bottom: 14px !important;
    gap: 14px !important;
}

.department-card-top h2 {
    margin-bottom: 3px !important;
    font-size: 16px !important;
}

.department-card-top > div:first-child > span {
    font-size: 10px !important;
}

.department-on-leave {
    font-size: 11px !important;
}

.department-status-grid {
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.department-status {
    min-height: 62px !important;
    border-radius: 13px !important;
}

.department-status strong {
    margin-bottom: 4px !important;
    font-size: 18px !important;
}

.department-status span {
    font-size: 11px !important;
}

.department-leave-bars {
    gap: 9px !important;
}

.department-leave-label {
    margin-bottom: 4px !important;
}

.department-leave-label span {
    font-size: 12px !important;
}

.department-leave-label strong {
    font-size: 11px !important;
}

.department-progress-track {
    height: 8px !important;
}

/* ============================================================
    LEAVE DASHBOARD — DEPARTMENT SNAPSHOT
    CURRENT MONTH APPROVED ACTIVITY
============================================================ */
#leaveDepartmentSnapshot {
    padding: 0 12px 10px;
}

.leave-department-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 2.7fr) 74px 60px;
    align-items: center;
    gap: 18px;
    min-height: 74px;
    padding: 0 12px;
    border-bottom: 1px solid #e4e8ee;
}

.leave-department-row:last-child {
    border-bottom: 0;
}

.leave-department-name {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.leave-department-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    background: #e8edf3;
    border-radius: 999px;
}

.leave-department-progress span {
    display: block;
    width: 0;
    height: 100%;
    min-width: 0;
    background: #ff6714;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.leave-department-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.leave-department-stat strong {
    color: #243447;
    font-size: 17px;
    font-weight: 800;
}

.leave-department-stat span {
    margin-top: 5px;
    color: #718096;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

@media (max-width: 760px) {
    .leave-department-row {
    grid-template-columns: minmax(100px, 1fr) minmax(90px, 1.5fr) 58px 52px;
    gap: 10px;
    min-height: 64px;
    padding: 0 6px;
    }

.leave-department-name {
    font-size: 12px;
    }

.leave-department-stat strong {
    font-size: 14px;
    }

.leave-department-stat span {
    font-size: 8px;
    }
}

/* ============================================================
    DEPARTMENT SNAPSHOT — FIX OVERFLOW / CUTTING
============================================================ */
#leaveDepartmentSnapshot {
    width: 100%;
    max-width: 100%;
    padding: 0 28px 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.leave-department-row {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns:
    minmax(130px, 1.1fr)
    minmax(120px, 2fr)
    minmax(65px, 0.45fr)
    minmax(55px, 0.4fr);
    align-items: center;
    column-gap: 18px;
    min-height: 74px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom:
    1px solid #e4e8ee;
}

.leave-department-row:last-child {
    border-bottom: none;
}

.leave-department-name {
    min-width: 0;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leave-department-progress {
    width: 100%;
    min-width: 0;
    height: 7px;
    overflow: hidden;
    background: #e8edf3;
    border-radius: 999px;
}

.leave-department-progress span {
    display: block;
    height: 100%;
    background: #ff6714;
    border-radius: inherit;
}

.leave-department-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.leave-department-stat strong {
    color: #243447;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.leave-department-stat span {
    display: block;
    margin-top: 5px;
    color: #718096;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    #leaveDepartmentSnapshot {
    padding-left: 18px;
    padding-right: 18px;
    }

.leave-department-row {
    grid-template-columns:
    minmax(110px, 1.1fr)
    minmax(100px, 1.8fr)
    65px
    55px;
    column-gap: 12px;
    }
}

@media (max-width: 700px) {
    #leaveDepartmentSnapshot {
    padding-left: 12px;
    padding-right: 12px;
    }

.leave-department-row {
    grid-template-columns:
    minmax(85px, 1fr)
    minmax(70px, 1.3fr)
    55px
    48px;
    column-gap: 8px;
    min-height: 64px;
    padding: 0 4px;
    }

.leave-department-name {
    font-size: 12px;
    }

.leave-department-stat strong {
    font-size: 14px;
    }

.leave-department-stat span {
    font-size: 7px;
    }
}

/* ============================================================
    ATTENDANCE MODULE
============================================================ */
.attendance-page{width:100%;min-height:calc(100vh - 72px);background:#f7f9fc;overflow:auto}

.attendance-shell{width:100%;max-width:1600px;margin:0 auto;padding:28px}

.attendance-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}

.attendance-eyebrow{display:block;color:#ff6b1a;font-size:11px;font-weight:800;letter-spacing:1.4px;margin-bottom:5px}

.attendance-page-header h1{margin:0;color:#172235;font-size:30px;font-weight:800;letter-spacing:-.4px}

.attendance-page-header p{margin:6px 0 0;color:#64748b;font-size:14px}

.attendance-date-chip,.attendance-date-plain{padding:12px 18px;border:1px solid #dfe5ec;border-radius:10px;background:#fff;color:#475569;font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(15,23,42,.04);white-space:nowrap}

.attendance-highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}

.attendance-highlight-card{position:relative;overflow:hidden;min-height:126px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#ff6415,#ff8a3d);color:#fff;box-shadow:0 9px 22px rgba(255,100,21,.18)}

.attendance-highlight-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-25px;top:-35px;border:1px solid rgba(255,255,255,.2)}

.attendance-highlight-card span{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;opacity:.92}

.attendance-highlight-card strong{display:block;font-size:29px;margin:10px 0 4px}

.attendance-highlight-card small{font-size:11px;opacity:.92}

.attendance-main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px;margin-bottom:16px}

.attendance-side-stack{display:grid;gap:16px}

.attendance-panel,.attendance-table-card,.attendance-register-card{background:#fff;border:1px solid #dfe5ec;border-radius:15px;box-shadow:0 3px 10px rgba(15,23,42,.045)}

.attendance-panel{padding:18px}

.attendance-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

.attendance-panel-title h2{margin:0;color:#1e293b;font-size:16px;font-weight:800}

.attendance-panel-title span{font-size:10px;color:#b85b24;background:#fff6ee;padding:6px 10px;border-radius:999px;font-weight:700}

.attendance-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.attendance-mini-grid>div,.attendance-insights-grid>div{min-height:78px;border:1px solid #e5e9ef;border-top:3px solid #ff6b1a;border-radius:12px;background:#fff;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center}

.attendance-mini-grid strong{font-size:22px;color:#ef661f}

.attendance-mini-grid span{margin-top:5px;color:#64748b;font-size:11px;text-align:center;font-weight:600}

.attendance-rate-panel{min-height:166px}

.attendance-rate{display:block;color:#ef661f;font-size:44px;line-height:1;margin-bottom:6px}

.attendance-rate-panel p{color:#64748b;font-size:12px;max-width:270px;margin:0 0 20px}

.attendance-progress{height:8px;background:#edf0f3;border-radius:999px;overflow:hidden}

.attendance-progress i{display:block;height:100%;background:#ff6b1a;border-radius:inherit}

.attendance-performers-panel{min-height:190px}

.attendance-empty-small,.attendance-empty-cell{display:flex;align-items:center;justify-content:center;min-height:90px;color:#94a3b8;font-size:13px;text-align:center}

.attendance-insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.attendance-insights-grid>div{align-items:flex-start}

.attendance-insights-grid span{font-size:11px;color:#64748b;font-weight:700}

.attendance-insights-grid strong{font-size:21px;color:#ef661f;margin-top:8px}

.attendance-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(4,minmax(130px,1fr)) auto;gap:12px;padding:20px;margin-bottom:20px;background:#fff;border:1px solid #dfe5ec;border-radius:15px;box-shadow:0 3px 10px rgba(15,23,42,.04)}

.attendance-filters input,.attendance-filters select{width:100%;height:45px;border:1px solid #d9e0e8;border-radius:10px;padding:0 14px;background:#fff;color:#475569;font-size:13px;outline:none}

.attendance-filters input:focus,.attendance-filters select:focus{border-color:#ff6b1a}

.attendance-filters button,.attendance-month-nav button{border:1px solid #f2c39f;background:#fff;color:#334155;border-radius:10px;font-weight:700;cursor:pointer}

.attendance-filters button{height:45px;padding:0 18px}

.attendance-table-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #e6eaf0}

.attendance-table-heading h2{margin:0;font-size:17px;color:#1e293b}

.attendance-month-nav{display:flex;align-items:center;gap:12px}

.attendance-month-nav button{width:40px;height:40px;font-size:18px}

.attendance-month-nav strong{min-width:110px;text-align:center;color:#334155;font-size:14px}

.attendance-table-wrap,.attendance-register-wrap{overflow:auto}

.attendance-table,.attendance-register-table{width:100%;border-collapse:collapse;min-width:1000px}

.attendance-table th{background:#ff6b1a;color:#fff;padding:14px 16px;text-align:left;font-size:12px;white-space:nowrap}

.attendance-table td{padding:17px 16px;border-bottom:1px solid #e7ebf0;color:#475569;font-size:13px}

.attendance-table tr:last-child td{border-bottom:0}

.attendance-empty-cell{padding:45px!important;background:#fff!important;color:#94a3b8!important}

.attendance-register-card{border-radius:15px;overflow:hidden}

.attendance-register-table{min-width:max-content}

.attendance-register-table th,.attendance-register-table td{border:1px solid #e5e9ef;text-align:center}

.attendance-register-table th{background:#ff6b1a;color:#fff;padding:16px 12px;font-size:12px;white-space:nowrap}

.attendance-register-table th.attendance-weekend{background:#c95010}

.attendance-register-table td{padding:15px 10px;color:#64748b;font-size:12px;min-width:78px}

.attendance-register-table th:nth-child(2){left:170px;min-width:100px}

.attendance-register-table th:nth-child(3){left:270px;min-width:100px}

.attendance-register-table th:nth-child(4){left:370px;min-width:85px}

@media(max-width:1200px){.attendance-main-grid{grid-template-columns:1fr}

.attendance-highlight-grid{grid-template-columns:1fr 1fr}

.attendance-filters{grid-template-columns:repeat(3,minmax(0,1fr))}

.attendance-filters input:first-child{grid-column:span 3}}

@media(max-width:800px){.attendance-shell{padding:20px}

.attendance-page-header{flex-direction:column}

.attendance-highlight-grid,.attendance-mini-grid,.attendance-insights-grid{grid-template-columns:1fr}

.attendance-filters{grid-template-columns:1fr 1fr}

.attendance-filters input:first-child{grid-column:span 2}}

@media(max-width:520px){.attendance-shell{padding:15px}

.attendance-page-header h1{font-size:24px}

.attendance-filters{grid-template-columns:1fr}

.attendance-filters input:first-child{grid-column:auto}

.attendance-table-heading,.attendance-monthly-header{align-items:flex-start;flex-direction:column}

.attendance-month-nav strong{min-width:90px}}

/* ============================================================
    ATTENDANCE — FINAL CONTENT AREA & COMPACT SIZE FIX
    ============================================================ */
/* Desktop: Attendance content must start after sidebar */
@media (min-width: 1101px) {
    .attendance-page {
    width: calc(100vw - 218px) !important;
    max-width: calc(100vw - 218px) !important;
    margin-left: 218px !important;
    margin-right: 0 !important;
    min-height: calc(100vh - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    }

.attendance-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 26px 32px !important;
    box-sizing: border-box !important;
    }
}

/* Medium screens */
@media (min-width: 901px) and (max-width: 1100px) {
    .attendance-page {
    width: calc(100vw - 200px) !important;
    max-width: calc(100vw - 200px) !important;
    margin-left: 200px !important;
    min-height: calc(100vh - 72px) !important;
    overflow-x: hidden !important;
    }

.attendance-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 22px 28px !important;
    box-sizing: border-box !important;
    }
}

/* ============================================================
    ATTENDANCE — COMPACT CONTENT
    ============================================================ */
.attendance-page-header,
.attendance-monthly-heading {
    margin-bottom: 18px !important;
}

.attendance-page-header h1,
.attendance-monthly-heading h1 {
    font-size: 25px !important;
}

.attendance-page-header p {
    font-size: 12px !important;
}

/* Top orange cards */
.attendance-hero-grid {
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.attendance-hero-card {
    min-height: 104px !important;
    padding: 17px 20px !important;
    border-radius: 16px !important;
}

.attendance-hero-label {
    font-size: 11px !important;
}

.attendance-hero-card strong {
    font-size: 25px !important;
    margin: 7px 0 4px !important;
}

.attendance-hero-card small {
    font-size: 10px !important;
}

/* Dashboard layout */
.attendance-dashboard-grid {
    gap: 14px !important;
}

.attendance-left-column,
.attendance-right-column {
    gap: 14px !important;
}

.attendance-panel {
    padding: 15px !important;
    border-radius: 14px !important;
}

.attendance-panel-title-row {
    margin-bottom: 12px !important;
}

.attendance-panel-title-row h2,
.attendance-table-header h2 {
    font-size: 15px !important;
}

/* Attendance overview cards */
.attendance-overview-grid,
.attendance-insights-grid {
    gap: 8px !important;
}

.attendance-overview-grid > div,
.attendance-insights-grid > div {
    min-height: 68px !important;
    padding: 8px !important;
    border-radius: 11px !important;
}

.attendance-overview-grid strong {
    font-size: 20px !important;
}

.attendance-overview-grid span,
.attendance-insights-grid span {
    font-size: 10px !important;
}

.attendance-insights-grid strong {
    font-size: 17px !important;
}

.attendance-rate-value {
    font-size: 36px !important;
}

.attendance-rate-panel p {
    font-size: 10px !important;
    margin: 7px 0 11px !important;
}

.attendance-empty-card {
    padding: 20px 14px !important;
}

.attendance-panel-note {
    margin-top: 9px !important;
    padding: 8px !important;
    font-size: 9px !important;
}

/* ============================================================
    DAILY LOGS — COMPACT
    ============================================================ */
.attendance-filter-bar {
    grid-template-columns:
    minmax(180px, 1.5fr)
    150px
    140px
    150px
    150px
    80px !important;
    gap: 9px !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
}

.attendance-filter-bar input,
.attendance-filter-bar select,
.attendance-filter-bar button {
    height: 40px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
}

/* Daily logs table */
.attendance-table-card {
    border-radius: 14px !important;
}

.attendance-table-header {
    padding: 14px 16px !important;
}

.attendance-month-nav {
    gap: 8px !important;
}

.attendance-month-nav button {
    width: 34px !important;
    height: 34px !important;
}

.attendance-month-nav strong {
    font-size: 12px !important;
    min-width: 100px !important;
}

.attendance-data-table {
    font-size: 11px !important;
}

.attendance-data-table th {
    padding: 11px 10px !important;
}

.attendance-data-table td {
    padding: 11px 10px !important;
}

.attendance-empty-row {
    padding: 26px !important;
}

/* ============================================================
    MONTHLY LOGS — COMPACT
    ============================================================ */
.attendance-register-card {
    border-radius: 14px !important;
}

.attendance-register-table th {
    padding: 12px 10px !important;
    font-size: 11px !important;
}

.attendance-month-nav.large button {
    width: 36px !important;
    height: 36px !important;
}

.attendance-month-nav.large strong {
    min-width: 110px !important;
    font-size: 12px !important;
}

@media (max-width: 900px) {
    .attendance-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    min-height: calc(100vh - 64px) !important;
    }

.attendance-shell {
    padding: 18px 16px 26px !important;
    }

.attendance-hero-grid {
    grid-template-columns: 1fr !important;
    }

.attendance-filter-bar {
    grid-template-columns: 1fr 1fr !important;
    }

.attendance-filter-bar input[type="search"] {
    grid-column: span 2 !important;
    }
}

@media (max-width: 560px) {
    .attendance-filter-bar {
    grid-template-columns: 1fr !important;
    }

.attendance-filter-bar input[type="search"] {
    grid-column: auto !important;
    }

.attendance-page-header h1,
    .attendance-monthly-heading h1 {
    font-size: 22px !important;
    }
}

/* ============================================================
    ATTENDANCE — EYEBROW + REMOVE HEADING ICONS
    ============================================================ */
/* Hide icon/span before Attendance page headings */
.attendance-page-header h1 span,
.attendance-monthly-heading h1 span {
    display: none !important;
}

/* Small orange ATTENDANCE label */
.attendance-page-header > div:first-child::before,
.attendance-monthly-heading > div:first-child::before {
    content: "ATTENDANCE";
    display: block;
    color: #ff6b1a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 10px;
}

/* ============================================================
    ATTENDANCE — FINAL HEADER FIX
    ============================================================ */
/* Remove heading icons */
.attendance-page-header h1 span,
.attendance-monthly-heading h1 span {
    display: none !important;
}

/* Small ATTENDANCE label */
.attendance-page-header > div:first-child::before,
.attendance-monthly-heading > div:first-child::before {
    content: "ATTENDANCE" !important;
    display: block !important;
    color: #ff6b1a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
}

/* One sentence under main heading */
.attendance-page-header > div:first-child::after,
.attendance-monthly-heading > div:first-child::after {
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
}

/* Daily Logs sentence */
#attendanceDailyLogsPage .attendance-page-header > div:first-child::after {
    content: "View and manage daily employee attendance records." !important;
}

/* Monthly Register sentence */
#attendanceMonthlyLogsPage .attendance-monthly-heading > div:first-child::after {
    content: "Review employee attendance and working hours for the month." !important;
}

/* ============================================================
    DAILY LOGS TABLE — FORCE VISIBLE
    ============================================================ */
#attendanceDailyLogsPage .attendance-table-card {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#attendanceDailyLogsPage .attendance-table-scroll {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
}

#attendanceDailyLogsPage .attendance-data-table {
    display: table !important;
    width: 100% !important;
    visibility: visible !important;
}

#attendanceDailyLogsPage .attendance-data-table thead {
    display: table-header-group !important;
}

#attendanceDailyLogsPage .attendance-data-table tbody {
    display: table-row-group !important;
}

#attendanceDailyLogsPage .attendance-data-table tr {
    display: table-row !important;
}

#attendanceDailyLogsPage .attendance-data-table th,
#attendanceDailyLogsPage .attendance-data-table td {
    display: table-cell !important;
}

.attendance-register-table{
    border-collapse:separate;
    border-spacing:0;
    min-width:max-content;
}

.attendance-register-table th,
.attendance-register-table td{
    white-space:nowrap;
    vertical-align:middle;
}

.attendance-register-table .attendance-day-label{
    font-size:10px;
    font-weight:700;
    opacity:.62;
    margin-bottom:4px;
}

.attendance-register-table .attendance-month-time-row td{
    border-top:1px dashed rgba(100,116,139,.25);
}

.attendance-month-emp-id{
    display:block;
    margin-top:4px;
    font-size:10px;
    opacity:.65;
    font-weight:600;
}

.attendance-register-table .attendance-weekend{
    background:rgba(255,122,26,.09)!important;
}

.attendance-register-table thead .attendance-weekend{
    background:#e05a00!important;
}

.attendance-register-table thead th{
    position:sticky;
    top:0;
    z-index:5;
}

/* ============================================================
    ATTENDANCE MONTHLY REGISTER — FINAL FROZEN 5 COLUMNS
    Employee | Dept | Shift | TWH | TBH stay fixed while dates scroll
============================================================ */
.attendance-register-card{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:18px !important;
    box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
}

.attendance-register-scroll,
.attendance-register-wrap{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
    isolation:isolate !important;
}

.attendance-register-table{
    width:max-content !important;
    min-width:100% !important;
    table-layout:auto !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    background:#fff !important;
}

.attendance-register-table th,
.attendance-register-table td{
    box-sizing:border-box !important;
    white-space:nowrap !important;
    vertical-align:middle !important;
}

.attendance-register-table thead th{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    height:54px !important;
    padding:0 12px !important;
    background:#ff6b0b !important;
    color:#fff !important;
    border-right:1px solid rgba(255,255,255,.28) !important;
    border-bottom:1px solid rgba(255,255,255,.15) !important;
    text-align:center !important;
    font-size:12px !important;
    font-weight:800 !important;
}

.attendance-register-table thead th.attendance-weekend{
    background:#c95010 !important;
}

.attendance-register-table tbody td{
    height:54px !important;
    padding:10px 12px !important;
    background:#fff !important;
    color:#475569 !important;
    border-right:1px solid #e2e8f0 !important;
    border-bottom:1px solid #dbe3ec !important;
    text-align:center !important;
    font-size:12px !important;
    font-weight:600 !important;
}

.attendance-register-table tbody tr:nth-child(even) td{
    background:#fafcff !important;
}

.attendance-register-table tbody tr:hover td{
    background:#fffaf5 !important;
}

/* ============================================================
    MONTHLY LOGS — FINAL FIXED COLUMNS
    Columns 1–5 only: Employee | Dept | Shift | TWH | TBH
    ============================================================ */
.attendance-register-scroll,
.attendance-register-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

.attendance-register-table {
    --monthly-col-1: 185px;
    --monthly-col-2: 130px;
    --monthly-col-3: 205px;
    --monthly-col-4: 135px;
    --monthly-col-5: 135px;
    width: max-content !important;
    min-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.attendance-register-table .freeze-col {
    position: sticky !important;
    background-clip: padding-box !important;
}

.attendance-register-table .freeze-1 {
    left: 0 !important;
    width: var(--monthly-col-1) !important;
    min-width: var(--monthly-col-1) !important;
    max-width: var(--monthly-col-1) !important;
    z-index: 200 !important;
}

.attendance-register-table .freeze-2 {
    left: var(--monthly-col-1) !important;
    width: var(--monthly-col-2) !important;
    min-width: var(--monthly-col-2) !important;
    max-width: var(--monthly-col-2) !important;
    z-index: 201 !important;
}

.attendance-register-table .freeze-3 {
    left: calc(var(--monthly-col-1) + var(--monthly-col-2)) !important;
    width: var(--monthly-col-3) !important;
    min-width: var(--monthly-col-3) !important;
    max-width: var(--monthly-col-3) !important;
    z-index: 202 !important;
}

.attendance-register-table .freeze-4 {
    left: calc(var(--monthly-col-1) + var(--monthly-col-2) + var(--monthly-col-3)) !important;
    width: var(--monthly-col-4) !important;
    min-width: var(--monthly-col-4) !important;
    max-width: var(--monthly-col-4) !important;
    z-index: 203 !important;
}

.attendance-register-table .freeze-5 {
    left: calc(var(--monthly-col-1) + var(--monthly-col-2) + var(--monthly-col-3) + var(--monthly-col-4)) !important;
    width: var(--monthly-col-5) !important;
    min-width: var(--monthly-col-5) !important;
    max-width: var(--monthly-col-5) !important;
    z-index: 204 !important;
    border-right: 2px solid #f2a55b !important;
}

.attendance-register-table tbody td.freeze-col {
    background: #ffffff !important;
}

.attendance-register-table tbody tr:nth-child(even) td.freeze-col {
    background: #fafcff !important;
}

.attendance-register-table tbody tr:hover td.freeze-col {
    background: #fff8ef !important;
}

.attendance-register-table thead th.freeze-col {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    background: #ff6b0b !important;
    color: #ffffff !important;
}

.attendance-register-table thead th.freeze-5 {
    box-shadow: 10px 0 20px rgba(15,23,42,.12) !important;
}

/* Only the first five Monthly Logs columns are fixed. All date cells scroll normally. */
.attendance-register-table .attendance-month-work-row > td:not(.freeze-col),
.attendance-register-table .attendance-month-time-row > td {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
}

@media (max-width: 800px) {
    .attendance-register-table {
    --monthly-col-1: 155px;
    --monthly-col-2: 100px;
    --monthly-col-3: 125px;
    --monthly-col-4: 85px;
    --monthly-col-5: 85px;
    }
}

/* ============================================================
    MONTHLY LOGS — COMPACT COLUMN SIZES (30% SMALLER)
    Final override: all Monthly Logs columns are reduced to 70%
    of their previous widths. Frozen columns 1–5 remain aligned.
============================================================ */
.attendance-register-table{
    --monthly-col-1: 108.5px !important; /* 155 × 70% */
    --monthly-col-2: 70px !important;    /* 100 × 70% */
    --monthly-col-3: 87.5px !important;  /* 125 × 70% */
    --monthly-col-4: 59.5px !important;  /* 85 × 70% */
    --monthly-col-5: 59.5px !important;
}

/* Compact all Monthly Logs date/data columns */
.attendance-register-table .attendance-month-work-row > td:not(.freeze-col),
.attendance-register-table .attendance-month-time-row > td,
.attendance-register-table thead th:not(.freeze-col){
    width: 70% !important;
}

/* Keep frozen column 5 directly after column 4 */
.attendance-register-table .freeze-5{
    left: 325.5px !important;
}

/* ============================================================
    MONTHLY LOGS — FINAL COMPACT LAYOUT REFINEMENTS
============================================================ */
/* Employee column: allow text wrapping */
.attendance-register-table .freeze-1{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}

/* Shift column: wrap naturally into multiple lines */
.attendance-register-table .freeze-3{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}

/* Date columns: 15% smaller than current compact size + 10% smaller font */
.attendance-register-table .attendance-month-work-row > td:not(.freeze-col),
.attendance-register-table .attendance-month-time-row > td,
.attendance-register-table thead th:not(.freeze-col){
    width: 59.5% !important; /* current 70% × 85% */
    min-width: 59.5% !important;
    font-size: 90% !important;
}

/* Date/data cells specifically */
.attendance-register-table .attendance-month-work-row > td:not(.freeze-col),
.attendance-register-table .attendance-month-time-row > td{
    font-size: 90% !important;
    padding-top: 4.5px !important;
    padding-bottom: 4.5px !important;
}

/* All body rows only — 10% more compact. Header remains unchanged */
.attendance-register-table tbody tr{
    height: auto !important;
}

.attendance-register-table tbody td{
    padding-top: 90% !important;
    padding-bottom: 90% !important;
}

/* Replace percentage padding above with stable compact spacing */
.attendance-register-table tbody td{
    padding-top: 4.5px !important;
    padding-bottom: 4.5px !important;
    line-height: 1.1 !important;
}

/* ============================================================
    MONTHLY LOGS — SHIFT FORMAT + EXTRA COMPACT REFINEMENT
============================================================ */
/* Shift display:
    Shift Start Time
    to
    Shift End Time */
.attendance-register-table .freeze-3 .shift-time,
.attendance-register-table .freeze-3{
    white-space: pre-line !important;
    line-height: 1.15 !important;
}

/* Date columns: slightly narrower again */
.attendance-register-table .attendance-month-work-row > td:not(.freeze-col),
.attendance-register-table .attendance-month-time-row > td,
.attendance-register-table thead th:not(.freeze-col){
    width: 55% !important;
    min-width: 55% !important;
}

/* Body rows: only another ~5% more compact; header untouched */
.attendance-register-table tbody td{
    padding-top: 4.25px !important;
    padding-bottom: 4.25px !important;
    line-height: 1.05 !important;
}

/* ============================================================
    MONTHLY LOGS — SHIFT THREE-LINE FORMAT
    Example:
    05:00 PM
    to
    04:00 AM
============================================================ */
.attendance-register-table .freeze-3{
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.12 !important;
}

/* Monthly Logs — Department text wrapping */
.attendance-register-table .freeze-2{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.15 !important;
}

/* Monthly Logs — Department column 5% wider */
.attendance-register-table{
    --monthly-col-2: 73.5px !important; /* 70px + 5% */
}

.attendance-register-table .freeze-2{
    width: 80.5px !important;
    min-width: 80.5px !important;
    max-width: 80.5px !important;
}

/* =========================================================
    TOP PERFORMERS — COMPACT CARD STYLE OVERRIDE
    Paste this at the END of your CSS file
========================================================= */
/* Main Top Performers Container */
.top-performers-card,
.top-performers,
.top-performer-card {
    padding: 16px !important;
    border-radius: 20px !important;
}

/* Header */
.top-performers-card .card-title,
.top-performers .card-title,
.top-performer-card .card-title,
.top-performers-card h2,
.top-performers h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
}

/* Trophy icon */
.top-performers-card .title-icon,
.top-performers .title-icon,
.top-performer-card .title-icon {
    font-size: 17px !important;
}

/* Remove old ranking/list style box */
.top-performers-list,
.performers-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Individual Performer Card */
.performer-item,
.top-performer-item,
.performer-row {
    width: 100% !important;
    min-height: 74px !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #dfe5eb !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* Left side information */
.performer-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

/* Employee Name */
.performer-name,
.performer-info strong,
.performer-info h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #26384a !important;
}

.performer-department,
.performer-info .department {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: #52677a !important;
}

/* Total Work */
.performer-hours,
.performer-info .hours,
.performer-info small {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #718196 !important;
}

/* Active Badge */
.performer-status,
.status-badge,
.active-badge {
    padding: 6px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1f8a58 !important;
    background: #f0faf4 !important;
    border: 1px solid #b9e5cb !important;
    white-space: nowrap !important;
}

/* Bottom Description */
.top-performers-footer,
.performers-footer,
.top-performers-note {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    min-height: auto !important;
    border-radius: 13px !important;
    background: #fdf8f1 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.4px !important;
    font-weight: 600 !important;
    color: #8a5d3b !important;
}

/* Make everything slightly more compact */
.top-performers-card *,
.top-performers *,
.top-performer-card * {
    box-sizing: border-box;
}

/* ============================================================
    TOP PERFORMERS — EXACT IMAGE 2 STYLE
    ============================================================ */
/* MAIN CARD */
.attendance-performers-panel {
    padding: 14px 18px 18px !important;
    min-height: auto !important;
    background: #ffffff !important;
    border: 1px solid #d9e0e7 !important;
    border-radius: 18px !important;
}

/* HEADER */
.attendance-performers-panel .attendance-panel-title-row {
    margin-bottom: 14px !important;
}

.attendance-performers-panel .attendance-panel-title-row h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #26384a !important;
    line-height: 1.2 !important;
}

/* PERFORMERS HOLDER */
#attendanceTopPerformers {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
}

/* INDIVIDUAL EMPLOYEE CARD */
#attendanceTopPerformers .attendance-performer-item {
    width: 100% !important;
    min-height: 74px !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f7f8fa !important;
    border: 1px solid #e0e5eb !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* LEFT INFORMATION AREA */
#attendanceTopPerformers .attendance-performer-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0 !important;
}

/* EMPLOYEE NAME */
#attendanceTopPerformers .attendance-performer-info strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    color: #26384a !important;
}

/* DEPARTMENT */
#attendanceTopPerformers .attendance-performer-department {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 15px !important;
    color: #586b7e !important;
}

/* TOTAL WORK */
#attendanceTopPerformers .attendance-performer-info small {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 15px !important;
    color: #718096 !important;
}

/* ACTIVE BADGE */
#attendanceTopPerformers .attendance-performer-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-width: 53px !important;
    height: 29px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #238052 !important;
    background: #eff9f3 !important;
    border: 1px solid #b7e1c7 !important;
}

/* BOTTOM NOTE */
.attendance-performers-panel .attendance-panel-note {
    margin-top: 12px !important;
    padding: 11px 14px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    background: #fcf7f0 !important;
    border-radius: 13px !important;
    color: #8b5939 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1px !important;
}

/* REMOVE ANY OLD RANK STYLING */
#attendanceTopPerformers .attendance-performer-item > span:first-child:not(.attendance-performer-status) {
    display: none !important;
}

/* MOBILE */
@media (max-width: 600px) {
    .attendance-performers-panel {
    padding: 13px !important;
    }

.attendance-performers-panel .attendance-panel-title-row h2 {
    font-size: 16px !important;
    }

#attendanceTopPerformers .attendance-performer-item {
    min-height: 70px !important;
    padding: 10px 12px !important;
    }
}

/* ============================================================
    TOP PERFORMERS — 30% SMALLER / COMPACT VERSION
    PASTE AT END OF CSS
============================================================ */
/* MAIN PANEL */
.attendance-performers-panel {
    padding: 10px 13px 13px !important;
    border-radius: 13px !important;
    min-height: auto !important;
}

.attendance-performers-panel .attendance-panel-title-row {
    margin-bottom: 10px !important;
}

.attendance-performers-panel .attendance-panel-title-row h2 {
    font-size: 17px !important;
    line-height: 1.2 !important;
}

/* TOP PERFORMERS HOLDER */
#attendanceTopPerformers {
    gap: 5px !important;
}

/* INDIVIDUAL CARD */
#attendanceTopPerformers .attendance-performer-item {
    min-height: 30px !important;
    padding: 10px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
}

/* LEFT INFO */
#attendanceTopPerformers .attendance-performer-info {
    gap: 1px !important;
}

#attendanceTopPerformers .attendance-performer-info strong {
    font-size: 12px !important;
    line-height: 13px !important;
}

#attendanceTopPerformers .attendance-performer-department {
    font-size: 9px !important;
    line-height: 15px !important;
}

#attendanceTopPerformers .attendance-performer-info small {
    font-size: 11px !important;
    line-height: 15px !important;
}

#attendanceTopPerformers .attendance-performer-status {
    min-width: 38px !important;
    height: 21px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

.attendance-performers-panel .attendance-panel-note {
    margin-top: 10px !important;
    padding: 4px 10px !important;
    min-height: 15px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* ============================================================
    ATTENDANCE SUMMARY POPUP
============================================================ */
.attendance-overview-clickable {
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.attendance-overview-clickable:hover {
    transform: translateY(-2px);
}

.attendance-summary-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(31, 41, 55, .58);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.attendance-summary-popup.active {
    display: flex !important;
}

.attendance-summary-dialog {
    width: min(1145px, 92vw);
    max-height: min(76vh, 620px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .34);
    animation: attendancePopupIn .22s ease-out;
}

@keyframes attendancePopupIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }

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

.attendance-summary-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 32px;
    border-bottom: 1px solid #e7ebf0;
    background: linear-gradient(90deg, #fff 0%, #fffaf5 100%);
}

.attendance-summary-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.attendance-summary-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: linear-gradient(135deg, #ff6b1a, #ff974f);
    color: #fff;
    font-size: 27px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(249,115,22,.23);
}

.attendance-summary-icon.present { color: #35d59d; font-size: 38px; }

.attendance-summary-icon.leave { font-size: 26px; }

.attendance-summary-icon.absent { color: #fff; font-size: 38px; }

.attendance-summary-icon.shift { font-size: 30px; }

.attendance-summary-title h2 {
    margin: 0 !important;
    color: #263449;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .1px;
}

.attendance-summary-title p {
    margin: 5px 0 0 !important;
    color: #64748b;
    font-size: 13px;
}

.attendance-summary-close {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #526174;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}

.attendance-summary-close:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: rotate(90deg);
}

.attendance-summary-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 20px 32px 28px;
}

.attendance-summary-total {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 18px;
    margin-bottom: 18px;
    border: 1px solid #fed7aa;
    border-radius: 17px;
    background: #fffaf4;
}

.attendance-summary-total > span:first-child {
    color: #8a4b2b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
}

.attendance-summary-total-count {
    min-width: 40px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #ff7625;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.attendance-summary-table-scroll {
    max-height: 390px;
    overflow: auto;
    border: 1px solid #dce3eb;
    border-radius: 18px;
    scrollbar-width: thin;
}

.attendance-summary-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}

.attendance-summary-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.attendance-summary-table th {
    padding: 16px 18px;
    background: #f7f9fc;
    border-bottom: 1px solid #dce3eb;
    color: #64748b;
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
    white-space: nowrap;
}

.attendance-summary-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #edf1f5;
    color: #475569;
    font-size: 13px;
    vertical-align: middle;
}

.attendance-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.attendance-summary-table tbody tr:hover {
    background: #fffaf6;
}

.attendance-popup-employee {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.attendance-popup-photo,
.attendance-popup-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
}

.attendance-popup-photo {
    display: block;
    object-fit: cover;
    background: #fff1e6;
    border: 1px solid #fed7aa;
}

.attendance-popup-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff6b1a, #ff974f);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.attendance-popup-name {
    color: #243247;
    font-size: 14px;
    font-weight: 750;
}

.attendance-popup-empty {
    padding: 55px 20px !important;
    text-align: center;
    color: #94a3b8 !important;
    font-size: 14px !important;
}

body.attendance-popup-open {
    overflow: hidden !important;
}

@media (max-width: 700px) {
    .attendance-summary-popup { padding: 12px; }

.attendance-summary-dialog {
    width: 100%;
    max-height: 88vh;
    border-radius: 20px;
    }

.attendance-summary-header { padding: 20px; }

.attendance-summary-body { padding: 15px; }

.attendance-summary-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
    font-size: 22px;
    }

.attendance-summary-title h2 { font-size: 20px !important; }

.attendance-summary-close {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    }

.attendance-summary-table-scroll { max-height: 55vh; }
}

/* ============================================================
    ATTENDANCE POPUP — FINAL SCROLL + IMAGE FIX
============================================================ */
.attendance-summary-popup {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.attendance-summary-dialog {
    height: min(76vh, 620px) !important;
    max-height: min(76vh, 620px) !important;
    overflow: hidden !important;
}

.attendance-summary-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.attendance-summary-total {
    flex: 0 0 auto !important;
}

.attendance-summary-table-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1px !important;
}

.attendance-summary-table {
    margin-bottom: 0 !important;
}

body.attendance-popup-open,
html:has(body.attendance-popup-open) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Do not let any app/page scroll container move while popup is open. */
body.attendance-popup-open .app-main,
body.attendance-popup-open .main-content,
body.attendance-popup-open .content,
body.attendance-popup-open .dashboard-main,
body.attendance-popup-open .page-content,
body.attendance-popup-open .dashboard-content {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* Exact Supabase employee photo rendering */
.attendance-popup-photo {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Mobile: give the employee list enough remaining height */
@media (max-width: 700px) {
    .attendance-summary-dialog {
    height: 88vh !important;
    max-height: 88vh !important;
    }
}

/* Popup keyboard focus should remain invisible */
.attendance-summary-table-scroll,
.attendance-summary-table-scroll:focus,
.attendance-summary-table-scroll:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: #dce3eb !important;
}

/* ============================================================
    LEAVE BALANCE + LEAVE HISTORY FILTERS
    ============================================================ */
    .leave-table-controls {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    }

.leave-table-search {
    flex: 1;
    min-width: 220px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 13px;
    }

.leave-table-search span {
    font-size: 19px;
    color: #9ca3af;
    line-height: 1;
    }

.leave-table-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #1f2937;
    }

.leave-table-search input::placeholder {
    color: #9ca3af;
    }

.leave-table-controls select {
    width: 190px;
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 12px;
    color: #374151;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    }

.leave-table-search:focus-within,
    .leave-table-controls select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10);
    }

@media (max-width: 900px) {
    .leave-table-controls {
    flex-wrap: wrap;
    }

.leave-table-search {
    width: 100%;
    flex-basis: 100%;
    }
    }

@media (max-width: 600px) {
    .leave-table-controls {
    flex-direction: column;
    align-items: stretch;
    }

.leave-table-search,
    .leave-table-controls select {
    width: 100%;
    }
    }

/* =====================================================
    EMPLOYEE ADD / EDIT ACTIONS
===================================================== */
.employees-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-employee-btn,
.edit-employee-btn,
.save-employee-btn,
.cancel-employee-btn {
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
}

.add-employee-btn,
.edit-employee-btn,
.save-employee-btn {
    background: var(--primary);
    color: #fff;
}

.add-employee-btn:hover,
.edit-employee-btn:hover,
.save-employee-btn:hover {
    transform: translateY(-1px);
}

.cancel-employee-btn {
    background: #eef1f3;
    color: #374151;
}

.employee-profile-actions {
    padding: 14px 12px 0;
}

.edit-employee-btn {
    width: 100%;
}

.employee-edit-actions {
    display: flex;
    gap: 8px;
}

.employee-edit-actions.hidden,
.employee-profile-actions .hidden {
    display: none !important;
}

.employee-edit-actions .cancel-employee-btn,
.employee-edit-actions .save-employee-btn {
    flex: 1;
    white-space: nowrap;
}

.employee-edit-field {
    gap: 7px;
}

.employee-edit-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #d9e0dd;
    border-radius: 8px;
    background: #fff;
    color: #17211d;
    font: inherit;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.employee-edit-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .10);
}

@media (max-width: 700px) {
    .employees-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    }

.employees-header-actions .add-employee-btn,
    .employees-header-actions .back-button {
    flex: 1 1 auto;
    }
}

/* =========================================================
    EMPLOYEE ADD / EDIT — PHOTO + FAMILY DEPENDENTS FIX
========================================================= */
#profileHeroPhoto.is-photo-editing {
    width: 150px;
    min-width: 150px;
    height: 150px;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profileHeroPhoto .employee-photo-editor {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profileHeroPhoto .employee-photo-preview {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#profileHeroPhoto .employee-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profileHeroPhoto .employee-photo-upload-btn {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    z-index: 50;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    padding: 7px 11px;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    background: #111827;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

#profileHeroPhoto .employee-photo-upload-btn:hover {
    opacity: .92;
}

.employee-photo-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.family-dependents-edit {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.family-dependents-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.family-dependents-edit-head > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.family-dependents-edit-head strong {
    font-size: 15px;
    color: #111827;
}

.family-dependents-edit-head span {
    font-size: 12px;
    color: #6b7280;
}

.add-dependent-btn {
    border: 0;
    border-radius: 8px;
    padding: 9px 13px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    background: #111827;
    color: #fff;
    white-space: nowrap;
}

.dependent-edit-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dependent-edit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.dependent-edit-row .profile-info-item {
    min-width: 0;
}

.dependent-edit-row .remove-dependent-btn {
    grid-column: 1 / -1;
    justify-self: start;
    border: 1px solid #fecaca;
    background: #fff;
    color: #dc2626;
    border-radius: 7px;
    padding: 7px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}

.dependent-edit-row .remove-dependent-btn:hover {
    background: #fef2f2;
}

.dependent-empty-state {
    padding: 24px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #6b7280;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 700px) {
    .family-dependents-edit-head {
    align-items: flex-start;
    flex-direction: column;
    }

.dependent-edit-row {
    grid-template-columns: 1fr;
    }
}

/* =========================================================
    FIX: PROFILE PHOTO MUST FIT INSIDE THE CIRCLE
========================================================= */
#profileHeroPhoto.is-photo-editing,
#profileHeroPhoto.is-photo-editing .employee-photo-editor,
#profileHeroPhoto.is-photo-editing .employee-photo-preview {
    border-radius: 50% !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview {
    width: 118px !important;
    height: 118px !important;
    min-width: 118px !important;
    overflow: hidden !important;
    position: relative !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-editor {
    overflow: visible !important;
}

#profileHeroPhoto.is-photo-editing .profile-hero-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
}

/* =========================================================
    FINAL FIX — EMPLOYEE PHOTO STAYS INSIDE HERO CIRCLE
========================================================= */
#profileHeroPhoto.is-photo-editing {
    overflow: visible !important;
    position: relative !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-editor {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-upload-btn {
    position: absolute !important;
    left: 50% !important;
    bottom: -10px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    white-space: nowrap !important;
}

/* =========================================================
    EMPLOYEE PROFILE PHOTO — FINAL CIRCLE FIT FIX
========================================================= */
#profileHeroPhoto.is-photo-editing {
    position: relative !important;
    overflow: visible !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-editor {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    clip-path: circle(50%) !important;
    isolation: isolate !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-preview img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

#profileHeroPhoto.is-photo-editing .employee-photo-upload-btn {
    position: absolute !important;
    left: 50% !important;
    bottom: -12px !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
}

/* ============================================================
    PREMIUM HRMS DASHBOARD — NEW UI
============================================================ */
body.dashboard-modal-open {
    overflow: hidden;
}

.premium-dashboard {
    max-width: 1480px;
    padding: 28px 30px 48px;
}

.dashboard-hero {
    min-height: 190px;
    border-radius: 24px;
    padding: 30px 34px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 10% 100%, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(135deg, #111827 0%, #1f2937 55%, #f97316 150%);
    box-shadow: 0 20px 55px rgba(15,23,42,.12);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -70px;
    bottom: -130px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
    0 0 0 30px rgba(255,255,255,.03),
    0 0 0 60px rgba(255,255,255,.02);
}

.dashboard-hero-copy,
.dashboard-hero-meta {
    position: relative;
    z-index: 1;
}

.dashboard-kicker,
.panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.dashboard-kicker {
    color: rgba(255,255,255,.66);
}

.dashboard-hero h1 {
    margin-top: 10px;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -.7px;
}

.dashboard-hero h1 span {
    color: #fb923c;
}

.dashboard-hero p {
    margin-top: 10px;
    max-width: 650px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.6;
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.premium-primary-btn,
.premium-ghost-btn {
    border: 0;
    border-radius: 11px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.premium-primary-btn {
    background: #fff;
    color: #111827;
}

.premium-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.premium-ghost-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
}

.premium-ghost-btn:hover {
    background: rgba(255,255,255,.13);
}

.dashboard-hero-meta {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 5px;
}

.live-pill {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.live-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #4ade80;
    margin-right: 6px;
    box-shadow: 0 0 0 4px rgba(74,222,128,.12);
}

.dashboard-updated {
    color: rgba(255,255,255,.55);
    font-size: 10px;
}

.dashboard-updated strong {
    color: rgba(255,255,255,.85);
    font-weight: 700;
}

/* KPI */
.premium-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-top: 18px;
}

.premium-kpi-card {
    min-width: 0;
    text-align: left;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 17px;
    padding: 19px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
    transition: .18s ease;
}

.premium-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(148,163,184,.42);
    box-shadow: 0 16px 32px rgba(15,23,42,.08);
}

.premium-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.premium-kpi-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.premium-kpi-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 900;
}

.kpi-orange .premium-kpi-icon { background: #fff7ed; color: #ea580c; }

.kpi-green .premium-kpi-icon { background: #ecfdf5; color: #059669; }

.kpi-blue .premium-kpi-icon { background: #eff6ff; color: #2563eb; }

.kpi-dark .premium-kpi-icon { background: #f1f5f9; color: #334155; }

.premium-kpi-card > strong {
    display: block;
    margin-top: 17px;
    color: #0f172a;
    font-size: 29px;
    line-height: 1;
    letter-spacing: -.6px;
}

.premium-kpi-foot {
    display: block;
    margin-top: 11px;
    color: #94a3b8;
    font-size: 10px;
}

/* PANELS */
.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 15px;
    margin-top: 15px;
}

.secondary-grid {
    grid-template-columns: 1fr 1fr;
}

.dashboard-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(15,23,42,.035);
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
}

.dashboard-panel-head h2 {
    margin-top: 5px;
    color: #0f172a;
    font-size: 17px;
    letter-spacing: -.2px;
}

.panel-kicker {
    color: #94a3b8;
}

.panel-link-btn {
    border: 0;
    padding: 5px 0;
    background: transparent;
    color: #f97316;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.panel-link-btn:hover {
    color: #c2410c;
}

/* WORKFORCE */
.workforce-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 18px;
}

.workforce-ring-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.workforce-ring {
    --active-rate: 0%;
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
    conic-gradient(#f97316 var(--active-rate), #e2e8f0 0);
    position: relative;
}

.workforce-ring::before {
    content: "";
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: #fff;
}

.workforce-ring > div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.workforce-ring strong {
    display: block;
    color: #0f172a;
    font-size: 26px;
    letter-spacing: -.6px;
}

.workforce-ring span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.ring-legend {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-width: 110px;
    font-size: 11px;
}

.legend-row span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
}

.legend-row strong {
    color: #0f172a;
    font-size: 12px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
}

.legend-dot.inactive {
    background: #cbd5e1;
}

.workforce-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.micro-stat-card {
    padding: 14px;
    border-radius: 13px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

.clickable-micro {
    cursor: pointer;
    transition: .18s ease;
}

.clickable-micro:hover {
    border-color: #fed7aa;
    background: #fffaf5;
}

.micro-stat-card span {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.micro-stat-card strong {
    display: block;
    margin-top: 7px;
    color: #0f172a;
    font-size: 14px;
}

.micro-stat-card small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 10px;
}

/* DEPARTMENTS */
.department-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.department-bar-row {
    width: 100%;
    display: grid;
    grid-template-columns: 120px minmax(0,1fr) 50px;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.department-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.department-bar-track {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.department-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#f97316,#fb923c);
    transition: width .35s ease;
}

.department-bar-value {
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.department-bar-value small {
    display: block;
    margin-top: 1px;
    color: #94a3b8;
    font-size: 8px;
}

/* LISTS */
.dashboard-list,
.dashboard-modal-body {
    display: flex;
    flex-direction: column;
}

.dashboard-list {
    gap: 1px;
}

.dashboard-list-row,
.attention-card,
.quick-action,
.dashboard-result-item {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.dashboard-list-row {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto 12px;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 11px;
    text-align: left;
    transition: .16s ease;
}

.dashboard-list-row:hover {
    background: #f8fafc;
}

.dashboard-list-avatar,
.dashboard-result-avatar,
.attention-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff7ed;
    color: #c2410c;
    font-size: 11px;
    font-weight: 900;
}

.dashboard-list-avatar img,
.dashboard-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-list-content {
    min-width: 0;
}

.dashboard-list-content strong,
.dashboard-list-content small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-content strong {
    color: #0f172a;
    font-size: 11px;
}

.dashboard-list-content small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 9px;
}

.dashboard-list-meta {
    color: #64748b;
    font-size: 9px;
    white-space: nowrap;
}

.dashboard-list-arrow,
.dashboard-result-arrow {
    color: #cbd5e1;
    font-size: 14px;
    transition: .16s ease;
}

.dashboard-list-row:hover .dashboard-list-arrow,
.dashboard-result-item:hover .dashboard-result-arrow,
.attention-card:hover .dashboard-list-arrow {
    color: #f97316;
}

/* QUICK ACTIONS */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    text-align: left;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #fafbfd;
    transition: .16s ease;
}

.quick-action:hover {
    transform: translateY(-1px);
    border-color: #e2e8f0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.quick-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 900;
    font-size: 12px;
}

.quick-icon.orange { background:#fff7ed; color:#ea580c; }

.quick-icon.blue { background:#eff6ff; color:#2563eb; }

.quick-icon.green { background:#ecfdf5; color:#059669; }

.quick-icon.purple { background:#f5f3ff; color:#7c3aed; }

.quick-icon.pink { background:#fdf2f8; color:#db2777; }

.quick-icon.slate { background:#f1f5f9; color:#475569; }

.quick-action strong,
.quick-action small {
    display: block;
}

.quick-action strong {
    color: #0f172a;
    font-size: 10px;
}

.quick-action small {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 8px;
}

/* ATTENTION */
.attention-panel {
    margin-top: 15px;
}

.attention-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
}

.attention-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    text-align: left;
    transition: .16s ease;
}

.attention-card:hover {
    border-color: #fed7aa;
    background: #fffaf5;
}

.attention-copy {
    min-width: 0;
    flex: 1;
}

.attention-copy strong,
.attention-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attention-copy strong {
    color: #0f172a;
    font-size: 10px;
}

.attention-copy small {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 8px;
}

.attention-clear {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #dcfce7;
    border-radius: 12px;
    background: #f0fdf4;
}

.attention-clear-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-weight: 900;
}

.attention-clear strong,
.attention-clear span {
    display: block;
}

.attention-clear strong {
    color: #166534;
    font-size: 10px;
}

.attention-clear span:last-child {
    margin-top: 2px;
    color: #4d7c0f;
    font-size: 9px;
}

/* EMPTY */
.dashboard-empty-state,
.dashboard-modal-empty {
    padding: 26px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
}

/* MODAL */
.dashboard-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
}

.dashboard-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.44);
    backdrop-filter: blur(6px);
}

.dashboard-modal-card {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100vw - 30px));
    max-height: min(760px, calc(100vh - 30px));
    margin: 15px auto;
    overflow: hidden;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15,23,42,.22);
}

.dashboard-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid #eef2f7;
}

.dashboard-modal-head h2 {
    margin-top: 5px;
    color: #0f172a;
    font-size: 20px;
}

.dashboard-modal-head p {
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
}

.dashboard-modal-close {
    width: 33px;
    height: 33px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.dashboard-modal-close:hover {
    background: #f8fafc;
}

.dashboard-modal-body {
    max-height: calc(min(760px, 100vh - 160px));
    overflow: auto;
    padding: 7px 12px 12px;
}

.dashboard-result-item {
    width: 100%;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto 18px;
    align-items: center;
    gap: 11px;
    padding: 11px 10px;
    border-radius: 12px;
    text-align: left;
    transition: .16s ease;
}

.dashboard-result-item:hover {
    background: #f8fafc;
}

.dashboard-result-main {
    min-width: 0;
}

.dashboard-result-main strong,
.dashboard-result-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-result-main strong {
    color: #0f172a;
    font-size: 11px;
}

.dashboard-result-main small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 9px;
}

.dashboard-result-side {
    min-width: 90px;
    text-align: right;
}

.dashboard-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.dashboard-status-chip.active {
    background: #dcfce7;
    color: #15803d;
}

.dashboard-status-chip.inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.dashboard-result-id {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 8px;
}

@media (max-width: 1100px) {
    .premium-kpi-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    }

.attention-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    }

.dashboard-main-grid {
    grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .premium-dashboard {
    padding: 18px 15px 34px;
    }

.dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    }

.dashboard-hero-meta {
    width: 100%;
    align-items: flex-start;
    }

.premium-kpi-grid,
    .secondary-grid {
    grid-template-columns: 1fr;
    }

.workforce-content {
    grid-template-columns: 1fr;
    }

.quick-actions-grid,
    .attention-grid {
    grid-template-columns: 1fr;
    }

.dashboard-result-item {
    grid-template-columns: 40px minmax(0,1fr) 18px;
    }

.dashboard-result-side {
    display: none;
    }
}

@media (max-width: 480px) {
    .premium-kpi-grid {
    grid-template-columns: 1fr;
    }

.dashboard-hero h1 {
    font-size: 28px;
    }

.dashboard-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    }

.premium-primary-btn,
    .premium-ghost-btn {
    width: 100%;
    justify-content: center;
    }

.workforce-ring-wrap {
    flex-direction: column;
    align-items: flex-start;
    }

.department-bar-row {
    grid-template-columns: 95px minmax(0,1fr) 44px;
    }
}

/* =========================================================
    HRMS DASHBOARD V2 — PREMIUM PEOPLE-FIRST OVERRIDES
========================================================= */
.hr-dashboard-v2{max-width:1520px!important;margin:0 auto!important;padding:28px 30px 56px!important;background:#f4f7f7!important}

.hr-v2-hero{position:relative;min-height:300px;overflow:hidden;border-radius:26px;padding:34px 38px;display:flex;justify-content:space-between;gap:30px;background:radial-gradient(circle at 84% 18%,rgba(249,115,22,.22),transparent 25%),radial-gradient(circle at 70% 100%,rgba(249,115,22,.09),transparent 35%),#080909;color:#fff;box-shadow:0 22px 60px rgba(10,12,12,.20)}

.hr-v2-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 62%,rgba(255,255,255,.03) 62.2% 62.8%,transparent 63%)}

.hr-v2-hero-glow{position:absolute;width:430px;height:430px;border-radius:50%;right:-140px;top:-210px;background:radial-gradient(circle,rgba(249,115,22,.18),transparent 68%)}

.hr-v2-hero-left,.hr-v2-hero-right{position:relative;z-index:2}

.hr-v2-hero-left{max-width:760px;display:flex;flex-direction:column;justify-content:center}

.hr-v2-hero-badge,.hr-v2-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

.hr-v2-hero-badge{display:inline-flex;align-items:center;gap:8px;color:#ffb273;margin-bottom:14px}

.hr-v2-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.10),0 0 18px rgba(34,197,94,.48)}

.hr-v2-hero h1{margin:0;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.045em;font-weight:800}

.hr-v2-hero h1 span{color:#fb923c}

.hr-v2-hero p{max-width:690px;margin:16px 0 0;color:rgba(255,255,255,.68);font-size:14px;line-height:1.75}

.hr-v2-hero-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

.hr-v2-btn{height:44px;border-radius:11px;padding:0 16px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

.hr-v2-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.hr-v2-btn-primary{background:#f97316;color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.24)}

.hr-v2-btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.86)}

.hr-v2-hero-right{min-width:260px;display:flex;align-items:center;justify-content:center;gap:22px}

.hr-v2-date-card{min-width:150px;padding:18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px)}

.hr-v2-date-card span,.hr-v2-date-card small{display:block;color:rgba(255,255,255,.50);font-size:11px}

.hr-v2-date-card strong{display:block;margin:4px 0 8px;font-size:20px;line-height:1.2}

.hr-v2-date-card small{white-space:nowrap}

.hr-v2-hero-orbit{width:126px;height:126px;border-radius:50%;position:relative;border:1px solid rgba(255,255,255,.12)}

.hr-v2-hero-orbit:before{content:"";position:absolute;inset:12px;border:1px dashed rgba(249,115,22,.42);border-radius:50%}

.orbit-center{position:absolute;inset:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a,#0b0b0b);border:1px solid rgba(255,255,255,.12);color:#ffb273;font-size:12px;font-weight:800;letter-spacing:.12em}

.orbit-dot{position:absolute;width:11px;height:11px;border-radius:50%}

.orbit-dot-1{top:7px;left:56px;background:#f97316}

.orbit-dot-2{right:7px;top:56px;background:#22c55e}

.orbit-dot-3{left:22px;bottom:16px;background:#60a5fa}

.hr-v2-section{margin-top:26px}

.hr-v2-section-head,.hr-v2-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}

.hr-v2-section-head h2,.hr-v2-panel-head h2,.hr-v2-quick-strip h2{margin:5px 0 0;color:#101616;font-size:21px;letter-spacing:-.025em}

.hr-v2-kicker{color:#8b96a2}

.hr-v2-section-note,.hr-v2-panel-head p{margin:5px 0 0;color:#7c8791;font-size:11px}

.hr-v2-pulse-grid{margin-top:16px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}

.hr-v2-pulse-card{min-height:128px;border:1px solid #e4e9ea;background:#fff;border-radius:17px;padding:15px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(18,28,29,.04);transition:.18s}

.hr-v2-pulse-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(18,28,29,.08)}

.pulse-icon{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center}

.pulse-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.pulse-present .pulse-icon{background:#ecfdf3;color:#16a34a}

.pulse-leave .pulse-icon{background:#eef2ff;color:#6366f1}

.pulse-birthday .pulse-icon{background:#fff1f2;color:#e11d48}

.pulse-anniversary .pulse-icon{background:#fff7ed;color:#ea580c}

.pulse-probation .pulse-icon{background:#f3e8ff;color:#9333ea}

.pulse-attention .pulse-icon{background:#fff1f2;color:#dc2626}

.pulse-copy small,.pulse-copy span{display:block;color:#8b96a2;font-size:10px}

.pulse-copy strong{display:block;margin:4px 0 2px;color:#111827;font-size:25px;letter-spacing:-.03em}

.pulse-arrow{align-self:flex-start;font-size:16px;color:#adb6bc}

.hr-v2-feature-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}

.hr-v2-panel{background:#fff;border:1px solid #e2e8e8;border-radius:20px;padding:20px;box-shadow:0 10px 28px rgba(18,28,29,.04)}

.hr-v2-panel-head{align-items:flex-start}

.hr-v2-text-btn{flex:0 0 auto;border:0;background:transparent;color:#475569;font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:4px 0}

.hr-v2-text-btn:hover{color:#f97316}

.hr-v2-attendance-body{margin-top:18px;display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}

.hr-v2-attendance-ring{width:170px;height:170px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(#22c55e var(--attendance-rate,0%),#eef2f3 var(--attendance-rate,0%) 100%);position:relative}

.hr-v2-attendance-ring:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff}

.hr-v2-attendance-ring-inner{position:relative;z-index:1;text-align:center}

.hr-v2-attendance-ring-inner strong{display:block;font-size:31px;color:#111827}

.hr-v2-attendance-ring-inner span{display:block;margin-top:4px;color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:.14em}

.hr-v2-attendance-legend{display:flex;flex-direction:column;gap:9px}

.hr-v2-attendance-legend button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:#f8fafb;cursor:pointer;font:inherit;color:#475569;text-align:left}

.hr-v2-attendance-legend button:hover{background:#fff;border-color:#e2e8e8}

.hr-v2-attendance-legend strong{color:#111827}

.legend-dot-v2{width:8px;height:8px;border-radius:50%}

.legend-dot-v2.present{background:#22c55e}

.legend-dot-v2.leave{background:#6366f1}

.legend-dot-v2.absent{background:#ef4444}

.legend-dot-v2.not-started{background:#94a3b8}

.hr-v2-department-orbit{height:320px;margin-top:6px;position:relative;overflow:hidden}

.dept-orbit-ring{position:absolute;left:50%;top:50%;border:1px dashed #dce4e5;border-radius:50%;transform:translate(-50%,-50%)}

.ring-a{width:230px;height:230px}

.ring-b{width:300px;height:300px;border-color:#eef2f3}

.dept-orbit-center{position:absolute;width:110px;height:110px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b0e0e;color:#fff;box-shadow:0 18px 35px rgba(11,14,14,.18)}

.dept-orbit-center strong{font-size:28px}

.dept-orbit-center span{margin-top:2px;color:#9ba8aa;font-size:10px;text-transform:uppercase;letter-spacing:.13em}

.dept-orbit-node{position:absolute;left:50%;top:50%;width:104px;min-height:72px;margin:-36px -52px;padding:9px 7px;border:1px solid #e3e8e9;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:inherit;box-shadow:0 8px 20px rgba(18,28,29,.06);transform:rotate(var(--dept-angle)) translateY(-125px) rotate(calc(-1 * var(--dept-angle)))}

.dept-orbit-node-count{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff7ed;color:#c2410c;font-size:12px;font-weight:800}

.dept-orbit-node-name{width:100%;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1f2937;font-size:10px;font-weight:700;text-align:center}

.dept-orbit-node-percentage{margin-top:2px;color:#94a3b8;font-size:9px}

.hr-v2-moments-grid{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px}

.hr-v2-people-list,.hr-v2-leave-list{margin-top:12px;display:flex;flex-direction:column}

.hr-v2-person-row,.hr-v2-leave-row{width:100%;border:0;border-bottom:1px solid #edf1f1;padding:10px 0;background:transparent;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;cursor:pointer;text-align:left}

.hr-v2-person-row:hover .hr-v2-person-main strong,.hr-v2-leave-row:hover .hr-v2-person-main strong{color:#f97316}

.hr-v2-person-avatar,.hr-v2-modal-avatar{width:38px;height:38px;border-radius:12px;overflow:hidden;flex:0 0 38px;display:flex;align-items:center;justify-content:center;background:#f4f6f6;color:#334155;font-size:11px;font-weight:800}

.hr-v2-person-avatar img,.hr-v2-modal-avatar img{width:100%;height:100%;object-fit:cover}

.person-birthday{background:#fff1f2;color:#be123c}

.person-anniversary{background:#fff7ed;color:#c2410c}

.person-probation{background:#f3e8ff;color:#7e22ce}

.person-joiner{background:#eff6ff;color:#1d4ed8}

.person-attention{background:#fff1f2;color:#dc2626}

.hr-v2-person-main{min-width:0;display:flex;flex-direction:column;gap:3px}

.hr-v2-person-main strong{color:#1f2937;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hr-v2-person-main small{color:#94a3b8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hr-v2-person-arrow{color:#adb7bc;font-size:15px}

.leave-date-badge{min-width:46px;height:44px;border-radius:11px;background:#eef2ff;color:#4f46e5;display:flex;flex-direction:column;align-items:center;justify-content:center}

.leave-date-badge strong{font-size:10px}

.leave-date-badge small{margin-top:2px;font-size:8px}

.hr-v2-empty{min-height:122px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:6px;color:#94a3b8}

.hr-v2-empty span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ecfdf3;color:#16a34a;font-weight:800}

.hr-v2-empty strong{color:#334155;font-size:12px}

.hr-v2-empty small{font-size:10px}

.hr-v2-quick-strip{margin-top:20px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#0b0e0e;border-radius:18px;color:#fff}

.hr-v2-quick-strip h2{color:#fff}

.hr-v2-quick-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:min(780px,100%)}

.hr-v2-quick-actions button{min-height:54px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);color:#eef2f3;display:flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-size:10px;font-weight:700;cursor:pointer}

.hr-v2-quick-actions button:hover{background:rgba(255,255,255,.08)}

.quick-action-icon{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center}

.quick-action-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.icon-orange{background:rgba(249,115,22,.14);color:#fb923c}

.icon-blue{background:rgba(96,165,250,.14);color:#93c5fd}

.icon-green{background:rgba(34,197,94,.14);color:#86efac}

.icon-purple{background:rgba(168,85,247,.14);color:#d8b4fe}

.icon-pink{background:rgba(236,72,153,.14);color:#f9a8d4}

.icon-slate{background:rgba(148,163,184,.12);color:#cbd5e1}

.hr-v2-modal-card{width:min(760px,calc(100% - 32px))!important;max-height:min(82vh,760px);overflow:hidden}

.hr-v2-modal-head{background:#fff}

.hr-v2-modal-body{max-height:60vh;overflow-y:auto;padding-top:6px}

.hr-v2-modal-row{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px 8px;border:0;border-bottom:1px solid #edf1f1;background:transparent;font:inherit;cursor:pointer;text-align:left}

.hr-v2-modal-row:hover{background:#fafbfb}

.hr-v2-modal-main{min-width:0;display:flex;flex-direction:column;gap:3px}

.hr-v2-modal-main strong{color:#111827;font-size:12px}

.hr-v2-modal-main small{color:#94a3b8;font-size:10px}

.hr-v2-modal-right{color:#64748b;font-size:10px;font-weight:700;white-space:nowrap}

@media (max-width:1200px){.hr-v2-pulse-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.hr-v2-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}

.hr-v2-quick-strip{align-items:flex-start;flex-direction:column}}

@media (max-width:900px){.hr-v2-hero{flex-direction:column}

.hr-v2-hero-right{justify-content:flex-start}

.hr-v2-feature-grid,.hr-v2-moments-grid{grid-template-columns:1fr}}

@media (max-width:680px){.hr-dashboard-v2{padding:18px 14px 40px!important}

.hr-v2-hero{border-radius:20px;padding:24px}

.hr-v2-hero-right{flex-direction:column;align-items:flex-start}

.hr-v2-pulse-grid{grid-template-columns:1fr 1fr}

.hr-v2-attendance-body{grid-template-columns:1fr;justify-items:center}

.hr-v2-quick-actions{grid-template-columns:1fr 1fr;width:100%}}

@media (max-width:460px){.hr-v2-pulse-grid{grid-template-columns:1fr}

.hr-v2-quick-actions{grid-template-columns:1fr}

.hr-v2-hero h1{font-size:34px}}

/* =========================================================
    HR DASHBOARD V2 — COMPACT CARD SIZING
========================================================= */
.hr-dashboard-v2 {
    padding: 22px 24px 42px !important;
}

.hr-v2-hero {
    min-height: 250px !important;
    padding: 28px 32px !important;
    border-radius: 22px !important;
}

.hr-v2-hero h1 {
    font-size: clamp(30px, 3.4vw, 48px) !important;
}

.hr-v2-hero p {
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.hr-v2-hero-actions {
    margin-top: 18px !important;
}

.hr-v2-section {
    margin-top: 20px !important;
}

.hr-v2-section-head h2,
.hr-v2-panel-head h2,
.hr-v2-quick-strip h2 {
    font-size: 18px !important;
}

.hr-v2-pulse-grid {
    margin-top: 12px !important;
    gap: 9px !important;
}

.hr-v2-pulse-card {
    min-height: 94px !important;
    padding: 11px 12px !important;
    border-radius: 13px !important;
    gap: 9px !important;
}

.pulse-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

.pulse-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.pulse-copy small,
.pulse-copy span {
    font-size: 9px !important;
}

.pulse-copy strong {
    margin: 2px 0 !important;
    font-size: 20px !important;
}

.pulse-arrow {
    font-size: 13px !important;
}

.hr-v2-feature-grid,
.hr-v2-moments-grid {
    margin-top: 14px !important;
    gap: 14px !important;
}

.hr-v2-panel {
    padding: 15px !important;
    border-radius: 15px !important;
}

.hr-v2-panel-head p {
    font-size: 10px !important;
}

.hr-v2-text-btn {
    font-size: 10px !important;
}

.hr-v2-attendance-body {
    margin-top: 12px !important;
    grid-template-columns: 140px 1fr !important;
    gap: 12px !important;
}

.hr-v2-attendance-ring {
    width: 132px !important;
    height: 132px !important;
}

.hr-v2-attendance-ring::after {
    inset: 10px !important;
}

.hr-v2-attendance-ring-inner strong {
    font-size: 25px !important;
}

.hr-v2-attendance-legend {
    gap: 6px !important;
}

.hr-v2-attendance-legend button {
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
}

.hr-v2-department-orbit {
    height: 245px !important;
}

.ring-a {
    width: 190px !important;
    height: 190px !important;
}

.ring-b {
    width: 245px !important;
    height: 245px !important;
}

.dept-orbit-center {
    width: 88px !important;
    height: 88px !important;
}

.dept-orbit-center strong {
    font-size: 23px !important;
}

.dept-orbit-node {
    width: 88px !important;
    min-height: 60px !important;
    margin: -30px -44px !important;
    padding: 7px 5px !important;
    transform: rotate(var(--dept-angle)) translateY(-100px) rotate(calc(-1 * var(--dept-angle))) !important;
    border-radius: 11px !important;
}

.dept-orbit-node-count {
    width: 23px !important;
    height: 23px !important;
    font-size: 10px !important;
}

.dept-orbit-node-name {
    font-size: 9px !important;
}

.dept-orbit-node-percentage {
    font-size: 8px !important;
}

.hr-v2-people-list,
.hr-v2-leave-list {
    margin-top: 8px !important;
}

.hr-v2-person-row,
.hr-v2-leave-row {
    padding: 7px 0 !important;
    gap: 8px !important;
}

.hr-v2-person-avatar,
.hr-v2-modal-avatar {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
}

.hr-v2-person-main strong {
    font-size: 11px !important;
}

.hr-v2-person-main small {
    font-size: 9px !important;
}

.leave-date-badge {
    min-width: 40px !important;
    height: 38px !important;
    border-radius: 9px !important;
}

.leave-date-badge strong {
    font-size: 9px !important;
}

.leave-date-badge small {
    font-size: 7px !important;
}

.hr-v2-quick-strip {
    margin-top: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
}

.hr-v2-quick-actions {
    gap: 6px !important;
}

.hr-v2-quick-actions button {
    min-height: 44px !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
}

.quick-action-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
}

.quick-action-icon svg {
    width: 13px !important;
    height: 13px !important;
}

@media (max-width: 1200px) {
    .hr-v2-pulse-card {
    min-height: 88px !important;
    }
}

@media (max-width: 680px) {
    .hr-dashboard-v2 {
    padding: 14px !important;
    }

.hr-v2-hero {
    min-height: 220px !important;
    padding: 22px !important;
    }

.hr-v2-pulse-card {
    min-height: 84px !important;
    padding: 9px !important;
    }
}

/* =========================================================
    DASHBOARD ALIGNMENT FIX
    Keep dashboard content to the right of the fixed sidebar.
    The previous max-width + margin:auto centered the dashboard
    across the full viewport and pushed the hero content behind
    the sidebar.
========================================================= */
.dashboard-page:not(.profile-mode) .hr-dashboard-v2 {
    width: calc(100% - 245px) !important;
    max-width: none !important;
    margin-left: 245px !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding: 22px 24px 42px !important;
}

.dashboard-page:not(.profile-mode) .hr-v2-hero,
.dashboard-page:not(.profile-mode) .hr-v2-section,
.dashboard-page:not(.profile-mode) .hr-v2-feature-grid,
.dashboard-page:not(.profile-mode) .hr-v2-moments-grid,
.dashboard-page:not(.profile-mode) .hr-v2-quick-strip {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1150px) {
    .dashboard-page:not(.profile-mode) .hr-dashboard-v2 {
    width: calc(100% - 220px) !important;
    margin-left: 220px !important;
    }
}

@media (max-width: 900px) {
    .dashboard-page:not(.profile-mode) .hr-dashboard-v2 {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 20px 16px 36px !important;
    }
}

/* =========================================================
    DASHBOARD RESULT POPUP — TRUE VIEWPORT CENTER
========================================================= */
.dashboard-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.dashboard-modal.hidden {
    display: none !important;
}

.dashboard-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
}

.dashboard-modal-card,
.hr-v2-modal-card {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: min(760px, calc(100vh - 48px)) !important;
    overflow: hidden !important;
    transform: none !important;
}

.dashboard-modal-head,
.hr-v2-modal-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Small screens */
@media (max-width: 650px) {
    .dashboard-modal {
    padding: 12px !important;
    }

.dashboard-modal-card,
    .hr-v2-modal-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    }
}

/* =========================================================
    ATTENDANCE PANEL — COMPACT HEIGHT
========================================================= */
.hr-v2-attendance-panel {
    min-height: 0 !important;
}

.hr-v2-attendance-body {
    margin-top: 12px !important;
    min-height: 0 !important;
}

.hr-v2-attendance-ring {
    width: 150px !important;
    height: 150px !important;
}

.hr-v2-attendance-ring::after {
    inset: 11px !important;
}

.hr-v2-attendance-legend {
    gap: 7px !important;
}

.hr-v2-attendance-legend button {
    padding: 7px 10px !important;
}

/* =========================================================
    DASHBOARD V3 — THREE EQUAL CARDS PER ROW
========================================================= */
.hr-v2-three-grid {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.dashboard-mini-panel {
    min-width: 0 !important;
    height: 310px !important;
    min-height: 310px !important;
    padding: 15px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.dashboard-mini-panel .hr-v2-panel-head h2 {
    font-size: 17px !important;
}

.dashboard-mini-panel .hr-v2-people-list,
.dashboard-mini-panel .hr-v2-leave-list {
    margin-top: 8px !important;
    overflow: hidden !important;
}

.dashboard-mini-panel .hr-v2-person-row,
.dashboard-mini-panel .hr-v2-leave-row {
    padding: 7px 0 !important;
    min-height: 43px !important;
}

.dashboard-mini-panel .hr-v2-person-avatar {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
}

.dashboard-mini-panel .hr-v2-person-main strong {
    font-size: 11px !important;
}

.dashboard-mini-panel .hr-v2-person-main small {
    font-size: 9px !important;
}

.dashboard-mini-panel .hr-v2-person-arrow {
    font-size: 13px !important;
}

.dashboard-mini-panel .hr-v2-empty {
    min-height: 170px !important;
}

/* Attendance + Department cards: equal height and contained orbit */
.hr-v2-attendance-panel,
.hr-v2-department-panel {
    height: 305px !important;
    min-height: 305px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.hr-v2-attendance-body {
    height: 190px !important;
    min-height: 0 !important;
    margin-top: 8px !important;
}

.hr-v2-department-orbit {
    height: 205px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}

.hr-v2-department-panel .dept-orbit-ring.ring-a {
    width: 180px !important;
    height: 180px !important;
}

.hr-v2-department-panel .dept-orbit-ring.ring-b {
    width: 235px !important;
    height: 235px !important;
}

.hr-v2-department-panel .dept-orbit-node {
    width: 86px !important;
    min-height: 60px !important;
    margin: -30px -43px !important;
    padding: 6px !important;
    transform: rotate(var(--dept-angle)) translateY(-88px) rotate(calc(-1 * var(--dept-angle))) !important;
}

.hr-v2-department-panel .dept-orbit-node-count {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
}

.hr-v2-department-panel .dept-orbit-node-name {
    font-size: 9px !important;
}

.hr-v2-department-panel .dept-orbit-node-percentage {
    font-size: 8px !important;
}

@media (max-width: 1100px) {
    .hr-v2-three-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .hr-v2-three-grid {
    grid-template-columns: 1fr !important;
    }

.dashboard-mini-panel {
    height: auto !important;
    min-height: 280px !important;
    }
}

/* =========================================================
    DASHBOARD FINAL — THREE EQUAL CARDS / ATTENDANCE / POPUP
========================================================= */
.hr-v2-three-grid {
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.dashboard-mini-panel .hr-v2-person-row,
.dashboard-mini-panel .hr-v2-leave-row {
    min-height: 43px !important;
    padding: 7px 0 !important;
}

/* Attendance + department: compact, equal, no bottom clipping */
.hr-v2-attendance-panel,
.hr-v2-department-panel {
    height: 305px !important;
    min-height: 305px !important;
    overflow: hidden !important;
}

.hr-v2-attendance-body {
    height: 188px !important;
    min-height: 0 !important;
    margin-top: 8px !important;
}

/* =========================================================
    POPUP — TRUE CENTER, LARGER TYPE, PAGE LOCKED
========================================================= */
html.dashboard-modal-open,
body.dashboard-modal-open {
    overflow: hidden !important;
}

.dashboard-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.dashboard-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    touch-action: none !important;
}

.dashboard-modal-card,
.hr-v2-modal-card {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    width: min(820px, calc(100vw - 56px)) !important;
    max-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

.dashboard-modal-head,
.hr-v2-modal-head {
    padding: 24px 26px 18px !important;
    align-items: center !important;
}

.dashboard-modal-head h2,
.hr-v2-modal-head h2,
#dashboardModalTitle {
    font-size: 24px !important;
    line-height: 1.2 !important;
}

.dashboard-modal-head p,
.hr-v2-modal-head p,
#dashboardModalSubtitle {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.dashboard-modal-head .hr-v2-kicker,
#dashboardModalKicker {
    font-size: 11px !important;
}

.dashboard-modal-close,
.hr-v2-modal-close {
    width: 38px !important;
    height: 38px !important;
    font-size: 23px !important;
}

.dashboard-modal-body,
.hr-v2-modal-body {
    max-height: calc(100vh - 170px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 18px 18px !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

.hr-v2-modal-row {
    min-height: 64px !important;
    padding: 12px 10px !important;
    gap: 14px !important;
}

.hr-v2-modal-avatar {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    font-size: 13px !important;
}

.hr-v2-modal-main strong {
    font-size: 14px !important;
}

.hr-v2-modal-main small {
    font-size: 11px !important;
}

.hr-v2-modal-right {
    font-size: 11px !important;
}

@media (max-width: 1100px) {
    .hr-v2-three-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .hr-v2-three-grid {
    grid-template-columns: 1fr !important;
    }

.dashboard-mini-panel {
    height: auto !important;
    min-height: 280px !important;
    }
}

@media (max-width: 650px) {
    .dashboard-modal {
    padding: 14px !important;
    }

.dashboard-modal-card,
    .hr-v2-modal-card {
    width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 28px) !important;
    }

.dashboard-modal-head,
    .hr-v2-modal-head {
    padding: 18px !important;
    }

.dashboard-modal-head h2,
    .hr-v2-modal-head h2,
    #dashboardModalTitle {
    font-size: 20px !important;
    }
}

/* =========================================================
    HRMS DASHBOARD V3 — COMPLETE REBUILD
    Dashboard-only system. Existing HRMS pages remain untouched.
========================================================= */
.dashboard-page:not(.profile-mode) .hr-dashboard-v3{
    width:calc(100% - 245px)!important; margin-left:245px!important; max-width:none!important;
    min-height:calc(100vh - 72px); box-sizing:border-box; padding:32px 34px 54px!important;
    background:linear-gradient(180deg,#f7faf9 0%,#f4f7f6 100%); color:#17211f;
}

.hr-dashboard-v3 *{box-sizing:border-box}

.hr3-header{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:26px}

.hr3-eyebrow,.hr3-panel-head>div>span,.hr3-section-title span,.hr3-actions>div>span,.hr3-modal-kicker{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:.16em;color:#81908b}

.hr3-eyebrow>span{width:7px;height:7px;border-radius:50%;background:#19a56d;box-shadow:0 0 0 5px rgba(25,165,109,.1)}

.hr3-header h1{margin:8px 0 6px;font-size:clamp(29px,3vw,44px);line-height:1;letter-spacing:-.055em;font-weight:760;color:#15201d}

.hr3-header h1 strong{color:#19a56d;font-weight:800}

.hr3-header p{margin:0;color:#7b8883;font-size:12px}

.hr3-header-side{display:flex;align-items:center;gap:9px}

.hr3-date{min-width:175px;padding:10px 14px;border:1px solid #e2e9e5;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(24,44,35,.04)}

.hr3-date span,.hr3-date small{display:block;color:#97a29e;font-size:9px;font-weight:700}

.hr3-date strong{display:block;margin:4px 0;color:#1e2a26;font-size:13px}

.hr3-icon-btn,.hr3-add-btn{height:42px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-weight:750}

.hr3-icon-btn{width:42px;background:#fff;border:1px solid #e2e9e5;color:#62716b;font-size:20px}

.hr3-icon-btn:hover{transform:rotate(30deg);color:#15925f}

.hr3-add-btn{padding:0 16px;background:#17231f;color:#fff;box-shadow:0 9px 18px rgba(23,35,31,.14)}

.hr3-add-btn span{margin-right:5px;font-size:18px;color:#74e0b0}

.hr3-command-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:18px}

.hr3-command-card{position:relative;overflow:hidden;min-height:176px;padding:17px 17px 15px;border:1px solid #e3e9e6;border-radius:19px;background:#fff;text-align:left;cursor:pointer;font:inherit;box-shadow:0 8px 24px rgba(26,45,37,.045);transition:transform .2s,box-shadow .2s,border-color .2s}

.hr3-command-card:before{content:"";position:absolute;width:115px;height:115px;border-radius:50%;right:-38px;bottom:-48px;background:var(--wash)}

.hr3-command-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(26,45,37,.1);border-color:var(--accent)}

.hr3-card-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;position:relative;z-index:1}

.hr3-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--wash);color:var(--accent);font-weight:900}

.hr3-card-top small{color:#8a9691;font-size:8px;font-weight:850;letter-spacing:.1em}

.hr3-card-top i{font-style:normal;color:#aab4b0}

.hr3-command-card>strong{display:block;position:relative;z-index:1;margin-top:26px;font-size:38px;line-height:1;letter-spacing:-.05em;color:#1b2622}

.hr3-command-card>span:not(.hr3-card-top){display:block;position:relative;z-index:1;margin-top:8px;font-size:12px;font-weight:760;color:#2d3a35}

.hr3-command-card>em{display:block;position:relative;z-index:1;margin-top:5px;font-size:9px;font-style:normal;color:#96a19c}

.hr3-present{--accent:#159765;--wash:#eaf8f1}

.hr3-leave{--accent:#6271d9;--wash:#eff1ff}

.hr3-birthday{--accent:#d66b85;--wash:#fff0f4}

.hr3-probation{--accent:#a06acb;--wash:#f5effb}

.hr3-attention{--accent:#d4833e;--wash:#fff5e9}

.hr3-main-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:18px}

.hr3-panel{background:#fff;border:1px solid #e2e9e5;border-radius:20px;padding:20px;box-shadow:0 7px 24px rgba(28,48,39,.035);min-width:0}

.hr3-panel-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}

.hr3-panel-head h2{margin:5px 0 3px;font-size:17px;letter-spacing:-.025em;color:#1d2925}

.hr3-panel-head p{margin:0;color:#8c9893;font-size:10px}

.hr3-panel-head>button{border:0;background:transparent;color:#159765;font:inherit;font-size:10px;font-weight:800;cursor:pointer;padding:5px 0}

.hr3-attendance-layout{display:grid;grid-template-columns:168px 1fr;align-items:center;gap:28px;margin-top:14px;min-height:218px}

.hr3-ring{--attendance-rate:0%;width:160px;height:160px;border-radius:50%;background:conic-gradient(#19a56d var(--attendance-rate),#edf1ef 0);padding:11px;display:grid;place-items:center}

.hr3-ring>div{width:100%;height:100%;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center}

.hr3-ring strong{font-size:31px;letter-spacing:-.05em;color:#1c2824}

.hr3-ring span{margin-top:3px;font-size:8px;color:#95a19c;letter-spacing:.12em;text-transform:uppercase}

.hr3-status-list{display:grid;gap:8px}

.hr3-status-list button{width:100%;border:1px solid transparent;background:#f8faf9;border-radius:11px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left;font:inherit;font-size:10px;color:#718078;cursor:pointer}

.hr3-status-list button:hover{background:#fff;border-color:#e0e8e3}

.hr3-status-list strong{color:#26332e}

.dot{width:8px;height:8px;border-radius:50%}

.dot.present{background:#19a56d}

.dot.leave{background:#6877db}

.dot.absent{background:#e16d6d}

.dot.pending{background:#a5afab}

.hr3-department-orbit{height:245px;position:relative;overflow:hidden}

.hr3-orbit-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed #dbe4df;transform:translate(-50%,-50%)}

.ring-one{width:170px;height:170px}

.ring-two{width:232px;height:232px;border-color:#edf2ef}

.hr3-orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#18231f;color:#fff;box-shadow:0 15px 28px rgba(24,35,31,.18)}

.hr3-orbit-center strong{font-size:25px}

.hr3-orbit-center span{font-size:7px;letter-spacing:.12em;color:#91a39b;margin-top:2px}

.hr3-section-title{display:flex;align-items:end;justify-content:space-between;margin:28px 2px 12px}

.hr3-section-title h2{margin:5px 0 0;font-size:19px;letter-spacing:-.03em}

.hr3-section-title p{margin:0;color:#8d9894;font-size:10px}

.hr3-people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.hr3-ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}

.hr3-list{margin-top:12px;min-height:145px}

.hr3-list .hr-v2-person-row,.hr3-list .hr-v2-leave-row{padding:9px 0;border-bottom:1px solid #edf1ef}

.hr3-list .hr-v2-person-row:last-child,.hr3-list .hr-v2-leave-row:last-child{border-bottom:0}

.hr3-list .hr-v2-person-avatar{width:35px;height:35px;border-radius:11px}

.hr3-list .hr-v2-person-main strong{font-size:11px}

.hr3-list .hr-v2-person-main small{font-size:9px}

.hr3-list .hr-v2-empty{min-height:145px}

.dashboard-modal{position:fixed!important;inset:0!important;z-index:50000!important;display:grid!important;place-items:center!important;padding:24px!important}

.dashboard-modal.hidden{display:none!important}

.dashboard-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(10,18,14,.48);backdrop-filter:blur(5px)}

.dashboard-modal-card,.hr3-modal-card{position:relative!important;z-index:1!important;width:min(700px,calc(100vw - 48px))!important;max-height:calc(100vh - 48px)!important;margin:0!important;background:#fff;border:1px solid #e1e8e4;border-radius:20px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.25)}

.dashboard-modal-head{display:flex;justify-content:space-between;padding:21px;border-bottom:1px solid #edf1ef}

.dashboard-modal-head h2{margin:5px 0 4px;font-size:20px}

.dashboard-modal-head p{margin:0;color:#8b9792;font-size:10px}

.dashboard-modal-close{width:34px;height:34px;border:0;border-radius:10px;background:#f4f7f5;color:#607069;font-size:22px;cursor:pointer}

.dashboard-modal-body{max-height:65vh;overflow:auto;padding:7px 18px 16px}

.hr-v2-modal-row{padding:11px 4px}

.hr-dashboard-v3 .dept-orbit-node{width:80px;min-height:54px;margin:-27px -40px;padding:6px;border-radius:10px;transform:rotate(var(--dept-angle)) translateY(-98px) rotate(calc(-1 * var(--dept-angle)));border:1px solid #e3eae6;background:#fff;box-shadow:0 6px 15px rgba(28,45,37,.05)}

.hr-dashboard-v3 .dept-orbit-node-count{width:21px;height:21px;font-size:9px;background:#eaf8f1;color:#168d5e}

.hr-dashboard-v3 .dept-orbit-node-name{font-size:8px}

.hr-dashboard-v3 .dept-orbit-node-percentage{font-size:7px}

@media(max-width:1300px){.hr3-command-grid{grid-template-columns:repeat(3,1fr)}

.hr3-people-grid,.hr3-ops-grid{grid-template-columns:1fr 1fr}

.hr3-actions{align-items:flex-start;flex-direction:column}

.hr3-action-buttons{width:100%;max-width:none}}

@media(max-width:1050px){.dashboard-page:not(.profile-mode) .hr-dashboard-v3{width:calc(100% - 220px)!important;margin-left:220px!important;padding:24px!important}

.hr3-main-grid{grid-template-columns:1fr}

.hr3-header{align-items:flex-start}

.hr3-header-side{flex-wrap:wrap;justify-content:flex-end}}

@media(max-width:760px){.dashboard-page:not(.profile-mode) .hr-dashboard-v3{width:100%!important;margin-left:0!important;padding:18px!important}

.hr3-header{flex-direction:column}

.hr3-header-side{width:100%;justify-content:flex-start}

.hr3-command-grid{grid-template-columns:1fr 1fr}

.hr3-people-grid,.hr3-ops-grid{grid-template-columns:1fr}

.hr3-attendance-layout{grid-template-columns:1fr;justify-items:center}

.hr3-status-list{width:100%}

.hr3-section-title{align-items:flex-start;flex-direction:column;gap:8px}

.hr3-action-buttons{grid-template-columns:repeat(3,1fr)}}

@media(max-width:460px){.hr3-command-grid{grid-template-columns:1fr}

.hr3-header-side{gap:7px}

.hr3-date{width:100%}

.hr3-action-buttons{grid-template-columns:1fr 1fr}}

/* =========================================================
    HRMS DASHBOARD V3.1 — SPACING, TYPOGRAPHY & DEPARTMENT FIX
    Replace/addition for the dashboard visual system.
========================================================= */
/* Balanced half-inch style breathing room beside sidebar and page edge */
.dashboard-page:not(.profile-mode) .hr-dashboard-v3{
    width:calc(100% - 245px - 24px)!important;
    margin-left:245px!important;
    margin-right:24px!important;
    padding:28px 0 54px 24px!important;
    overflow:hidden!important;
}

/* =========================================================
    TOP KPI CARDS — LARGER TYPOGRAPHY
========================================================= */
.hr3-command-grid{
    gap:14px!important;
}

.hr3-command-card{
    min-height:190px!important;
    padding:20px 20px 18px!important;
    border-radius:21px!important;
}

.hr3-card-top{
    gap:10px!important;
}

.hr3-command-card .hr3-icon{
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
    font-size:15px!important;
}

.hr3-card-top small{
    font-size:10px!important;
    letter-spacing:.16em!important;
    font-weight:900!important;
}

.hr3-card-top i{
    font-size:15px!important;
}

.hr3-command-card>strong{
    margin-top:27px!important;
    font-size:47px!important;
}

.hr3-command-card>span:not(.hr3-card-top){
    margin-top:9px!important;
    font-size:14px!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
}

.hr3-command-card>em{
    margin-top:7px!important;
    font-size:11px!important;
    line-height:1.4!important;
    color:#788681!important;
}

/* Make bottom visual accent richer */
.hr3-command-card:before{
    width:142px!important;
    height:142px!important;
    right:-40px!important;
    bottom:-63px!important;
    opacity:.95!important;
}

/* =========================================================
    DEPARTMENT DISTRIBUTION — FIX CUT CONTENT
========================================================= */
.hr3-department-panel{
    overflow:visible!important;
}

.hr3-department-orbit{
    height:305px!important;
    min-height:305px!important;
    overflow:visible!important;
    margin:0 -6px!important;
    padding-bottom:14px!important;
}

.hr3-orbit-ring.ring-one{
    width:190px!important;
    height:190px!important;
}

.hr3-orbit-ring.ring-two{
    width:270px!important;
    height:270px!important;
}

.hr-dashboard-v3 .dept-orbit-node{
    width:108px!important;
    min-height:68px!important;
    margin:-34px -54px!important;
    padding:9px 10px!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#ffffff,#f6f9f7)!important;
    border:1px solid #dbe5e0!important;
    box-shadow:
    0 9px 22px rgba(25,45,36,.07),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
    transform:
    rotate(var(--dept-angle))
    translateY(-120px)
    rotate(calc(-1 * var(--dept-angle)))!important;
    overflow:visible!important;
}

.hr-dashboard-v3 .dept-orbit-node:hover{
    border-color:#7fcaa7!important;
    box-shadow:0 15px 28px rgba(25,75,54,.13)!important;
    z-index:10!important;
}

.hr-dashboard-v3 .dept-orbit-node-count{
    width:29px!important;
    height:29px!important;
    margin-bottom:5px!important;
    border-radius:10px!important;
    font-size:11px!important;
    font-weight:850!important;
    background:linear-gradient(145deg,#dff5e9,#effaf4)!important;
    color:#13845a!important;
    box-shadow:0 4px 10px rgba(25,165,109,.09)!important;
}

.hr-dashboard-v3 .dept-orbit-node-name{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
    font-weight:850!important;
    color:#27342f!important;
}

.hr-dashboard-v3 .dept-orbit-node-percentage{
    display:block!important;
    margin-top:3px!important;
    font-size:9px!important;
    font-weight:700!important;
    color:#7d8b85!important;
}

.hr3-orbit-center{
    width:108px!important;
    height:108px!important;
    background:radial-gradient(circle at 35% 30%,#2d4138,#17231f 65%)!important;
    box-shadow:
    0 18px 34px rgba(24,35,31,.22),
    0 0 0 9px rgba(25,165,109,.055)!important;
}

.hr3-orbit-center strong{
    font-size:31px!important;
}

.hr3-orbit-center span{
    font-size:8px!important;
}

/* Department section title hierarchy */
.hr3-panel-head>div>span{
    font-size:10px!important;
    letter-spacing:.17em!important;
    font-weight:900!important;
}

.hr3-panel-head h2{
    font-size:19px!important;
}

.hr3-panel-head p{
    font-size:11px!important;
}

/* People and operations headings slightly stronger */
.hr3-section-title h2{
    font-size:22px!important;
}

.hr3-section-title p{
    font-size:11px!important;
}

.hr3-panel-head>button{
    font-size:11px!important;
}

/* Preserve good compact lists but improve readability */
.hr3-list .hr-v2-person-main strong{
    font-size:12px!important;
}

.hr3-list .hr-v2-person-main small{
    font-size:10px!important;
}

/* =========================================================
    RESPONSIVE SPACING
========================================================= */
@media(max-width:1050px){
    .dashboard-page:not(.profile-mode) .hr-dashboard-v3{
    width:calc(100% - 220px - 20px)!important;
    margin-left:220px!important;
    margin-right:20px!important;
    padding:24px 0 46px 20px!important;
    }

.hr3-command-card>strong{
    font-size:42px!important;
    }

.hr3-department-orbit{
    height:330px!important;
    min-height:330px!important;
    }
}

@media(max-width:760px){
    .dashboard-page:not(.profile-mode) .hr-dashboard-v3{
    width:100%!important;
    margin:0!important;
    padding:18px!important;
    }

.hr3-command-card{
    min-height:178px!important;
    }

.hr3-command-card>strong{
    font-size:43px!important;
    }

.hr3-department-orbit{
    height:350px!important;
    min-height:350px!important;
    transform:scale(.92);
    transform-origin:top center;
    margin-bottom:-28px!important;
    }

.hr-dashboard-v3 .dept-orbit-node{
    transform:
    rotate(var(--dept-angle))
    translateY(-126px)
    rotate(calc(-1 * var(--dept-angle)))!important;
    }
}

/* =========================================================
    HRMS DASHBOARD V3.2 — PREMIUM ORANGE EDITION
    Hero, popup and people/image cards redesigned from scratch.
========================================================= */
.hr-dashboard-v3{
    --orange:#f27a1a;
    --orange-dark:#bf4e08;
    --orange-soft:#fff0e4;
    --orange-pale:#fff8f2;
    --ink:#1f2523;
    --muted:#7e8984;
}

/* ---------------------------------------------------------
    PREMIUM HERO
--------------------------------------------------------- */
.hr3-header-premium{
    position:relative;
    overflow:hidden;
    min-height:176px;
    padding:30px 32px!important;
    margin-bottom:22px!important;
    border:1px solid #2e3733!important;
    border-radius:24px!important;
    background:
    radial-gradient(circle at 87% 15%, rgba(242,122,26,.26), transparent 23%),
    radial-gradient(circle at 68% 115%, rgba(255,255,255,.07), transparent 28%),
    linear-gradient(120deg,#17201d 0%,#222c27 52%,#18211e 100%)!important;
    box-shadow:0 20px 46px rgba(27,35,31,.15)!important;
}

.hr3-header-premium:before{
    content:"";
    position:absolute;
    width:290px;
    height:290px;
    right:-100px;
    top:-170px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 0 35px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018);
}

.hr3-header-premium:after{
    content:"";
    position:absolute;
    left:32px;
    bottom:0;
    width:180px;
    height:3px;
    background:linear-gradient(90deg,var(--orange),#ffc08b,transparent);
    border-radius:3px;
}

.hr3-header-premium > *{
    position:relative;
    z-index:2;
}

.hr3-eyebrow{
    color:#9eaaa4!important;
    font-size:10px!important;
    letter-spacing:.18em!important;
}

.hr3-eyebrow>span{
    width:8px!important;
    height:8px!important;
    background:var(--orange)!important;
    box-shadow:0 0 0 6px rgba(242,122,26,.13)!important;
}

.hr3-eyebrow b{
    color:#ffb47d;
    margin-left:3px;
    font-weight:900;
}

.hr3-header-premium h1{
    color:#fff!important;
    margin-top:12px!important;
    font-size:clamp(34px,3.3vw,49px)!important;
}

.hr3-header-premium h1 strong{
    color:#ff9a4d!important;
}

.hr3-header-premium p{
    color:#aeb9b4!important;
    font-size:12px!important;
}

.hr3-header-premium .hr3-header-side{
    align-self:stretch;
}

.hr3-date-premium{
    min-width:190px!important;
    padding:13px 16px!important;
    background:rgba(255,255,255,.075)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:none!important;
    backdrop-filter:blur(10px);
}

.hr3-date-premium span{
    color:#e98b50!important;
    font-size:9px!important;
    letter-spacing:.12em;
}

.hr3-date-premium strong{
    color:#fff!important;
    font-size:14px!important;
}

.hr3-date-premium small{
    color:#93a19a!important;
}

.hr3-header-premium .hr3-icon-btn{
    background:rgba(255,255,255,.08)!important;
    border-color:rgba(255,255,255,.12)!important;
    color:#ffd1b0!important;
}

.hr3-header-premium .hr3-add-btn{
    background:var(--orange)!important;
    color:#fff!important;
    box-shadow:0 10px 24px rgba(242,122,26,.25)!important;
}

.hr3-header-premium .hr3-add-btn span{
    color:#fff1e7!important;
}

/* ---------------------------------------------------------
    ORANGE ACCENT REFINEMENT
--------------------------------------------------------- */
.hr3-command-card{
    background:linear-gradient(150deg,#fff 0%,#fcfcfb 100%)!important;
}

.hr3-command-card:hover{
    border-color:#efb184!important;
}

.hr3-present{--accent:#ef6c12!important;--wash:#fff0e5!important}

.hr3-leave{--accent:#b96b29!important;--wash:#fff4eb!important}

.hr3-birthday{--accent:#d65c45!important;--wash:#fff0ec!important}

.hr3-probation{--accent:#c25d26!important;--wash:#fff3e9!important}

.hr3-attention{--accent:#e48a32!important;--wash:#fff4e6!important}

.hr3-command-card .hr3-icon{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.hr3-command-card:hover .hr3-icon{
    background:var(--accent)!important;
    color:#fff!important;
}

/* Orange replaces dashboard action green */
.hr3-panel-head>button,
.hr3-section-title span,
.hr3-actions .hr3-action-buttons button:hover{
    color:var(--orange)!important;
}

/* ---------------------------------------------------------
    PREMIUM MODAL / POPUP
--------------------------------------------------------- */
.dashboard-modal{
    padding:30px!important;
    animation:hr3ModalIn .22s ease both;
}

.dashboard-modal-backdrop{
    background:rgba(17,23,20,.62)!important;
    backdrop-filter:blur(10px) saturate(.8)!important;
}

.hr3-modal-card{
    width:min(780px,calc(100vw - 60px))!important;
    border:1px solid rgba(255,255,255,.55)!important;
    border-radius:26px!important;
    background:#fff!important;
    box-shadow:0 35px 100px rgba(0,0,0,.32)!important;
}

.dashboard-modal-head{
    position:relative;
    overflow:hidden;
    min-height:122px;
    padding:26px 28px!important;
    border-bottom:0!important;
    background:
    radial-gradient(circle at 88% 18%,rgba(242,122,26,.23),transparent 26%),
    linear-gradient(125deg,#19221f,#27312c)!important;
}

.dashboard-modal-head:after{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    right:-58px;
    bottom:-128px;
}

.dashboard-modal-head > *{
    position:relative;
    z-index:1;
}

.hr3-modal-kicker{
    color:#ff9b58!important;
    font-size:9px!important;
    font-weight:900!important;
    letter-spacing:.18em!important;
}

.dashboard-modal-head h2{
    color:#fff!important;
    margin-top:7px!important;
    font-size:25px!important;
    letter-spacing:-.035em!important;
}

.dashboard-modal-head p{
    color:#a8b3ad!important;
    font-size:11px!important;
}

.dashboard-modal-close{
    width:40px!important;
    height:40px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.09)!important;
    color:#fff!important;
    transition:all .18s ease;
}

.dashboard-modal-close:hover{
    background:var(--orange)!important;
    transform:rotate(90deg);
}

.dashboard-modal-body{
    max-height:67vh!important;
    padding:18px 24px 24px!important;
    background:linear-gradient(180deg,#fff,#fffaf6)!important;
}

.dashboard-modal-body .hr-v2-modal-row{
    position:relative;
    min-height:67px!important;
    margin-bottom:8px!important;
    padding:10px 12px!important;
    border:1px solid #eee4dc!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 4px 13px rgba(49,34,20,.035);
    transition:all .18s ease;
}

.dashboard-modal-body .hr-v2-modal-row:hover{
    transform:translateY(-2px);
    border-color:#f0b889!important;
    box-shadow:0 12px 23px rgba(83,46,17,.09);
}

.dashboard-modal-body .hr-v2-person-avatar,
.dashboard-modal-body img{
    border-radius:13px!important;
    border:2px solid #fff!important;
    box-shadow:0 5px 14px rgba(40,30,22,.12)!important;
}

.dashboard-modal-body .hr-v2-person-main strong{
    color:#222b27!important;
}

.dashboard-modal-body .hr-v2-person-main small{
    color:#877f78!important;
}

@keyframes hr3ModalIn{
    from{opacity:0}

to{opacity:1}
}

@media(max-width:760px){
    .hr3-header-premium{
    min-height:auto!important;
    padding:24px!important;
    }

.hr3-header-premium .hr3-header-side{
    margin-top:10px;
    }

.dashboard-modal{
    padding:14px!important;
    }

.hr3-modal-card{
    width:calc(100vw - 28px)!important;
    border-radius:20px!important;
    }

.dashboard-modal-head{
    padding:22px!important;
    }

.dashboard-modal-body{
    padding:14px!important;
    }
}

/* =========================================================
    EMPLOYEE QUICK VIEW — PREMIUM DASHBOARD POPUP
========================================================= */
.employee-quick-modal{position:fixed;inset:0;z-index:52000;display:grid;place-items:center;padding:28px}

.employee-quick-modal.hidden{display:none!important}

.employee-quick-backdrop{position:absolute;inset:0;background:rgba(16,22,19,.68);backdrop-filter:blur(11px) saturate(.85)}

.employee-quick-card{position:relative;z-index:1;width:min(940px,calc(100vw - 56px));min-height:570px;max-height:calc(100vh - 56px);display:grid;grid-template-columns:275px minmax(0,1fr);overflow:auto;border-radius:28px;background:#fff;border:1px solid rgba(255,255,255,.58);box-shadow:0 40px 120px rgba(0,0,0,.35);animation:employeeQuickIn .25s cubic-bezier(.2,.8,.2,1)}

.employee-quick-side{position:relative;overflow:hidden;padding:32px 25px;background:radial-gradient(circle at 70% 9%,rgba(242,122,26,.26),transparent 26%),linear-gradient(165deg,#18221f,#26312c);color:#fff}

.employee-quick-side:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(transparent,rgba(0,0,0,.1));pointer-events:none}

.employee-quick-side-glow{position:absolute;width:190px;height:190px;right:-95px;bottom:90px;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.018),0 0 0 58px rgba(255,255,255,.012)}

.employee-quick-avatar{position:relative;z-index:1;width:92px;height:92px;margin:4px 0 16px;border:3px solid rgba(255,255,255,.92);border-radius:26px;overflow:hidden;background:#fff3ea;box-shadow:0 15px 30px rgba(0,0,0,.22)}

.employee-quick-avatar img{width:100%;height:100%;object-fit:cover}

.employee-quick-avatar>span{display:grid;place-items:center;width:100%;height:100%;font-size:29px;font-weight:900;color:#e36f18;background:linear-gradient(145deg,#fff7f1,#ffe3cf)}

.employee-quick-status{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-size:10px;color:#b8c4be}

.employee-quick-status span{width:7px;height:7px;border-radius:50%;background:#ff8d3d;box-shadow:0 0 0 5px rgba(255,141,61,.12)}

.employee-quick-side h2{position:relative;z-index:1;margin:13px 0 5px;font-size:25px;line-height:1.1;letter-spacing:-.035em}

.employee-quick-side>p{position:relative;z-index:1;margin:0;color:#aab7b0;font-size:11px;line-height:1.5}

.employee-quick-id{position:relative;z-index:1;display:inline-flex;margin-top:15px;padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.055);color:#f2a66d;font-size:9px;font-weight:800;letter-spacing:.07em}

.employee-quick-side-meta{position:relative;z-index:1;margin-top:30px;border-top:1px solid rgba(255,255,255,.08);padding-top:13px;display:grid;gap:0}

.employee-quick-side-meta>div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}

.employee-quick-side-meta span{display:block;color:#84938b;font-size:8px;letter-spacing:.11em;text-transform:uppercase}

.employee-quick-side-meta strong{display:block;margin-top:4px;color:#edf4f0;font-size:11px;font-weight:700}

.employee-quick-main{min-width:0;padding:29px 31px 22px;background:linear-gradient(180deg,#fff,#fffaf6)}

.employee-quick-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}

.employee-quick-kicker,.employee-quick-section-head span{display:block;color:#c46524;font-size:9px;font-weight:900;letter-spacing:.17em}

.employee-quick-top h3{margin:7px 0 4px;font-size:26px;letter-spacing:-.035em;color:#202925}

.employee-quick-top p{margin:0;color:#89938e;font-size:10px}

.employee-quick-date{padding:9px 11px;border:1px solid #f1dfd1;border-radius:12px;background:#fff9f4;text-align:right}

.employee-quick-date span{display:block;color:#b47b57;font-size:7px;font-weight:850;letter-spacing:.12em}

.employee-quick-date strong{display:block;margin-top:4px;color:#4a3424;font-size:10px}

.employee-quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:23px 0 20px}

.employee-quick-stat{min-height:66px;padding:11px;border:1px solid #eee8e2;border-radius:13px;background:#fff;box-shadow:0 4px 12px rgba(51,35,22,.025)}

.employee-quick-stat span{display:block;color:#9b928b;font-size:7px;font-weight:900;letter-spacing:.12em}

.employee-quick-stat strong{display:block;margin-top:7px;color:#27312d;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.employee-quick-section{padding-top:17px;border-top:1px solid #eee8e2}

.employee-quick-section-head h4{margin:5px 0 12px;font-size:14px;color:#27312d}

.employee-quick-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.employee-quick-detail{min-height:57px;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:#fdfcfb;border:1px solid #f0ebe7}

.employee-quick-detail-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff0e5;color:#db6818;font-size:12px}

.employee-quick-detail small,.employee-quick-context-row small{display:block;color:#9a938d;font-size:8px}

.employee-quick-detail strong,.employee-quick-context-row strong{display:block;margin-top:4px;color:#303a35;font-size:10px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.employee-quick-context-section{margin-top:18px}

.employee-quick-context{display:grid;gap:7px}

.employee-quick-context-row{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:11px;background:#fbfaf8}

.employee-quick-context-row>span{width:7px;height:7px;margin-top:7px;border-radius:50%;background:#a6afa9}

.employee-quick-context-row.good>span{background:#ef7b23}

.employee-quick-context-row.attention>span{background:#dc6a43}

.employee-quick-context-row.review>span{background:#d18a43}

.employee-quick-context-row.leave>span{background:#ca8050}

.employee-quick-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:19px;padding-top:17px;border-top:1px solid #eee8e2}

.employee-quick-footer button{height:38px;border-radius:10px;padding:0 14px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}

.employee-quick-secondary{border:1px solid #e6ddd7;background:#fff;color:#6f7873}

.employee-quick-primary{border:1px solid #f27a1a;background:#f27a1a;color:#fff;box-shadow:0 8px 18px rgba(242,122,26,.18)}

.employee-quick-primary span{margin-left:5px}

.employee-quick-close{position:absolute;z-index:4;right:14px;top:14px;width:36px;height:36px;border:1px solid #ece4de;border-radius:11px;background:#fff;color:#65716b;font-size:20px;cursor:pointer}

.employee-quick-close:hover{background:#f27a1a;color:#fff;border-color:#f27a1a;transform:rotate(90deg)}

@keyframes employeeQuickIn{from{opacity:0;transform:translateY(12px) scale(.985)}

to{opacity:1;transform:none}}

@media(max-width:760px){.employee-quick-modal{padding:12px}

.employee-quick-card{width:calc(100vw - 24px);max-height:calc(100vh - 24px);grid-template-columns:1fr;border-radius:21px}

.employee-quick-side{padding:24px 22px}

.employee-quick-side-meta{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}

.employee-quick-side-meta>div{border:0;padding:0}

.employee-quick-main{padding:23px 18px}

.employee-quick-stats,.employee-quick-details{grid-template-columns:1fr 1fr}

.employee-quick-top{padding-right:38px}

.employee-quick-date{display:none}}

@media(max-width:480px){.employee-quick-side-meta{grid-template-columns:1fr}

.employee-quick-stats,.employee-quick-details{grid-template-columns:1fr}

.employee-quick-footer{flex-direction:column-reverse}

.employee-quick-footer button{width:100%}}

/* =========================================================
    V3.4 — EMPLOYEE MOMENTS + TRUE BACKGROUND SCROLL LOCK
========================================================= */
html.employee-quick-open,
body.employee-quick-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
    height:100%!important;
}

.employee-quick-modal{
    overscroll-behavior:contain;
}

.employee-quick-card{
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#e59a65 transparent;
}

.employee-quick-moments{
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid #eee8e2;
}

.employee-quick-moments-head span{
    display:block;
    color:#c46524;
    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
}

.employee-quick-moments-head h4{
    margin:5px 0 11px;
    color:#27312d;
    font-size:14px;
}

.employee-quick-moment-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.employee-quick-moment{
    position:relative;
    min-height:83px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:11px;
    border:1px solid #eee7e0;
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#fdfbf9);
    box-shadow:0 5px 15px rgba(61,39,20,.035);
}

.employee-quick-moment.upcoming{
    border-color:#f1c4a3;
    background:
    radial-gradient(circle at 100% 0,rgba(242,122,26,.10),transparent 36%),
    linear-gradient(145deg,#fff,#fff8f3);
}

.employee-quick-moment-icon{
    flex:0 0 33px;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#fff0e5;
    font-size:16px;
}

.employee-quick-moment small{
    display:block;
    color:#9a928b;
    font-size:7px;
    font-weight:900;
    letter-spacing:.11em;
}

.employee-quick-moment strong{
    display:block;
    margin-top:5px;
    color:#2d3732;
    font-size:10px;
    line-height:1.35;
}

.employee-quick-moment em{
    display:block;
    margin-top:5px;
    color:#bd6b31;
    font-size:8px;
    font-style:normal;
}

@media(max-width:560px){
    .employee-quick-moment-grid{grid-template-columns:1fr}
}

/* ============================================================
    DASHBOARD POPUP DATA ENRICHMENT
    Present / Leave / Birthday / Department
    ============================================================ */
.dashboard-modal-body .hr3-modal-enriched-row {
    min-height: 84px;
    align-items: center;
    gap: 14px;
}

.dashboard-modal-body .hr3-modal-enriched-row .hr-v2-modal-main {
    min-width: 0;
}

.dashboard-modal-body .hr3-modal-enriched-row .hr-v2-modal-main strong {
    font-size: 13px;
    line-height: 1.3;
}

.dashboard-modal-body .hr3-modal-enriched-row .hr-v2-modal-main small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
}

.hr3-modal-data {
    min-width: 210px;
    max-width: 270px;
    display: grid;
    gap: 4px;
    text-align: right;
    justify-items: end;
}

.hr3-modal-data small {
    color: #172033;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.hr3-modal-data em {
    color: #748094;
    font-size: 10px;
    font-style: normal;
    line-height: 1.4;
}

.hr3-modal-data b {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .10);
    color: #15803d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.dashboard-modal-body .hr3-modal-enriched-row:hover .hr3-modal-data b {
    background: rgba(34, 197, 94, .16);
}

.dashboard-modal-body .hr3-modal-enriched-row .hr-v2-person-arrow {
    margin-left: 2px;
}

@media (max-width: 720px) {
    .dashboard-modal-body .hr3-modal-enriched-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: auto;
    padding: 13px;
    }

.hr3-modal-data {
    grid-column: 2 / 4;
    min-width: 0;
    max-width: none;
    width: 100%;
    text-align: left;
    justify-items: start;
    margin-top: 2px;
    }

.dashboard-modal-body .hr3-modal-enriched-row .hr-v2-person-arrow {
    grid-column: 3;
    grid-row: 1;
    }
}

/* ============================================================
    DASHBOARD MODAL — RIGHT SIDE BADGE / TEAM CLIPPING FIX
    ============================================================ */
.dashboard-modal-card.hr3-modal-card{
    overflow: visible;
}

.dashboard-modal-body{
    padding: 10px 14px 18px;
    overflow-x: hidden;
}

.hr-v2-person-row,
.hr3-modal-row{
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    grid-template-columns: minmax(0,1fr) minmax(190px, auto) 22px !important;
    column-gap: 14px;
    align-items: center;
}

.hr-v2-person-main,
.hr3-modal-person{
    min-width: 0;
}

.hr-v2-person-info,
.hr3-modal-person-info{
    min-width: 0;
}

.hr-v2-person-info strong,
.hr-v2-person-info small,
.hr3-modal-person strong,
.hr3-modal-person small{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hr-v2-person-meta,
.hr3-modal-data{
    min-width: 190px;
    padding-right: 4px;
    overflow: visible !important;
}

.hr-v2-person-meta b,
.hr3-modal-data b{
    display: inline-flex !important;
    width: max-content;
    max-width: 100%;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    padding: 5px 11px !important;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.hr-v2-person-arrow,
.hr3-modal-arrow{
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 760px){
    .dashboard-modal-body{padding:8px 10px 16px;}

.hr-v2-person-row,
    .hr3-modal-row{
    grid-template-columns: minmax(0,1fr) 18px !important;
    row-gap: 5px;
    }

.hr-v2-person-meta,
    .hr3-modal-data{
    grid-column: 1 / -1;
    min-width: 0;
    padding-left: 62px;
    }
}

/* ============================================================
    DASHBOARD POPUPS — FINAL CLEAN TEXT LAYOUT
    Green status boxes removed completely
============================================================ */
.dashboard-modal-body .hr3-modal-data b,
.dashboard-modal-body .hr-v2-person-meta b,
.dashboard-modal-body .hr3-modal-enriched-row b,
.dashboard-modal-body .hr3-modal-row b,
.dashboard-modal-body .hr-v2-modal-row b,
.dashboard-modal-body .status-badge,
.dashboard-modal-body .badge,
.dashboard-modal-body .tag,
.dashboard-modal-body .pill,
.dashboard-modal-body [class*="status-badge"],
.dashboard-modal-body [class*="status-pill"]{
    display:none !important;
}

.dashboard-modal-body .hr3-modal-data{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:4px !important;
    min-width:210px !important;
    max-width:300px !important;
    padding:0 4px 0 0 !important;
}

.dashboard-modal-body .hr3-modal-data small{
    display:block !important;
    color:#172033 !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
    white-space:normal !important;
}

.dashboard-modal-body .hr3-modal-data em{
    display:block !important;
    color:#748094 !important;
    font-size:10px !important;
    line-height:1.4 !important;
    font-style:normal !important;
    white-space:normal !important;
}

.dashboard-modal-body .hr-v2-modal-row.hr3-modal-enriched-row{
    grid-template-columns:58px minmax(0,1fr) minmax(210px,300px) 24px !important;
    column-gap:14px !important;
    align-items:center !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
    overflow:visible !important;
}

.dashboard-modal-body .hr-v2-person-arrow{
    width:24px !important;
    min-width:24px !important;
    margin:0 !important;
}

@media (max-width:760px){
    .dashboard-modal-body .hr-v2-modal-row.hr3-modal-enriched-row{
    grid-template-columns:52px minmax(0,1fr) 22px !important;
    row-gap:5px !important;
    }

.dashboard-modal-body .hr3-modal-data{
    grid-column:2 / 4 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    align-items:flex-start !important;
    text-align:left !important;
    padding:0 !important;
    }

.dashboard-modal-body .hr-v2-person-arrow{
    grid-column:3 !important;
    grid-row:1 !important;
    }
}

/* ============================================================
    DASHBOARD POPUP — NO DEPARTMENT TEXT WRAPPING
============================================================ */
.dashboard-modal-body .hr-v2-person-meta,
.dashboard-modal-body .hr-v2-person-meta *{
    min-width:0 !important;
}

.dashboard-modal-body .hr-v2-person-meta small,
.dashboard-modal-body .hr-v2-person-meta .hr-v2-person-subtitle,
.dashboard-modal-body .hr-v2-person-meta .employee-subtitle,
.dashboard-modal-body .hr-v2-person-meta [class*="subtitle"]{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.35 !important;
}

/* Give the employee information more usable width */
.dashboard-modal-body .hr-v2-modal-row.hr3-modal-enriched-row{
    grid-template-columns:58px minmax(260px,1fr) minmax(210px,300px) 24px !important;
}

/* On narrower desktop screens, keep the subtitle on one line */
@media (max-width:1050px){
    .dashboard-modal-body .hr-v2-modal-row.hr3-modal-enriched-row{
    grid-template-columns:54px minmax(0,1fr) minmax(190px,250px) 22px !important;
    }

.dashboard-modal-body .hr-v2-person-meta small,
    .dashboard-modal-body .hr-v2-person-meta .hr-v2-person-subtitle,
    .dashboard-modal-body .hr-v2-person-meta .employee-subtitle,
    .dashboard-modal-body .hr-v2-person-meta [class*="subtitle"]{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    }
}

/* ============================================================
    EMPLOYEE SNAPSHOT — JOIN DATE POSITION + SHIFT FIELD
============================================================ */
/* Move the "WITH COMPANY SINCE" box approximately 1 inch to the left
    without disturbing the rest of the snapshot header. */
#employeeQuickJoined,
.employee-quick-date{
    position:relative !important;
    left:-48px !important;
}

/* Keep the date box from being pushed outside the snapshot on smaller screens */
@media (max-width:1050px){
    #employeeQuickJoined,
    .employee-quick-date{
    left:-22px !important;
    }
}

@media (max-width:760px){
    #employeeQuickJoined,
    .employee-quick-date{
    left:0 !important;
    }
}

/* ============================================================
    EMPLOYEE SNAPSHOT — CLEAN SINGLE-INFO DESIGN
    Original layout preserved; duplicate data removed.
============================================================ */
.employee-quick-stats .employee-quick-stat strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Four unique contact/details cards fit cleanly in the existing grid. */
.employee-quick-details{
    align-content:start;
}

/* Keep sidebar metadata visually identical and compact. */
.employee-quick-side-meta strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Slightly tighten the cleaned snapshot so the unchanged visual design
    remains balanced after duplicate rows are removed. */
.employee-quick-context{
    margin-top:18px;
}

/* ============================================================
    EMPLOYEE SNAPSHOT — LEAVE BALANCE SUMMARY
============================================================ */
.employee-quick-stats .employee-quick-stat span{
    white-space:nowrap;
}

.employee-quick-stats .employee-quick-stat strong{
    font-variant-numeric:tabular-nums;
}

/* ============================================================
    PEOPLE • EMPLOYEE DIRECTORY — DASHBOARD THEME REDESIGN
    White cards + black typography + orange accent
    ============================================================ */
:root{
    --directory-orange:#f97316;
    --directory-orange-dark:#ea580c;
    --directory-orange-soft:#fff4eb;
    --directory-black:#171717;
    --directory-text:#2b3442;
    --directory-muted:#7b8798;
    --directory-border:#e8e1da;
    --directory-bg:#f7f6f4;
}

/* PAGE */
.employees-page{
    background:
    radial-gradient(circle at 100% 0, rgba(249,115,22,.055), transparent 28%),
    #f7f6f4 !important;
    padding:32px !important;
}

.employees-header{
    margin-bottom:24px !important;
    align-items:flex-end !important;
}

.employees-header h1{
    color:var(--directory-black) !important;
    font-size:29px !important;
    font-weight:800 !important;
    letter-spacing:-.6px !important;
    margin:0 !important;
}

.employees-header p{
    color:var(--directory-muted) !important;
    font-size:13px !important;
    margin:7px 0 0 !important;
}

.back-button{
    min-height:42px !important;
    padding:0 17px !important;
    border:1px solid var(--directory-border) !important;
    background:#fff !important;
    color:var(--directory-black) !important;
    border-radius:12px !important;
    font-weight:700 !important;
    box-shadow:0 4px 14px rgba(20,20,20,.035) !important;
}

.back-button:hover{
    color:var(--directory-orange-dark) !important;
    border-color:#fdba74 !important;
    background:var(--directory-orange-soft) !important;
}

/* DIRECTORY STAT CARDS */
.employee-stats{
    gap:16px !important;
    margin-bottom:22px !important;
}

.employee-stat{
    min-height:106px !important;
    background:#fff !important;
    color:var(--directory-black) !important;
    border:1px solid var(--directory-border) !important;
    border-radius:18px !important;
    padding:20px 22px !important;
    box-shadow:0 8px 24px rgba(20,20,20,.045) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.employee-stat::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:20px !important;
    bottom:20px !important;
    width:4px !important;
    border-radius:0 5px 5px 0 !important;
    background:var(--directory-orange) !important;
    z-index:3 !important;
}

.employee-stat::after{
    width:88px !important;
    height:88px !important;
    right:-22px !important;
    top:-27px !important;
    background:var(--directory-orange-soft) !important;
}

.employee-stat.total,
.employee-stat.active,
.employee-stat.inactive{
    background:#fff !important;
}

.employee-stat.inactive::before{
    background:#171717 !important;
}

.employee-stat span{
    color:var(--directory-muted) !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.8px !important;
}

.employee-stat strong{
    color:var(--directory-black) !important;
    font-size:30px !important;
    font-weight:800 !important;
    letter-spacing:-1px !important;
    margin-top:7px !important;
}

.employee-stat.clickable-card:hover{
    transform:translateY(-3px) !important;
    border-color:#fdba74 !important;
    box-shadow:0 14px 30px rgba(20,20,20,.075) !important;
    filter:none !important;
}

/* SEARCH + FILTER AREA */
.employee-controls{
    gap:12px !important;
    margin-bottom:22px !important;
}

.search-box,
.employee-controls select{
    height:48px !important;
    background:#fff !important;
    border:1px solid var(--directory-border) !important;
    border-radius:13px !important;
    box-shadow:0 4px 14px rgba(20,20,20,.025) !important;
}

.search-box{
    padding:0 16px !important;
}

.search-box:focus-within{
    border-color:#fb923c !important;
    box-shadow:0 0 0 4px rgba(249,115,22,.09) !important;
}

.search-box span{
    color:var(--directory-orange) !important;
}

.search-box input{
    color:var(--directory-black) !important;
    font-weight:600 !important;
}

.search-box input::placeholder{
    color:#a1a9b5 !important;
    font-weight:500 !important;
}

.employee-controls select{
    color:#4a5565 !important;
    font-weight:600 !important;
    padding-left:13px !important;
}

.employee-controls select:focus{
    border-color:#fb923c !important;
    box-shadow:0 0 0 4px rgba(249,115,22,.09) !important;
}

/* EMPLOYEE GRID */
.employee-grid{
    gap:16px !important;
}

/* WHITE DASHBOARD-STYLE EMPLOYEE CARD */
.employee-card{
    min-height:292px !important;
    background:#fff !important;
    border:1px solid var(--directory-border) !important;
    border-radius:19px !important;
    padding:20px 18px 17px !important;
    box-shadow:0 7px 20px rgba(20,20,20,.04) !important;
}

.employee-card::before{
    left:18px !important;
    right:auto !important;
    top:16px !important;
    width:34px !important;
    height:3px !important;
    border-radius:99px !important;
    background:var(--directory-orange) !important;
}

.employee-card::after{
    width:100px !important;
    height:100px !important;
    right:-44px !important;
    top:-48px !important;
    background:rgba(249,115,22,.045) !important;
}

.employee-card:hover{
    transform:translateY(-5px) !important;
    border-color:#fdba74 !important;
    box-shadow:0 18px 36px rgba(20,20,20,.09) !important;
}

.employee-photo-wrapper{
    width:82px !important;
    height:82px !important;
    margin:10px auto 15px !important;
    padding:3px !important;
    background:#fff !important;
    border:1px solid #fed7aa !important;
    box-shadow:0 8px 20px rgba(20,20,20,.08) !important;
}

.employee-avatar{
    background:var(--directory-orange-soft) !important;
    color:var(--directory-orange-dark) !important;
}

.employee-name{
    color:var(--directory-black) !important;
    font-size:16px !important;
    font-weight:800 !important;
    letter-spacing:-.25px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.employee-title{
    color:#4f5b6b !important;
    font-size:13px !important;
    font-weight:600 !important;
    min-height:38px !important;
    margin-top:7px !important;
    padding:0 2px 11px !important;
    border-bottom:1px solid #eee9e4 !important;
    overflow:hidden !important;
}

.employee-department{
    color:var(--directory-muted) !important;
    font-size:11px !important;
    font-weight:700 !important;
    margin-top:10px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.employee-status{
    min-height:26px !important;
    margin-top:10px !important;
    padding:4px 12px !important;
    border:1px solid transparent !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.55px !important;
}

.employee-status.active{
    background:#fff7ed !important;
    border-color:#fed7aa !important;
    color:#c2410c !important;
}

.employee-status.inactive{
    background:#f4f4f5 !important;
    border-color:#e4e4e7 !important;
    color:#52525b !important;
}

/* LOADING + EMPTY */
.employees-loading,
.employees-empty{
    background:#fff !important;
    border:1px solid var(--directory-border) !important;
    border-radius:18px !important;
    box-shadow:0 8px 22px rgba(20,20,20,.035) !important;
    color:var(--directory-muted) !important;
}

/* DIRECTORY SCROLL/CONTENT SAFETY */
.employees-page,
.employee-grid,
.employee-card{
    min-width:0 !important;
}

@media (max-width:1250px){
    .employee-grid{
    gap:14px !important;
    }
}

@media (max-width:750px){
    .employees-page{
    padding:20px !important;
    }

.employees-header{
    align-items:flex-start !important;
    }

.employee-stat{
    min-height:94px !important;
    }
}

/* ============================================================
    EMPLOYEE DIRECTORY — TOP 3 CARDS
    SNAPSHOT-INSPIRED BLACK + ORANGE THEME
============================================================ */
/* Remove the old red / orange / green identity completely */
.employee-stat,
.employee-stat.total,
.employee-stat.active,
.employee-stat.inactive{
    background:#ffffff !important;
    color:#171717 !important;
    border:1px solid #e7e0d9 !important;
    box-shadow:0 8px 24px rgba(20,20,20,.045) !important;
}

/* Premium left accent instead of individual red/orange/green colors */
.employee-stat::before,
.employee-stat.total::before,
.employee-stat.active::before,
.employee-stat.inactive::before{
    background:#f97316 !important;
}

/* Keep one neutral black accent for the inactive/third card */
.employee-stat.inactive::before{
    background:#171717 !important;
}

.employee-stat span,
.employee-stat.total span,
.employee-stat.active span,
.employee-stat.inactive span{
    color:#7b8491 !important;
}

.employee-stat strong,
.employee-stat.total strong,
.employee-stat.active strong,
.employee-stat.inactive strong{
    color:#171717 !important;
}

/* Remove legacy coloured circles / gradients */
.employee-stat::after,
.employee-stat.total::after,
.employee-stat.active::after,
.employee-stat.inactive::after{
    background:#fff4eb !important;
}

.employee-stat.inactive::after{
    background:#f2f2f2 !important;
}

/* Unified premium hover */
.employee-stat:hover,
.employee-stat.total:hover,
.employee-stat.active:hover,
.employee-stat.inactive:hover{
    background:#ffffff !important;
    border-color:#fdba74 !important;
    box-shadow:0 15px 32px rgba(20,20,20,.075) !important;
}

/* ============================================================
    FINAL OVERRIDE — DIRECTORY TOP 3 KPI CARDS
    Exact selectors used by the current Employee Directory markup
============================================================ */
/* The old stylesheet uses these exact IDs/classes for orange/green/red.
    Override them directly. */
#directoryTotalCard,
#directoryActiveCard,
#directoryInactiveCard,
.employee-stat.total-stat,
.employee-stat.active-stat,
.employee-stat.inactive-stat{
    position:relative !important;
    overflow:hidden !important;
    background:#ffffff !important;
    background-image:none !important;
    color:#171717 !important;
    border:1px solid #e7dfd8 !important;
    box-shadow:0 8px 24px rgba(20,20,20,.055) !important;
}

/* Remove any legacy coloured pseudo-element/gradient layer */
#directoryTotalCard::before,
#directoryActiveCard::before,
#directoryInactiveCard::before,
.employee-stat.total-stat::before,
.employee-stat.active-stat::before,
.employee-stat.inactive-stat::before{
    background:#f97316 !important;
    background-image:none !important;
}

#directoryTotalCard::after,
#directoryActiveCard::after,
#directoryInactiveCard::after,
.employee-stat.total-stat::after,
.employee-stat.active-stat::after,
.employee-stat.inactive-stat::after{
    background:#fff4eb !important;
    background-image:none !important;
}

/* Make the third card slightly black-accented, while keeping the same theme */
#directoryInactiveCard::before,
.employee-stat.inactive-stat::before{
    background:#171717 !important;
}

/* Force ALL text inside the cards away from the old coloured/white styles */
#directoryTotalCard *,
#directoryActiveCard *,
#directoryInactiveCard *,
.employee-stat.total-stat *,
.employee-stat.active-stat *,
.employee-stat.inactive-stat *{
    text-shadow:none !important;
}

#directoryTotalCard span,
#directoryActiveCard span,
#directoryInactiveCard span,
.employee-stat.total-stat span,
.employee-stat.active-stat span,
.employee-stat.inactive-stat span{
    color:#7b8491 !important;
}

#directoryTotalCard strong,
#directoryActiveCard strong,
#directoryInactiveCard strong,
#directoryTotalCard .employee-stat-value,
#directoryActiveCard .employee-stat-value,
#directoryInactiveCard .employee-stat-value,
.employee-stat.total-stat strong,
.employee-stat.active-stat strong,
.employee-stat.inactive-stat strong{
    color:#171717 !important;
}

/* Same premium hover behavior */
#directoryTotalCard:hover,
#directoryActiveCard:hover,
#directoryInactiveCard:hover,
.employee-stat.total-stat:hover,
.employee-stat.active-stat:hover,
.employee-stat.inactive-stat:hover{
    background:#ffffff !important;
    background-image:none !important;
    border-color:#fdba74 !important;
    box-shadow:0 15px 32px rgba(20,20,20,.085) !important;
    transform:translateY(-3px) !important;
}

/* ============================================================
    EMPLOYEE DIRECTORY — DARK KPI CARDS
    Matches the Dashboard Attendance popup visual language
============================================================ */
#directoryTotalCard,
#directoryActiveCard,
#directoryInactiveCard,
.employee-stat.total-stat,
.employee-stat.active-stat,
.employee-stat.inactive-stat{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    min-height:134px !important;
    padding:26px 28px !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.20), transparent 38%),
    linear-gradient(135deg, #18211f 0%, #202624 58%, #29241d 100%) !important;
    background-color:#1d2422 !important;
    border:1px solid rgba(255,255,255,.68) !important;
    border-radius:24px !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 28px rgba(16,18,17,.13) !important;
}

/* Subtle warm decorative corner — same feeling as the screenshot */
#directoryTotalCard::after,
#directoryActiveCard::after,
#directoryInactiveCard::after,
.employee-stat.total-stat::after,
.employee-stat.active-stat::after,
.employee-stat.inactive-stat::after{
    content:"" !important;
    position:absolute !important;
    width:92px !important;
    height:92px !important;
    right:-34px !important;
    top:-35px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.045) !important;
    z-index:-1 !important;
}

/* Remove the old coloured vertical stripe */
#directoryTotalCard::before,
#directoryActiveCard::before,
#directoryInactiveCard::before,
.employee-stat.total-stat::before,
.employee-stat.active-stat::before,
.employee-stat.inactive-stat::before{
    content:none !important;
    display:none !important;
}

#directoryTotalCard span,
#directoryActiveCard span,
#directoryInactiveCard span,
.employee-stat.total-stat span,
.employee-stat.active-stat span,
.employee-stat.inactive-stat span{
    color:#ffb47b !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
}

#directoryTotalCard strong,
#directoryActiveCard strong,
#directoryInactiveCard strong,
#directoryTotalCard .employee-stat-value,
#directoryActiveCard .employee-stat-value,
#directoryInactiveCard .employee-stat-value,
.employee-stat.total-stat strong,
.employee-stat.active-stat strong,
.employee-stat.inactive-stat strong{
    display:block !important;
    margin-top:13px !important;
    color:#f4f5f5 !important;
    font-size:39px !important;
    font-weight:850 !important;
    letter-spacing:-1.4px !important;
    line-height:1 !important;
}

#directoryTotalCard:hover,
#directoryActiveCard:hover,
#directoryInactiveCard:hover,
.employee-stat.total-stat:hover,
.employee-stat.active-stat:hover,
.employee-stat.inactive-stat:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(255,181,123,.75) !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.27), transparent 42%),
    linear-gradient(135deg, #192321 0%, #222927 58%, #30281f 100%) !important;
    box-shadow:0 18px 36px rgba(16,18,17,.18) !important;
}

/* ============================================================
    EMPLOYEE DIRECTORY CARD — BOTTOM LEFT BLACK HALF CIRCLE
============================================================ */
/* Keep the existing orange top-right decorative shape unchanged.
    Add a separate dark/black half-circle at the bottom-left. */
.employee-card{
    position:relative !important;
    overflow:hidden !important;
}

.employee-card .employee-name,
.employee-card .employee-title,
.employee-card .employee-department,
.employee-card .employee-status,
.employee-card .employee-photo-wrapper{
    position:relative !important;
    z-index:2 !important;
}

/* Dark premium decorative half-circle */
.employee-card::after{
    content:"" !important;
    position:absolute !important;
    width:118px !important;
    height:118px !important;
    left:-62px !important;
    bottom:-62px !important;
    border-radius:50% !important;
    background:
    radial-gradient(circle at 68% 32%,
    rgba(70,70,70,.16) 0%,
    rgba(23,23,23,.10) 42%,
    rgba(0,0,0,.045) 72%,
    transparent 73%) !important;
    border:1px solid rgba(23,23,23,.06) !important;
    z-index:0 !important;
    pointer-events:none !important;
}

/* Ensure the existing orange top-right shape stays visible through ::before */
.employee-card::before{
    z-index:1 !important;
}

.employee-card:hover::after{
    transform:scale(1.04) !important;
    transition:transform .25s ease !important;
}

/* ============================================================
    EMPLOYEE CARD — OPPOSITE CORNER DECORATIONS
    ORANGE: TOP RIGHT
    BLACK:  BOTTOM LEFT
============================================================ */
.employee-card{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
}

/* ORANGE half-circle — TOP RIGHT */
.employee-card::before{
    content:"" !important;
    position:absolute !important;
    width:128px !important;
    height:128px !important;
    top:-62px !important;
    right:-62px !important;
    left:auto !important;
    bottom:auto !important;
    border-radius:50% !important;
    background:rgba(249,115,22,.09) !important;
    border:1px solid rgba(249,115,22,.08) !important;
    z-index:0 !important;
    pointer-events:none !important;
}

/* BLACK half-circle — BOTTOM LEFT, opposite the orange shape */
.employee-card::after{
    content:"" !important;
    position:absolute !important;
    width:128px !important;
    height:128px !important;
    left:-62px !important;
    bottom:-62px !important;
    right:auto !important;
    top:auto !important;
    border-radius:50% !important;
    background:rgba(23,23,23,.075) !important;
    border:1px solid rgba(23,23,23,.06) !important;
    z-index:0 !important;
    pointer-events:none !important;
    transform:none !important;
}

.employee-card .employee-photo-wrapper,
.employee-card .employee-name,
.employee-card .employee-title,
.employee-card .employee-department,
.employee-card .employee-status{
    position:relative !important;
    z-index:2 !important;
}

/* ============================================================
    PEOPLE DIRECTORY — HEADER BUTTONS / ACTIVE TAB THEME
    Active state matches the dark Employee KPI cards
============================================================ */
/* Generic header/action buttons */
.employees-header button,
.employee-controls button,
.directory-header button,
.directory-tabs button,
.employee-tabs button,
.employee-filter-tabs button{
    position:relative !important;
    overflow:hidden !important;
    border-radius:12px !important;
    border:1px solid #e6ded7 !important;
    background:#ffffff !important;
    color:#252525 !important;
    font-weight:750 !important;
    box-shadow:0 4px 12px rgba(20,20,20,.035) !important;
    transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease !important;
}

/* Hover for inactive buttons */
.employees-header button:hover,
.employee-controls button:hover,
.directory-header button:hover,
.directory-tabs button:hover,
.employee-tabs button:hover,
.employee-filter-tabs button:hover{
    border-color:#e9a16f !important;
    color:#d96b18 !important;
    background:#fffaf6 !important;
}

/* ACTIVE / SELECTED BUTTON
    Supports common active classes and ARIA/data state attributes */
.employees-header button.active,
.employees-header button.selected,
.employee-controls button.active,
.employee-controls button.selected,
.directory-header button.active,
.directory-header button.selected,
.directory-tabs button.active,
.directory-tabs button.selected,
.employee-tabs button.active,
.employee-tabs button.selected,
.employee-filter-tabs button.active,
.employee-filter-tabs button.selected,
button[aria-selected="true"],
button[aria-pressed="true"],
button[data-active="true"]{
    isolation:isolate !important;
    overflow:hidden !important;
    color:#ffbf8e !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.26), transparent 52%),
    linear-gradient(135deg, #18211f 0%, #202624 60%, #31271e 100%) !important;
    border-color:rgba(255,185,132,.55) !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 20px rgba(20,20,20,.12) !important;
    text-shadow:none !important;
}

/* Decorative subtle warm corner on the active button */
.employees-header button.active::after,
.employees-header button.selected::after,
.employee-controls button.active::after,
.employee-controls button.selected::after,
.directory-header button.active::after,
.directory-header button.selected::after,
.directory-tabs button.active::after,
.directory-tabs button.selected::after,
.employee-tabs button.active::after,
.employee-tabs button.selected::after,
.employee-filter-tabs button.active::after,
.employee-filter-tabs button.selected::after,
button[aria-selected="true"]::after,
button[aria-pressed="true"]::after,
button[data-active="true"]::after{
    content:"" !important;
    position:absolute !important;
    width:54px !important;
    height:54px !important;
    right:-25px !important;
    top:-28px !important;
    border:1px solid rgba(255,214,180,.16) !important;
    border-radius:50% !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

/* Keep icons consistent with the active theme */
.employees-header button.active svg,
.employees-header button.selected svg,
.employee-controls button.active svg,
.employee-controls button.selected svg,
.directory-header button.active svg,
.directory-header button.selected svg,
.directory-tabs button.active svg,
.directory-tabs button.selected svg,
.employee-tabs button.active svg,
.employee-tabs button.selected svg,
button[aria-selected="true"] svg,
button[aria-pressed="true"] svg,
button[data-active="true"] svg{
    color:#ffbf8e !important;
    stroke:#ffbf8e !important;
}

/* Active hover remains premium, not bright orange */
.employees-header button.active:hover,
.employees-header button.selected:hover,
.employee-controls button.active:hover,
.employee-controls button.selected:hover,
.directory-header button.active:hover,
.directory-header button.selected:hover,
.directory-tabs button.active:hover,
.directory-tabs button.selected:hover,
.employee-tabs button.active:hover,
.employee-tabs button.selected:hover,
.employee-filter-tabs button.active:hover,
.employee-filter-tabs button.selected:hover,
button[aria-selected="true"]:hover,
button[aria-pressed="true"]:hover,
button[data-active="true"]:hover{
    color:#ffd0a8 !important;
    transform:translateY(-1px) !important;
    border-color:rgba(255,194,145,.75) !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.32), transparent 55%),
    linear-gradient(135deg, #192321 0%, #222927 60%, #382b20 100%) !important;
}

/* ============================================================
    FINAL FIX — EMPLOYEE DIRECTORY HEADER VIEW BUTTONS
    The actual clickable elements are:
    #directoryTotalCard / #directoryActiveCard / #directoryInactiveCard
    JavaScript adds .selected to the active view.
============================================================ */
/* Normal / inactive cards stay clean and light */
#directoryTotalCard:not(.selected),
#directoryActiveCard:not(.selected),
#directoryInactiveCard:not(.selected){
    background:#ffffff !important;
    background-image:none !important;
    border:1px solid #e7dfd8 !important;
    box-shadow:0 7px 20px rgba(20,20,20,.045) !important;
    color:#171717 !important;
}

/* Normal card labels and numbers */
#directoryTotalCard:not(.selected) span,
#directoryActiveCard:not(.selected) span,
#directoryInactiveCard:not(.selected) span{
    color:#6f7884 !important;
}

#directoryTotalCard:not(.selected) strong,
#directoryActiveCard:not(.selected) strong,
#directoryInactiveCard:not(.selected) strong,
#directoryTotalCard:not(.selected) .employee-stat-value,
#directoryActiveCard:not(.selected) .employee-stat-value,
#directoryInactiveCard:not(.selected) .employee-stat-value{
    color:#171717 !important;
}

/* ACTIVE / SELECTED CARD — exact screenshot theme */
#directoryTotalCard.selected,
#directoryActiveCard.selected,
#directoryInactiveCard.selected{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.22), transparent 42%),
    linear-gradient(105deg, #1a2422 0%, #202624 58%, #34271d 100%) !important;
    background-color:#1d2422 !important;
    border:1px solid rgba(255,226,204,.72) !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(16,18,17,.14) !important;
    transform:none !important;
}

/* Orange heading on the active card */
#directoryTotalCard.selected span,
#directoryActiveCard.selected span,
#directoryInactiveCard.selected span{
    color:#ffb47b !important;
}

/* White number on the active card */
#directoryTotalCard.selected strong,
#directoryActiveCard.selected strong,
#directoryInactiveCard.selected strong,
#directoryTotalCard.selected .employee-stat-value,
#directoryActiveCard.selected .employee-stat-value,
#directoryInactiveCard.selected .employee-stat-value{
    color:#f3f4f4 !important;
}

/* Screenshot-style top-right decorative circle */
#directoryTotalCard.selected::after,
#directoryActiveCard.selected::after,
#directoryInactiveCard.selected::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:108px !important;
    height:108px !important;
    right:-43px !important;
    top:-43px !important;
    left:auto !important;
    bottom:auto !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.025) !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

/* Remove any old stripe from the selected card */
#directoryTotalCard.selected::before,
#directoryActiveCard.selected::before,
#directoryInactiveCard.selected::before{
    content:none !important;
    display:none !important;
}

/* ============================================================
    TOP NAVIGATION — ACTIVE PAGE BUTTON
    Exact dark theme inspired by the Total Employees card
============================================================ */
/* Normal navigation buttons */
.top-nav button,
.top-navigation button,
.header-nav button,
.main-nav button,
.nav-menu button,
nav button,
.nav-link,
.top-nav a,
.top-navigation a,
.header-nav a,
.main-nav a,
.nav-menu a{
    position:relative !important;
    isolation:isolate !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#56606d !important;
    border-radius:16px !important;
    box-shadow:none !important;
    transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}

/* Inactive navigation hover */
.top-nav button:hover,
.top-navigation button:hover,
.header-nav button:hover,
.main-nav button:hover,
.nav-menu button:hover,
nav button:hover,
.nav-link:hover,
.top-nav a:hover,
.top-navigation a:hover,
.header-nav a:hover,
.main-nav a:hover,
.nav-menu a:hover{
    color:#c96b2d !important;
    background:#fff8f2 !important;
}

/* ACTIVE NAVIGATION ITEM — DARK CARD THEME */
.top-nav button.active,
.top-nav button.selected,
.top-nav button.current,
.top-navigation button.active,
.top-navigation button.selected,
.header-nav button.active,
.header-nav button.selected,
.main-nav button.active,
.main-nav button.selected,
.nav-menu button.active,
.nav-menu button.selected,
nav button.active,
nav button.selected,
.nav-link.active,
.nav-link.selected,
.nav-link.current,
.top-nav a.active,
.top-nav a.selected,
.top-navigation a.active,
.top-navigation a.selected,
.header-nav a.active,
.header-nav a.selected,
.main-nav a.active,
.main-nav a.selected,
.nav-menu a.active,
.nav-menu a.selected,
button[aria-current="page"],
a[aria-current="page"]{
    overflow:hidden !important;
    color:#ffbe8d !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.22), transparent 54%),
    linear-gradient(105deg, #18211f 0%, #202624 60%, #34271d 100%) !important;
    background-color:#1d2422 !important;
    border:1px solid rgba(255,195,145,.34) !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 7px 18px rgba(18,20,19,.14) !important;
    font-weight:750 !important;
}

/* Subtle circular decoration like the Total Employees card */
.top-nav button.active::after,
.top-nav button.selected::after,
.top-navigation button.active::after,
.top-navigation button.selected::after,
.header-nav button.active::after,
.header-nav button.selected::after,
.main-nav button.active::after,
.main-nav button.selected::after,
.nav-menu button.active::after,
.nav-menu button.selected::after,
nav button.active::after,
nav button.selected::after,
.nav-link.active::after,
.nav-link.selected::after,
.top-nav a.active::after,
.top-nav a.selected::after,
.top-navigation a.active::after,
.top-navigation a.selected::after,
.header-nav a.active::after,
.header-nav a.selected::after,
.main-nav a.active::after,
.main-nav a.selected::after,
.nav-menu a.active::after,
.nav-menu a.selected::after,
button[aria-current="page"]::after,
a[aria-current="page"]::after{
    content:"" !important;
    position:absolute !important;
    width:48px !important;
    height:48px !important;
    right:-25px !important;
    top:-25px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:50% !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

/* ============================================================
    FINAL DIRECTORY KPI + ADD EMPLOYEE THEME
    ALL THREE KPI CARDS = SAME DARK / ORANGE PREMIUM THEME
============================================================ */
#directoryTotalCard,
#directoryActiveCard,
#directoryInactiveCard,
.employee-stat.total-stat,
.employee-stat.active-stat,
.employee-stat.inactive-stat{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    min-height:134px !important;
    padding:26px 28px !important;
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.22), transparent 42%),
    linear-gradient(105deg, #1a2422 0%, #202624 58%, #34271d 100%) !important;
    background-color:#1d2422 !important;
    border:1px solid rgba(255,226,204,.72) !important;
    border-radius:24px !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(16,18,17,.14) !important;
}

/* Restore same dark theme even when cards are NOT selected */
#directoryTotalCard:not(.selected),
#directoryActiveCard:not(.selected),
#directoryInactiveCard:not(.selected){
    background:
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.22), transparent 42%),
    linear-gradient(105deg, #1a2422 0%, #202624 58%, #34271d 100%) !important;
    background-color:#1d2422 !important;
    border-color:rgba(255,226,204,.72) !important;
}

/* All three labels */
#directoryTotalCard span,
#directoryActiveCard span,
#directoryInactiveCard span,
.employee-stat.total-stat span,
.employee-stat.active-stat span,
.employee-stat.inactive-stat span{
    color:#ffb47b !important;
}

/* All three numbers */
#directoryTotalCard strong,
#directoryActiveCard strong,
#directoryInactiveCard strong,
#directoryTotalCard .employee-stat-value,
#directoryActiveCard .employee-stat-value,
#directoryInactiveCard .employee-stat-value,
.employee-stat.total-stat strong,
.employee-stat.active-stat strong,
.employee-stat.inactive-stat strong{
    color:#f3f4f4 !important;
}

/* Decorative top-right circle on every card */
#directoryTotalCard::after,
#directoryActiveCard::after,
#directoryInactiveCard::after,
.employee-stat.total-stat::after,
.employee-stat.active-stat::after,
.employee-stat.inactive-stat::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:108px !important;
    height:108px !important;
    right:-43px !important;
    top:-43px !important;
    left:auto !important;
    bottom:auto !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.025) !important;
    pointer-events:none !important;
    z-index:-1 !important;
}

/* ============================================================
    ADD EMPLOYEE BUTTON — ORANGE PRIMARY ACTION
============================================================ */
#addEmployeeBtn,
.add-employee-btn,
button.add-employee,
[data-action="add-employee"]{
    position:relative !important;
    overflow:hidden !important;
    color:#ffffff !important;
    background:linear-gradient(135deg, #f97316 0%, #ea650b 100%) !important;
    border:1px solid #f28a42 !important;
    border-radius:14px !important;
    box-shadow:0 8px 18px rgba(234,101,11,.20) !important;
    font-weight:800 !important;
}

#addEmployeeBtn:hover,
.add-employee-btn:hover,
button.add-employee:hover,
[data-action="add-employee"]:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg, #fb852c 0%, #f06a0f 100%) !important;
    border-color:#fb9b57 !important;
    box-shadow:0 11px 24px rgba(234,101,11,.28) !important;
    transform:translateY(-1px) !important;
}

/* ============================================================
    FINAL FONT COLOR FIX — ALL DIRECTORY KPI CARDS
    Force identical typography across Total / Active / Inactive
============================================================ */
/* Labels: warm orange/cream on ALL three cards */
#directoryTotalCard .employee-stat-label,
#directoryActiveCard .employee-stat-label,
#directoryInactiveCard .employee-stat-label,
#directoryTotalCard span,
#directoryActiveCard span,
#directoryInactiveCard span{
    color:#ffb47b !important;
    opacity:1 !important;
    -webkit-text-fill-color:#ffb47b !important;
}

/* Numbers: bright white on ALL three cards.
    Includes every likely markup variant to override old per-card colors. */
#directoryTotalCard strong,
#directoryActiveCard strong,
#directoryInactiveCard strong,
#directoryTotalCard .employee-stat-value,
#directoryActiveCard .employee-stat-value,
#directoryInactiveCard .employee-stat-value,
#directoryTotalCard .stat-value,
#directoryActiveCard .stat-value,
#directoryInactiveCard .stat-value,
#directoryTotalCard .stat-number,
#directoryActiveCard .stat-number,
#directoryInactiveCard .stat-number,
#directoryTotalCard h2,
#directoryActiveCard h2,
#directoryInactiveCard h2,
#directoryTotalCard h3,
#directoryActiveCard h3,
#directoryInactiveCard h3{
    color:#f4f5f5 !important;
    opacity:1 !important;
    -webkit-text-fill-color:#f4f5f5 !important;
    text-shadow:none !important;
}

/* Catch inherited legacy colors inside Total and Inactive specifically */
#directoryTotalCard *,
#directoryInactiveCard *{
    opacity:1 !important;
}

#directoryTotalCard strong,
#directoryInactiveCard strong,
#directoryTotalCard .employee-stat-value,
#directoryInactiveCard .employee-stat-value,
#directoryTotalCard .stat-value,
#directoryInactiveCard .stat-value,
#directoryTotalCard .stat-number,
#directoryInactiveCard .stat-number,
#directoryTotalCard h2,
#directoryInactiveCard h2,
#directoryTotalCard h3,
#directoryInactiveCard h3{
    color:#f4f5f5 !important;
    -webkit-text-fill-color:#f4f5f5 !important;
}

/* ============================================================
    ATTENDANCE DASHBOARD — TOP 3 SUMMARY CARDS
    DARK PREMIUM GRADIENT THEME
    Top Working Hours / Longest Total Break / Average Work Hours
============================================================ */
.attendance-hero-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    margin-bottom:16px !important;
}

.attendance-hero-card{
    position:relative !important;
    overflow:hidden !important;
    min-height:128px !important;
    padding:22px 26px !important;
    border-radius:30px !important;
    background:linear-gradient(
    105deg,
    #1d2928 0%,
    #1d2928 42%,
    #2b2925 67%,
    #5b3925 100%
    ) !important;
    background-image:linear-gradient(
    105deg,
    #1d2928 0%,
    #1d2928 42%,
    #2b2925 67%,
    #5b3925 100%
    ) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 8px 20px rgba(15,23,42,.10) !important;
    transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}

.attendance-hero-card::before{
    content:none !important;
    display:none !important;
}

.attendance-hero-card::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:132px !important;
    height:132px !important;
    top:-52px !important;
    right:-42px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:transparent !important;
    pointer-events:none !important;
}

.attendance-hero-label{
    display:block !important;
    position:relative !important;
    z-index:2 !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    color:#f2b58c !important;
    opacity:1 !important;
}

.attendance-hero-card strong{
    display:block !important;
    position:relative !important;
    z-index:2 !important;
    margin:20px 0 4px !important;
    font-size:37px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
    color:#f1f3f3 !important;
    opacity:1 !important;
}

.attendance-hero-card small{
    display:block !important;
    position:relative !important;
    z-index:2 !important;
    margin-top:7px !important;
    font-size:11px !important;
    font-weight:600 !important;
    line-height:1.4 !important;
    color:rgba(255,255,255,.65) !important;
    opacity:1 !important;
}

.attendance-hero-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 14px 30px rgba(15,23,42,.18) !important;
}

@media(max-width:1000px){
    .attendance-hero-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .attendance-hero-grid{
    grid-template-columns:1fr !important;
    }

.attendance-hero-card{
    min-height:120px !important;
    padding:20px !important;
    border-radius:24px !important;
    }

.attendance-hero-card strong{
    font-size:37px !important;
}
}

/* ============================================================
    ATTENDANCE OVERVIEW — FINAL PREMIUM CARD THEME
    Same size + same font sizes as current cards
    Theme matched with Live Attendance / Time Off cards
============================================================ */
.attendance-overview-grid {
    gap: 8px !important;
}

.attendance-overview-grid > div {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
/* KEEP CURRENT SIZE EXACTLY THE SAME */
    min-height: 68px !important;
    padding: 8px !important;
    border-radius: 11px !important;
/* NEW THEME */
    background: linear-gradient(135deg, #ffffff 0%, #fdfcfb 100%) !important;
    border: 1px solid #eaded2 !important;
border-top: 3px solid #1f2937 !important;
    box-shadow: none !important;
}

.attendance-overview-grid > div::before {
    content: none !important;
    display: none !important;
}

.attendance-overview-grid > div::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 92px !important;
    height: 92px !important;
    right: -42px !important;
    bottom: -48px !important;
    border-radius: 50% !important;
    background: rgba(244, 229, 211, 0.78) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* KEEP CURRENT NUMBER FONT SIZE */
.attendance-overview-grid strong {
    position: relative !important;
    z-index: 2 !important;
    font-size: 20px !important;
    color: #e86517 !important;
}

/* KEEP CURRENT LABEL FONT SIZE */
.attendance-overview-grid span {
    position: relative !important;
    z-index: 2 !important;
    font-size: 10px !important;
    color: #607086 !important;
}

/* CLICKABLE CARD INTERACTION */
.attendance-overview-clickable {
    cursor: pointer !important;
    transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease !important;
}

.attendance-overview-clickable:hover {
    transform: translateY(-1px) !important;
    border-color: #e6cbb7 !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .06) !important;
}

/* ============================================================
    AVERAGE TIME INSIGHTS — FINAL MATCHING CARD THEME
    Same theme as Attendance Overview cards
    Existing card sizes and font sizes remain unchanged
============================================================ */
.attendance-insights-grid {
    gap: 8px !important;
}

.attendance-insights-grid > div {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
/* KEEP EXISTING SIZE */
    min-height: 68px !important;
    padding: 8px !important;
    border-radius: 11px !important;
/* MATCHING PREMIUM WHITE THEME */
    background: linear-gradient(135deg, #ffffff 0%, #fdfcfb 100%) !important;
    border: 1px solid #eaded2 !important;
    border-top: 3px solid #1f2937 !important;
    box-shadow: none !important;
}

.attendance-insights-grid > div::before {
    content: none !important;
    display: none !important;
}

.attendance-insights-grid > div::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 92px !important;
    height: 92px !important;
    right: -42px !important;
    bottom: -48px !important;
    border-radius: 50% !important;
    background: rgba(244, 229, 211, 0.78) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* KEEP EXISTING LABEL FONT SIZE */
.attendance-insights-grid span {
    position: relative !important;
    z-index: 2 !important;
    font-size: 10px !important;
    color: #607086 !important;
}

/* KEEP EXISTING VALUE FONT SIZE */
.attendance-insights-grid strong {
    position: relative !important;
    z-index: 2 !important;
    font-size: 17px !important;
    color: #d95d15 !important;
    margin-top: 7px !important;
}

/* ============================================================
    TOP PERFORMERS — MATCH RECENT JOINERS THEME
    FINAL OVERRIDE
============================================================ */
.attendance-performers-panel{
    position:relative !important;
    overflow:hidden !important;
    padding:24px 26px 18px !important;
    background:linear-gradient(135deg,#ffffff 0%,#fdfbf8 100%) !important;
    border:1.5px solid #e3a46d !important;
    border-radius:28px !important;
    box-shadow:0 10px 28px rgba(67,50,34,.06) !important;
}

.attendance-performers-panel::after{
    content:"" !important;
    position:absolute !important;
    width:170px !important;
    height:170px !important;
    right:-65px !important;
    top:-80px !important;
    border-radius:50% !important;
    background:rgba(245,229,211,.42) !important;
    pointer-events:none !important;
}

.attendance-performers-panel .attendance-panel-title-row,
#attendanceTopPerformers,
.attendance-performers-panel .attendance-panel-note{
    position:relative !important;
    z-index:2 !important;
}

.attendance-performers-panel .attendance-panel-title-row{
    margin-bottom:14px !important;
}

.attendance-performers-panel .attendance-panel-title-row h2{
    color:#27384a !important;
}

#attendanceTopPerformers{
    gap:8px !important;
}

#attendanceTopPerformers .attendance-performer-item{
    position:relative !important;
    overflow:hidden !important;
    min-height:54px !important;
    padding:9px 34px 9px 12px !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid #ead0b9 !important;
    border-radius:18px !important;
    box-shadow:0 5px 16px rgba(72,54,35,.04) !important;
}

#attendanceTopPerformers .attendance-performer-item::after{
    content:"" !important;
    position:absolute !important;
    width:5px !important;
    height:28px !important;
    right:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#f1c8a6 0%,#df9255 100%) !important;
}

#attendanceTopPerformers .attendance-performer-info strong{
    color:#2b3a49 !important;
}

#attendanceTopPerformers .attendance-performer-department,
#attendanceTopPerformers .attendance-performer-info small{
    color:#68798b !important;
}

/* Recent Joiners-style rows don't use the Active pill */
#attendanceTopPerformers .attendance-performer-status{
    display:none !important;
}

.attendance-performers-panel .attendance-panel-note{
    margin-top:10px !important;
    background:#fcf7f0 !important;
    border-radius:13px !important;
    color:#8b5939 !important;
}

@media(max-width:650px){
    .attendance-performers-panel{
    padding:18px 14px 14px !important;
    border-radius:22px !important;
    }

#attendanceTopPerformers .attendance-performer-item{
    min-height:50px !important;
    padding-left:10px !important;
    padding-right:30px !important;
    border-radius:15px !important;
    }
}

/* ============================================================
    ATTENDANCE OVERVIEW + AVERAGE TIME INSIGHTS
    MATCH TOP PERFORMERS CARD STYLE
    FINAL UNIFIED CARD THEME
============================================================ */
/* Keep existing grid layout */
.attendance-overview-grid,
.attendance-insights-grid{
    gap:10px !important;
}

/* ------------------------------------------------------------
    ALL INNER CARDS — SAME STYLE AS TOP PERFORMER ROWS
------------------------------------------------------------ */
.attendance-overview-grid > div,
.attendance-insights-grid > div{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
/* Previous 68px height + approximately 1cm */
    min-height:106px !important;
/* Same premium performer-row visual language */
    padding:12px 18px !important;
    background:rgba(255,255,255,.72) !important;
    border:1px solid #ead0b9 !important;
    border-radius:18px !important;
    box-shadow:0 5px 16px rgba(72,54,35,.04) !important;
    transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease !important;
}

/* Remove old top black/yellow/orange accent */
.attendance-overview-grid > div{
    border-top:1px solid #ead0b9 !important;
}

.attendance-insights-grid > div{
    border-top:1px solid #ead0b9 !important;
}

/* Soft warm background decoration like Top Performers panel */
.attendance-overview-grid > div::before,
.attendance-insights-grid > div::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:120px !important;
    height:120px !important;
    right:-56px !important;
    bottom:-72px !important;
    border-radius:50% !important;
    background:rgba(245,229,211,.55) !important;
    z-index:-1 !important;
    pointer-events:none !important;
}

/* Remove any previous decorative pseudo element */
.attendance-overview-grid > div::after,
.attendance-insights-grid > div::after{
    content:none !important;
    display:none !important;
}

/* ------------------------------------------------------------
    CONTENT
    FONT SIZES STAY THE SAME
------------------------------------------------------------ */
.attendance-overview-grid > div > *,
.attendance-insights-grid > div > *{
    position:relative !important;
    z-index:2 !important;
}

/* Overview number — preserve existing size */
.attendance-overview-grid strong{
    font-size:20px !important;
    color:#d95d15 !important;
}

/* Overview label — preserve existing size */
.attendance-overview-grid span{
    font-size:10px !important;
    color:#607086 !important;
}

/* Insights label — preserve existing size */
.attendance-insights-grid span{
    font-size:10px !important;
    color:#607086 !important;
}

/* Insights value — preserve existing size */
.attendance-insights-grid strong{
    font-size:17px !important;
    color:#d95d15 !important;
}

/* Same subtle interaction as Top Performer rows */
.attendance-overview-grid > div:hover,
.attendance-insights-grid > div:hover{
    transform:translateY(-2px) !important;
    border-color:#e3a46d !important;
    box-shadow:0 9px 22px rgba(72,54,35,.08) !important;
}

@media(max-width:650px){
    .attendance-overview-grid > div,
    .attendance-insights-grid > div{
    min-height:96px !important;
    padding:11px 14px !important;
    border-radius:15px !important;
    }
}

/* ============================================================
    ATTENDANCE — FINAL UNIFIED PREMIUM THEME
    Attendance Overview + Average Time Insights + Attendance Rate
    Same visual language, premium styling
============================================================ */
/* ------------------------------------------------------------
    MAIN ATTENDANCE PANELS
------------------------------------------------------------ */
.attendance-overview-panel,
.attendance-insights-panel,
.attendance-rate-panel{
    position:relative !important;
    overflow:hidden !important;
    background:
    linear-gradient(135deg,#ffffff 0%,#fdfbf8 100%) !important;
    border:1px solid #ead0b9 !important;
    border-radius:24px !important;
    box-shadow:
    0 10px 28px rgba(72,54,35,.055) !important;
}

/* Soft premium corner glow */
.attendance-overview-panel::after,
.attendance-insights-panel::after,
.attendance-rate-panel::after{
    content:"" !important;
    position:absolute !important;
    width:155px !important;
    height:155px !important;
    right:-68px !important;
    top:-92px !important;
    border-radius:50% !important;
    background:rgba(245,229,211,.38) !important;
    pointer-events:none !important;
}

/* Keep all panel content above decoration */
.attendance-overview-panel > *,
.attendance-insights-panel > *,
.attendance-rate-panel > *{
    position:relative !important;
    z-index:2 !important;
}

/* ------------------------------------------------------------
    OVERVIEW + INSIGHTS GRIDS
------------------------------------------------------------ */
.attendance-overview-grid,
.attendance-insights-grid{
    gap:10px !important;
}

/* ------------------------------------------------------------
    ALL INNER CARDS
    Previous 106px reduced by approximately 0.5cm
------------------------------------------------------------ */
.attendance-overview-grid > div,
.attendance-insights-grid > div{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    min-height:87px !important;
    padding:11px 18px !important;
    background:
    linear-gradient(145deg,
    rgba(255,255,255,.96) 0%,
    rgba(252,249,245,.92) 100%) !important;
    border:1px solid #e8cdb5 !important;
    border-radius:17px !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 5px 16px rgba(72,54,35,.055) !important;
    transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}

/* Subtle premium inner highlight */
.attendance-overview-grid > div::before,
.attendance-insights-grid > div::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:92px !important;
    height:92px !important;
    right:-38px !important;
    bottom:-48px !important;
    border-radius:50% !important;
    background:
    radial-gradient(circle,
    rgba(242,222,199,.72) 0%,
    rgba(245,232,216,.38) 58%,
    transparent 70%) !important;
    z-index:-1 !important;
    pointer-events:none !important;
}

/* Small warm premium accent */
.attendance-overview-grid > div::after,
.attendance-insights-grid > div::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:4px !important;
    height:30px !important;
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    border-radius:999px !important;
    background:linear-gradient(
    180deg,
    rgba(241,200,166,.65) 0%,
    rgba(223,146,85,.9) 100%
    ) !important;
    opacity:.72 !important;
    pointer-events:none !important;
}

/* Content above decoration */
.attendance-overview-grid > div > *,
.attendance-insights-grid > div > *{
    position:relative !important;
    z-index:2 !important;
}

/* Keep existing font sizes */
.attendance-overview-grid strong{
    font-size:20px !important;
    color:#c85c1a !important;
}

.attendance-overview-grid span,
.attendance-insights-grid span{
    font-size:10px !important;
    color:#607086 !important;
}

.attendance-insights-grid strong{
    font-size:17px !important;
    color:#c85c1a !important;
}

.attendance-overview-grid > div:hover,
.attendance-insights-grid > div:hover{
    transform:translateY(-2px) !important;
    border-color:#dfa36f !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(72,54,35,.09) !important;
}

/* ------------------------------------------------------------
    ATTENDANCE RATE — SAME CARD THEME
------------------------------------------------------------ */
.attendance-rate-panel{
    min-height:0 !important;
    padding:20px 20px 18px !important;
}

/* Premium rate number */
.attendance-rate-panel .attendance-rate-value,
.attendance-rate-panel strong{
    color:#c85c1a !important;
}

/* Matching label and progress area */
.attendance-rate-panel p,
.attendance-rate-panel small{
    color:#607086 !important;
}

/* Give progress track the same refined visual language */
.attendance-rate-panel .attendance-rate-progress,
.attendance-rate-panel .attendance-progress-track{
    border:1px solid rgba(232,205,181,.55) !important;
    box-shadow:inset 0 1px 2px rgba(72,54,35,.05) !important;
}

/* If the existing rate fill has another selector, preserve its orange */
.attendance-rate-panel .attendance-rate-progress > *,
.attendance-rate-panel .attendance-progress-track > *{
    background:linear-gradient(90deg,#ff7628 0%,#ef6417 100%) !important;
}

/* Header badge */
.attendance-rate-panel .attendance-panel-title-row > span{
    background:#fcf7f0 !important;
    color:#9a5d31 !important;
    border:1px solid rgba(232,205,181,.55) !important;
    border-radius:13px !important;
}

/* ------------------------------------------------------------
    MOBILE
------------------------------------------------------------ */
@media(max-width:650px){
    .attendance-overview-panel,
    .attendance-insights-panel,
    .attendance-rate-panel{
    border-radius:20px !important;
    }

.attendance-overview-grid > div,
    .attendance-insights-grid > div{
    min-height:80px !important;
    padding:10px 14px !important;
    border-radius:15px !important;
    }
}

/* ============================================================
    BLACK + ORANGE + WHITE THEME
    ATTENDANCE SUMMARY + HR HYGIENE POPUPS
    FINAL PREMIUM OVERRIDE
============================================================ */
/* ============================================================
    1. ATTENDANCE POPUP OVERLAY
============================================================ */
.attendance-summary-popup{
    background:rgba(7, 10, 10, .72) !important;
    backdrop-filter:blur(8px) !important;
}

/* ============================================================
    2. MAIN POPUP
============================================================ */
.attendance-summary-dialog{
    background:#ffffff !important;
    border:1px solid rgba(249,115,22,.28) !important;
    border-radius:28px !important;
    box-shadow:
    0 30px 90px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.6) inset !important;
    overflow:hidden !important;
}

/* ============================================================
    3. POPUP HEADER
============================================================ */
.attendance-summary-header{
    position:relative !important;
    background:
    radial-gradient(
    circle at 88% 5%,
    rgba(249,115,22,.35),
    transparent 28%
    ),
    linear-gradient(
    110deg,
    #151b1a 0%,
    #1e2523 58%,
    #38291f 100%
    ) !important;
    border-bottom:1px solid rgba(249,115,22,.20) !important;
    padding:28px 34px !important;
    overflow:hidden !important;
}

.attendance-summary-header::after{
    content:"" !important;
    position:absolute !important;
    width:190px !important;
    height:190px !important;
    right:-75px !important;
    top:-100px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.10) !important;
    pointer-events:none !important;
}

/* ============================================================
    HEADER ICON
============================================================ */
.attendance-summary-icon{
    width:64px !important;
    height:64px !important;
    flex:0 0 64px !important;
    border-radius:19px !important;
    background:
    linear-gradient(
    135deg,
    #ff8a38,
    #f97316
    ) !important;
    color:#ffffff !important;
    box-shadow:
    0 12px 28px rgba(249,115,22,.30),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ============================================================
    HEADER TEXT
============================================================ */
.attendance-summary-title h2{
    color:#ffffff !important;
    font-size:27px !important;
    font-weight:800 !important;
    letter-spacing:-.5px !important;
}

.attendance-summary-title p{
    color:#b7c0c7 !important;
    font-size:13px !important;
}

.attendance-summary-close{
    width:50px !important;
    height:50px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#ffffff !important;
    transition:
    .2s ease !important;
}

.attendance-summary-close:hover{
    background:#f97316 !important;
    border-color:#f97316 !important;
    transform:rotate(90deg) !important;
}

/* ============================================================
    4. POPUP BODY
============================================================ */
.attendance-summary-body{
    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #fafafa 100%
    ) !important;
    padding:24px 34px 30px !important;
}

/* ============================================================
    5. TOTAL EMPLOYEES CARD
============================================================ */
.attendance-summary-total{
    min-height:72px !important;
    padding:0 20px !important;
    border-radius:19px !important;
    background:
    linear-gradient(
    110deg,
    #ffffff,
    #fff8f3
    ) !important;
    border:1px solid rgba(249,115,22,.35) !important;
    box-shadow:
    0 8px 22px rgba(15,23,42,.04) !important;
}

.attendance-summary-total > span:first-child{
    color:#252525 !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.3px !important;
}

/* ORANGE COUNT */
.attendance-summary-total-count{
    min-width:54px !important;
    height:44px !important;
    padding:0 14px !important;
    border-radius:15px !important;
    background:
    linear-gradient(
    135deg,
    #ff8a38,
    #f97316
    ) !important;
    color:#ffffff !important;
    font-size:18px !important;
    font-weight:800 !important;
    box-shadow:
    0 8px 20px rgba(249,115,22,.25) !important;
}

/* ============================================================
    6. TABLE WRAPPER
============================================================ */
.attendance-summary-table-scroll{
    border:1px solid #e5e7eb !important;
    border-radius:20px !important;
    background:#ffffff !important;
    box-shadow:
    0 10px 30px rgba(15,23,42,.04) !important;
}

/* ============================================================
    TABLE HEADER
============================================================ */
.attendance-summary-table th{
    background:
    linear-gradient(
    180deg,
    #f6f7f8,
    #eef0f2
    ) !important;
    color:#596575 !important;
    border-bottom:1px solid #d9dee3 !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:1px !important;
    padding:18px 20px !important;
}

.attendance-summary-table td{
    padding:17px 20px !important;
    background:#ffffff !important;
    border-bottom:1px solid #edf0f2 !important;
    color:#52606f !important;
    font-size:13px !important;
}

.attendance-summary-table tbody tr{
    transition:
    background .18s ease,
    transform .18s ease !important;
}

.attendance-summary-table tbody tr:hover{
    background:#fff8f3 !important;
}

.attendance-summary-table tbody tr:hover td{
    background:#fff8f3 !important;
}

/* ============================================================
    EMPLOYEE IMAGE
============================================================ */
.attendance-popup-photo{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    border-radius:14px !important;
    border:2px solid #ffffff !important;
    box-shadow:
    0 5px 15px rgba(15,23,42,.12) !important;
}

.attendance-popup-avatar{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    border-radius:14px !important;
    background:
    linear-gradient(
    135deg,
    #242b29,
    #111514
    ) !important;
    color:#ff8a38 !important;
    border:1px solid rgba(249,115,22,.35) !important;
    font-weight:800 !important;
}

/* ============================================================
    EMPLOYEE NAME
============================================================ */
.attendance-popup-name{
    color:#1f2937 !important;
    font-size:14px !important;
    font-weight:800 !important;
}

/* EMPTY STATE */
.attendance-popup-empty{
    background:#ffffff !important;
    color:#8b95a1 !important;
    font-size:14px !important;
}

/* ============================================================
    7. HR HYGIENE / NEEDS ATTENTION MODAL
============================================================ */
.hr-v2-modal,
.hr-v2-modal-overlay,
.hr-v2-modal-backdrop{
    backdrop-filter:blur(8px) !important;
}

/* Main modal dialog */
.hr-v2-modal-dialog,
.hr-v2-modal-content{
    background:#ffffff !important;
    border:1px solid rgba(249,115,22,.28) !important;
    border-radius:28px !important;
    overflow:hidden !important;
    box-shadow:
    0 30px 90px rgba(0,0,0,.38) !important;
}

/* ============================================================
    HR HYGIENE DARK HEADER
============================================================ */
.hr-v2-modal-head,
.hr-v2-modal-header{
    position:relative !important;
    background:
    radial-gradient(
    circle at 90% 0%,
    rgba(249,115,22,.35),
    transparent 30%
    ),
    linear-gradient(
    110deg,
    #161d1b 0%,
    #202725 62%,
    #3b2b20 100%
    ) !important;
    border-bottom:1px solid rgba(249,115,22,.18) !important;
    overflow:hidden !important;
}

.hr-v2-modal-head::after,
.hr-v2-modal-header::after{
    content:"" !important;
    position:absolute !important;
    width:180px !important;
    height:180px !important;
    right:-70px !important;
    top:-90px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.10) !important;
}

/* HR HYGIENE LABEL */
.hr-v2-modal-kicker,
.hr-v2-modal-head .eyebrow{
    color:#ffad72 !important;
    font-weight:800 !important;
    letter-spacing:2px !important;
}

/* Needs Attention */
.hr-v2-modal-head h2,
.hr-v2-modal-header h2,
.hr-v2-modal-head h3,
.hr-v2-modal-header h3{
    color:#ffffff !important;
    font-weight:800 !important;
}

.hr-v2-modal-head p,
.hr-v2-modal-header p{
    color:#b5bec5 !important;
}

/* ============================================================
    HR HYGIENE CLOSE
============================================================ */
.hr-v2-modal-close,
.hr-v2-modal-head button,
.hr-v2-modal-header button{
    background:rgba(255,255,255,.08) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:15px !important;
}

.hr-v2-modal-close:hover{
    background:#f97316 !important;
    border-color:#f97316 !important;
    transform:rotate(90deg) !important;
}

/* ============================================================
    HR HYGIENE EMPLOYEE LIST
============================================================ */
.hr-v2-modal-list{
    background:
    linear-gradient(
    180deg,
    #ffffff,
    #fafafa
    ) !important;
    padding:16px !important;
}

.hr-v2-modal-row{
    margin-bottom:9px !important;
    padding:15px 16px !important;
    border:1px solid #e8e3df !important;
    border-radius:18px !important;
    background:#ffffff !important;
    box-shadow:
    0 4px 12px rgba(15,23,42,.025) !important;
    transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

.hr-v2-modal-row:last-child{
    margin-bottom:0 !important;
}

.hr-v2-modal-row:hover{
    background:#fff9f5 !important;
    border-color:#fdba74 !important;
    box-shadow:
    0 10px 24px rgba(249,115,22,.08) !important;
    transform:translateX(3px) !important;
}

/* Initials Box */
.hr-v2-modal-row .hr-v2-avatar,
.hr-v2-modal-avatar{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    background:
    linear-gradient(
    135deg,
    #eef0f2,
    #e1e4e7
    ) !important;
    color:#465261 !important;
    border:1px solid #dfe3e7 !important;
    font-weight:800 !important;
}

.hr-v2-modal-main strong{
    color:#1f2937 !important;
    font-size:14px !important;
    font-weight:800 !important;
}

/* Role + Department */
.hr-v2-modal-main small{
    color:#718096 !important;
    font-size:12px !important;
}

/* Arrow */
.hr-v2-modal-right,
.hr-v2-modal-row .pulse-arrow{
    color:#f97316 !important;
    font-size:16px !important;
    font-weight:800 !important;
}

/* ============================================================
    SCROLLBAR
============================================================ */
.attendance-summary-table-scroll::-webkit-scrollbar,
.hr-v2-modal-list::-webkit-scrollbar{
    width:8px;
}

.attendance-summary-table-scroll::-webkit-scrollbar-track,
.hr-v2-modal-list::-webkit-scrollbar-track{
    background:#f1f2f3;
    border-radius:20px;
}

.attendance-summary-table-scroll::-webkit-scrollbar-thumb,
.hr-v2-modal-list::-webkit-scrollbar-thumb{
    background:#c6cbd0;
    border-radius:20px;
}

.attendance-summary-table-scroll::-webkit-scrollbar-thumb:hover,
.hr-v2-modal-list::-webkit-scrollbar-thumb:hover{
    background:#f97316;
}

/* ============================================================
    MOBILE
============================================================ */
@media(max-width:700px){
    .attendance-summary-dialog,
    .hr-v2-modal-dialog,
    .hr-v2-modal-content{
    border-radius:22px !important;
    }

.attendance-summary-header{
    padding:22px 20px !important;
    }

.attendance-summary-body{
    padding:16px !important;
    }

.attendance-summary-title h2{
    font-size:21px !important;
    }

.attendance-summary-total{
    min-height:64px !important;
    }

.attendance-summary-table th,
    .attendance-summary-table td{
    padding:14px !important;
    }

.hr-v2-modal-list{
    padding:12px !important;
    }

.hr-v2-modal-row{
    padding:13px !important;
    border-radius:15px !important;
    }
}

/* ============================================================
    LEAVE DASHBOARD — EXACT DARK / ORANGE PREMIUM UI
    ONLY LEAVE DASHBOARD — OTHER CSS UNTOUCHED
    ============================================================ */
/* =========================
    PAGE
========================= */
.leave-dashboard-page {
    background:
    radial-gradient(
    circle at 50% 0%,
    rgba(249, 115, 22, 0.07),
    transparent 32%
    ),
    #f7f8fa !important;
}

.leave-dashboard-shell {
    padding: 18px 24px 34px !important;
    max-width: none !important;
}

/* =========================
    HEADER
========================= */
.leave-dashboard-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

/* Left title area */
.leave-dashboard-title-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

/* Dashboard icon */
.leave-dashboard-title-icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 60px !important;
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1 !important;
    color: #f97316 !important;
    background:
    linear-gradient(
    145deg,
    #1c2228,
    #111417
    ) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Eyebrow */
.leave-dashboard-title-row > div::before {
    content: "LEAVE" !important;
    display: block !important;
    margin-bottom: 7px !important;
    color: #ea580c !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
}

/* Main title */
.leave-dashboard-header h1 {
    margin: 0 !important;
    color: #2b394c !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
}

/* Subtitle */
.leave-dashboard-header p {
    margin: 7px 0 0 !important;
    color: #657184 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* =========================
    DATE CARD
========================= */
.leave-dashboard-date {
    min-width: 166px !important;
    height: 52px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
    linear-gradient(
    145deg,
    #1d2329,
    #101316
    ) !important;
    color: #d9dee6 !important;
    border:
    1px solid rgba(255,255,255,0.08) !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    box-shadow:
    0 8px 18px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
    white-space: nowrap !important;
}

/* =========================
    STAT GRID
========================= */
.leave-stat-grid {
    display: grid !important;
    grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
}

/* =========================
    DARK STAT CARDS
========================= */
.leave-stat-card {
    position: relative !important;
    min-height: 210px !important;
    height: 210px !important;
    padding: 26px 28px !important;
    overflow: hidden !important;
    background:
    radial-gradient(
    circle at 100% 0%,
    rgba(249,115,22,0.13),
    transparent 42%
    ),
    linear-gradient(
    110deg,
    #171c21 0%,
    #1b1f23 58%,
    #35261c 100%
    ) !important;
    border:
    1px solid rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    box-shadow:
    0 10px 24px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
    box-sizing: border-box !important;
}

/* Orange left line */
.leave-stat-card::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 35px !important;
    bottom: 35px !important;
    width: 5px !important;
    background:
    linear-gradient(
    180deg,
    #ff8a2a,
    #f97316
    ) !important;
    border-radius: 10px !important;
    z-index: 2 !important;
}

/* Decorative top-right circle */
.leave-stat-card::after {
    content: "" !important;
    position: absolute !important;
    width: 110px !important;
    height: 110px !important;
    right: -45px !important;
    top: -38px !important;
    border-radius: 50% !important;
    border:
    1px solid rgba(255,255,255,0.13) !important;
    background:
    rgba(255,255,255,0.015) !important;
    pointer-events: none !important;
}

/* =========================
    STAT ICON
========================= */
.leave-stat-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    font-size: 25px !important;
    color: #ff7a1a !important;
    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,0.035),
    rgba(0,0,0,0.16)
    ) !important;
    border:
    1px solid rgba(249,115,22,0.65) !important;
    border-radius: 15px !important;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 14px rgba(0,0,0,0.16) !important;
    position: relative !important;
    z-index: 3 !important;
}

/* =========================
    CARD LABEL
========================= */
.leave-stat-label {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 0 12px !important;
    color: #f0a45d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

/* =========================
    CARD NUMBER
========================= */
.leave-stat-card strong {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 0 !important;
    color: #f3f5f7 !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    text-shadow:
    0 2px 8px rgba(0,0,0,0.18) !important;
}

/* =========================
    HOVER
========================= */
.leave-stat-card {
    transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

.leave-stat-card:hover {
    transform: translateY(-4px) !important;
    border-color:
    rgba(249,115,22,0.42) !important;
    box-shadow:
    0 16px 32px rgba(15,23,42,0.20),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* =========================
    RESPONSIVE
========================= */
@media (max-width: 1100px) {
    .leave-stat-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .leave-dashboard-header {
    flex-direction: column !important;
    }

.leave-dashboard-date {
    align-self: flex-start !important;
    }

.leave-stat-grid {
    grid-template-columns: 1fr !important;
    }

.leave-stat-card {
    height: 190px !important;
    min-height: 190px !important;
    }
}

@media (max-width: 500px) {
    .leave-dashboard-shell {
    padding: 18px 14px 30px !important;
    }

.leave-dashboard-title-icon {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    font-size: 23px !important;
    }

.leave-dashboard-header h1 {
    font-size: 25px !important;
    }
}

/* ============================================================
    LEAVE DASHBOARD — FINAL ADJUSTMENTS
    Remove Header Icon + Compact Cards + White Date Box
    ============================================================ */
/* =========================
    REMOVE TOP HEADING ICON
========================= */
.leave-dashboard-title-icon {
    display: none !important;
}

.leave-dashboard-title-row {
    gap: 0 !important;
}

/* =========================
    CARDS HEIGHT — 125px
========================= */
.leave-stat-card {
    height: 125px !important;
    min-height: 125px !important;
    padding: 15px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Orange left line compact */
.leave-stat-card::before {
    top: 24px !important;
    bottom: 24px !important;
}

/* Decorative circle adjust */
.leave-stat-card::after {
    width: 85px !important;
    height: 85px !important;
    right: -32px !important;
    top: -30px !important;
}

/* Icon smaller */
.leave-stat-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
}

/* Label */
.leave-stat-label {
    font-size: 10px !important;
    letter-spacing: 1.3px !important;
    margin-bottom: 5px !important;
}

/* Number */
.leave-stat-card strong {
    font-size: 32px !important;
    line-height: 1 !important;
}

/* =========================
    DATE BOX — WHITE
    Move Slightly Down
========================= */
.leave-dashboard-date {
    margin-top: 10px !important;
    min-width: 166px !important;
    height: 52px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d9dee5 !important;
    box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

/* ============================================================
    LEAVE DASHBOARD PANELS
    TODAY'S LEAVES + PENDING REQUESTS
    MATCH BIRTHDAY CARD LIGHT / ORANGE THEME
    ============================================================ */
/* =========================
    MAIN PANEL
========================= */
.leave-dashboard-panel {
    position: relative !important;
    overflow: hidden !important;
    background:
    radial-gradient(
    circle at 100% 0%,
    rgba(249, 115, 22, 0.07),
    transparent 30%
    ),
    linear-gradient(
    135deg,
    #ffffff 0%,
    #fdfcfb 100%
    ) !important;
    border: 1px solid #d9e0e7 !important;
    border-top: 2px solid #f08a4b !important;
    border-radius: 24px !important;
    box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.07) !important;
}

/* Subtle decorative circle */
.leave-dashboard-panel::after {
    content: "" !important;
    position: absolute !important;
    width: 150px !important;
    height: 150px !important;
    top: -85px !important;
    right: -65px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    pointer-events: none !important;
}

/* =========================
    PANEL HEADER
========================= */
.leave-panel-header {
    position: relative !important;
    z-index: 2 !important;
    padding: 22px 28px 18px !important;
    background: transparent !important;
    border-bottom: 1px solid #edf0f3 !important;
}

/* Remove orange line if previous CSS added it */
.leave-panel-header::before {
    display: none !important;
}

/* Header title */
.leave-panel-header h2 {
    margin: 0 !important;
    color: #263548 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
}

/* Header icons */
.leave-panel-header i,
.leave-panel-header svg {
    color: #f08a4b !important;
}

/* =========================
    TODAY'S LEAVES CONTENT
========================= */
.leave-empty-state {
    position: relative !important;
    z-index: 2 !important;
    min-height: 72px !important;
    color: #718096 !important;
    font-size: 14px !important;
    background: transparent !important;
}

/* Today's leave list */
.leave-list {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 28px !important;
}

.leave-list-item {
    min-height: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: transparent !important;
    color: #344256 !important;
}

.leave-list-item:hover {
    background:
    linear-gradient(
    90deg,
    rgba(240, 138, 75, 0.05),
    transparent
    ) !important;
}

/* =========================
    TODAY'S LEAVES FOOTER
========================= */
.leave-panel-footer {
    position: relative !important;
    z-index: 2 !important;
    margin: 16px 24px 24px !important;
    padding: 14px 18px !important;
    background:
    linear-gradient(
    90deg,
    #fff8f1,
    #fdfaf6
    ) !important;
    border-top: 1px solid #f3c29d !important;
    border-bottom: 1px solid rgba(243, 194, 157, 0.25) !important;
    color: #607086 !important;
    font-size: 14px !important;
}

.leave-panel-footer strong {
    color: #f06f24 !important;
    font-weight: 800 !important;
}

/* =========================
    PENDING REQUESTS
========================= */
.leave-pending-list {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 28px 14px !important;
}

.leave-pending-item {
    position: relative !important;
    min-height: 0 !important;
    padding: 17px 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.leave-pending-item:hover {
    padding-left: 8px !important;
    background:
    linear-gradient(
    90deg,
    rgba(240, 138, 75, 0.06),
    transparent
    ) !important;
}

/* Employee name */
.leave-pending-name {
    color: #2c3a4d !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

/* Other pending request text */
.leave-pending-item span {
    color: #5e6d80 !important;
}

/* Date on right side */
.leave-pending-item > :last-child {
    color: #526277 !important;
    font-weight: 500 !important;
}

/* Last row */
.leave-pending-item:last-child {
    border-bottom: none !important;
}

@media (max-width: 700px) {
    .leave-dashboard-panel {
    border-radius: 20px !important;
    }

.leave-panel-header {
    padding: 18px 20px 15px !important;
    }

.leave-list,
    .leave-pending-list {
    padding-left: 20px !important;
    padding-right: 20px !important;
    }

.leave-panel-footer {
    margin-left: 16px !important;
    margin-right: 16px !important;
    }
}

/* ============================================================
    LEAVE PANELS — INNER CONTENT LIKE BIRTHDAY CARD
    ============================================================ */
/* ----------------------------
    TODAY'S LEAVES LIST
---------------------------- */
.leave-list {
    padding: 14px 26px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Individual employee row */
.leave-list-item {
    position: relative !important;
    min-height: 72px !important;
    padding: 14px 42px 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,0.85),
    rgba(248,249,251,0.92)
    ) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: 16px !important;
    box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.035) !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* Right orange accent */
.leave-list-item::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 5px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    border-radius: 10px !important;
    background:
    linear-gradient(
    180deg,
    #f6c39d,
    #eaa166
    ) !important;
}

.leave-list-item:hover {
    transform: translateX(3px) !important;
    background: #ffffff !important;
    box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.07) !important;
}

.leave-list-person strong,
.leave-list-item strong {
    color: #273548 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Secondary text */
.leave-list-person span,
.leave-list-item span {
    color: #647386 !important;
    font-size: 12px !important;
}

/* ----------------------------
    PENDING REQUESTS LIST
---------------------------- */
.leave-pending-list {
    padding: 14px 26px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Individual pending request */
.leave-pending-item {
    position: relative !important;
    min-height: 72px !important;
    padding: 14px 42px 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    border-radius: 16px !important;
    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,0.85),
    rgba(248,249,251,0.92)
    ) !important;
    box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.035) !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

/* Birthday-card style right orange line */
.leave-pending-item::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    width: 5px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    border-radius: 10px !important;
    background:
    linear-gradient(
    180deg,
    #f6c39d,
    #eaa166
    ) !important;
}

.leave-pending-item:hover {
    padding-left: 22px !important;
    background: #ffffff !important;
    box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.07) !important;
}

.leave-pending-name {
    color: #273548 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Leave type */
.leave-pending-item span {
    color: #59697c !important;
    font-size: 13px !important;
}

/* Date */
.leave-pending-item > :last-child {
    color: #647386 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
}

/* Last item same styling */
.leave-list-item:last-child,
.leave-pending-item:last-child {
    border-bottom: none !important;
}

/* ----------------------------
    EMPTY STATE
---------------------------- */
.leave-empty-state {
    margin: 14px 26px !important;
    min-height: 72px !important;
    border-radius: 16px !important;
    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,0.75),
    rgba(248,249,251,0.9)
    ) !important;
    color: #718096 !important;
}

/* ----------------------------
    MOBILE
---------------------------- */
@media (max-width: 700px) {
    .leave-list,
    .leave-pending-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
    }

.leave-list-item,
    .leave-pending-item {
    min-height: 68px !important;
    padding-left: 15px !important;
    padding-right: 35px !important;
    }
}

/* ============================================================
    LEAVE PANELS — COMPACT ROW HEIGHT
    REDUCE HEIGHT BY ~40%
    ============================================================ */
.leave-list {
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

.leave-pending-list {
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

/* TODAY'S LEAVES ROW */
.leave-list-item {
    min-height: 43px !important;
    height: 43px !important;
    padding: 7px 38px 7px 14px !important;
    border-radius: 12px !important;
}

/* PENDING REQUEST ROW */
.leave-pending-item {
    min-height: 43px !important;
    height: 43px !important;
    padding: 7px 38px 7px 14px !important;
    border-radius: 12px !important;
}

/* Right orange accent smaller */
.leave-list-item::after,
.leave-pending-item::after {
    width: 4px !important;
    height: 20px !important;
    right: 10px !important;
}

/* Slightly smaller text */
.leave-list-person strong,
.leave-list-item strong,
.leave-pending-name {
    font-size: 13px !important;
}

.leave-list-person span,
.leave-list-item span,
.leave-pending-item span {
    font-size: 11px !important;
}

/* Compact empty state */
.leave-empty-state {
    min-height: 48px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Compact footer */
.leave-panel-footer {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
    padding: 10px 14px !important;
}

/* ============================================================
    DEPARTMENT SNAPSHOT + LOW LEAVE BALANCE
    REDUCE CARD HEIGHT BY 30%
    ============================================================ */
.leave-department-card,
.leave-low-balance-card {
    min-height: 0 !important;
    height: auto !important;
}

/* Agar dono same common dashboard panel class use kar rahe hain */
.leave-department-card {
    padding-bottom: 10px !important;
}

/* Department Snapshot rows compact */
.leave-department-list {
    min-height: 0 !important;
}

.leave-department-item {
    min-height: 65px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Low Leave Balance empty state compact */
.leave-low-balance-card .leave-empty-state {
    min-height: 150px !important;
    padding: 20px !important;
}

/* Header bhi thora compact */
.leave-department-card .leave-panel-header,
.leave-low-balance-card .leave-panel-header {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
}

/* Desktop card height force compact */
.leave-department-card,
.leave-low-balance-card {
    max-height: 390px !important;
    overflow: hidden !important;
}

/* ============================================================
    RECRUITMENT OVERVIEW
    MATCH LEAVE DASHBOARD UI
    LIVE DATA + CREATE JOB UNTOUCHED
    ============================================================ */
/* =========================
    HEADER
    Buttons intentionally untouched
========================= */
.recruitment-page-header {
    margin: 0 0 18px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #dce2e9 !important;
}

/* Recruitment eyebrow */
.recruitment-eyebrow {
    display: block !important;
    margin-bottom: 7px !important;
    color: #ea580c !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
}

/* Main heading */
.recruitment-page-header h1 {
    margin: 0 !important;
    color: #2b394c !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
}

.recruitment-page-header p {
    margin: 7px 0 0 !important;
    color: #657184 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* ============================================================
    IMPORTANT:
    LIVE DATA + CREATE JOB ARE NOT STYLED BELOW
    ============================================================ */
/* =========================
    KPI GRID
========================= */
.recruitment-kpi-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================
    KPI CARD
========================= */
.recruitment-kpi-card {
    position: relative !important;
    width: 258px !important;
    max-width: 258px !important;
    flex: none !important;
    height: 158px !important;
    min-height: 158px !important;
    padding: 16px 28px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: block !important;
    background:
    radial-gradient(
    circle at 100% 0%,
    rgba(249, 115, 22, 0.14),
    transparent 42%
    ),
    linear-gradient(
    110deg,
    #171c21 0%,
    #1b1f23 58%,
    #35261c 100%
    ) !important;
    border:
    1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

/* Orange vertical line */
.recruitment-kpi-card::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 31px !important;
    bottom: 31px !important;
    background:
    linear-gradient(
    180deg,
    #ff8a2a,
    #f97316
    ) !important;
    border-radius: 10px !important;
    z-index: 2 !important;
}

/* Top-right decorative circle */
.recruitment-kpi-card::after {
    content: "" !important;
    position: absolute !important;
    width: 105px !important;
    height: 105px !important;
    right: -40px !important;
    top: -35px !important;
    border-radius: 50% !important;
    border:
    1px solid rgba(255, 255, 255, 0.13) !important;
    background:
    rgba(255, 255, 255, 0.015) !important;
    pointer-events: none !important;
}

/* =========================
    CARD TOP
========================= */
.recruitment-kpi-top {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin: 0 0 12px !important;
}

/* KPI label */
.recruitment-kpi-label {
    display: block !important;
    padding-top: 10px !important;
    color: #f0a45d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}

/* =========================
    ICON BOX
========================= */
.recruitment-kpi-icon,
.recruitment-kpi-icon.jobs,
.recruitment-kpi-icon.candidates,
.recruitment-kpi-icon.pipeline,
.recruitment-kpi-icon.interviews,
.recruitment-kpi-icon.joining {
    position: relative !important;
    z-index: 3 !important;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ff7a1a !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background:
    linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.035),
    rgba(0, 0, 0, 0.16)
    ) !important;
    border:
    1px solid rgba(249, 115, 22, 0.65) !important;
    border-radius: 14px !important;
    box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 14px rgba(0, 0, 0, 0.16) !important;
}

/* =========================
    KPI NUMBER
========================= */
.recruitment-kpi-card > strong {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 2px 0 0 !important;
    color: #f3f5f7 !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
    text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* KPI description */
.recruitment-kpi-card > small {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin-top: 7px !important;
    color: #aeb8c6 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.recruitment-kpi-card:hover {
    transform: translateY(-4px) !important;
    border-color:
    rgba(249, 115, 22, 0.42) !important;
    box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 1250px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .recruitment-dashboard-shell {
    padding: 16px 14px 28px !important;
    }

.recruitment-kpi-grid {
    grid-template-columns: 1fr !important;
    }

.recruitment-kpi-card {
    height: 145px !important;
    min-height: 145px !important;
    }
}

/* ============================================================
    RECRUITMENT OVERVIEW — SIZE + TOP SHADE UPDATE
    Paste at the VERY END of style.css
    ============================================================ */
/* =========================
    STRONGER TOP BACKGROUND SHADE
========================= */
.recruitment-dashboard-shell {
    background:
    radial-gradient(
    ellipse 75% 42% at 50% 0%,
    rgba(249, 115, 22, 0.14),
    transparent 72%
    ),
    radial-gradient(
    circle at 20% 0%,
    rgba(249, 115, 22, 0.06),
    transparent 38%
    ),
    #f7f8fa !important;
}

/* =========================
    COMPACT KPI GRID
    Approx. 20% smaller cards
========================= */
.recruitment-kpi-grid {
    grid-template-columns:
    repeat(5, minmax(0, 0.8fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

/* =========================
    CARD SIZE — 20% SMALLER
========================= */
.recruitment-kpi-card {
    height: 126px !important;
    min-height: 126px !important;
    padding: 13px 22px !important;
    border-radius: 19px !important;
}

.recruitment-kpi-card::before {
    left: 8px !important;
    top: 25px !important;
    bottom: 25px !important;
    width: 4px !important;
}

/* Decorative circle */
.recruitment-kpi-card::after {
    width: 85px !important;
    height: 85px !important;
    right: -32px !important;
    top: -28px !important;
}

.recruitment-kpi-top {
    margin-bottom: 8px !important;
}

.recruitment-kpi-label {
    padding-top: 7px !important;
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
}

/* =========================
    ICON — 20% SMALLER
========================= */
.recruitment-kpi-icon,
.recruitment-kpi-icon.jobs,
.recruitment-kpi-icon.candidates,
.recruitment-kpi-icon.pipeline,
.recruitment-kpi-icon.interviews,
.recruitment-kpi-icon.joining {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
}

.recruitment-kpi-card > strong {
    margin-top: 0 !important;
    font-size: 31px !important;
}

.recruitment-kpi-card > small {
    margin-top: 5px !important;
    font-size: 10px !important;
}

@media (max-width: 1250px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .recruitment-kpi-grid {
    grid-template-columns: 1fr !important;
    }

.recruitment-kpi-card {
    height: 126px !important;
    min-height: 126px !important;
    }
}

/* ============================================================
    RECRUITMENT OVERVIEW — COMPACT CARDS + STRONGER TOP SHADE
    PASTE AT THE VERY END OF style.css
    LIVE DATA + CREATE JOB UNTOUCHED
============================================================ */
.recruitment-dashboard-shell {
    background:
    radial-gradient(
    ellipse 70% 280px at 50% 0%,
    rgba(249, 115, 22, 0.16) 0%,
    rgba(249, 115, 22, 0.07) 38%,
    transparent 75%
    ),
    linear-gradient(
    180deg,
    rgba(236, 230, 222, 0.75) 0px,
    rgba(247, 248, 250, 0.35) 260px,
    #f7f8fa 480px
    ) !important;
}

/* =========================
    COMPACT KPI GRID
    Cards don't stretch full page
========================= */
.recruitment-kpi-grid {
    grid-template-columns:
    repeat(5, minmax(0, 0.7fr)) !important;
    gap: 14px !important;
    justify-content: start !important;
    width: 100% !important;
}

/* =========================
    CARD SIZE
    Height reduced by ~30%
    Width reduced by ~30%
========================= */
.recruitment-kpi-card {
    height: 110px !important;
    min-height: 110px !important;
    padding: 12px 22px !important;
    border-radius: 19px !important;
}

/* =========================
    ORANGE LEFT ACCENT
========================= */
.recruitment-kpi-card::before {
    left: 9px !important;
    top: 23px !important;
    bottom: 23px !important;
    width: 4px !important;
}

/* =========================
    TOP RIGHT DECORATIVE CIRCLE
========================= */
.recruitment-kpi-card::after {
    width: 82px !important;
    height: 82px !important;
    right: -31px !important;
    top: -28px !important;
}

.recruitment-kpi-top {
    margin-bottom: 5px !important;
}

/* KPI Label */
.recruitment-kpi-label {
    padding-top: 6px !important;
    font-size: 9px !important;
    letter-spacing: 1.1px !important;
}

/* =========================
    COMPACT ICON
========================= */
.recruitment-kpi-icon,
.recruitment-kpi-icon.jobs,
.recruitment-kpi-icon.candidates,
.recruitment-kpi-icon.pipeline,
.recruitment-kpi-icon.interviews,
.recruitment-kpi-icon.joining {
    width: 39px !important;
    height: 27px !important;
    flex: 0 0 39px !important;
    font-size: 17px !important;
    border-radius: 11px !important;
}

.recruitment-kpi-card > strong {
    margin-top: 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
}

/* =========================
    DESCRIPTION
========================= */
.recruitment-kpi-card > small {
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 15px !important;
}

/* =========================
    MOBILE / SMALL SCREEN
========================= */
@media (max-width: 1250px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .recruitment-kpi-grid {
    grid-template-columns: 1fr !important;
    }

.recruitment-kpi-card {
    height: 105px !important;
    min-height: 105px !important;
    }
}

/* ============================================================
    RECRUITMENT DASHBOARD
    EXACTLY MATCH LEAVE DASHBOARD TOP UI
    FINAL WIDTH + BACKGROUND + CARD FIX
    ============================================================ */
/* ------------------------------------------------------------
    1. COMPLETE CLEAN BACKGROUND
------------------------------------------------------------ */
.recruitment-dashboard-page,
.recruitment-dashboard-shell,
.recruitment-page,
.recruitment-dashboard {
    background: #f7f8fa !important;
    background-image: none !important;
}

/* Remove any old gradient pseudo layers */
.recruitment-dashboard-page::before,
.recruitment-dashboard-page::after,
.recruitment-dashboard-shell::before,
.recruitment-dashboard-shell::after,
.recruitment-page::before,
.recruitment-page::after {
    background: none !important;
    background-image: none !important;
}

/* ------------------------------------------------------------
    2. SAME PAGE SPACING AS LEAVE DASHBOARD
------------------------------------------------------------ */
.recruitment-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 60px 34px !important;
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------
    3. HEADER FULL WIDTH
    LIVE DATA + CREATE JOB NOT CHANGED
------------------------------------------------------------ */
.recruitment-page-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-image: none !important;
}

/* ------------------------------------------------------------
    4. REMOVE OLD RECRUITMENT WIDTH RESTRICTIONS
------------------------------------------------------------ */
.recruitment-kpi-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;
    gap: 22px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ------------------------------------------------------------
    5. KPI CARDS — SAME AS LEAVE DASHBOARD
------------------------------------------------------------ */
.recruitment-kpi-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 158px !important;
    min-height: 158px !important;
    margin: 0 !important;
    padding: 16px 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background:
    linear-gradient(
    110deg,
    #171c21 0%,
    #1b1f23 58%,
    #35261c 100%
    ) !important;
    border:
    1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* ------------------------------------------------------------
    6. LEFT ORANGE LINE
------------------------------------------------------------ */
.recruitment-kpi-card::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 31px !important;
    bottom: 31px !important;
    width: 5px !important;
    border-radius: 10px !important;
    background: #ff7a1a !important;
    z-index: 2 !important;
}

/* ------------------------------------------------------------
    7. TOP RIGHT CIRCLE
------------------------------------------------------------ */
.recruitment-kpi-card::after {
    content: "" !important;
    position: absolute !important;
    width: 105px !important;
    height: 105px !important;
    right: -40px !important;
    top: -35px !important;
    border-radius: 50% !important;
    border:
    1px solid rgba(255, 255, 255, 0.13) !important;
    background: transparent !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------
    8. CARD CONTENT
------------------------------------------------------------ */
.recruitment-kpi-top {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin: 0 0 12px !important;
}

.recruitment-kpi-label {
    padding-top: 10px !important;
    color: #f0a45d !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    white-space: nowrap !important;
}

/* Icon box */
.recruitment-kpi-icon {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ff7a1a !important;
    font-size: 22px !important;
    border:
    1px solid rgba(249, 115, 22, 0.65) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-sizing: border-box !important;
}

.recruitment-kpi-card > strong {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin: 2px 0 0 !important;
    color: #f3f5f7 !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.recruitment-kpi-card > small {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    margin-top: 7px !important;
    color: #aeb8c6 !important;
    font-size: 11px !important;
}

/* ------------------------------------------------------------
    9. MAIN CONTENT BELOW KPI
    SAME CLEAN GAP AS LEAVE DASHBOARD
------------------------------------------------------------ */
.recruitment-dashboard-grid,
.recruitment-main-grid {
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1250px) {
    .recruitment-dashboard-shell {
    padding-left: 24px !important;
    padding-right: 24px !important;
    }

.recruitment-kpi-grid {
    grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .recruitment-kpi-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .recruitment-dashboard-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
    }

.recruitment-kpi-grid {
    grid-template-columns: 1fr !important;
    }
}

/* ============================================================
    RECRUITMENT DASHBOARD — FINAL LAYOUT RESET
    SIDEBAR GAP + 40% SMALLER KPI CARDS
    ============================================================ */
@media (min-width: 901px) {
/* --------------------------------------------------------
    1. PAGE KO SIDEBAR KE BAAD PROPER POSITION
    Sidebar = 245px
    -------------------------------------------------------- */
    #recruitmentDashboardPage,
    .recruitment-dashboard-page {
    width: calc(100% - 190) !important;
    max-width: calc(100% - 190px) !important;
    margin-left: 200px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: #f8fafc !important;
    background-image: none !important;
    }

/* --------------------------------------------------------
    2. SIDEBAR KE BAAD 0.5 INCH / 48px GAP
    -------------------------------------------------------- */
    .recruitment-dashboard-shell {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding:
    28px
    28px
    40px
    48px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-image: none !important;
    }

/* --------------------------------------------------------
    3. HEADER FULL AVAILABLE WIDTH
    LIVE DATA + CREATE JOB KI STYLING CHANGE NAHI HOGI
    -------------------------------------------------------- */
    .recruitment-page-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    }

/* --------------------------------------------------------
    4. KPI GRID
    CARDS KI WIDTH APPROX 40% KAM
    -------------------------------------------------------- */
    .recruitment-kpi-grid {
    display: grid !important;
    grid-template-columns:
    repeat(5, 200px) !important;
    gap: 14px !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: start !important;
    margin: 0 0 38px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    }

/* --------------------------------------------------------
    5. KPI CARDS
    WIDTH + HEIGHT 40% SMALLER
    -------------------------------------------------------- */
    .recruitment-kpi-card {
    width: 200px !important;
    min-width: 0 !important;
    max-width: 200px !important;
    height: 95px !important;
    min-height: 95px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    }

/* Compact content according to smaller cards */
    .recruitment-kpi-card {
    padding: 10px 16px !important;
    }

.recruitment-kpi-card::before {
    top: 22px !important;
    bottom: 22px !important;
    }

.recruitment-kpi-card::after {
    width: 75px !important;
    height: 75px !important;
    right: -28px !important;
    top: -25px !important;
    }

.recruitment-kpi-top {
    margin-bottom: 4px !important;
    }

.recruitment-kpi-label {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    }

.recruitment-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 16px !important;
    }

.recruitment-kpi-card > strong {
    font-size: 30px !important;
    line-height: 1 !important;
    margin: 0 !important;
    }

.recruitment-kpi-card > small {
    margin-top: 3px !important;
    font-size: 9px !important;
    }

/* --------------------------------------------------------
    6. BELOW CONTENT
    FULL AVAILABLE WIDTH
    RIGHT SIDE PAR EXTRA SHIFT NAHI HOGA
    -------------------------------------------------------- */
    .recruitment-dashboard-grid,
    .recruitment-main-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    }

.recruitment-panel,
    .recruitment-pipeline-panel,
    .recruitment-applications-panel,
    .recruitment-positions-panel,
    .recruitment-progress-panel,
    .recruitment-actions-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    }
}

/* ============================================================
    TABLET
    ============================================================ */
@media (max-width: 900px) {
    #recruitmentDashboardPage,
    .recruitment-dashboard-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    }

.recruitment-dashboard-shell {
    padding: 24px 20px 32px !important;
    }

.recruitment-kpi-grid {
    grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 14px !important;
    }

.recruitment-kpi-card {
    width: 100% !important;
    max-width: none !important;
    height: 95px !important;
    min-height: 95px !important;
    }

.recruitment-dashboard-grid,
    .recruitment-main-grid {
    grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .recruitment-dashboard-shell {
    padding: 20px 16px 30px !important;
    }

.recruitment-kpi-grid {
    grid-template-columns: 1fr !important;
    }
}

/* ============================================================
    RECRUITMENT KPI — SIZE INCREASE + REMOVE HEADER LINES
    ============================================================ */
@media (min-width: 901px) {
/* KPI cards width 30% increase */
    .recruitment-kpi-grid {
    grid-template-columns: repeat(5, 243px) !important;
    gap: 11px !important;
    }

.recruitment-kpi-card {
    width: 240px !important;
    max-width: 240px !important;
/* Previous 95px se 20% increase */
    height: 114px !important;
    min-height: 114px !important;
    }

/* Card content ko new height ke according adjust */
    .recruitment-kpi-card {
    padding: 13px 18px !important;
    }

.recruitment-kpi-card::before {
    top: 25px !important;
    bottom: 25px !important;
    }

.recruitment-kpi-card::after {
    width: 82px !important;
    height: 82px !important;
    }
}

/* ============================================================
    REMOVE HORIZONTAL LINES / ROWS
    ============================================================ */
/* Main heading ke neeche line */
.recruitment-page-header,
.recruitment-dashboard-shell > header,
.recruitment-dashboard-shell .page-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Header ke baad horizontal divider */
.recruitment-page-header::after,
.recruitment-page-header::before,
.recruitment-dashboard-shell::before {
    display: none !important;
    content: none !important;
}

/* KPI cards ke upar wali line/divider */
.recruitment-kpi-grid {
    border-top: none !important;
}

.recruitment-kpi-grid::before,
.recruitment-kpi-grid::after {
    display: none !important;
    content: none !important;
}

/* Agar parent wrapper divider generate kar raha ho */
.recruitment-dashboard-shell hr,
.recruitment-page hr,
.recruitment-dashboard hr {
    display: none !important;
}

/* ============================================================
    RECRUITMENT — REDUCE GAP BELOW KPI CARDS
    ============================================================ */
@media (min-width: 901px) {
    .recruitment-kpi-grid {
/* Pehle 38px tha — ab compact gap */
    margin-bottom: 16px !important;
    }
}

/* ============================================================
    RECRUITMENT KPI — LEFT CONTENT GAP
    ============================================================ */
@media (min-width: 901px) {
/* Left orange line se content ko thora right shift */
    .recruitment-kpi-card {
    padding-left: 28px !important;
    }
}
/* =========================================================
   JOB MANAGEMENT — RECRUITMENT OVERVIEW UI
   Paste at the END of your CSS file
========================================================= */

#jobManagementPage,
.job-management-page {
    background:
        radial-gradient(
            circle at top right,
            rgba(249, 115, 22, 0.08),
            transparent 28%
        ),
        #f8fafc !important;
}


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

.job-management-shell {
    max-width: 100% !important;
}

.job-page-header {
    align-items: flex-start !important;
    margin-bottom: 28px !important;
}

.job-page-header .eyebrow {
    display: inline-block !important;
    color: #ea580c !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

.job-page-header h1 {
    margin-top: 8px !important;
    color: #24364d !important;
    font-size: clamp(30px, 2.4vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
}

.job-page-header p {
    margin-top: 8px !important;
    color: #64748b !important;
    font-size: 14px !important;
}


/* =========================================================
   CREATE NEW JOB BUTTON
========================================================= */

.job-primary-button {
    min-height: 48px !important;
    padding: 0 22px !important;

    border: 0 !important;
    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f97316
        ) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow:
        0 10px 24px rgba(249, 115, 22, 0.22) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease !important;
}

.job-primary-button span {
    font-size: 19px !important;
    font-weight: 400 !important;
}

.job-primary-button:hover {
    background:
        linear-gradient(
            135deg,
            #f97316,
            #ea580c
        ) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 14px 30px rgba(249, 115, 22, 0.32) !important;
}


/* =========================================================
   DARK PREMIUM JOB STAT CARDS
========================================================= */

.job-stats-grid {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin-bottom: 22px !important;
}

.job-stat-card {
    position: relative !important;

    min-height: 142px !important;

    padding: 22px 22px !important;

    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255, 255, 255, 0.07) !important;

    border-radius: 26px !important;

    background:
        linear-gradient(
            135deg,
            #20262d 0%,
            #24292f 55%,
            #3b2c22 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.14) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}


/* decorative circle */

.job-stat-card::before {
    content: "" !important;

    position: absolute !important;

    width: 100px !important;
    height: 100px !important;

    top: -45px !important;
    right: -28px !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 50% !important;

    pointer-events: none !important;
}

.job-stat-card::after {
    content: "" !important;

    position: absolute !important;

    width: 5px !important;
    height: 78px !important;

    left: 14px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            to bottom,
            #fb923c,
            #f97316
        ) !important;
}


/* hover */

.job-stat-card:hover {
    transform: translateY(-4px) !important;

    border-color:
        rgba(249, 115, 22, 0.38) !important;

    box-shadow:
        0 20px 38px rgba(15, 23, 42, 0.20) !important;
}


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

.job-stat-icon {
    position: relative !important;
    z-index: 2 !important;

    width: 46px !important;
    height: 46px !important;

    flex: 0 0 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(249, 115, 22, 0.60) !important;

    border-radius: 14px !important;

    background:
        rgba(249, 115, 22, 0.07) !important;

    color: #fb923c !important;

    font-size: 20px !important;

    box-shadow:
        inset 0 0 18px rgba(249, 115, 22, 0.04) !important;
}


/* remove old individual icon colors */

.job-stat-icon.green,
.job-stat-icon.blue,
.job-stat-icon.gray,
.job-stat-icon.orange {
    background:
        rgba(249, 115, 22, 0.07) !important;

    color: #fb923c !important;

    border-color:
        rgba(249, 115, 22, 0.60) !important;
}


/* =========================================================
   STAT TEXT
========================================================= */

.job-stat-card > div:last-child {
    position: relative !important;
    z-index: 2 !important;
}

.job-stat-card span {
    color: #f6b77e !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;
}

.job-stat-card strong {
    margin-top: 9px !important;

    color: #ffffff !important;

    font-size: 36px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: -1px !important;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.12) !important;
}


/* =========================================================
   JOBS PANEL — WHITE PREMIUM
========================================================= */

.job-management-panel {
    overflow: hidden !important;

    background: #ffffff !important;

    border:
        1px solid #e8edf3 !important;

    border-radius: 22px !important;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.06) !important;
}


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

.job-list-header {
    min-height: 94px !important;

    padding: 22px 26px !important;

    border-bottom:
        1px solid #edf1f5 !important;

    background: #ffffff !important;
}

.job-list-header h2 {
    color: #26384e !important;

    font-size: 19px !important;

    font-weight: 800 !important;
}

.job-list-header p {
    margin-top: 7px !important;

    color: #7b8798 !important;

    font-size: 12px !important;
}

.job-list-count {
    padding: 9px 14px !important;

    border:
        1px solid #fed7aa !important;

    border-radius: 999px !important;

    background: #fff7ed !important;

    color: #ea580c !important;

    font-size: 11px !important;

    font-weight: 800 !important;
}


/* =========================================================
   SEARCH + FILTER AREA
========================================================= */

.job-controls {
    padding: 20px 26px !important;

    grid-template-columns:
        minmax(280px, 1fr)
        210px
        235px !important;

    gap: 14px !important;

    border-bottom:
        1px solid #edf1f5 !important;

    background: #ffffff !important;
}

.job-search-box,
.job-filter-select {
    min-height: 48px !important;

    border:
        1px solid #dce3ea !important;

    border-radius: 13px !important;

    background: #ffffff !important;

    color: #475569 !important;

    font-size: 12px !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.job-search-box {
    padding: 0 15px !important;
}

.job-search-box span {
    color: #f97316 !important;

    font-size: 18px !important;
}

.job-search-box:focus-within {
    border-color: #fb923c !important;

    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.09) !important;
}

.job-filter-select {
    padding: 0 15px !important;
}

.job-filter-select:focus {
    border-color: #fb923c !important;

    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.09) !important;
}


/* =========================================================
   JOBS TABLE — WHITE + ORANGE THEME
========================================================= */

#jobsTableContainer {
    padding: 0 !important;

    background: #ffffff !important;
}

#jobsTableContainer .jobs-table-wrap {
    border: 0 !important;

    border-radius: 0 !important;

    background: #ffffff !important;
}

#jobsTableContainer .jobs-table {
    background: #ffffff !important;
}


/* table heading */

#jobsTableContainer .jobs-table thead th {
    height: 52px !important;

    padding: 0 14px !important;

    background:
        linear-gradient(
            90deg,
            #fff7ed,
            #fffaf5
        ) !important;

    color: #9a5a25 !important;

    border-top:
        1px solid #fed7aa !important;

    border-bottom:
        1px solid #fed7aa !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    letter-spacing: 0.7px !important;

    text-transform: uppercase !important;
}


/* table body */

#jobsTableContainer .jobs-table tbody td {
    height: 78px !important;

    padding: 14px !important;

    background: #ffffff !important;

    color: #334155 !important;

    border-bottom:
        1px solid #edf1f5 !important;

    font-size: 12px !important;

    font-weight: 500 !important;
}


/* hover row */

#jobsTableContainer .jobs-table tbody tr:hover td {
    background: #fffaf6 !important;
}


/* Job ID */

#jobsTableContainer .jobs-table tbody td:first-child {
    color: #64748b !important;

    font-size: 11px !important;

    font-weight: 700 !important;
}


/* Job title */

#jobsTableContainer .jobs-table tbody td:nth-child(2) strong {
    color: #26384e !important;

    font-size: 13px !important;

    font-weight: 800 !important;
}


/* Salary */

#jobsTableContainer .jobs-table tbody td:nth-child(7) {
    color: #ea580c !important;

    font-weight: 700 !important;
}


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

#jobsTableContainer .job-status-badge {
    min-width: 92px !important;

    height: 32px !important;

    padding: 0 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    line-height: 1 !important;
}

#jobsTableContainer .job-status-badge.published {
    background: #fff7ed !important;

    color: #ea580c !important;

    border:
        1px solid #fed7aa !important;
}

#jobsTableContainer .job-status-badge.draft {
    background: #f8fafc !important;

    color: #64748b !important;

    border:
        1px solid #e2e8f0 !important;
}

#jobsTableContainer .job-status-badge.closed {
    background: #fff1f2 !important;

    color: #dc2626 !important;

    border:
        1px solid #fecdd3 !important;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

#jobsTableContainer .job-action-buttons {
    gap: 8px !important;
}

#jobsTableContainer .job-action-button {
    width: 40px !important;
    height: 40px !important;

    border: 0 !important;

    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    font-size: 14px !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease !important;
}


/* View */

#jobsTableContainer .job-action-button.view {
    background: #fff7ed !important;

    color: #f97316 !important;
}


/* Edit */

#jobsTableContainer .job-action-button.edit {
    background: #fff7ed !important;

    color: #ea580c !important;
}


/* Close */

#jobsTableContainer .job-action-button.close {
    background: #fff7ed !important;

    color: #c2410c !important;
}


#jobsTableContainer .job-action-button:hover:not(:disabled) {
    background: #f97316 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 8px 18px rgba(249, 115, 22, 0.22) !important;
}

#jobsTableContainer .job-action-button:disabled {
    opacity: 0.45 !important;

    cursor: not-allowed !important;
}


/* =========================================================
   EMPTY / LOADING / ERROR STATES
========================================================= */

#jobsTableContainer .job-loading-state,
#jobsTableContainer .job-empty-state,
#jobsTableContainer .job-error-state {
    background: #ffffff !important;

    border: 0 !important;
}

.job-empty-icon {
    background: #fff7ed !important;

    color: #f97316 !important;

    border:
        1px solid #fed7aa !important;
}

.job-empty-button {
    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f97316
        ) !important;

    border-radius: 10px !important;

    box-shadow:
        0 8px 18px rgba(249, 115, 22, 0.18) !important;
}


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

@media (max-width: 1200px) {

    .job-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .job-controls {
        grid-template-columns:
            1fr 1fr !important;
    }

    .job-search-box {
        grid-column: 1 / -1 !important;
    }

}


@media (max-width: 700px) {

    .job-page-header {
        flex-direction: column !important;
    }

    .job-primary-button {
        width: 100% !important;

        justify-content: center !important;
    }

    .job-stats-grid {
        grid-template-columns:
            1fr !important;
    }

    .job-stat-card {
        min-height: 120px !important;
    }

    .job-controls {
        grid-template-columns:
            1fr !important;
    }

    .job-search-box {
        grid-column: auto !important;
    }

    .job-list-header {
        align-items: flex-start !important;

        flex-direction: column !important;
    }

}/* =========================================================
   COMPACT JOB MANAGEMENT HEADER + STAT CARDS
========================================================= */

/* -------------------------
   TOP PAGE HEADING
------------------------- */

.job-page-header {
    margin-bottom: 18px !important;
}

.job-page-header .eyebrow {
    font-size: 8px !important;
    letter-spacing: 1.5px !important;
}

.job-page-header h1 {
    margin-top: 5px !important;
    font-size: 27px !important;
    line-height: 1.1 !important;
}

.job-page-header p {
    margin-top: 5px !important;
    font-size: 11px !important;
}


/* -------------------------
   CREATE JOB BUTTON
------------------------- */

.job-primary-button {
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
}

.job-primary-button span {
    font-size: 16px !important;
}


/* =========================================================
   COMPACT STAT CARDS — 105px HEIGHT
========================================================= */

.job-stats-grid {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.job-stat-card {
    min-height: 105px !important;
    height: 105px !important;

    padding: 14px 18px 14px 20px !important;

    gap: 13px !important;

    border-radius: 22px !important;
}


/* Orange left line */

.job-stat-card::after {
    width: 5px !important;
    height: 55px !important;
    left: 16px !important;
}


/* Top right decorative circle */

.job-stat-card::before {
    width: 75px !important;
    height: 75px !important;

    top: -34px !important;
    right: -22px !important;
}


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

.job-stat-icon {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    border-radius: 12px !important;

    font-size: 17px !important;
}


/* =========================================================
   CARD TEXT
========================================================= */

.job-stat-card span {
    font-size: 10px !important;
    letter-spacing: 1px !important;
}

.job-stat-card strong {
    margin-top: 5px !important;

    font-size: 28px !important;

    line-height: 1 !important;
}


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

@media (max-width: 700px) {

    .job-stat-card {
        height: 105px !important;
        min-height: 105px !important;
    }

    .job-page-header h1 {
        font-size: 25px !important;
    }

}
/* Left orange line aur icon ke darmiyan more gap */

.job-stat-card {
    padding-left: 26px !important;
}

.job-stat-card::after {
    left: 14px !important;
}

.job-stat-icon {
    margin-left: 1px !important;
}
/* =========================================================
   JOB MANAGEMENT TABLE HEADER — BLACK + ORANGE + WHITE
========================================================= */

#jobsTableContainer .jobs-table thead th {
    height: 58px !important;
    padding: 0 15px !important;

    background: linear-gradient(
        90deg,
        #171717 0%,
        #222222 55%,
        #2b211b 100%
    ) !important;

    color: #ffffff !important;

    border-top: 1px solid #f97316 !important;
    border-bottom: 2px solid #f97316 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;

    text-align: left !important;
    vertical-align: middle !important;
}


/* Orange separation between header columns */

#jobsTableContainer .jobs-table thead th + th {
    border-left: 1px solid rgba(249, 115, 22, 0.22) !important;
}


/* First and last header corner rounding */

#jobsTableContainer .jobs-table thead th:first-child {
    border-top-left-radius: 12px !important;
}

#jobsTableContainer .jobs-table thead th:last-child {
    border-top-right-radius: 12px !important;
}


/* Optional orange highlight on hover */

#jobsTableContainer .jobs-table thead th:hover {
    background: #2f241d !important;
    color: #fb923c !important;
}
/* =========================================================
   PREMIUM JOB TABLE HEADER — CLEAN DARK UI
========================================================= */

#jobsTableContainer .jobs-table thead {
    background: transparent !important;
}

#jobsTableContainer .jobs-table thead th {
    height: 56px !important;
    padding: 0 15px !important;

    background: linear-gradient(
        90deg,
        #1d2228 0%,
        #20252b 55%,
        #29241f 100%
    ) !important;

    color: #ffffff !important;

    /* Remove all orange column separator lines */
    border-left: none !important;
    border-right: none !important;

    /* Premium orange accent only at bottom */
    border-top: 1px solid rgba(249, 115, 22, 0.65) !important;
    border-bottom: 2px solid #f97316 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;

    text-align: left !important;
    vertical-align: middle !important;

    white-space: nowrap !important;
}


/* Specifically remove previous separator rule */

#jobsTableContainer .jobs-table thead th + th {
    border-left: none !important;
}


/* Premium first and last corners */

#jobsTableContainer .jobs-table thead th:first-child {
    border-top-left-radius: 14px !important;
}

#jobsTableContainer .jobs-table thead th:last-child {
    border-top-right-radius: 14px !important;
}


/* Remove hover effect from headers */

#jobsTableContainer .jobs-table thead th:hover {
    background: linear-gradient(
        90deg,
        #1d2228 0%,
        #20252b 55%,
        #29241f 100%
    ) !important;

    color: #ffffff !important;
}
/* =========================================================
   CANDIDATES PAGE
   HERO = DARK + ORANGE PREMIUM
   TABLE = DARK HEADER + CLEAN WHITE BODY
========================================================= */


/* =========================================================
   1. JOB HERO CARD
========================================================= */

.candidates-page .candidate-job-header,
.candidates-page .job-details-header,
.candidates-page .candidate-hero,
.candidates-page .job-hero,
.candidates-page .job-summary-card {
    position: relative !important;

    overflow: hidden !important;

    min-height: 105px !important;

    padding: 22px 24px !important;

    border: 1px solid rgba(249, 115, 22, 0.22) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(
            135deg,
            #1d2228 0%,
            #24292f 55%,
            #382c24 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.14) !important;
}


/* Decorative premium circle */

.candidates-page .candidate-job-header::before,
.candidates-page .job-details-header::before,
.candidates-page .candidate-hero::before,
.candidates-page .job-hero::before,
.candidates-page .job-summary-card::before {
    content: "" !important;

    position: absolute !important;

    width: 150px !important;
    height: 150px !important;

    top: -95px !important;
    right: -45px !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}


/* Orange accent line */

.candidates-page .candidate-job-header::after,
.candidates-page .job-details-header::after,
.candidates-page .candidate-hero::after,
.candidates-page .job-hero::after,
.candidates-page .job-summary-card::after {
    content: "" !important;

    position: absolute !important;

    width: 5px !important;
    height: 58px !important;

    left: 14px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            to bottom,
            #fb923c,
            #f97316
        ) !important;
}


/* Hero title */

.candidates-page .candidate-job-header h1,
.candidates-page .candidate-job-header h2,
.candidates-page .job-details-header h1,
.candidates-page .job-details-header h2,
.candidates-page .candidate-hero h1,
.candidates-page .candidate-hero h2,
.candidates-page .job-hero h1,
.candidates-page .job-hero h2,
.candidates-page .job-summary-card h1,
.candidates-page .job-summary-card h2 {
    position: relative !important;
    z-index: 2 !important;

    margin-left: 10px !important;

    color: #ffffff !important;

    font-size: 24px !important;
    font-weight: 800 !important;

    letter-spacing: -0.4px !important;
}


/* Hero subtitle */

.candidates-page .candidate-job-header p,
.candidates-page .job-details-header p,
.candidates-page .candidate-hero p,
.candidates-page .job-hero p,
.candidates-page .job-summary-card p {
    position: relative !important;
    z-index: 2 !important;

    margin-left: 10px !important;

    color: #cbd5e1 !important;

    font-size: 12px !important;
}


/* =========================================================
   HERO STATUS — PUBLISHED
========================================================= */

.candidates-page .candidate-job-header .job-status-badge,
.candidates-page .job-details-header .job-status-badge,
.candidates-page .candidate-hero .job-status-badge,
.candidates-page .job-hero .job-status-badge,
.candidates-page .job-summary-card .job-status-badge {
    position: relative !important;
    z-index: 3 !important;

    min-width: 100px !important;
    height: 36px !important;

    padding: 0 18px !important;

    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    border-radius: 999px !important;

    background: rgba(34, 197, 94, 0.12) !important;

    color: #86efac !important;

    font-size: 11px !important;
    font-weight: 800 !important;
}


/* =========================================================
   2. PIPELINE / STATUS BUTTONS
   Keep White + Orange Theme
========================================================= */

.candidates-page .candidate-status-button {
    min-height: 54px !important;

    border: 1px solid #fdba74 !important;
    border-radius: 14px !important;

    background: #ffffff !important;

    color: #a84b12 !important;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.035) !important;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease !important;
}

.candidates-page .candidate-status-button:hover {
    background: #fff7ed !important;

    transform: translateY(-2px) !important;
}


/* Orange active button */

.candidates-page .candidate-status-button.active,
.candidates-page .candidate-status-button.selected {
    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f97316
        ) !important;

    color: #ffffff !important;

    border-color: #f97316 !important;

    box-shadow:
        0 8px 18px rgba(249, 115, 22, 0.18) !important;
}


/* Count circles */

.candidates-page .candidate-status-button .count,
.candidates-page .candidate-status-button .status-count,
.candidates-page .candidate-status-button strong {
    background: #f97316 !important;

    color: #ffffff !important;

    border-radius: 50% !important;

    font-weight: 800 !important;
}


/* =========================================================
   3. ALL CANDIDATES TITLE
========================================================= */

.candidates-page .candidates-list-header,
.candidates-page .candidate-table-header {
    margin-top: 12px !important;
}

.candidates-page .candidates-list-header h2,
.candidates-page .candidate-table-header h2 {
    color: #26384e !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}


/* =========================================================
   4. CANDIDATE TABLE WRAPPER
========================================================= */

.candidates-page .candidates-table-wrapper,
.candidates-page .candidate-table-wrapper,
.candidates-page .table-wrapper {
    overflow: hidden !important;

    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;

    background: #ffffff !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.06) !important;
}


/* =========================================================
   5. TABLE HEADER — IMAGE 3 STYLE
========================================================= */

.candidates-page table thead th {
    height: 54px !important;

    padding: 0 14px !important;

    background:
        linear-gradient(
            90deg,
            #1c2228 0%,
            #23282f 58%,
            #30271f 100%
        ) !important;

    color: #ffffff !important;

    border-top: none !important;
    border-right: none !important;
    border-left: none !important;

    border-bottom:
        2px solid #f97316 !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: 0.7px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    vertical-align: middle !important;
}


/* Remove all column separators */

.candidates-page table thead th + th {
    border-left: none !important;
}


/* =========================================================
   6. TABLE BODY — CLEAN WHITE PREMIUM
========================================================= */

.candidates-page table tbody td {
    height: 64px !important;

    padding: 10px 14px !important;

    background: #ffffff !important;

    color: #475569 !important;

    border-right: none !important;

    border-bottom:
        1px solid #eef1f4 !important;

    font-size: 11px !important;

    white-space: nowrap !important;
}


/* Alternate subtle rows */

.candidates-page table tbody tr:nth-child(even) td {
    background: #fcfcfd !important;
}


/* Row hover */

.candidates-page table tbody tr:hover td {
    background: #fffaf6 !important;
}


/* Candidate name stronger */

.candidates-page table tbody td:first-child,
.candidates-page table tbody td:nth-child(2) {
    color: #26384e !important;

    font-weight: 700 !important;
}


/* =========================================================
   7. TABLE ACTION BUTTONS
========================================================= */

.candidates-page .candidate-action-button,
.candidates-page .table-action-button,
.candidates-page .action-button {
    min-height: 34px !important;

    padding: 0 13px !important;

    border: 1px solid #fed7aa !important;
    border-radius: 9px !important;

    background: #fff7ed !important;

    color: #ea580c !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease !important;
}

.candidates-page .candidate-action-button:hover,
.candidates-page .table-action-button:hover,
.candidates-page .action-button:hover {
    background: #f97316 !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;
}


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

@media (max-width: 900px) {

    .candidates-page .candidate-job-header,
    .candidates-page .job-details-header,
    .candidates-page .candidate-hero,
    .candidates-page .job-hero,
    .candidates-page .job-summary-card {
        min-height: 95px !important;
        padding: 18px 20px !important;
    }

    .candidates-page .candidate-job-header h1,
    .candidates-page .job-details-header h1,
    .candidates-page .candidate-hero h1,
    .candidates-page .job-hero h1,
    .candidates-page .job-summary-card h1 {
        font-size: 21px !important;
    }

}
/* ============================================================
   CANDIDATES PAGE + STAGE DETAILS
   FINAL PREMIUM UI OVERRIDE
============================================================ */


/* ============================================================
   1. TOTAL CANDIDATES
   Move approximately 0.2 inch towards right
============================================================ */

.candidate-job-card {
    position: relative !important;
}

.candidate-job-card .candidate-total {
    position: absolute !important;

    top: 50% !important;

    /* Previous right position se approx 0.2 inch right */
    right: 110px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    z-index: 10 !important;
}


/* ============================================================
   2. MAIN CANDIDATES PAGE
   STAGE BUTTON FONT 30% LARGER
============================================================ */

.candidate-status-button {
    font-size: 12px !important;
    font-weight: 600 !important;
}


/* Stage icons */

.candidate-status-button span:first-child {
    font-size: 12px !important;
}


/* Stage text */

.candidate-status-button span:last-child {
    font-size: 12px !important;
}


/* Keep buttons vertically aligned after font increase */

.candidate-status-button {
    min-height: 42px !important;
    height: 42px !important;

    padding-left: 13px !important;
    padding-right: 13px !important;

    gap: 7px !important;

    display: flex !important;
    align-items: center !important;
}


/* ============================================================
   3. STAGE DETAILS PAGE
   HERO — BLACK + ORANGE + WHITE
============================================================ */

.candidate-details-view .candidate-vacancy-hero {
    position: relative !important;

    overflow: hidden !important;

    min-height: 105px !important;

    padding: 18px 24px !important;

    border: 1px solid rgba(249, 115, 22, 0.28) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(
            135deg,
            #1d2228 0%,
            #24292f 58%,
            #382c24 100%
        ) !important;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.12) !important;
}


/* Decorative circle */

.candidate-details-view .candidate-vacancy-hero::before {
    content: "" !important;

    position: absolute !important;

    width: 150px !important;
    height: 150px !important;

    top: -95px !important;
    right: -40px !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}


/* Orange left accent */

.candidate-details-view .candidate-vacancy-hero::after {
    content: "" !important;

    position: absolute !important;

    width: 5px !important;
    height: 58px !important;

    left: 16px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            to bottom,
            #fb923c,
            #f97316
        ) !important;
}


/* Hero content */

.candidate-details-view .candidate-vacancy-hero > * {
    position: relative !important;
    z-index: 2 !important;
}


/* Job title */

.candidate-details-view .candidate-vacancy-hero h1 {
    margin: 0 0 7px 20px !important;

    color: #ffffff !important;

    font-size: 24px !important;
    line-height: 1.15 !important;

    font-weight: 800 !important;

    letter-spacing: -0.4px !important;
}


/* Job information */

.candidate-details-view .candidate-vacancy-meta {
    margin-left: 20px !important;

    color: #cbd5e1 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* Meta separators */

.candidate-details-view .candidate-vacancy-meta span {
    color: #fb923c !important;
}


/* ============================================================
   HERO STATUS BADGE
============================================================ */

.candidate-details-view .candidate-vacancy-status {
    position: relative !important;

    min-width: 100px !important;

    height: 34px !important;

    padding: 0 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(134, 239, 172, 0.20) !important;
    border-radius: 999px !important;

    background: rgba(34, 197, 94, 0.13) !important;

    color: #bbf7d0 !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    box-shadow: none !important;
}


/* ============================================================
   4. STAGE DETAIL PAGE
   SAME STYLE AS MAIN CANDIDATES PAGE
============================================================ */

.candidate-details-view .candidate-stage-tabs {
    display: grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin: 14px 0 12px !important;

    overflow: visible !important;
}


/* Stage buttons */

.candidate-details-view .candidate-stage-tab {
    min-width: 0 !important;

    min-height: 42px !important;
    height: 42px !important;

    padding: 0 13px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 7px !important;

    border: 1px solid #ff9a54 !important;
    border-radius: 11px !important;

    background: #ffffff !important;

    color: #c2410c !important;

    font-family: inherit !important;

    /* Same 30% larger font */
    font-size: 12px !important;

    font-weight: 600 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.025) !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* Hover */

.candidate-details-view .candidate-stage-tab:hover {
    background: #fff7ed !important;

    border-color: #f97316 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(249, 115, 22, 0.10) !important;
}


/* Active stage */

.candidate-details-view .candidate-stage-tab.active {
    background: #fff1df !important;

    border-color: #f97316 !important;

    color: #c2410c !important;

    box-shadow:
        0 5px 12px rgba(249, 115, 22, 0.10) !important;
}


/* Stage count circle */

.candidate-details-view .candidate-stage-tab strong {
    margin-left: auto !important;

    min-width: 22px !important;
    width: 22px !important;
    height: 22px !important;

    padding: 0 !important;

    flex: 0 0 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #f97316 !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}


/* Active count */

.candidate-details-view .candidate-stage-tab.active strong {
    background: #f97316 !important;

    color: #ffffff !important;
}


/* Hired */

.candidate-details-view .candidate-stage-tab.hired {
    background: #f0fdf4 !important;

    border-color: #86efac !important;

    color: #15803d !important;
}

.candidate-details-view .candidate-stage-tab.hired strong {
    background: #22c55e !important;

    color: #ffffff !important;
}


/* Rejected */

.candidate-details-view .candidate-stage-tab.rejected {
    background: #fef2f2 !important;

    border-color: #fca5a5 !important;

    color: #b91c1c !important;
}

.candidate-details-view .candidate-stage-tab.rejected strong {
    background: #ef4444 !important;

    color: #ffffff !important;
}


/* ============================================================
   5. STAGE PAGE HEADING
============================================================ */

.candidate-details-view .candidate-stage-heading-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 8px 0 12px !important;
}


.candidate-details-view .candidate-stage-heading-row h2 {
    color: #334155 !important;

    font-size: 18px !important;

    font-weight: 700 !important;
}


.candidate-details-view .candidate-stage-count {
    color: #64748b !important;

    font-size: 12px !important;

    font-weight: 700 !important;
}


/* ============================================================
   6. STAGE DETAILS TABLE
   SAME PREMIUM CANDIDATES TABLE THEME
============================================================ */

.candidate-details-view .candidate-table-shell {
    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.055) !important;
}


/* Dark header */

.candidate-details-view .candidate-details-table th {
    height: 54px !important;

    padding: 0 14px !important;

    background:
        linear-gradient(
            90deg,
            #1c2228 0%,
            #23282f 58%,
            #30271f 100%
        ) !important;

    color: #ffffff !important;

    border: none !important;

    border-bottom:
        2px solid #f97316 !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: 0.7px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


/* Table body */

.candidate-details-view .candidate-details-table td {
    height: 62px !important;

    padding: 10px 14px !important;

    background: #ffffff !important;

    color: #475569 !important;

    border-right: none !important;

    border-bottom:
        1px solid #eef1f4 !important;

    font-size: 11px !important;

    white-space: nowrap !important;
}


.candidate-details-view
.candidate-details-table
tbody
tr:nth-child(even)
td {
    background: #fcfcfd !important;
}


.candidate-details-view
.candidate-details-table
tbody
tr:hover
td {
    background: #fffaf6 !important;
}


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

@media (max-width: 900px) {

    .candidate-details-view .candidate-vacancy-hero {
        min-height: 95px !important;

        padding: 16px 20px !important;
    }

    .candidate-details-view .candidate-vacancy-hero h1 {
        font-size: 21px !important;
    }

    .candidate-details-view .candidate-stage-tabs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}
/* =========================================================
   HERO — TOTAL CANDIDATES PERFECT POSITION
========================================================= */

.candidate-job-card {
    position: relative !important;
}


/* Published badge fixed at right */
.candidate-job-card .job-status-badge,
.candidate-job-card .candidate-status-badge {
    position: absolute !important;

    top: 50% !important;
    right: 30px !important;

    transform: translateY(-50%) !important;

    z-index: 11 !important;
}
/* =========================================================
   JOB HERO — RIGHT SIDE BADGES PERFECT ALIGNMENT
========================================================= */

.candidate-job-card {
    position: relative !important;
}

/* Published — right edge par perfectly fixed */

.candidate-job-card .job-status-badge,
.candidate-job-card .candidate-status-badge {
    position: absolute !important;

    top: 50% !important;
    right: 30px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    z-index: 11 !important;
}
/* =========================================================
   CANDIDATES PAGE — TOTAL CANDIDATES
   CLEAN FINAL POSITIONING
========================================================= */

/* Hero header */
.candidate-job-card .candidate-job-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 105px !important;
}


/* ---------------------------------------------------------
   TOTAL CANDIDATES
   Published badge ke saath naturally aligned
--------------------------------------------------------- */

.candidate-job-card .candidate-total {
    position: absolute !important;

    /* Right side group mein */
    top: 50% !important;
    right: 145px !important;

    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 150px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.08) !important;

    color: #e5e7eb !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
    z-index: 5 !important;
}


/* Candidate number */

.candidate-job-card .candidate-total strong {
    margin-left: 5px !important;

    color: #fb923c !important;

    font-size: inherit !important;
    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   PUBLISHED / STATUS BADGE
--------------------------------------------------------- */

.candidate-job-card .candidate-job-status {
    position: absolute !important;

    top: 50% !important;
    right: 30px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    min-width: 95px !important;
    height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    z-index: 6 !important;
}


/* Fallback — agar doosri status class use ho rahi ho */

.candidate-job-card .job-status-badge,
.candidate-job-card .candidate-status-badge {
    position: absolute !important;

    top: 50% !important;
    right: 30px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    z-index: 6 !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .candidate-job-card .candidate-job-header {
        min-height: 120px !important;
    }

    .candidate-job-card .candidate-total {
        top: auto !important;
        bottom: 14px !important;
        left: 24px !important;
        right: auto !important;

        transform: none !important;

        min-width: 135px !important;
    }

    .candidate-job-card .candidate-job-status,
    .candidate-job-card .job-status-badge,
    .candidate-job-card .candidate-status-badge {
        top: 20px !important;
        right: 20px !important;

        transform: none !important;
    }
}
/* =========================================================
   LEAVE BALANCE + LEAVE HISTORY
   PREMIUM BLACK / ORANGE / WHITE TABLE HEADERS
========================================================= */

/* ---------- TABLE OUTER HEADER ---------- */

.leave-balance-table thead,
.leave-history-table thead {
    background: #23272d !important;
}


/* ---------- HEADER CELLS ---------- */

.leave-balance-table thead th,
.leave-history-table thead th {
    height: 60px !important;

    padding: 0 16px !important;

    background: #23272d !important;

    color: #ffffff !important;

    border: none !important;

    border-bottom: 2px solid #ff7419 !important;

    text-align: left !important;

    vertical-align: middle !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: 0.6px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
}


/* ---------- PREMIUM DARK HEADER GRADIENT ---------- */

.leave-balance-table thead th,
.leave-history-table thead th {
    background:
        linear-gradient(
            90deg,
            #1f242a 0%,
            #252a30 60%,
            #302a25 100%
        ) !important;
}


/* ---------- REMOVE COLUMN SEPARATORS ---------- */

.leave-balance-table thead th + th,
.leave-history-table thead th + th {
    border-left: none !important;
}


/* ---------- FIRST & LAST HEADER ROUNDING ---------- */

.leave-balance-table thead th:first-child,
.leave-history-table thead th:first-child {
    border-top-left-radius: 14px !important;
}

.leave-balance-table thead th:last-child,
.leave-history-table thead th:last-child {
    border-top-right-radius: 14px !important;
}


/* ---------- KEEP HEADER TEXT WHITE ---------- */

.leave-balance-table thead th *,
.leave-history-table thead th * {
    color: #ffffff !important;
}


/* ---------- TABLE BODY BORDER ---------- */

.leave-balance-table tbody td,
.leave-history-table tbody td {
    border-right: none !important;
}
/* =========================================================
   LEAVE TABLE HEADER — FIRST COLUMN LEFT, REST CENTER
========================================================= */

/* Default: sab header columns center */
.leave-balance-table thead th,
.leave-history-table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

/* First column: left aligned */
.leave-balance-table thead th:first-child,
.leave-history-table thead th:first-child {
    text-align: left !important;
}/* =========================================================
   FINAL HEADER ALIGNMENT FIX
   Leave Balance: First Left, Rest Center
   Leave History: All Left
========================================================= */

/* -----------------------------
   LEAVE BALANCE
----------------------------- */

/* First column left */
.leave-balance-table thead th:first-child {
    text-align: left !important;
    vertical-align: middle !important;
}

/* Remaining columns center */
.leave-balance-table thead th:not(:first-child) {
    text-align: center !important;
    vertical-align: middle !important;
}


/* -----------------------------
   LEAVE HISTORY
   All columns left aligned
----------------------------- */

.leave-history-table thead th {
    text-align: left !important;
    vertical-align: middle !important;
}

.leave-history-table thead th * {
    text-align: left !important;
}
/* =========================================================
   LEAVE HISTORY — LAST COLUMN CENTER ALIGNMENT
========================================================= */

/* Sab Leave History headers left */
.leave-history-table thead th {
    text-align: left !important;
}

/* Sirf last header center */
.leave-history-table thead th:last-child {
    text-align: center !important;
}

/* Agar last column ke andar koi element ho */
.leave-history-table thead th:last-child * {
    text-align: center !important;
}

/* =====================================================
   EMPLOYEE ENTRIES HUB
   ===================================================== */
.employee-entries-page{min-height:calc(100vh - 72px);background:#f5f7f6;padding:32px;}
.entries-page-shell{max-width:1470px;margin:0 auto;}
.entries-page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;}
.entries-page-header h1{font-size:28px;color:#1f2937;margin-top:6px;}.entries-page-header p{color:#6b7280;font-size:13px;margin-top:6px;}.entries-page-actions{display:flex;gap:10px;align-items:center;}
.entries-toolbar-card,.entries-table-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 5px 18px rgba(15,23,42,.035);}
.entries-toolbar-card{padding:14px;display:grid;grid-template-columns:1fr 220px auto;gap:12px;margin-bottom:18px;}.entries-search,.entry-picker-search{height:44px;border:1px solid #e5e7eb;border-radius:10px;display:flex;align-items:center;padding:0 13px;gap:9px;background:#fff;}.entries-search span,.entry-picker-search span{font-size:20px;color:#94a3b8;}.entries-search input,.entry-picker-search input{border:0;outline:0;width:100%;font-size:13px;background:transparent;}.entries-toolbar-card select{border:1px solid #e5e7eb;border-radius:10px;padding:0 12px;background:#fff;color:#374151;font-size:13px;outline:0;}.entries-refresh-btn{border:1px solid #fed7aa;background:#fff7ed;color:#c2410c;border-radius:10px;padding:0 15px;font-weight:700;cursor:pointer;}
.entries-table-title{padding:20px 22px;border-bottom:1px solid #edf0f2;}.entries-table-title h2{font-size:17px;color:#1f2937;}.entries-table-title p{font-size:12px;color:#6b7280;margin-top:4px;}.entries-table-wrap{overflow:auto;}.entries-table{width:100%;border-collapse:collapse;min-width:900px;}.entries-table th{background:#111827;color:#fff;text-align:left;padding:12px 16px;font-size:12px;white-space:nowrap;}.entries-table th:first-child{border-radius:0;}.entries-table td{padding:13px 16px;border-bottom:1px solid #eef1f4;font-size:12px;color:#374151;vertical-align:middle;}.entries-table tr:hover td{background:#fffaf5;}.entry-type-badge{display:inline-flex;padding:5px 9px;border-radius:20px;background:#fff7ed;color:#c2410c;font-weight:700;font-size:11px;}.entry-details-cell{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.entries-empty{text-align:center!important;padding:34px!important;color:#64748b!important;}.entry-delete-btn{border:1px solid #fecaca;background:#fff;color:#dc2626;border-radius:8px;padding:7px 11px;font-size:11px;font-weight:700;cursor:pointer;}.entry-delete-btn:hover{background:#fef2f2;}
.entry-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:24px;}.entry-modal.hidden{display:none!important;}.entry-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(2px);}.entry-modal-card{position:relative;width:min(980px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(15,23,42,.28);overflow:hidden;}.entry-modal-head{padding:24px 28px 18px;border-bottom:1px solid #edf0f2;display:flex;justify-content:space-between;gap:18px;}.entry-modal-head h2{font-size:22px;color:#1f2937;margin-top:5px;}.entry-modal-head p{font-size:12px;color:#6b7280;margin-top:6px;}.entry-close-btn{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:24px;color:#64748b;cursor:pointer;}.entry-modal-body{overflow:auto;padding:22px 28px;}.entry-step-block{margin-bottom:28px;}.entry-step-label{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;}.entry-step-label>span{width:27px;height:27px;border-radius:50%;background:#f97316;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto;}.entry-step-label strong{display:block;font-size:14px;color:#1f2937;}.entry-step-label small{display:block;font-size:11px;color:#6b7280;margin-top:3px;}.entry-employee-picker{border:1px solid #e5e7eb;border-radius:13px;padding:11px;background:#fafafa;}.selected-entry-employees{display:flex;flex-wrap:wrap;gap:7px;min-height:24px;padding:9px 2px 4px;}.entry-employee-chip{display:inline-flex;align-items:center;gap:7px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:20px;padding:5px 8px 5px 10px;font-size:11px;font-weight:700;}.entry-employee-chip button{border:0;background:transparent;color:#c2410c;font-size:16px;line-height:1;cursor:pointer;}.entry-no-selection{font-size:11px;color:#94a3b8;}.entry-employee-list{max-height:180px;overflow:auto;background:#fff;border:1px solid #edf0f2;border-radius:9px;margin-top:6px;}.entry-employee-option{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f2f4;cursor:pointer;}.entry-employee-option:last-child{border-bottom:0;}.entry-employee-option input{accent-color:#f97316;margin-top:2px;}.entry-employee-option strong{display:block;font-size:12px;color:#374151;}.entry-employee-option small{display:block;font-size:10px;color:#94a3b8;margin-top:2px;}.entry-picker-empty{padding:20px;text-align:center;color:#94a3b8;font-size:12px;}.entry-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}.entry-type-card{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:12px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:#475569;transition:.18s;}.entry-type-card b{font-size:18px;}.entry-type-card span{font-size:11px;font-weight:700;}.entry-type-card:hover{border-color:#fdba74;background:#fffaf5;}.entry-type-card.active{border-color:#f97316;background:#fff7ed;color:#c2410c;box-shadow:0 0 0 3px rgba(249,115,22,.08);}.entry-dynamic-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}.entry-field{display:flex;flex-direction:column;gap:7px;}.entry-field-full{grid-column:1/-1;}.entry-field span{font-size:11px;font-weight:700;color:#374151;}.entry-field em{color:#dc2626;font-style:normal;}.entry-field input,.entry-field select,.entry-field textarea{width:100%;height:42px;border:1px solid #e5e7eb;border-radius:9px;padding:0 11px;font-size:12px;color:#374151;background:#fff;outline:0;}.entry-field textarea{height:86px;padding:11px;resize:vertical;}.entry-field input:focus,.entry-field select:focus,.entry-field textarea:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.09);}.entry-modal-foot{padding:16px 28px;border-top:1px solid #edf0f2;display:flex;justify-content:flex-end;gap:10px;background:#fff;}.entry-form-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 12px;border-radius:9px;font-size:12px;}.entry-confirm-card{position:relative;width:min(420px,100%);background:#fff;border-radius:18px;padding:30px;text-align:center;box-shadow:0 24px 80px rgba(15,23,42,.28);}.entry-confirm-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fef2f2;color:#dc2626;font-size:24px;font-weight:800;margin:0 auto 14px;}.entry-confirm-card h3{font-size:20px;color:#1f2937;}.entry-confirm-card p{font-size:12px;color:#6b7280;line-height:1.6;margin:9px 0 22px;}.entry-confirm-card>div:last-child{display:flex;justify-content:center;gap:9px;}.entry-delete-confirm-btn{border:0;background:#dc2626;color:#fff;border-radius:9px;padding:10px 15px;font-size:12px;font-weight:700;cursor:pointer;}
@media(max-width:850px){.entries-page-header{align-items:flex-start;flex-direction:column;}.entries-toolbar-card{grid-template-columns:1fr;}.entries-refresh-btn{height:42px;}.entry-type-grid{grid-template-columns:repeat(2,1fr);}.employee-entries-page{padding:22px 16px;}.entry-modal{padding:12px;}.entry-modal-head,.entry-modal-body,.entry-modal-foot{padding-left:18px;padding-right:18px;}.entry-dynamic-fields{grid-template-columns:1fr;}.entry-field-full{grid-column:auto;}}


/* =====================================================
   PEOPLE RECORDS — FINAL LAYOUT & MULTI-EMPLOYEE UPDATE
   ===================================================== */

/* Keep the page beside the fixed left sidebar instead of underneath it. */
.dashboard-page:not(.profile-mode) .employee-entries-page{
    width:calc(100% - 245px) !important;
    margin-left:245px !important;
    min-height:calc(100vh - 72px);
    padding:32px !important;
    max-width:none !important;
}

/* Modal: equal viewport gap from top/bottom and left/right. */
.entry-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
}

.entry-modal-card{
    width:min(980px, calc(100vw - 48px)) !important;
    max-height:calc(100vh - 48px) !important;
    margin:0 auto !important;
}

.entry-confirm-card{
    width:min(420px, calc(100vw - 48px)) !important;
    max-height:calc(100vh - 48px) !important;
    margin:0 auto !important;
    overflow:auto;
}

/* One independent form section for every selected employee. */
.entry-fields-empty{
    grid-column:1 / -1;
    border:1px dashed #cbd5e1;
    background:#f8fafc;
    color:#64748b;
    border-radius:12px;
    padding:26px;
    text-align:center;
    font-size:12px;
}

.entry-employee-fields{
    grid-column:1 / -1;
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:15px;
    padding:16px;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
}

.entry-employee-fields + .entry-employee-fields{
    margin-top:2px;
}

.entry-employee-fields-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:13px;
    margin-bottom:15px;
    border-bottom:1px solid #edf0f2;
}

.entry-employee-fields-head > div:nth-child(2){
    min-width:0;
    flex:1;
}

.entry-employee-fields-head strong{
    display:block;
    font-size:13px;
    color:#1f2937;
}

.entry-employee-fields-head small{
    display:block;
    margin-top:2px;
    font-size:10px;
    color:#94a3b8;
}

.entry-employee-fields-head > span{
    border:1px solid #fed7aa;
    background:#fff7ed;
    color:#c2410c;
    border-radius:999px;
    padding:5px 9px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.entry-employee-mini-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#111827;
    color:#fff;
    font-size:10px;
    font-weight:800;
}

.entry-employee-fields .entry-dynamic-fields{
    margin:0;
}

/* History: exactly 10 records per page with clear controls. */
.entries-pagination{
    min-height:58px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-top:1px solid #edf0f2;
}

.entries-pagination-summary{
    color:#64748b;
    font-size:11px;
}

.entries-pagination-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.entries-pagination-actions span{
    color:#64748b;
    font-size:11px;
    white-space:nowrap;
}

.entries-pagination-actions button{
    height:34px;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#374151;
    border-radius:8px;
    padding:0 11px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.entries-pagination-actions button:hover:not(:disabled){
    border-color:#fdba74;
    background:#fff7ed;
    color:#c2410c;
}

.entries-pagination-actions button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* 220px sidebar breakpoint used by the existing HRMS layout. */
@media(max-width:1050px) and (min-width:761px){
    .dashboard-page:not(.profile-mode) .employee-entries-page{
        width:calc(100% - 220px) !important;
        margin-left:220px !important;
        padding:24px !important;
    }
}

@media(max-width:760px){
    .dashboard-page:not(.profile-mode) .employee-entries-page{
        width:100% !important;
        margin-left:0 !important;
        padding:18px !important;
    }

    .entry-modal{
        padding:12px !important;
    }

    .entry-modal-card,
    .entry-confirm-card{
        width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 24px) !important;
    }

    .entry-employee-fields{
        padding:13px;
    }

    .entry-employee-fields-head > span{
        display:none;
    }

    .entries-pagination{
        flex-direction:column;
        align-items:flex-start;
    }

    .entries-pagination-actions{
        width:100%;
        justify-content:space-between;
    }
}


/* =====================================================
   PEOPLE RECORDS — TABLE BASED BULK ENTRY
   ===================================================== */
.people-common-panel,
.people-table-wrap{
    grid-column:1 / -1;
    background:#fff;
    border:1px solid #e8edf0;
    border-radius:14px;
    padding:16px;
}

.people-common-panel{margin-bottom:14px;}

.people-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
    padding-bottom:11px;
    border-bottom:1px solid #eef1f3;
}

.people-section-title strong{
    font-size:13px;
    color:#111827;
}

.people-section-title small{
    font-size:10px;
    color:#94a3b8;
}

.people-common-fields{
    display:grid;
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:12px;
}

.people-entry-table-scroll{
    width:100%;
    overflow-x:auto;
    border:1px solid #e8edf0;
    border-radius:10px;
}

.people-entry-table{
    width:100%;
    min-width:900px;
    border-collapse:collapse;
    table-layout:auto;
}

.people-entry-table th{
    background:#111827;
    color:#fff;
    font-size:10px;
    font-weight:700;
    text-align:left;
    padding:11px 10px;
    white-space:nowrap;
    border-right:1px solid rgba(255,255,255,.12);
}

.people-entry-table td{
    padding:9px;
    vertical-align:top;
    border-top:1px solid #edf0f2;
    border-right:1px solid #edf0f2;
    background:#fff;
}

.people-entry-table tbody tr:hover td{
    background:#fffaf5;
}

.people-entry-table input,
.people-entry-table select,
.people-entry-table textarea{
    width:100%;
    min-width:130px;
    height:36px;
    border:1px solid #dfe5ea;
    border-radius:7px;
    padding:0 9px;
    background:#fff;
    color:#374151;
    font-size:11px;
    outline:none;
}

.people-entry-table textarea{
    height:58px;
    padding:8px 9px;
    resize:vertical;
}

.people-entry-table input:focus,
.people-entry-table select:focus,
.people-entry-table textarea:focus{
    border-color:#f97316;
    box-shadow:0 0 0 3px rgba(249,115,22,.08);
}

.people-row-employee{
    min-width:180px;
    background:#fafafa !important;
}

.people-row-employee strong{
    display:block;
    color:#1f2937;
    font-size:11px;
}

.people-row-employee small{
    display:block;
    margin-top:3px;
    color:#94a3b8;
    font-size:9px;
}

.people-table-file{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:180px;
}

.people-table-file > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 9px;
    border:1px dashed #f97316;
    border-radius:7px;
    color:#c2410c;
    background:#fff7ed;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
}

.people-table-file input[type="file"]{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.people-file-name{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#64748b;
    font-size:9px;
}

@media(max-width:1100px){
    .people-common-fields{grid-template-columns:repeat(2,minmax(160px,1fr));}
}

@media(max-width:650px){
    .people-common-fields{grid-template-columns:1fr;}
    .people-section-title{align-items:flex-start;flex-direction:column;gap:4px;}
    .people-table-wrap,.people-common-panel{padding:11px;}
}


/* People Records — latest interactions */
.people-entry-table input[readonly]{
    background:#f3f4f6 !important;
    color:#6b7280 !important;
    font-weight:700;
    cursor:not-allowed;
}
.people-add-row-btn{
    border:1px solid #fb923c;
    background:#fff7ed;
    color:#c2410c;
    border-radius:8px;
    height:32px;
    padding:0 11px;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.people-add-row-btn:hover{background:#ffedd5;}
.people-remove-row-btn{
    width:30px;height:30px;border:0;border-radius:7px;
    background:#fff1f2;color:#e11d48;font-size:18px;cursor:pointer;
}
.people-insurance-table th:first-child,
.people-insurance-table td:first-child{width:42px;text-align:center;}
.entry-employee-option.is-disabled{opacity:.42;cursor:not-allowed;}
.entry-employee-option.is-disabled span{cursor:not-allowed;}


/* =====================================================
   PEOPLE RECORDS POPUP — SIMPLE & EASY TO USE
   Clean override for the existing popup
   ===================================================== */

.entry-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    display:grid !important;
    place-items:center !important;
    padding:20px !important;
}

.entry-modal.hidden{display:none !important;}

.entry-modal-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(15,23,42,.42) !important;
    backdrop-filter:blur(2px);
}

.entry-modal-card{
    position:relative !important;
    z-index:1 !important;
    width:min(1120px, calc(100vw - 40px)) !important;
    height:auto !important;
    max-height:calc(100vh - 40px) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 24px 70px rgba(15,23,42,.22) !important;
}

/* Compact sticky header */
.entry-modal-head{
    flex:0 0 auto !important;
    min-height:76px !important;
    padding:16px 22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    border-bottom:1px solid #e9edf1 !important;
    background:#fff !important;
}

.entry-modal-head .eyebrow{
    margin:0 0 4px !important;
    font-size:9px !important;
}

.entry-modal-head h2{
    margin:0 !important;
    font-size:18px !important;
    line-height:1.2 !important;
}

.entry-modal-head p{
    margin:4px 0 0 !important;
    font-size:11px !important;
    color:#6b7280 !important;
}

.entry-close-btn{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid #e5e7eb !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#64748b !important;
    font-size:20px !important;
    line-height:1 !important;
    cursor:pointer !important;
}

.entry-close-btn:hover{
    background:#f8fafc !important;
    color:#111827 !important;
}

/* Only body scrolls */
.entry-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    padding:18px 22px 20px !important;
    background:#f8fafc !important;
}

/* Simple section layout */
.entry-step-block{
    margin:0 0 14px !important;
    padding:16px !important;
    border:1px solid #e7ebef !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:none !important;
}

.entry-step-block:last-child{margin-bottom:0 !important;}

.entry-step-label{
    margin:0 0 13px !important;
    padding:0 0 11px !important;
    border-bottom:1px solid #eef1f4 !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
}

.entry-step-label>span{
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#111827 !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:800 !important;
}

.entry-step-label strong{
    display:block !important;
    font-size:12px !important;
    color:#111827 !important;
}

.entry-step-label small{
    display:block !important;
    margin-top:2px !important;
    font-size:10px !important;
    color:#94a3b8 !important;
}

/* Employee picker stays compact */
.entry-employee-picker{
    display:grid !important;
    grid-template-columns:minmax(220px, 1fr) minmax(280px, 2fr) !important;
    gap:10px 14px !important;
}

.entry-picker-search,
.selected-entry-employees{
    grid-column:1 / -1 !important;
}

.entry-employee-list{
    grid-column:1 / -1 !important;
    max-height:190px !important;
    overflow:auto !important;
    border:1px solid #e5e7eb !important;
    border-radius:9px !important;
}

.entry-employee-option{
    min-height:42px !important;
    padding:8px 11px !important;
}

/* Compact record type buttons */
.entry-type-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:8px !important;
}

.entry-type-card{
    min-height:58px !important;
    padding:8px !important;
    border-radius:9px !important;
}

.entry-type-card b{
    font-size:15px !important;
    margin-bottom:3px !important;
}

.entry-type-card span{
    font-size:10px !important;
}

/* Tables are the main workspace */
.entry-dynamic-fields{
    display:block !important;
}

.people-common-panel,
.people-table-wrap{
    padding:14px !important;
    border-radius:10px !important;
    box-shadow:none !important;
}

.people-common-panel{margin-bottom:12px !important;}

.people-common-fields{
    grid-template-columns:repeat(4, minmax(150px,1fr)) !important;
    gap:10px !important;
}

.people-section-title{
    margin-bottom:11px !important;
    padding-bottom:9px !important;
}

.people-entry-table-scroll{
    max-height:360px !important;
    overflow:auto !important;
}

.people-entry-table th{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    padding:9px !important;
}

.people-entry-table td{
    padding:7px !important;
}

.people-entry-table input,
.people-entry-table select{
    height:34px !important;
    min-width:115px !important;
}

.people-entry-table textarea{
    min-width:150px !important;
    height:52px !important;
}

/* Sticky footer */
.entry-modal-foot{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:2 !important;
    padding:13px 22px !important;
    border-top:1px solid #e9edf1 !important;
    background:#fff !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:9px !important;
}

.entry-modal-foot .back-button,
.entry-modal-foot .add-employee-btn{
    min-width:105px !important;
    height:36px !important;
    padding:0 14px !important;
    font-size:11px !important;
}

/* Simple scrollbar */
.entry-modal-body::-webkit-scrollbar,
.entry-employee-list::-webkit-scrollbar,
.people-entry-table-scroll::-webkit-scrollbar{
    width:7px;
    height:7px;
}

.entry-modal-body::-webkit-scrollbar-thumb,
.entry-employee-list::-webkit-scrollbar-thumb,
.people-entry-table-scroll::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

@media(max-width:900px){
    .entry-modal{padding:12px !important;}
    .entry-modal-card{
        width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 24px) !important;
    }
    .entry-type-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important;}
    .people-common-fields{grid-template-columns:repeat(2, minmax(150px,1fr)) !important;}
    .entry-modal-head,
    .entry-modal-body,
    .entry-modal-foot{padding-left:15px !important;padding-right:15px !important;}
}

@media(max-width:600px){
    .entry-modal{padding:8px !important;}
    .entry-modal-card{
        width:calc(100vw - 16px) !important;
        max-height:calc(100vh - 16px) !important;
        border-radius:12px !important;
    }
    .entry-modal-head{min-height:68px !important;}
    .entry-modal-head h2{font-size:16px !important;}
    .entry-modal-head p{display:none !important;}
    .entry-type-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
    .people-common-fields{grid-template-columns:1fr !important;}
    .entry-modal-foot{
        justify-content:stretch !important;
    }
    .entry-modal-foot .back-button,
    .entry-modal-foot .add-employee-btn{
        flex:1 !important;
    }
}


/* Prevent background page scrolling when People Records popup is open */
html.people-records-modal-open,
body.people-records-modal-open{
    overflow:hidden !important;
    height:100% !important;
    overscroll-behavior:none !important;
}

/* Keep all scrolling inside the popup body */
.entry-modal{
    overscroll-behavior:contain !important;
}
.entry-modal-body{
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
}
/* =====================================================
   FORGOT PASSWORD + RESET PASSWORD
   SAME INDEX.HTML PAGE
   Add this block at the END of your existing style.css
===================================================== */

.forgot-password-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -4px;
    margin-bottom: 18px;
}

.forgot-password-btn {
    border: 0;
    padding: 0;
    background: transparent;
    color: #f97316;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.forgot-password-btn:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.forgot-password-btn:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 3px;
    border-radius: 4px;
}

/* MODAL */

.forgot-password-modal[hidden] {
    display: none !important;
}

.forgot-password-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.forgot-password-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 34px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    animation: forgotPasswordPopup 0.2s ease-out;
}

@keyframes forgotPasswordPopup {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

.forgot-password-card h2 {
    margin: 0 34px 8px 0;
    color: #111827;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.forgot-password-card > div > p:not(.forgot-password-message) {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.forgot-password-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6b7280;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.forgot-password-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.forgot-password-close:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

/* FORM FIELDS */

.forgot-password-card .form-group {
    margin-bottom: 18px;
}

.forgot-password-card .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.forgot-password-card .form-group input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forgot-password-card .form-group input::placeholder {
    color: #9ca3af;
}

.forgot-password-card .form-group input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* MESSAGE */

.forgot-password-message {
    min-height: 22px;
    margin: 0 0 14px !important;
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
}

/* BUTTON */

#forgotPasswordSubmit,
#resetPasswordSubmit {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
}

#forgotPasswordSubmit:disabled,
#resetPasswordSubmit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* MOBILE */

@media (max-width: 520px) {

    .forgot-password-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .forgot-password-card {
        max-width: none;
        max-height: calc(100vh - 24px);
        padding: 28px 22px;
        border-radius: 16px;
    }

    .forgot-password-card h2 {
        font-size: 22px;
    }

    .forgot-password-row {
        margin-bottom: 16px;
    }
}
/* =====================================================
   PREMIUM DASHBOARD HEADER — FIXED LAYOUT
===================================================== */

.hr3-header.hr3-header-premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 42px;

    min-height: 260px;
    padding: 36px 40px;

    overflow: hidden;
}

/* LEFT CONTENT */
.hr3-header-premium > div:first-child {
    min-width: 0;
    max-width: 820px;
}

/* MAIN HEADING */
.hr3-header-premium h1 {
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;

    max-width: 100%;
    margin: 16px 0 12px;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* DESCRIPTION */
.hr3-header-premium > div:first-child > p {
    font-size: 15px;
    line-height: 1.6;

    max-width: 780px;
    margin: 0;
}

/* RIGHT SIDE */
.hr3-header-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    flex-shrink: 0;
    min-width: max-content;
}

/* DATE CARD */
.hr3-date.hr3-date-premium {
    min-width: 240px;
}

/* REFRESH BUTTON */
.hr3-icon-btn {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

/* ADD EMPLOYEE BUTTON */
.hr3-add-btn {
    min-width: 154px;
    height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    white-space: nowrap;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .hr3-header.hr3-header-premium {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hr3-header-side {
        justify-content: flex-start;
    }

    .hr3-header-premium h1 {
        max-width: 900px;
    }
}

@media (max-width: 700px) {
    .hr3-header.hr3-header-premium {
        padding: 28px 22px;
    }

    .hr3-header-premium h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .hr3-header-side {
        flex-wrap: wrap;
    }

    .hr3-date.hr3-date-premium {
        min-width: 100%;
    }
}