@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

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

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
*/
/* /Components/Pages/MainMenu/SelfService/NewSelfService.razor.rz.scp.css */
/*==================================================
            WELCOME CARD
==================================================*/

.welcome-card[b-oilu4zzqy5] {
    position: relative;
    /*    height: 100%;*/
    min-height: 202px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg,#07213f 0%,#0b2f55 100%);
    padding: 19px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

    .welcome-card[b-oilu4zzqy5]::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -120px;
        top: -80px;
        border-radius: 50%;
        background: rgba(0,170,255,.08);
    }

    .welcome-card[b-oilu4zzqy5]::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: 35px;
        bottom: -120px;
        border-radius: 50%;
        background: rgba(0,170,255,.10);
    }

.welcome-content[b-oilu4zzqy5] {
    position: relative;
    z-index: 2;
}

.welcome-tag[b-oilu4zzqy5] {
    display: inline-block;
    color: #25c8ff;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 18px;
}

.welcome-content h2[b-oilu4zzqy5] {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #21b9ff;
}

.welcome-content p[b-oilu4zzqy5] {
    color: rgba(255,255,255,.75);
    margin-bottom: 10px;
    font-size: 18px;
}

.welcome-content h5[b-oilu4zzqy5] {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
}

/*.welcome-avatar {
    position: relative;
    z-index: 2;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.35);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgba(255,255,255,.45);
}*/
.welcome-avatar[b-oilu4zzqy5] {
    position: relative;
    z-index: 2;
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-avatar[b-oilu4zzqy5] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.35);
    object-fit: cover;
}

.gotoprofileLink[b-oilu4zzqy5] {
    margin-top: 8px;
    font-size: 15px;
    white-space: nowrap;
}



/*==================================================
                TODAY SHIFT
==================================================*/

.shift-card[b-oilu4zzqy5] {
    background: #fff;
    border-radius: 24px;
    padding: 18px 20px;
    /*    height: 100%;*/
    min-height: 202px;
    box-shadow: 0 15px 35px rgba(15,23,42,.08);
}

.shift-header[b-oilu4zzqy5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

    .shift-header small[b-oilu4zzqy5] {
        font-size: 15px;
        color: #64748b;
        font-weight: 600;
    }

.shift-time[b-oilu4zzqy5] {
    margin: 10px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}


.shift-info[b-oilu4zzqy5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 14px 0;
}

.shift-item[b-oilu4zzqy5] {
    display: flex;
    flex-direction: column;
}

.shift-label[b-oilu4zzqy5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

    .shift-label i[b-oilu4zzqy5] {
        color: #0ea5e9;
        font-size: 14px;
    }

    .shift-label span[b-oilu4zzqy5] {
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
    }

.shift-item strong[b-oilu4zzqy5] {
    padding-left: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}



/*==================================================
                STATUS
==================================================*/

.status-pill[b-oilu4zzqy5] {
    padding: 5px 15px;
    border-radius: 25px;
    font-size: 11px;
    font-weight: 600;
}

.status-in[b-oilu4zzqy5] {
    background: #dcfce7;
    color: #16a34a;
}

.status-out[b-oilu4zzqy5] {
    background: #fee2e2;
    color: #dc2626;
}

.status-complete[b-oilu4zzqy5] {
    background: #dbeafe;
    color: #2563eb;
}


/*==================================================
                BUTTONS
==================================================*/

.shift-btn[b-oilu4zzqy5] {
    width: 100%;
    border: none;
    height: 35px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    transition: .25s;
}

    .shift-btn:hover[b-oilu4zzqy5] {
        transform: translateY(-2px);
    }

.shift-btn-in[b-oilu4zzqy5] {
    background: linear-gradient(90deg,#16a34a,#22c55e);
    font-size: 14px;
}

.shift-btn-out[b-oilu4zzqy5] {
    background: linear-gradient(90deg,#0891b2,#06b6d4);
    font-size: 14px;
}

.shift-btn-complete[b-oilu4zzqy5] {
    background: #94a3b8;
    font-size: 14px;
}


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

@media(max-width:992px) {

    .welcome-card[b-oilu4zzqy5],
    .shift-card[b-oilu4zzqy5] {
        min-height: auto;
    }

    .shift-info[b-oilu4zzqy5] {
        grid-template-columns: repeat(2,1fr);
    }

    .welcome-content h2[b-oilu4zzqy5] {
        font-size: 32px;
    }

    .shift-time[b-oilu4zzqy5] {
        font-size: 32px;
    }
}

@media(max-width:576px) {

    .welcome-card[b-oilu4zzqy5] {
        padding: 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .welcome-avatar[b-oilu4zzqy5] {
        align-self: center;
    }

    .shift-info[b-oilu4zzqy5] {
        grid-template-columns: 1fr 1fr;
    }
}


/*=========================================
        LEAVE SUMMARY CARDS
=========================================*/

.leave-card[b-oilu4zzqy5] {
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    height: 118px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-left: 4px solid #14b8f5;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
    transition: all .25s ease;
}

    .leave-card:hover[b-oilu4zzqy5] {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(15,23,42,.10);
    }

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

.leave-icon[b-oilu4zzqy5] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 24px;
    border: 1px solid #edf2f7;
}

/* Holiday */

.holiday-icon[b-oilu4zzqy5] {
    background: #eef8ff;
    color: #1d9bf0;
}

/* Sick */

.sick-icon[b-oilu4zzqy5] {
    background: #fff8e6;
    color: #f59e0b;
}

/* Absence */

.absence-icon[b-oilu4zzqy5] {
    background: #fff1f2;
    color: #ef4444;
}


/* Onboarding Card */
.onboarding-card[b-oilu4zzqy5] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onboarding-icon[b-oilu4zzqy5] {
    background: #f3e8ff;
    color: #7c3aed;
}

.onboarding-action[b-oilu4zzqy5] {
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #8b5cf6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

    .onboarding-action:hover[b-oilu4zzqy5] {
        background: #7c3aed;
    }

.completed-text[b-oilu4zzqy5] {
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
}

.onboarding-chip[b-oilu4zzqy5] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 30px;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    transition: .25s;
}

    .onboarding-chip:hover[b-oilu4zzqy5] {
        background: #8b5cf6;
        color: #fff;
    }


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

.leave-content[b-oilu4zzqy5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .leave-content h2[b-oilu4zzqy5] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
        color: #102a43;
        line-height: 1.2;
    }

    .leave-content h5[b-oilu4zzqy5] {
        margin: 5px 0 2px;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
    }

    .leave-content p[b-oilu4zzqy5] {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
    }

/* Bottom text colors */

.holiday-card p[b-oilu4zzqy5] {
    color: #16a34a;
}

.sick-card p[b-oilu4zzqy5] {
    color: #f59e0b;
}

.absence-card p[b-oilu4zzqy5] {
    color: #ef4444;
}

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

@media (max-width:992px) {

    .leave-card[b-oilu4zzqy5] {
        height: auto;
        min-height: 110px;
    }
}

@media (max-width:768px) {

    .leave-card[b-oilu4zzqy5] {
        padding: 16px;
        gap: 14px;
    }

    .leave-icon[b-oilu4zzqy5] {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .leave-content h2[b-oilu4zzqy5] {
        font-size: 22px;
    }

    .leave-content h5[b-oilu4zzqy5] {
        font-size: 13px;
    }

    .leave-content p[b-oilu4zzqy5] {
        font-size: 12px;
    }
}


/*=============================
      Quick Action Card
=============================*/


.modern-card[b-oilu4zzqy5] {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.quick-action-card[b-oilu4zzqy5] {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #edf2f7;
    box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.card-header-modern[b-oilu4zzqy5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

    .card-header-modern h4[b-oilu4zzqy5] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #102a43;
    }

.view-all-link[b-oilu4zzqy5] {
    text-decoration: none;
    color: #1aa7ec;
    font-size: 14px;
    font-weight: 600;
}

.quick-actions-grid[b-oilu4zzqy5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.quick-action-item[b-oilu4zzqy5] {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border: none;
    background: transparent;
}


    .quick-action-item:hover[b-oilu4zzqy5] {
        transform: translateY(-4px);
    }

.quick-action-icon[b-oilu4zzqy5] {
    width: 75px;
    height: 38px;
    border-radius: 16px;
    background: #f6fbff;
    border: 1px solid #dbeafe;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0ea5e9;
    font-size: 18px;
    transition: .25s;
}

.quick-action-item:hover .quick-action-icon[b-oilu4zzqy5] {
    background: #0ea5e9;
    color: #fff;
    box-shadow: 0 8px 18px rgba(14,165,233,.25);
}


.quick-action-item span[b-oilu4zzqy5] {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    line-height: 18px;
}


/*==============================
        Modern Dropdown
===============================*/

.modern-select-wrapper[b-oilu4zzqy5] {
    margin-bottom: 12px;
}

.modern-label[b-oilu4zzqy5] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.modern-select[b-oilu4zzqy5] {
    height: 48px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 14px;
    font-weight: 500;
    padding: 0 42px 0 14px;
    box-shadow: none !important;
    transition: .25s;
}

    .modern-select:hover[b-oilu4zzqy5] {
        background: #ffffff !important;
    }

    .modern-select:focus[b-oilu4zzqy5] {
        border-color: #0ea5e9 !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(14,165,233,.12) !important;
    }

    .modern-select option[b-oilu4zzqy5] {
        background: #fff;
        color: #0f172a;
    }


/*==============================
      Announcement Table
==============================*/


.selfservice-header[b-oilu4zzqy5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.selfservice-title[b-oilu4zzqy5] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #102a43;
}

.selfservice-link[b-oilu4zzqy5] {
    text-decoration: none;
    color: #0ea5e9;
    font-size: 14px;
    font-weight: 600;
}


/*==================================
        Self Service Table
==================================*/

.selfservice-table[b-oilu4zzqy5] {
    /*    margin: 0;*/
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 16px;
}

    .selfservice-table thead th[b-oilu4zzqy5] {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f8fafc;
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
        border: none;
        padding: 15px 18px;
    }

    .selfservice-table tbody td[b-oilu4zzqy5] {
        padding: 10px 14px;
        vertical-align: middle;
        border-top: 1px solid #edf2f7;
        font-size: 12px;
        color: #334155;
    }

    .selfservice-table tbody tr[b-oilu4zzqy5] {
        transition: .25s;
    }

        .selfservice-table tbody tr:hover[b-oilu4zzqy5] {
            background: #f8fbff;
        }


/*==================================
      Announcement
==================================*/

.announcement-message[b-oilu4zzqy5] {
    max-width: 420px;
    color: #0f172a;
    font-weight: 500;
}


/*==================================
      Table Action Button
==================================*/

.table-action-btn[b-oilu4zzqy5] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #eef6ff;
    color: #2563eb;
    transition: .25s;
}

    .table-action-btn:hover[b-oilu4zzqy5] {
        background: #2563eb;
        color: #fff;
    }

.selfservice-table-wrapper[b-oilu4zzqy5] {
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 16px;
}

.announcement-table[b-oilu4zzqy5] {
    max-height: 258px;
    min-height: 258px;
}



/*==================================
          Timesheet
==================================*/

.timesheet-wrapper[b-oilu4zzqy5] {
    max-height: 320px;
    overflow-y: auto;
}

.timesheet-table[b-oilu4zzqy5] {
    width: 100%;
    /*    table-layout: fixed;*/
}

    .timesheet-table th[b-oilu4zzqy5] {
        white-space: nowrap;
        text-align: center;
    }

    .timesheet-table td[b-oilu4zzqy5] {
        text-align: center;
        white-space: nowrap;
        font-size: 13px;
    }

/*    .timesheet-table .cldtext {
        padding: 8px 5px;
    }*/
.schedule-balance-row[b-oilu4zzqy5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap; /* IMPORTANT */
}


/*==================================
       Holiday Request and Shift Request
==================================*/


.holiday-table[b-oilu4zzqy5] {
    max-height: 300px;
}

    .holiday-table .cldtext[b-oilu4zzqy5] {
        padding: 8px 5px;
    }

.status-btn[b-oilu4zzqy5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Requested */

.status-requested[b-oilu4zzqy5] {
    background: #fef3c7;
    color: #b45309;
}

/* Declined */

.status-declined[b-oilu4zzqy5] {
    background: #fee2e2;
    color: #dc2626;
}

/* Authorised */

.status-authorised[b-oilu4zzqy5] {
    background: #dcfce7;
    color: #15803d;
}


.shift-table[b-oilu4zzqy5] {
    max-height: 300px;
}

    .shift-table .cldtext[b-oilu4zzqy5] {
        padding: 8px 5px;
    }

/*==================================
      Payslip and Other Pay Data
==================================*/


.payslip-table[b-oilu4zzqy5] {
    max-height: 260px;
}

.paydata-table[b-oilu4zzqy5] {
    max-height: 260px;
}

/*.form-select.modern-select-pay {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 34px !important;
    padding: 4px 28px 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
}
    .modern-select-pay:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 .15rem rgba(59,130,246,.15);
    }*/
.paydata-select[b-oilu4zzqy5] {
    width: 115px;
}

    .paydata-select .form-select[b-oilu4zzqy5] {
        width: 100% !important;
        height: 20px !important;
        padding: 4px 28px 4px 8px !important;
        font-size: 11px !important;
    }

.paydata-action-btn[b-oilu4zzqy5] {
    width: 36px;
    height: 30px;
    border-radius: 8px;
}

    .paydata-action-btn i[b-oilu4zzqy5] {
        font-size: 14px;
    }








.onboarding-card[b-oilu4zzqy5] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onboarding-icon[b-oilu4zzqy5] {
    background: #f3e8ff;
    color: #7c3aed;
}

.onboarding-action[b-oilu4zzqy5] {
    margin-left: auto;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #8b5cf6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

    .onboarding-action:hover[b-oilu4zzqy5] {
        background: #7c3aed;
    }

.completed-text[b-oilu4zzqy5] {
    color: #8b5cf6;
    font-size: 12px;
    font-weight: 600;
}

.onboarding-chip[b-oilu4zzqy5] {
    margin-left: auto; 
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 30px;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
    transition: .25s;
}

    .onboarding-chip:hover[b-oilu4zzqy5] {
        background: #8b5cf6;
        color: #fff;
    }
/* /Components/Pages/MainMenu/View/Attendance/Attendance.razor.rz.scp.css */

/* ===========================
   Attendance Page
=========================== */

:root[b-qfy6fdfkk0] {
    --primary: #0D2A45;
    --secondary: #1CC7DE;
    --bg: #EEF2F7;
    --card: #FFFFFF;
    --border: #E4EAF1;
    --text: #0F2439;
    --muted: #708090;
}

.attendance-page[b-qfy6fdfkk0] {
    padding: 25px;
    background: var(--bg);
    min-height: 100vh;
}

/* ===========================
   Header
=========================== */

.attendance-topbar[b-qfy6fdfkk0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.attendance-title h2[b-qfy6fdfkk0] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0F2940;
}

.attendance-title p[b-qfy6fdfkk0] {
    margin: 4px 0 0;
    color: #7B8794;
    font-size: 14px;
}

/*========== Filters ==========*/

.attendance-filters[b-qfy6fdfkk0] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
}

.filter-item[b-qfy6fdfkk0] {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

    .filter-item label[b-qfy6fdfkk0] {
        font-size: 12px;
        font-weight: 600;
        color: #64748B;
        margin-bottom: 6px;
    }

    .filter-item .form-control[b-qfy6fdfkk0],
    .filter-item .form-select[b-qfy6fdfkk0] {
        height: 44px;
        border-radius: 10px;
        border: 1px solid #D9E2EC;
        background: #FFF;
        font-size: 14px;
        transition: .25s;
    }

        .filter-item .form-control:focus[b-qfy6fdfkk0],
        .filter-item .form-select:focus[b-qfy6fdfkk0] {
            border-color: #1CC7DE;
            box-shadow: 0 0 0 .18rem rgba(28,199,222,.15);
        }

/*========== Responsive ==========*/

@media(max-width:768px) {

    .attendance-topbar[b-qfy6fdfkk0] {
        flex-direction: column;
        align-items: stretch;
    }

    .attendance-filters[b-qfy6fdfkk0] {
        width: 100%;
    }

    .filter-item[b-qfy6fdfkk0] {
        flex: 1;
        min-width: 100%;
    }
}
/* ===========================
   Card
=========================== */

.attendance-card[b-qfy6fdfkk0] {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

/* ===========================
   Toolbar
=========================== */

.attendance-toolbar[b-qfy6fdfkk0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*    margin-bottom: 20px;*/
    padding: 8px 8px;
    flex-wrap: wrap;
    gap: 15px;
}

.toolbar-left[b-qfy6fdfkk0],
.toolbar-right[b-qfy6fdfkk0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-refresh[b-qfy6fdfkk0] {
    background: #fff;
    border: 1px solid #D6DCE5;
    border-radius: 10px;
    padding: 9px 15px;
    font-weight: 500;
    font-size: 13.5px;
}
    .btn-refresh:hover[b-qfy6fdfkk0] {
        background: #fff;
        font-weight: 600;
        border: 1px solid #B8C2CC;
        font-size: 13.5px;
    }

    .btn-refresh:active[b-qfy6fdfkk0] {
        transform: translateY(0);
    }

.btn-nav[b-qfy6fdfkk0] {
    border: 1px solid #D6DCE5;
    background: #fff;
    border-radius: 10px;
    padding: 9px 15px !important;
    font-size: 13.5px;
}
    .btn-nav:hover[b-qfy6fdfkk0] {
        background: #fff;
        font-weight: 500;
        border: 1px solid #B8C2CC;
        font-size: 13.5px;
    }

.btn-today[b-qfy6fdfkk0] {
    min-width: 90px;
    border: 1px solid #D6DCE5;
    background: #fff;
    border-radius: 10px;
    padding: 9px 15px !important;
    font-size: 13.5px;
    font-weight: 500;
}
    .btn-today:hover[b-qfy6fdfkk0] {
        background: #fff;
        font-weight: 500;
        border: 1px solid #B8C2CC;
        font-size: 13.5px;
    }

.view-select[b-qfy6fdfkk0] {
    width: 170px;
    border-radius: 10px;
    border: 1px solid #D6DCE5;
    background: #fff;
    border-radius: 10px;
    padding: 9px 15px !important;
    font-size: 13.5px;
}

/* ===========================
   Table
=========================== */

.attendance-table-wrapper[b-qfy6fdfkk0] {
    overflow: auto;
    max-height: 70vh;
    /*    margin-top: -14px;*/
}

.attendance-table[b-qfy6fdfkk0] {
    margin: 0;
    white-space: nowrap;
}

    .attendance-table thead th[b-qfy6fdfkk0] {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #F8FAFC;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #7A8898;
        font-weight: 700;
        padding: 15px;
        /*        border-bottom: 2px solid var(--border);*/
        border-bottom: 2px solid #EDF2F7;
        border-right: 2px solid #EDF2F7;
    }

    .attendance-table tbody td[b-qfy6fdfkk0] {
        padding: 12px 8px;
        vertical-align: middle;
        font-size: 13px;
        border-bottom: 2px solid #EDF2F7;
        border-right: 2px solid #EDF2F7;
    }

    .attendance-table tbody tr[b-qfy6fdfkk0] {
        transition: .2s;
    }

        .attendance-table tbody tr:hover[b-qfy6fdfkk0] {
            background: #F9FCFD;
        }

    .attendance-table th:last-child[b-qfy6fdfkk0],
    .attendance-table td:last-child[b-qfy6fdfkk0] {
        border-right: none;
    }

    .attendance-table > :not(:last-child) > :last-child > *[b-qfy6fdfkk0] {
        border-bottom: 2px solid #EDF2F7 !important;
    }
/* ===========================
   Sticky Employee Column
=========================== */

.sticky-col[b-qfy6fdfkk0] {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    white-space: nowrap;
    min-width: 220px;
    max-width: 220px;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.08);
}

thead .sticky-col[b-qfy6fdfkk0] {
    z-index: 6;
    background: #F8FAFC;
}
.attendance-table thead .sticky-col[b-qfy6fdfkk0] {
    z-index: 30;
    background: #F8FAFC;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.08);
}

/* ===========================
   Employee
=========================== */

.employee-info[b-qfy6fdfkk0] {
/*    display: flex;*/
    align-items: center;
    gap: 12px;
}

.avatar[b-qfy6fdfkk0] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,#1CC7DE,#0D2A45);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
}

.employee-name[b-qfy6fdfkk0] {
    font-weight: 600;
    color: #0F2439;
    font-size: 14px;
}

.employee-id[b-qfy6fdfkk0] {
    font-size: 12px;
    color: #7A8898;
}

/* ===========================
   Attendance Cell
=========================== */

.attendance-table td.text-center[b-qfy6fdfkk0] {
    font-weight: 500;
    min-width: 95px;
}

/* ===========================
   Footer
=========================== */

/*
.attendance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-top: 1px solid #E5E7EB;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 13px;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size {
    width: 80px;
}


.pagination .page-link {
    min-width: 36px;
    text-align: center;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    color: #374151;
}*/
/* ===========================
   Pagination
=========================== */

/*.pagination .page-link {
    border-radius: 8px;
    margin-left: 6px;
    border: 1px solid var(--border);
    color: var(--primary);
    font-weight: 600;
}

.pagination .active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}*/

/* ===========================
   Empty State
=========================== */

.empty-state[b-qfy6fdfkk0] {
    text-align: center;
    padding: 70px 20px;
}

    .empty-state i[b-qfy6fdfkk0] {
        font-size: 45px;
        color: #C7D0DA;
        margin-bottom: 15px;
    }

    .empty-state h5[b-qfy6fdfkk0] {
        color: #22313F;
    }

    .empty-state p[b-qfy6fdfkk0] {
        color: #7A8898;
    }

/* ===========================
   Scrollbar
=========================== */

.attendance-table-wrapper[b-qfy6fdfkk0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.attendance-table-wrapper[b-qfy6fdfkk0]::-webkit-scrollbar-thumb {
    background: #CCD5DE;
    border-radius: 20px;
}

    .attendance-table-wrapper[b-qfy6fdfkk0]::-webkit-scrollbar-thumb:hover {
        background: #9CAABA;
    }

/* ===========================
   Responsive
=========================== */

@media(max-width:768px) {

    .attendance-page[b-qfy6fdfkk0] {
        padding: 15px;
    }

    .page-header[b-qfy6fdfkk0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .attendance-toolbar[b-qfy6fdfkk0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .toolbar-left[b-qfy6fdfkk0] {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .toolbar-right[b-qfy6fdfkk0] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn-refresh[b-qfy6fdfkk0] {
        background: #fff;
        border: 1px solid #D6DCE5;
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 500;
    }

    .btn-nav[b-qfy6fdfkk0] {
        width: 44px;
        height: 44px;
        border: 1px solid #D6DCE5;
        background: #fff;
        border-radius: 10px;
    }

    .btn-today[b-qfy6fdfkk0] {
        min-width: 90px;
        height: 44px;
        border: 1px solid #D6DCE5;
        background: #fff;
        border-radius: 10px;
        font-weight: 500;
    }

    .view-select[b-qfy6fdfkk0] {
        width: 170px;
        height: 44px;
        border-radius: 10px;
    }

    .attendance-footer[b-qfy6fdfkk0] {
        flex-direction: column;
        gap: 15px;
    }
}


/* ===========================
  Grid Colour
=========================== */

/*.bg-holiday {
    background: #ffe066;
}

.bg-bankholiday {
    background: #fff3b0;
}

.bg-sick {
    background: #6fd3ff;
}

.bg-absence {
    background: #ff00ff;

}

.bg-holidayrequest {
    background: #ffb347;
}

.bg-holidaydeclined {
    background: #ff8c69;
}

.bg-rostershift {
    background: #8ee58e;
}

.bg-rest {
    background: #fff;
}

.bg-scheduledshift {
    background: #b9f6ca;
}

.bg-workshift {
    background: #33cc33;
}

.bg-lateness {
    background: #ff4d4d ;
}

.bg-excludeshift {
    background: #e2e2e2;
}

.bg-excludeactualshift {
    background: #d6d6d6;
}

.budgetValues {
    background: #ececec;
}

.fc-varianceNegative {
    background: #ffd6d6;
}

.fc-variancePositive {
    background: #d6ffd6;
}*/

/* ===========================
   Attendance Status Theme
=========================== */

.bg-workshift[b-qfy6fdfkk0] {
    background: #DBEAFE ;
    color: #1D4ED8 ;
}

.bg-scheduledshift[b-qfy6fdfkk0] {
    background: #E0F2FE ;
    color: #0369A1 ;
}

.bg-rostershift[b-qfy6fdfkk0] {
    background: #ECFDF3 ;
    color: #047857 ;
}

.bg-holiday[b-qfy6fdfkk0] {
    background: #FEF3C7 ;
    color: #B45309 ;
}

.bg-bankholiday[b-qfy6fdfkk0] {
    background: #FFF7ED ;
    color: #C2410C ;
}

.bg-sick[b-qfy6fdfkk0] {
    background: #F3E8FF ;
    color: #7C3AED ;
}

.bg-absence[b-qfy6fdfkk0] {
    background: #FEE2E2 ;
    color: #DC2626 ;
}

.bg-holidayrequest[b-qfy6fdfkk0] {
    background: #FFE4E6 ;
    color: #E11D48 ;
}

.bg-holidaydeclined[b-qfy6fdfkk0] {
    background: #FCE7F3 ;
    color: #BE185D ;
}

.bg-rest[b-qfy6fdfkk0] {
    background: #F8FAFC ;
    color: #64748B ;
}

.bg-lateness[b-qfy6fdfkk0] {
    background: #FEF9C3 ;
    color: #CA8A04 ;
}

.bg-excludeshift[b-qfy6fdfkk0] {
    background: #F1F5F9 ;
    color: #475569 ;
}

.bg-excludeactualshift[b-qfy6fdfkk0] {
    background: #E2E8F0 ;
    color: #334155 ;
}

.budgetValues[b-qfy6fdfkk0] {
    background: #EFF6FF ;
    color: #2563EB ;
}

.fc-variancePositive[b-qfy6fdfkk0] {
    background: #DCFCE7 ;
    color: #15803D ;
}

.fc-varianceNegative[b-qfy6fdfkk0] {
    background: #FEE2E2 ;
    color: #DC2626 ;
}

/* ===== Bulk selection bar ===== */
.bulk-bar[b-qfy6fdfkk0] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    padding: 10px 16px;
    background: #0B1F33; 
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

/* Left */

.bulk-left[b-qfy6fdfkk0] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    color: #fff;
}

.bulk-text[b-qfy6fdfkk0] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .bulk-text strong[b-qfy6fdfkk0] {
        font-size: 14px;
        font-weight: 600;
    }

    .bulk-text small[b-qfy6fdfkk0] {
        font-size: 12px;
        color: rgba(255,255,255,.75);
    }

.bulk-count[b-qfy6fdfkk0] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cyan-500);
    color: #0B1F33;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right */

.bulk-actions[b-qfy6fdfkk0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    justify-content: flex-end;
}

    .bulk-actions > *[b-qfy6fdfkk0] {
        flex-shrink: 0;
    }

    .bulk-actions[b-qfy6fdfkk0]::-webkit-scrollbar {
        height: 6px;
    }

    .bulk-actions[b-qfy6fdfkk0]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.18);
        border-radius: 20px;
    }

    /* Inputs */

    .bulk-actions .form-select[b-qfy6fdfkk0],
    .bulk-actions .form-control[b-qfy6fdfkk0] {
        height: 38px;
        min-width: 150px;
        border-radius: 8px;
        font-size: 13px;
    }

.toolbar-select[b-qfy6fdfkk0] {
    width: 180px;
}

.toolbar-input[b-qfy6fdfkk0] {
    width: 150px;
}

.toolbar-time[b-qfy6fdfkk0] {
    width: 120px;
}

/* Buttons */

.toolbar-btn[b-qfy6fdfkk0] {
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: .25s;
    border: 1px solid rgba(255,255,255,.12);
}

    .toolbar-btn i[b-qfy6fdfkk0] {
        font-size: 15px;
    }

.dropdown-menu[b-qfy6fdfkk0] {
    font-size: 13px;
}

/* Cost Centre Dropdown */
.toolbar-select[b-qfy6fdfkk0] {
    width: 180px;
    height: 38px;
    border: 1px solid #CBD5E1;
    border-radius: 9px;
    padding: 9px 15px;
    padding-right: 40px;
    font-size: 13.5px;
    background-size: 14px;
}
[b-qfy6fdfkk0] select.toolbar-select {
    width: 180px;
    height: 38px;
    padding: 9px 15px;
    font-size: 13.5px;
    border-radius: 10px;
}

    .attendance-table td:hover[b-qfy6fdfkk0] {
        background: #f5f9ff;
    }

.selected-cell[b-qfy6fdfkk0] {
    background: #dbdde1 !important;
    border: 2px solid #CBD5E1 !important;
    box-sizing: border-box;
    transition: all .2s ease;
}

    .selected-cell:hover[b-qfy6fdfkk0] {
        background: #dbdde1 !important;
        
    }
.bulk-bar[b-qfy6fdfkk0],
.bulk-actions[b-qfy6fdfkk0] {
    overflow: visible !important;
}

.attendance-dropdown[b-qfy6fdfkk0] {
    position: absolute;
    top: 45px;
    left: 0;
    width: 320px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    z-index: 1000;
}

.attendance-search[b-qfy6fdfkk0] {
    padding: 12px;
    border-bottom: 1px solid #E5E7EB;
}

    .attendance-search input[b-qfy6fdfkk0] {
        height: 38px;
        font-size: 13px;
    }

.attendance-body[b-qfy6fdfkk0] {
    max-height: 360px;
    overflow-y: auto;
}

.attendance-group[b-qfy6fdfkk0] {
    border-bottom: 1px solid #F3F4F6;
}

    .attendance-parent[b-qfy6fdfkk0] {
        width: 100%;
        border: 0;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #1E293B;
        cursor: pointer;
        transition: .2s;
    }

        .attendance-parent:hover[b-qfy6fdfkk0] {
            background: #F8FAFC;
        }

        .attendance-parent i[b-qfy6fdfkk0] {
            font-size: 11px;
            color: #64748B;
        }
 
    .attendance-children[b-qfy6fdfkk0] {
        background: #FAFAFA;
        padding: 4px 0;
    }
   
    .attendance-child[b-qfy6fdfkk0] {
        width: 100%;
        display: block;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 8px 16px 8px 36px; 

        font-size: 12px;
        font-weight: 500;
        color: #475569;
        transition: .2s;
    }

        .attendance-child:hover[b-qfy6fdfkk0] {
            background: #E8F4FD;
            color: #0F172A;
        }

        .attendance-child:last-child[b-qfy6fdfkk0] {
            margin-bottom: 2px;
        }

    .attendance-body[b-qfy6fdfkk0]::-webkit-scrollbar {
        width: 7px;
    }

    .attendance-body[b-qfy6fdfkk0]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 10px;
    }

    .attendance-btn[b-qfy6fdfkk0] {
        background: #1C3553;
        color: #fff;
        border-color: #35506E;
    }

        .attendance-btn:hover[b-qfy6fdfkk0] {
            background: #274566;
            color: #fff;
        }

    .delete-btn[b-qfy6fdfkk0] {
        background: #1C3553;
        color: #fff;
        border-color: #35506E;
    }

        .delete-btn:hover[b-qfy6fdfkk0] {
            background: #C62828;
            color: #fff;
        }

    .clear-btn[b-qfy6fdfkk0] {
        background: #233D5C;
        color: #fff;
        border-color: #35506E;
    }

        .clear-btn:hover[b-qfy6fdfkk0] {
            background: #314D6D;
            color: #fff;
        }

    .btn-success.toolbar-btn[b-qfy6fdfkk0] {
        background: #10B981;
        border: none;
    }

        .btn-success.toolbar-btn:hover[b-qfy6fdfkk0] {
            background: #059669;
        }

    .icon-btn[b-qfy6fdfkk0] {
        width: 44px;
        height: 38px;
        border-radius: 12px;
        background: #233D5C;
        color: white;
        border: 1px solid #35506E;
    }

        .icon-btn:hover[b-qfy6fdfkk0] {
            background: #2F5074;
        }

    .attendance-btn .fa-chevron-down[b-qfy6fdfkk0] {
        transition: .25s;
    }

    .attendance-btn.open .fa-chevron-down[b-qfy6fdfkk0] {
        transform: rotate(180deg);
    }


.btn-print[b-qfy6fdfkk0] {
    background: #fff;
    color: #0B1F33;
    border: 1px solid #CBD5E1;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: .2s;
}

    .btn-print:hover:not(:disabled)[b-qfy6fdfkk0] {
        background: #F8FAFC;
        border-color: #94A3B8;
    }

    .btn-print:disabled[b-qfy6fdfkk0] {
        opacity: .5;
        cursor: not-allowed;
    }

.table-footer-bar[b-qfy6fdfkk0] {  
    margin-top: -8px !important;
}
/* /Components/Pages/MainMenu/View/Calendar/Calendar.razor.rz.scp.css */
/* CSS for Calendar component */


:root[b-81hz7brefe] {
    --navy-1: #071A2E;
    --navy-2: #0D2A45;
    --cyan: #22B8D8;
    --cyan-dark: #1899B5;
    --bg: #F4F8FB;
    --card: #FFFFFF;
    --text: #172436;
    --text-soft: #6E7A89;
    --text-light: #98A7B7;
    --line: #E3E8ED;
    --success: #1BBF8A;
    --danger: #F05D5E;
    --warning: #F6A623;
    --radius: 18px;
}

.calender-page[b-81hz7brefe] {
    padding: 25px;
    background: var(--bg);
}

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

    .calender-page .calender-topbar[b-81hz7brefe] {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .calender-page .page-title[b-81hz7brefe] {
        font-weight: 700;
        color: var(--navy-2);
        margin-left: 0px;
    }

    .calender-page .actions .btn[b-81hz7brefe] {
        transition: .25s ease;
    }

        .calender-page .actions .btn:hover[b-81hz7brefe] {
            transform: translateY(-2px);
        }
.actions[b-81hz7brefe] {
    display: flex;
    align-items: start;
    gap: 12px;
}
.employee-preview-btn[b-81hz7brefe] {
    height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid rgba(34,184,216,.35) !important;
    background: #fff;
    color: var(--cyan-dark) !important;
    font-weight: 600;
    font-size: 14px;
}

    .employee-preview-btn:hover[b-81hz7brefe] {
        background: #EAFBFE;
        color: var(--cyan-dark) !important;
        border: 1px solid var(--cyan) !important;
    }
.dropdown-menu.show[b-81hz7brefe] {
    top: calc(100% + 6px) !important;
    left: 0 ;
    margin: 0 !important;
}
.show-menu[b-81hz7brefe] {
    transform: none !important;
}
.bulk .clear-btn[b-81hz7brefe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    height: 40px !important;
}

    .bulk .clear-btn:hover[b-81hz7brefe] {
        filter: brightness(.94);
        background: rgba(255,255,255,0.14);
    }
.chronic-bg-secondary[b-81hz7brefe] {
    border-radius: 12px !important;
    height: 44px !important;
    border-radius: 12px !important;
    color: #5b7086;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--line);
}

    .chronic-bg-secondary:hover[b-81hz7brefe] {
        transform: translateY(-2px);
        color: #5b7086;
        border-color: #c9d4e0;
    }
.delete-btn[b-81hz7brefe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    padding: 12px;
    cursor: pointer;
    transition: background .12s;
    border-radius: 8px;
    height: 40px !important;
}
    .delete-btn:hover[b-81hz7brefe] {
        background: rgba(239,68,68,0.24);
        border-color: rgba(239,68,68,0.4);
    }
.calendar-view-tabs[b-81hz7brefe] {
    display: inline-flex;
    align-items: center;
    background: var(--line);
    border: 1px solid rgba(34,184,216,.15);
    border-radius: 12px;
    padding: 4px;
}

    .calendar-view-tabs .tab-btn[b-81hz7brefe] {
        border: 0;
        background: transparent;
        color: var(--text-light);
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        transition: .2s;
    }

        .calendar-view-tabs .tab-btn:hover[b-81hz7brefe] {
            color: #fff;
        }

        .calendar-view-tabs .tab-btn.active[b-81hz7brefe] {
            background: var(--cyan);
            color: #fff;
        }
        .today[b-81hz7brefe]{
            color:var(--bs-teal) !important;
        }
        .ms3[b-81hz7brefe]{
    margin-left:12px;
}
/* ==========================================================
       FORM CONTROLS
    ========================================================== */

    .calender-page .form-label[b-81hz7brefe] {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-soft);
        letter-spacing: .4px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .calender-page .form-control[b-81hz7brefe],
    .calender-page .form-select[b-81hz7brefe],
    .cls-custome[b-81hz7brefe],
    .search-input-dl[b-81hz7brefe] {
        height: 45px !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        color: var(--text);
        font-size: 14px;
        transition: .25s;
    }

        .calender-page .form-control:focus[b-81hz7brefe],
        .calender-page .form-select:focus[b-81hz7brefe],
        .cls-custome:focus[b-81hz7brefe] {
            border-color: var(--cyan) !important;
            box-shadow: 0 0 0 4px rgba(34,184,216,.15);
            outline: none;
        }

    .no-outline:focus[b-81hz7brefe] {
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(34,184,216,.15) !important;
    }

    .search-group[b-81hz7brefe] {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 44px;
        border-radius: 12px;
    }

    .profile-img[b-81hz7brefe] {
        width: 26px !important;
        height: 26px !important;
        border-radius: 120px !important;
        opacity: 1 !important;
        transform: rotate(0deg) !important;
    }
    /* Employee search dropdown */
    .dropdown-menu.show[b-81hz7brefe] {
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
        padding: 8px !important;
    }

        .dropdown-menu.show .dropdown-item[b-81hz7brefe] {
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 14px;
            overflow: hidden;
            flex-wrap: nowrap;
            display: flex;
            text-overflow: ellipsis;
        }

            .dropdown-menu.show .dropdown-item:hover[b-81hz7brefe] {
                background: #EAFBFE;
                color: var(--cyan-dark);
            }

            .dropdown-menu.show .dropdown-item.active[b-81hz7brefe] {
                background: var(--cyan);
                color: #fff;
            }
    /* ==========================================================
       GENERIC / GRID HELPERS
    ========================================================== */

    .gray-background[b-81hz7brefe] {
        background-color: #EEF2F5 !important;
    }

    .calender-page .e-rowcell[b-81hz7brefe] {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        height: auto !important;
        vertical-align: top;
    }

    .calender-page .w-100[b-81hz7brefe] {
        width: 95% !important;
        border-radius: 12px
    }
    /* ==========================================================
       CALENDAR PANEL / NAV
    ========================================================== */
    .rounded-grid.responsive-grid-container[b-81hz7brefe] {
        animation: fadeUp-b-81hz7brefe .45s ease;
        border-radius: 12px;
    }

    @keyframes fadeUp-b-81hz7brefe {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

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

    .calendar-nav[b-81hz7brefe] {
        background: #F7FAFC !important;
        border: 1px solid var(--line);
    }

        .calendar-nav .btn-light[b-81hz7brefe],
        .rounded-grid .btn-light[b-81hz7brefe] {
            background: #fff !important;
            border: 1px solid var(--line) !important;
            color: var(--navy-2) !important;
        }

            .calendar-nav .btn-light:hover[b-81hz7brefe],
            .rounded-grid .btn-light:hover[b-81hz7brefe] {
                background: #EAFBFE !important;
                border-color: var(--cyan) !important;
                color: var(--cyan-dark) !important;
            }

        .calendar-nav .fw-bold[b-81hz7brefe],
        .rounded-grid span.fw-bold[b-81hz7brefe] {
            color: var(--navy-2) !important;
            letter-spacing: -.02em;
        }

        .calendar-nav .btn.ms-3[b-81hz7brefe] {
            border: 1px solid rgba(34,184,216,.35);
            border-radius: 10px;
            color: var(--cyan-dark);
            font-weight: 600;
            background: #fff;
        }

            .calendar-nav .btn.ms-3:hover[b-81hz7brefe] {
                background: #EAFBFE;
            }

    .btn-outline-primary[b-81hz7brefe] {
        border-color: rgba(34,184,216,.45) !important;
        color: var(--cyan-dark) !important;
    }

        .btn-outline-primary:hover[b-81hz7brefe] {
            background: var(--cyan) !important;
            border-color: var(--cyan) !important;
            color: #fff !important;
        }
    /* ==========================================================
       SELECTION BAR (appears when cells are selected)
    ========================================================== */

    .selectedBar[b-81hz7brefe] {
        position: relative;
        z-index: 10;
        border: 1px solid var(--line);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .06) !important;
        background: #0A2036;
        color: #fff;
        margin-left: 0px !important;
        margin-right: 0px !important;
        border-radius: 12px !important;
    }

    .selectedCount[b-81hz7brefe] {
        background: var(--cyan);
        color: var(--navy-1);
        width: 22px;
        height: 22px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .selectedText[b-81hz7brefe] {
        color: #fff;
    }

    .start-align[b-81hz7brefe] {
        margin-right: auto;
        gap: 6px;
        padding-left: 10px;
    }
    /* ==========================================================
       DROPDOWNS (attendance menu, delete menu)
    ========================================================== */

    .dropbtn[b-81hz7brefe] {
        background-color: var(--cyan-dark) !important;
        color: #fff;
        padding: 10px 14px;
        font-size: 15px;
        border: none;
        border-radius: 10px !important;
        cursor: pointer;
        text-align: center;
        min-width: unset;
        width: auto;
    }

        .dropbtn:hover[b-81hz7brefe] {
            background-color: var(--cyan) !important;
            border-color: #1899B5 !important;
            filter: brightness(.94);
        }

.icon-only-btn[b-81hz7brefe] {
    padding: 8px;
    width: 50px;
    justify-content: center;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    padding: 9px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}

    .dropdown[b-81hz7brefe] {
        position: relative;
        display: inline-block;
    }

    .dropdown-content[b-81hz7brefe] {
        display: none;
        position: absolute;
        top: 100%;
        right: -190px;
        background-color: #fff;
        border: 1px solid var(--line);
        width: 250px;
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 18px 40px rgba(0,0,0,.10);
        z-index: 9999;
        padding: 10px;
        border-radius: 12px;
    }

        .dropdown-content a[b-81hz7brefe],
        .dropdown-content button[b-81hz7brefe] {
            color: var(--text);
            padding: 10px;
            border-radius: 8px;
            text-decoration: none;
            display: block;
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            white-space: normal;
            font-size: 14px;
        }

            .dropdown-content a:hover[b-81hz7brefe],
            .dropdown-content button:hover[b-81hz7brefe] {
                background-color: #EAFBFE;
                color: var(--cyan-dark);
            }

    .search-box[b-81hz7brefe] {
        margin-bottom: 10px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 14px;
    }

        .search-box:focus[b-81hz7brefe] {
            border-color: var(--cyan);
            outline: none;
        }

    .submenu-content[b-81hz7brefe] {
        padding-left: 20px;
        margin-bottom: 5px;
    }

    .cls-child[b-81hz7brefe] {
        color: var(--text);
    }

        .cls-child:hover[b-81hz7brefe] {
            background-color: #EAFBFE !important;
            color: var(--cyan-dark);
            cursor: pointer;
        }
    /* Delete (danger) dropdown keeps semantic danger color */
    .btn-danger[b-81hz7brefe] {
        /*    background-color: var(--danger) !important;
    border-color: var(--danger) !important;*/
    }

        .btn-danger:hover[b-81hz7brefe] {
            filter: brightness(.94);
        }

    .event-block[b-81hz7brefe] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }
    /* ==========================================================
       EVENT / LEGEND COLORS
       (Reworked from primary-color crayon tones to the theme palette.
        Actual event colors are still driven by data from the service —
        these classes cover any legend/badge usage.)
    ========================================================== */
    .bg-green[b-81hz7brefe],
    .bg-workshift[b-81hz7brefe] {
        background-color: var(--success);
        color: #fff;
    }

    .bg-holiday[b-81hz7brefe] {
        background-color: var(--warning);
        color: #fff;
    }

    .bg-sick[b-81hz7brefe] {
        background-color: rgba(34,184,216,.18);
        color: var(--cyan-dark);
    }

    .bg-absence[b-81hz7brefe] {
        background-color: var(--danger);
        color: #fff;
    }

    .bg-scheduledshift[b-81hz7brefe] {
        background-color: rgba(27,191,138,.16);
        color: #0F8F68;
    }
    /* ==========================================================
       CUSTOM MONTH GRID (replaces Syncfusion SfSchedule month view)
    ========================================================== */

    .custom-month-view[b-81hz7brefe] {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: var(--line);
        max-height: 60vh;
    }

    .custom-month-headerrow[b-81hz7brefe],
    .custom-month-weekrow[b-81hz7brefe] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
    }

    .custom-month-headerrow[b-81hz7brefe] {
        background: var(--line);
    }

    .custom-month-headercell[b-81hz7brefe] {
        background: #F7FAFC;
        text-align: center;
        padding: 5px;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .3px;
        color: var(--navy-2);
    }

    .custom-month-view .e-work-cells[b-81hz7brefe] {
        background: #fff;
        min-height: 80px;
        padding: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        transition: background-color .15s ease;
    }

        .custom-month-view .e-work-cells.e-other-month[b-81hz7brefe] {
            opacity: .4;
            pointer-events: none;
            cursor: not-allowed;
            background: #FBFDFE;
        }

        .custom-month-view .e-work-cells:hover[b-81hz7brefe] {
            background-color: #FBFDFE;
        }

    .cell-appointments[b-81hz7brefe] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: 50px;
        overflow-y: auto;
    }
    /* ==========================================================
       SCHEDULE CELLS & APPOINTMENTS
    ========================================================== */
    .e-schedule .e-month-view .e-appointment-wrapper[b-81hz7brefe] {
        max-height: 80px;
        overflow-y: auto;
    }

    .e-schedule .e-header-cells[b-81hz7brefe] {
        text-align: center !important;
        vertical-align: middle !important;
        font-weight: 700 !important;
        color: var(--navy-2) !important;
        background: #F7FAFC !important;
    }

    .e-schedule .e-date-header[b-81hz7brefe] {
        font-weight: normal !important;
    }

    .today-cell[b-81hz7brefe] {
        background-color: rgba(34,184,216,.06) !important;
    }

    .cell-date-number[b-81hz7brefe] {
        text-align: right;
        margin-right: 6px;
        line-height: 1;
        font-size: 14px;
        margin-top: 3px;
        color: var(--text);
        font-weight: 600;
    }

    .cell-top-row[b-81hz7brefe] {
        margin-bottom: 4px;
    }

    .cell-checkbox[b-81hz7brefe] {
        width: 10px;
        height: 10px;
        accent-color: var(--cyan);
        cursor: pointer;
        margin: 3px 0 0 2px;
    }

    .e-work-cells.e-other-month .cell-checkbox[b-81hz7brefe] {
        pointer-events: none;
    }

    .today-highlight[b-81hz7brefe] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--cyan),var(--cyan-dark));
        color: #fff !important;
        float: right;
    }

    .e-schedule .e-month-view .e-date-header-wrap table td.e-current-day[b-81hz7brefe],
    .e-schedule .e-month-agenda-view .e-date-header-wrap table td.e-current-day[b-81hz7brefe] {
        color: var(--navy-2) !important;
    }

    .highlighted-cell[b-81hz7brefe] {
        background-color: rgba(34,184,216,.10) !important;
    }

    .calendar-day-box.highlighted-cell[b-81hz7brefe] {
        background-color: rgba(34,184,216,.28) !important;
        color: var(--navy-2) !important;
    }

    .drag-selected[b-81hz7brefe] {
        background-color: rgba(34,184,216,.10) !important;
        border-radius: 8px;
    }

    .selected-event[b-81hz7brefe] {
        background-color: rgba(34,184,216,.10) !important;
        color: var(--text) !important;
    }

    .e-schedule .e-month-view .e-work-cells[b-81hz7brefe] {
        pointer-events: auto;
        cursor: pointer;
    }

        .e-schedule .e-month-view .e-work-cells:hover[b-81hz7brefe] {
            background-color: #FBFDFE;
        }

    .e-schedule .e-month-view .e-date-header[b-81hz7brefe] {
        display: none !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-right: 6px !important;
        padding-left: 0 !important;
        line-height: 22px !important;
        margin: 3px 3px 2px !important;
        font-size: 12px !important;
        cursor: pointer;
        pointer-events: none !important;
    }

    .appointment-template[b-81hz7brefe] {
        border-radius: 6px !important;
        background-clip: padding-box !important;
        overflow: hidden;
        margin-left: 14px;
        padding: 4px 8px !important;
        font-size: 12px !important;
        font-weight: 600;
        line-height: 1.2 !important;
        height: 25px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        transition: none !important;
    }

    .calender-page .e-schedule .e-appointment[b-81hz7brefe] {
        background-color: transparent !important;
        border-color: transparent !important;
        margin-bottom: 2px !important;
        overflow: visible !important;
    }

    .e-schedule .e-appointment[b-81hz7brefe] {
        overflow: hidden !important;
        max-height: 20px !important;
        min-height: 16px !important;
        transition: none !important;
        margin-bottom: 1px !important;
    }

        .e-schedule .e-appointment:hover[b-81hz7brefe],
        .appointment-template:hover[b-81hz7brefe] {
            color: inherit !important;
            box-shadow: none !important;
            transform: none !important;
            scale: 1 !important;
        }

    .e-other-month .e-work-cells[b-81hz7brefe] {
        opacity: 0.4 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    .e-schedule .e-other-month[b-81hz7brefe] {
        opacity: 0.5;
        cursor: not-allowed !important;
    }

        .e-schedule .e-other-month:hover[b-81hz7brefe] {
            background-color: transparent !important;
            color: inherit !important;
            cursor: not-allowed !important;
        }

    .calender-page .e-schedule .e-content-wrap[b-81hz7brefe] {
        overflow: hidden !important;
    }

    .e-schedule .e-spinner-pane[b-81hz7brefe],
    .e-schedule .e-spinner-wrapper[b-81hz7brefe],
    .e-schedule .e-spinner-inner[b-81hz7brefe],
    .e-schedule .e-spinner[b-81hz7brefe],
    .e-schedule .e-loading-indicator[b-81hz7brefe] {
        display: none !important;
    }
    /* ==========================================================
       MINI CALENDAR / YEAR VIEW
    ========================================================== */

    .month-box-calendar .e-selected[b-81hz7brefe] {
        background-color: var(--cyan) !important;
        color: #fff !important;
        font-weight: 700;
        border-radius: 6px;
    }

    .month-box-calendar .e-footer-container[b-81hz7brefe] {
        display: none !important;
    }

    .month-box-calendar .e-header .e-prev[b-81hz7brefe],
    .month-box-calendar .e-header .e-next[b-81hz7brefe] {
        display: none !important;
    }

    .month-box-calendar .e-calendar[b-81hz7brefe],
    .month-box-calendar .e-header[b-81hz7brefe] {
        border: none !important;
        box-shadow: none !important;
    }

    .month-box-calendar .e-header[b-81hz7brefe] {
        display: none !important;
    }

    @media (min-width: 768px) {
        .calender-page .col-md-4[b-81hz7brefe] {
            flex: 0 0 auto;
            width: 24.333333%;
        }

        .col-md-4 .e-calendar[b-81hz7brefe] {
            border-spacing: 0;
            max-width: 237px;
            min-width: 222px;
            padding: 0;
            border: none !important;
            box-shadow: none !important;
        }
    }

    .calendar-box[b-81hz7brefe] {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        overflow: visible;
    }

    .compact-calendar .e-schedule-content[b-81hz7brefe] {
        padding: 0 !important;
    }

    .compact-calendar .e-month-view .e-work-cells[b-81hz7brefe] {
        height: 60px !important;
    }

    .compact-calendar[b-81hz7brefe] {
        height: 450px !important;
    }

    .card-header[b-81hz7brefe] {
        background-color: #F7FAFC;
        font-size: 14px;
        color: var(--navy-2);
        font-weight: 700;
        border-bottom: 1px solid var(--line);
    }

    .calender-page .card[b-81hz7brefe] {
        height: 320px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(0,0,0,.05);
        overflow: hidden;
    }

    .calender-page .card-body[b-81hz7brefe] {
        flex-grow: 1;
    }

    .calendar-day-box[b-81hz7brefe] {
        width: calc(100% / 7 - 8px);
        height: 32px;
        margin: 4px;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 12px;
        border-radius: 6px;
        box-sizing: border-box;
        font-weight: 600;
    }

    .weekday-cell[b-81hz7brefe] {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: var(--text-soft);
        font-weight: 700;
    }

    .d-flex.flex-wrap[b-81hz7brefe] {
        width: 100%;
    }

    .year-day-wrapper[b-81hz7brefe] {
        position: relative;
        display: inline-block;
        width: calc(100% / 7 - 8px);
        height: 32px;
        margin: 4px;
    }

    .year-day-tooltip[b-81hz7brefe] {
        display: none;
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--navy-1);
        color: #fff;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 6px;
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
    }

    .year-day-wrapper:hover .year-day-tooltip[b-81hz7brefe] {
        display: block;
    }
    /* ==========================================================
       EMPLOYEE CARD (top-bar chip)
    ========================================================== */

    .employee-card[b-81hz7brefe] {
        border: 1px solid rgba(34,184,216,.35);
        border-left: 4px solid var(--cyan);
        border-radius: 12px;
        padding: 6px 14px;
        background: #EAFBFE;
        width: fit-content;
    }

    .employee-img[b-81hz7brefe] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px rgba(34,184,216,.35);
    }

    .employee-info[b-81hz7brefe] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .employee-name[b-81hz7brefe] {
        font-weight: 700 !important;
        color: var(--navy-2);
        font-size: 14px !important;
        position: relative;
    }

    .employee-role[b-81hz7brefe] {
        border-left: 1px solid var(--line);
        color: var(--text-soft);
        font-size: 14px;
        position: relative;
        padding-left: 10px;
    }

    .initial-icon[b-81hz7brefe],
    .hover-icon[b-81hz7brefe] {
        color: var(--text-soft);
        transition: all .25s ease;
    }

    .hover-icon[b-81hz7brefe] {
        opacity: 0;
        transform: scale(.7);
    }

    .employee-card:hover .initial-icon[b-81hz7brefe] {
        opacity: 0;
        transform: scale(.7);
        color: var(--cyan);
    }

    .employee-card:hover .hover-icon[b-81hz7brefe] {
        opacity: 1;
        transform: scale(1);
        color: var(--cyan);
    }
    /* ==========================================================
       SCROLLBAR
    ========================================================== */

    [b-81hz7brefe]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    [b-81hz7brefe]::-webkit-scrollbar-track {
        background: #EDF4F8;
    }

    [b-81hz7brefe]::-webkit-scrollbar-thumb {
        background: #B7DCE6;
        border-radius: 20px;
    }

        [b-81hz7brefe]::-webkit-scrollbar-thumb:hover {
            background: var(--cyan);
        }

/* /Components/Pages/MainMenu/View/Timesheet/NewTimeSheet.razor.rz.scp.css */
/*==========================
        Page Wrapper
==========================*/

.timesheet-page[b-y6yi2ydxzi] {
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    background: #F8FAFC;
}

/* Agar content bahut wide ho to */

.timesheet-page[b-y6yi2ydxzi] {
    max-width: 1800px;
    margin: 0 auto;
}

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

.timesheet-header[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.timesheet-header-left[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 320px;
}

.timesheet-header-icon[b-y6yi2ydxzi] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #EEF6FF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0F172A;
    font-size: 28px;
    flex-shrink: 0;
}

.timesheet-header-text h2[b-y6yi2ydxzi] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0F172A;
}

.timesheet-header-text p[b-y6yi2ydxzi] {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 15px;
    color: #64748B;
}

.timesheet-header-search[b-y6yi2ydxzi] {
    flex: 1;
    display: flex;
    justify-content: end;
}

.timesheet-search-box[b-y6yi2ydxzi] {
    position: relative;
    width: 100%;
    max-width: 428px;
}

.timesheet-search-input[b-y6yi2ydxzi] {
    width: 100%;
    height: 50px;
    border: 1px solid #D9E2EC;
    border-radius: 16px;
    padding: 0 52px;
    font-size: 16px;
    outline: none;
    background: #fff;
}

    .timesheet-search-input:focus[b-y6yi2ydxzi] {
        border-color: #1AA7EC;
        box-shadow: 0 0 0 4px rgba(26,167,236,.12);
    }

.timesheet-search-icon[b-y6yi2ydxzi] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 18px;
}

.timesheet-clear-btn[b-y6yi2ydxzi] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #64748B;
}

.timesheet-header-actions[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timesheet-add-btn[b-y6yi2ydxzi] {
    height: 50px;
    padding: 0 28px;
    border: none;
    border-radius: 16px;
    background: #071C34;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.timesheet-refresh-btn[b-y6yi2ydxzi] {
    width: 58px;
    height: 50px;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #0F172A;
}




/*==================================
        FILTER CARD
==================================*/

.timesheet-filter-card[b-y6yi2ydxzi] {
    background: #fff;
    border: 1px solid #E7EDF6;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: 0 10px 35px rgba(15,23,42,.05);
}

/* Left Columns */
.timesheet-date-col[b-y6yi2ydxzi] {
    flex: 0 0 17%;
    max-width: 17%;
}

.timesheet-nav-col[b-y6yi2ydxzi] {
    flex: 0 0 35%;
    max-width: 40%;
}

.timesheet-employee-col[b-y6yi2ydxzi] {
    flex: 0 0 20%;
    max-width: 23%;
}

.timesheet-department-col[b-y6yi2ydxzi] {
    flex: 0 0 22%;
    max-width: 22%;
}

/* Labels */

.timesheet-label[b-y6yi2ydxzi] {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* Inputs */

.timesheet-input[b-y6yi2ydxzi],
.timesheet-select[b-y6yi2ydxzi] {
    height: 50px !important;
    border: 1px solid #D8E2EE !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px;
    padding: 0 14px;
}

    .timesheet-input:focus[b-y6yi2ydxzi],
    .timesheet-select:focus[b-y6yi2ydxzi] {
        border-color: #80c2b5 !important;
        box-shadow: none !important;
    }

/* Date */

.timesheet-date-col .timesheet-input[b-y6yi2ydxzi] {
    width: 180px;
}

/* Employee */

.timesheet-employee-col .timesheet-select[b-y6yi2ydxzi] {
    min-width: 220px;
}

/* Navigation */

.timesheet-nav-group[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.timesheet-nav-btn[b-y6yi2ydxzi] {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1px solid #D8E2EE;
    background: #fff;
    color: #0F172A;
    transition: .25s;
}

    .timesheet-nav-btn:hover[b-y6yi2ydxzi] {
        background: #EEF6FF;
        border-color: #CBDCF8;
    }

.timesheet-today-btn[b-y6yi2ydxzi] {
    min-width: 82px;
    height: 50px;
    border: none;
    border-radius: 12px;
    background: #0F2945;
    color: #fff;
    
    transition: .25s;
}

    .timesheet-today-btn:hover[b-y6yi2ydxzi] {
        background: #183B63;
    }

/*==================================
        RIGHT INFO CARD
==================================*/

.timesheet-info-card[b-y6yi2ydxzi] {
    height: 100%;
    min-height: 88px;
    background: linear-gradient(135deg,#F8FAFF,#EEF5FF);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    overflow: hidden;
}

.timesheet-info-img[b-y6yi2ydxzi] {
    width: 90px;
    flex-shrink: 0;
}

.timesheet-info-card h5[b-y6yi2ydxzi] {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #102A43;
}

.timesheet-info-card p[b-y6yi2ydxzi] {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
}

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

@media (max-width:991px) {

    .timesheet-date-col[b-y6yi2ydxzi],
    .timesheet-nav-col[b-y6yi2ydxzi],
    .timesheet-employee-col[b-y6yi2ydxzi],
    .timesheet-department-col[b-y6yi2ydxzi] {
        flex: 0 0 100%;
        max-width: 100%;
    }

        .timesheet-date-col .timesheet-input[b-y6yi2ydxzi],
        .timesheet-employee-col .timesheet-select[b-y6yi2ydxzi] {
            width: 100% !important;
            min-width: 100%;
        }

    .timesheet-nav-group[b-y6yi2ydxzi] {
        flex-wrap: wrap;
    }

    .timesheet-info-card[b-y6yi2ydxzi] {
        margin-top: 20px;
    }
}

@media (max-width:992px) {

    .timesheet-filter-card[b-y6yi2ydxzi] {
        padding: 20px;
    }

    .timesheet-info-card[b-y6yi2ydxzi] {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }

    .timesheet-info-img[b-y6yi2ydxzi] {
        width: 70px;
    }
}

@media (max-width:768px) {

    .timesheet-nav-group[b-y6yi2ydxzi] {
        gap: 6px;
    }

    .timesheet-nav-btn[b-y6yi2ydxzi] {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .timesheet-today-btn[b-y6yi2ydxzi] {
        height: 44px;
        min-width: 70px;
        font-size: 13px;
    }

    .timesheet-input[b-y6yi2ydxzi],
    .timesheet-select[b-y6yi2ydxzi] {
        height: 44px !important;
    }
}




/*==================================
        SUMMARY CARDS
==================================*/

.timesheet-summary-card[b-y6yi2ydxzi] {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #E8EEF5;
    transition: .25s;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .timesheet-summary-card:hover[b-y6yi2ydxzi] {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(15,23,42,.08);
    }

    .timesheet-summary-card[b-y6yi2ydxzi]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
    }

/*.ts-primary::before {
    background: #2563EB;
}

.ts-success::before {
    background: #10B981;
}

.ts-warning::before {
    background: #F59E0B;
}

.ts-purple::before {
    background: #7C3AED;
}

.ts-danger::before {
    background: #EF4444;
}*/
.ts-primary[b-y6yi2ydxzi]::before,
.ts-success[b-y6yi2ydxzi]::before,
.ts-warning[b-y6yi2ydxzi]::before,
.ts-purple[b-y6yi2ydxzi]::before,
.ts-danger[b-y6yi2ydxzi]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #22b8d8;
}

.timesheet-summary-icon[b-y6yi2ydxzi] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.ts-primary .timesheet-summary-icon[b-y6yi2ydxzi] {
    background: #EAF2FF;
    color: #2563EB;
}

.ts-success .timesheet-summary-icon[b-y6yi2ydxzi] {
    background: #EAFBF4;
    color: #10B981;
}

.ts-warning .timesheet-summary-icon[b-y6yi2ydxzi] {
    background: #FFF7E8;
    color: #F59E0B;
}

.ts-purple .timesheet-summary-icon[b-y6yi2ydxzi] {
    background: #F3EEFF;
    color: #7C3AED;
}

.ts-danger .timesheet-summary-icon[b-y6yi2ydxzi] {
    background: #FDECEC;
    color: #EF4444;
}

.timesheet-summary-content h2[b-y6yi2ydxzi] {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #0F172A;
}

.timesheet-summary-content h5[b-y6yi2ydxzi] {
    margin: 3px 0;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.timesheet-summary-content p[b-y6yi2ydxzi] {
    margin: 0;
    font-size: 13px;
    color: #94A3B8;
}



/*=====================================================
                TIMESHEET TABLE
======================================================*/

.timesheet-table-card[b-y6yi2ydxzi] {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #E8EEF5;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

/*================ Header ================*/

.timesheet-table-header[b-y6yi2ydxzi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 24px;
    border-bottom: 1px solid #EDF2F7;
}

    .timesheet-table-header h4[b-y6yi2ydxzi] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #102A43;
    }

    .timesheet-table-header p[b-y6yi2ydxzi] {
        margin: 4px 0 0;
        color: #64748B;
        font-size: 14px;
    }

.timesheet-table-header-right span[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #F8FAFC;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
}

/*================ Scroll ================*/

.timesheet-table-wrapper[b-y6yi2ydxzi] {
    max-height: 390px;
    overflow: auto;
}

    .timesheet-table-wrapper[b-y6yi2ydxzi]::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .timesheet-table-wrapper[b-y6yi2ydxzi]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 20px;
    }

    .timesheet-table-wrapper[b-y6yi2ydxzi]::-webkit-scrollbar-track {
        background: #F8FAFC;
    }

/*================ Table ================*/

.timesheet-table[b-y6yi2ydxzi] {
    margin: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    /*================ Head ================*/

    .timesheet-table thead th[b-y6yi2ydxzi] {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #F8FAFC;
        color: #64748B;
        font-size: 13px;
/*        text-transform: uppercase;*/
        letter-spacing: .6px;
        font-weight: 700;
        border: none;
/*        border-bottom: 1px solid #E2E8F0;*/
        padding: 12px 18px;
    }

    /*================ Body ================*/

    .timesheet-table tbody td[b-y6yi2ydxzi] {
        border: none;
        border-bottom: 1px solid #F1F5F9;
        padding: 5px 18px !important;
        vertical-align: middle;
        font-size: 13px;
        color: #334155;
    }

    .timesheet-table tbody tr[b-y6yi2ydxzi] {
        transition: .25s ease;
        cursor: pointer;
    }

        .timesheet-table tbody tr:hover[b-y6yi2ydxzi] {
            background: #F8FBFF;
        }

/*================ Employee ================*/

.employee-cell[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.employee-avatar[b-y6yi2ydxzi] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E2E8F0;
    flex-shrink: 0;
}

.employee-name[b-y6yi2ydxzi] {
/*    font-size: 12px;*/
   
    line-height: 1.2;
}


/*================ Status ================*/

.status-pill[b-y6yi2ydxzi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    min-width: auto;
    white-space: nowrap;
}

/* Clock In */

.badge-clockin[b-y6yi2ydxzi] {
    background: #DCFCE7 !important;
    color: #15803D !important;
}

/* Late */

.badge-late[b-y6yi2ydxzi] {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* Holiday */

.badge-holiday[b-y6yi2ydxzi] {
    background: #FEF3C7 !important;
    color: #B45309 !important;
}

/* Sick */

.badge-sickness[b-y6yi2ydxzi] {
    background: #DBEAFE !important;
    color: #2563EB !important;
}

/* Absence */

.badge-absence[b-y6yi2ydxzi] {
    background: #FCE7F3 !important;
    color: #BE185D !important;
}

/* Pending */

.badge-holidayrequested[b-y6yi2ydxzi] {
    background: #FFF7ED !important;
    color: #EA580C !important;
}

/* Declined */

.badge-holidaydeclined[b-y6yi2ydxzi] {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
}

/* Bank Holiday */

.badge-bankholiday[b-y6yi2ydxzi] {
    background: #ECFCCB !important;
    color: #4D7C0F !important;
}

/* Exception */

.badge-severity1[b-y6yi2ydxzi],
.badge-severity2[b-y6yi2ydxzi],
.badge-severity3[b-y6yi2ydxzi] {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* Overtime */

.badge-unauthorisedovertime[b-y6yi2ydxzi] {
    background: #E0F2FE !important;
    color: #0369A1 !important;
}

/* Default */

.border-secondary[b-y6yi2ydxzi] {
    background: #F1F5F9 !important;
    color: #475569 !important;
}

@media(max-width:1200px) {

    .timesheet-table-header[b-y6yi2ydxzi] {
        padding: 18px;
    }

    .timesheet-table thead th[b-y6yi2ydxzi],
    .timesheet-table tbody td[b-y6yi2ydxzi] {
        padding: 14px 16px;
    }
}

@media(max-width:992px) {

    .timesheet-table-header[b-y6yi2ydxzi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}


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

.timesheet-table-footer[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    border-top: 1px solid #EEF2F7;
    background: #fff;
}

/* Left */

.timesheet-footer-left[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

    .timesheet-footer-left strong[b-y6yi2ydxzi] {
        color: #0F172A;
    }

/* Center */

.timesheet-footer-center[b-y6yi2ydxzi] {
    color: #64748B;
    font-size: 13px;
}

.timesheet-page-size[b-y6yi2ydxzi] {
    padding: 4px 28px 4px 10px !important;
    height: 38px !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
}
.form-select.timesheet-page-size[b-y6yi2ydxzi] {
    padding: 4px 28px 4px 10px !important;
    height: 38px !important;
}

/* Right */

.timesheet-footer-right[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Arrow */

.page-nav-btn[b-y6yi2ydxzi] {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: #F8FAFC;
    color: #334155;
    transition: .25s;
}

    .page-nav-btn:hover[b-y6yi2ydxzi] {
        background: #EEF5FF;
    }

    .page-nav-btn:disabled[b-y6yi2ydxzi] {
        opacity: .45;
        cursor: not-allowed;
    }

/* Number */

.page-number[b-y6yi2ydxzi] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #334155;
/*    font-weight: 600;*/
    transition: .25s;
}

    .page-number:hover[b-y6yi2ydxzi] {
        background: #EEF5FF;
    }

    .page-number.active[b-y6yi2ydxzi] {
        background: #0F2945;
        color: #fff;
    }

.page-dots[b-y6yi2ydxzi] {
    padding: 0 4px;
    color: #94A3B8;
}

/* Responsive */

@media(max-width:992px) {

    .timesheet-table-footer[b-y6yi2ydxzi] {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .timesheet-footer-right[b-y6yi2ydxzi] {
        flex-wrap: wrap;
    }
}




/*=========================================
        EMPLOYEE SUMMARY PANEL
=========================================*/

/*.employee-summary-panel {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 30px rgba(15,23,42,.06);
    height: 100%;
    position: sticky;
    top: 20px;
}*/

/* Header */

/*.employee-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

    .employee-panel-header h5 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #102A43;
    }

.employee-close-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: #F8FAFC;
    transition: .25s;
}

    .employee-close-btn:hover {
        background: #EEF2F7;
    }*/

/* Profile */

/*.employee-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.employee-profile-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E2E8F0;
}

.employee-profile-info {
    flex: 1;
}

    .employee-profile-info h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #102A43;
    }

    .employee-profile-info span {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: #64748B;
    }*/

/* Action Buttons */

/*.employee-profile-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    .employee-profile-actions .btn {
        border-radius: 10px;
        font-size: 13px;
        padding: 6px 14px;
        font-weight: 600;
    }*/

/* Weekly Table */

/*.employee-summary-table {
    margin-top: 18px;
}

    .employee-summary-table .table-responsive {
        max-height: 560px;
        overflow: auto;
    }

.employee-weekly-table {
    margin-bottom: 0;
}

    .employee-weekly-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #F8FAFC;
        color: #64748B;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        border-bottom: 0px solid #E5E7EB;
    }

    .employee-weekly-table tbody td {
        padding: 10px 12px;
        font-size: 12px;
        white-space: nowrap;
        vertical-align: middle;
    }

.employee-summary-table .status-pill {
    font-size: 11px;
}


@media (max-width:1200px) {

    .employee-profile {
        flex-wrap: wrap;
    }

    .employee-profile-actions {
        width: 100%;
        justify-content: flex-start;
    }
}*/



#timesheetGrid[b-y6yi2ydxzi] {
    transition: all .35s ease;
}

.employee-summary-panel[b-y6yi2ydxzi] {
    animation: slideInRight-b-y6yi2ydxzi .3s ease;
}

@keyframes slideInRight-b-y6yi2ydxzi {

    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

/*=========================================
        BOTTOM SHEET
=========================================*/

.timesheet-bottom-sheet[b-y6yi2ydxzi] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52vh;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 35px rgba(15,23,42,.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: sheetUp-b-y6yi2ydxzi .30s ease;
}

@keyframes sheetUp-b-y6yi2ydxzi {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.employee-panel-header[b-y6yi2ydxzi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 18px;
    border-bottom: 1px solid #E5E7EB;
    background: #fff;
    flex-shrink: 0;
}

    .employee-panel-header h5[b-y6yi2ydxzi] {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: #102A43;
    }

        .employee-panel-header h5 span[b-y6yi2ydxzi] {
            color: #0F2945;
            font-weight:700
        }

.employee-profile-actions[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .employee-profile-actions .btn[b-y6yi2ydxzi] {
        height: 32px;
        padding: 0 18px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
    }

.employee-close-btn[b-y6yi2ydxzi] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #F8FAFC;
}

.employee-profile[b-y6yi2ydxzi] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid #EEF2F7;
    flex-shrink: 0;
}

.employee-profile-img[b-y6yi2ydxzi] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E2E8F0;
}

.employee-profile-info h4[b-y6yi2ydxzi] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.employee-profile-info span[b-y6yi2ydxzi] {
    color: #64748B;
    font-size: 13px;
}

.employee-summary-table[b-y6yi2ydxzi] {
    flex: 1;
    overflow: hidden;
    padding: 20px 24px;
}

    .employee-summary-table .table-responsive[b-y6yi2ydxzi] {
        height: 100%;
        overflow: auto;
    }

.employee-weekly-table[b-y6yi2ydxzi] {
    margin-bottom: 0;
}

    .employee-weekly-table thead th[b-y6yi2ydxzi] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #F8FAFC;
        font-size: 13px;
        color: #64748B;
        border-bottom: 0px solid #E5E7EB;
        white-space: nowrap;
    }

    .employee-weekly-table tbody td[b-y6yi2ydxzi] {
        white-space: nowrap;
        font-size: 13px;
        padding: 10px;
    }

    .employee-weekly-table tbody tr:hover[b-y6yi2ydxzi] {
        background: #F8FBFF;
    }

@media(max-width:992px) {

    .employee-panel-header[b-y6yi2ydxzi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .employee-profile[b-y6yi2ydxzi] {
        flex-wrap: wrap;
    }

    .employee-profile-actions[b-y6yi2ydxzi] {
        width: 100%;
    }
}
/* /Components/Pages/Settings/HR Records/MailMergeEditor/MailMergeEditor.razor.rz.scp.css */


/* ================================
   Main Container
==================================*/
.mailmerge-container[b-950toea6qm] {
    padding: 10px;
    background: #F5F7FB;
    height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================
   Header
==================================*/
.mailmerge-header[b-950toea6qm] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-left[b-950toea6qm] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-icon[b-950toea6qm] {
    width: 65px;
    height: 65px;
    background: #EEF3FF;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #4F6EF7;
}

.page-title[b-950toea6qm] {
    font-weight: 700;
    color: var(--navy-2);
    margin: 0;
}

.page-subtitle[b-950toea6qm] {
    color: #6B7280;
    font-size: 14px;
    margin-top: 4px;
}

.btn-save[b-950toea6qm] {
    background: #4F6EF7;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 500;
}

/* ================================
   Body
==================================*/
.mailmerge-body[b-950toea6qm] {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    overflow: hidden;
}

/* ================================
   Left Panel
==================================*/
.left-panel[b-950toea6qm] {
    background: white;
    border-radius: 14px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .left-panel h4[b-950toea6qm] {
        margin-bottom: 3px;
        font-size: 22px;
    }

    .left-panel small[b-950toea6qm] {
        color: gray;
    }

.search-box[b-950toea6qm] {
    margin: 15px 0;
    flex-shrink: 0;
}

/* Only this section scrolls */
.field-panel[b-950toea6qm] {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

    /* scrollbar */

    .field-panel[b-950toea6qm]::-webkit-scrollbar {
        width: 6px;
    }

    .field-panel[b-950toea6qm]::-webkit-scrollbar-thumb {
        background: #C9CDD4;
        border-radius: 20px;
    }

    .field-panel[b-950toea6qm]::-webkit-scrollbar-track {
        background: transparent;
    }

/* field */

.field-item[b-950toea6qm] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E5E7EB;
    background: white;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: left;
    transition: .25s;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

    .field-item i[b-950toea6qm] {
        color: #4F6EF7;
        width: 18px;
    }

    .field-item:hover[b-950toea6qm] {
        background: #EEF3FF;
        border-color: #4F6EF7;
    }

/* ================================
   Editor Panel
==================================*/

.editor-panel[b-950toea6qm] {
    background: white;
    border-radius: 14px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* template */

.template-box[b-950toea6qm] {
    flex-shrink: 0;
    margin-bottom: 18px;
}

    .template-box label[b-950toea6qm] {
        font-weight: 600;
    }

    .template-box span[b-950toea6qm] {
        color: red;
    }

/* ================================
   Editor Wrapper
==================================*/

.editor-wrapper[b-950toea6qm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Quill */

#editor[b-950toea6qm] {
    flex: 1;
    overflow: hidden;
}

.ql-toolbar[b-950toea6qm] {
    flex-shrink: 0;
}

.ql-container[b-950toea6qm] {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ql-editor[b-950toea6qm] {
    flex: 1;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.7;
}

/* ================================
   Merge Field
==================================*/

.merge-field[b-950toea6qm] {
    background: #EAF4FF;
    color: #0056B3;
    border: 1px solid #4F6EF7;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
}

/* ================================
   //Default toolbar options for Quill editor
==================================*/


/*.ql-toolbar .ql-undo,
.ql-toolbar .ql-redo {
    width: 28px;
    height: 24px;
    padding: 3px 5px;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
}

    .ql-toolbar .ql-undo:hover,
    .ql-toolbar .ql-redo:hover {
        color: #06c;
        background-color: #f0f0f0;
    }*/

.ql-toolbar .ql-undo[b-950toea6qm],
.ql-toolbar .ql-redo[b-950toea6qm],
.ql-toolbar .ql-print[b-950toea6qm],
.ql-toolbar .ql-pdf[b-950toea6qm],
.ql-toolbar .ql-import-word[b-950toea6qm],
.ql-toolbar .ql-fullscreen[b-950toea6qm] {
    width: 32px;
    height: 28px;
    padding: 3px;
    margin-right: 2px;
    cursor: pointer;
    font-size: 17px;
}

    .ql-toolbar .ql-undo:hover[b-950toea6qm],
    .ql-toolbar .ql-redo:hover[b-950toea6qm],
    .ql-toolbar .ql-print:hover[b-950toea6qm],
    .ql-toolbar .ql-pdf:hover[b-950toea6qm],
    .ql-toolbar .ql-import-word:hover[b-950toea6qm] {
        color: #06c;
        background-color: #f0f0f0;
    }


    .ql-toolbar .ql-fullscreen i[b-950toea6qm] {
        font-size: 14px;
    }

.quill-fullscreen[b-950toea6qm] {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999;
    background: #fff;
}

    .quill-fullscreen .ql-toolbar[b-950toea6qm] {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .quill-fullscreen .ql-container[b-950toea6qm] {
        height: calc(100vh - 42px) !important;
    }

    .quill-fullscreen .ql-editor[b-950toea6qm] {
        min-height: calc(100vh - 42px);
    }

.quill-body-fullscreen[b-950toea6qm] {
    overflow: hidden !important;
}

.field-group-title[b-950toea6qm] {
    font-size: 13px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    margin: 12px 0 8px;
    letter-spacing: .5px;
}

/* ==============================
   TABLE TOOLBAR BUTTON
   ============================== */

.table-toolbar-group[b-950toea6qm] {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle;
}

.ql-toolbar .ql-table[b-950toea6qm] {
    width: 32px;
    height: 28px;
    padding: 3px;
    margin-right: 2px;
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ql-toolbar .ql-table:hover[b-950toea6qm] {
        color: #06c;
        background-color: #f0f0f0;
    }


/* ==============================
   TABLE POPUP
   ============================== */

.table-popup[b-950toea6qm] {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    width: 250px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.20);
    z-index: 999999;
    font-family: Arial, sans-serif;
}

    .table-popup.show[b-950toea6qm] {
        display: block;
    }


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

.table-popup-title[b-950toea6qm] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

    .table-popup-title i[b-950toea6qm] {
        margin-right: 7px;
        color: #06c;
    }


/* ==============================
   ROW / COLUMN
   ============================== */

.table-field[b-950toea6qm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

    .table-field label[b-950toea6qm] {
        font-size: 13px;
        color: #444;
    }

    .table-field select[b-950toea6qm] {
        width: 130px;
        height: 30px;
        padding: 3px 7px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
        font-size: 13px;
        outline: none;
    }

        .table-field select:focus[b-950toea6qm] {
            border-color: #06c;
        }


/* ==============================
   BUTTONS
   ============================== */

.table-popup-buttons[b-950toea6qm] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

    .table-popup-buttons button[b-950toea6qm] {
        height: 30px;
        padding: 4px 11px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    }

.table-cancel[b-950toea6qm] {
    background: #f1f1f1;
    color: #333;
}

    .table-cancel:hover[b-950toea6qm] {
        background: #e2e2e2;
    }

.table-insert[b-950toea6qm] {
    background: #06c;
    color: #fff;
}

    .table-insert:hover[b-950toea6qm] {
        background: #005bb5;
    }

/* /Components/Pages/Settings/HR Records/OrganisationChart/EmployeeNode.razor.rz.scp.css */

.employee-card[b-iwz3d8qzil] {
    width: 210px;
    height: 70px;
    background: #fff;
    border: 2px solid #b6b6b6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    gap: 10px;
}

.employee-photo[b-iwz3d8qzil] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #bbbbbb;
    flex-shrink: 0;
}

.employee-info[b-iwz3d8qzil] {
    min-width: 0;
    flex: 1;
}

    .employee-info.no-photo[b-iwz3d8qzil] {
        width: 100%;
        flex: none;
        display: flex;
        justify-content: center;
        text-align: center;
    }

/*.employee-name {
    font-weight: 400;
    font-size: 12px;
    color: #000;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/
.employee-name[b-iwz3d8qzil] {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
}

.employee-card:hover[b-iwz3d8qzil] {
    box-shadow: 0 6px 15px rgba(0,0,0,.25);
}

/* /Components/Pages/Settings/HR Records/OrganisationChart/OrganisationChart.razor.rz.scp.css */
/* ===========================
   PAGE
=========================== */

/*.org-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    background: #f4f6fb;
    padding: 15px;
    gap: 12px;
}*/
.org-page[b-jpsmflzjin] {
    display: flex;
    flex-direction: column;
    /* Important */
    height: 100vh;
    background: #f4f6fb;
    padding: 15px;
    gap: 12px;
    box-sizing: border-box;
}

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

.org-header[b-jpsmflzjin] {
    background: white;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

    .org-header h2[b-jpsmflzjin] {
        margin: 0;
        font-size: 26px;
        font-weight: 600;
    }

    .org-header span[b-jpsmflzjin] {
        color: #777;
        font-size: 14px;
    }


/* ===========================
   BUTTONS
=========================== */

.header-actions[b-jpsmflzjin] {
    display: flex;
    gap: 10px;
}

.btn[b-jpsmflzjin] {
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    cursor: pointer;
    transition: .25s;
    font-size: 15px;
}

.primary-btn[b-jpsmflzjin] {
    background: #2563eb;
    color: white;
}

    .primary-btn:hover[b-jpsmflzjin] {
        background: #1d4ed8;
    }

.success-btn[b-jpsmflzjin] {
    background: #16a34a;
    color: white;
}

    .success-btn:hover[b-jpsmflzjin] {
        background: #15803d;
    }


/* ===========================
   TOOLBAR
=========================== */

.toolbar[b-jpsmflzjin] {
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.tool-btn[b-jpsmflzjin] {
    border: none;
    background: #eef3ff;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: .2s;
}

    .tool-btn:hover[b-jpsmflzjin] {
        background: #2563eb;
        color: white;
    }

.toolbar-divider[b-jpsmflzjin] {
    width: 1px;
    height: 28px;
    background: #ddd;
    margin: 0 10px;
}


/* ===========================
   PALETTE
=========================== */

.palette-container[b-jpsmflzjin] {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.palette-title[b-jpsmflzjin] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 15px;
}

.collapse-btn[b-jpsmflzjin] {
    border: none;
    background: transparent;
    cursor: pointer;
}

.palette-items[b-jpsmflzjin] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.palette-card[b-jpsmflzjin] {
    width: 110px;
    height: 90px;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s;
    background: white;
}

    .palette-card:hover[b-jpsmflzjin] {
        border-color: #2563eb;
        background: #eef4ff;
        transform: translateY(-2px);
    }

    .palette-card i[b-jpsmflzjin] {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .palette-card span[b-jpsmflzjin] {
        font-size: 13px;
    }


/* ===========================
   DIAGRAM
=========================== */

/*.diagram-container {
    width: 100%;
    height: 1400px;
    border: 2px solid grey;
    overflow: auto;
}*/

.diagram-placeholder[b-jpsmflzjin] {
    width: 100%;
    height: 100%;
}



/* ===========================
   DIAGRAM OUTER BOX
=========================== */
.diagram-box[b-jpsmflzjin] {
    width: 100%;
    height: 700px;
    overflow: auto;
    border: 2px solid #999;
    background: white;
}

/*.diagram-inner {
     width: 61046px;
    height: 2000px;
    position: relative;
}*/
.diagram-inner[b-jpsmflzjin] {
    position: relative;
}

.diagram-container[b-jpsmflzjin] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
}


/* ===========================
   SCROLL AREA
=========================== */

.diagram-scroll-wrapper[b-jpsmflzjin] {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* IMPORTANT */
    position: relative;
}


/* ===========================
   ACTUAL DIAGRAM AREA
=========================== */

.diagram-content[b-jpsmflzjin] {
    position: relative;
    /*
       Don't use width/height:100%.
       Let DiagramCanvas determine its size.
    */

    min-width: 100%;
    min-height: 100%;
}


/* ===========================
   FLOAT BUTTON
=========================== */

.floating-button[b-jpsmflzjin] {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: .2s;
}

    .floating-button:hover[b-jpsmflzjin] {
        transform: scale(1.05);
    }


/* Scrollbar width */
.diagram-box[b-jpsmflzjin]::-webkit-scrollbar {
    width: 5px; /* vertical scrollbar */
    height: 5px; /* horizontal scrollbar */
}

/* Scrollbar track */
.diagram-box[b-jpsmflzjin]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Scrollbar thumb */
.diagram-box[b-jpsmflzjin]::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

    .diagram-box[b-jpsmflzjin]::-webkit-scrollbar-thumb:hover {
        background: #888;
    }