/* _content/EmployeeManagement/Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   APPLICATION LAYOUT
   ========================================================= */

.app-layout[b-kvf7l8al41] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f6f8;
}

.app-sidebar[b-kvf7l8al41] {
    background-image: linear-gradient( 180deg, rgb(5, 39, 103) 0%, #3a0647 70% );
    flex-shrink: 0;
}

.app-main[b-kvf7l8al41] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


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

.app-topbar[b-kvf7l8al41] {
    min-height: 58px;
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 900;
}

.app-topbar-title[b-kvf7l8al41] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #212529;
}

.app-topbar-subtitle[b-kvf7l8al41] {
    margin-top: 2px;
    font-size: 0.78rem;
    color: #6c757d;
}
/* Topbar Right Area Alignment */
.app-topbar[b-kvf7l8al41] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.app-topbar-right[b-kvf7l8al41] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logout Button Polish */
.topbar-logout-btn[b-kvf7l8al41] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .app-topbar-company[b-kvf7l8al41] {
        display: none !important; /* Mobile-e redundant text hide kore space bachano holo */
    }
}

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

.app-content[b-kvf7l8al41] {
    width: 100%;
    min-width: 0;
    flex: 1;
    padding: 18px;
}


/* Protect the whole application from accidental
   horizontal page scrolling. */

[b-kvf7l8al41] .container,
[b-kvf7l8al41] .container-fluid,
[b-kvf7l8al41] .row,
[b-kvf7l8al41] .card,
[b-kvf7l8al41] .table-responsive {
    min-width: 0;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 769px) {

    .app-layout[b-kvf7l8al41] {
        flex-direction: row;
    }

    .app-sidebar[b-kvf7l8al41] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .app-main[b-kvf7l8al41] {
        min-height: 100vh;
    }

    .app-topbar[b-kvf7l8al41] {
        padding-left: 24px;
        padding-right: 24px;
    }

    .app-content[b-kvf7l8al41] {
        padding: 22px 24px 28px;
    }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .app-layout[b-kvf7l8al41] {
        width: 100%;
        overflow-x: hidden;
        /*padding-top: 58px;*/
    }

    .app-sidebar[b-kvf7l8al41] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 58px;
        z-index: 1200;
    }

    .app-main[b-kvf7l8al41] {
        width: 100%;
        padding-top: 58px;
    }

    .app-topbar[b-kvf7l8al41] {
        min-height: 48px;
        padding: 6px 12px;
        position: static;
    }

    .app-topbar-title[b-kvf7l8al41] {
        font-size: 0.95rem;
    }

    .app-topbar-subtitle[b-kvf7l8al41] {
        font-size: 0.72rem;
    }

    .app-content[b-kvf7l8al41] {
        padding: 12px;
    }

    [b-kvf7l8al41] .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .app-content[b-kvf7l8al41] {
        padding: 10px;
    }

    .app-topbar[b-kvf7l8al41] {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .app-content[b-kvf7l8al41] {
        padding: 8px;
    }

    .app-topbar-title[b-kvf7l8al41] {
        font-size: 0.90rem;
    }

    .app-topbar-subtitle[b-kvf7l8al41] {
        font-size: 0.68rem;
    }
}


/* =========================================================
   BLAZOR ERROR UI
   ========================================================= */

#blazor-error-ui[b-kvf7l8al41] {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 14px;
    background: #fff3cd;
    border-top: 1px solid #ffe69c;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.blazor-error-content[b-kvf7l8al41] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

#blazor-error-ui .reload[b-kvf7l8al41] {
    white-space: nowrap;
    font-weight: 600;
}

#blazor-error-ui .dismiss[b-kvf7l8al41] {
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 2px 6px;
}


/* =========================================================
   ERROR UI - MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #blazor-error-ui[b-kvf7l8al41] {
        padding: 10px;
    }

    .blazor-error-content[b-kvf7l8al41] {
        align-items: flex-start;
        flex-wrap: wrap;
        font-size: 0.85rem;
    }

    #blazor-error-ui .dismiss[b-kvf7l8al41] {
        position: absolute;
        right: 6px;
        top: 5px;
    }
}

/* =========================================================
   MOBILE BOTTOM NATIVE TASKBAR STYLING
   ========================================================= */

.mobile-bottom-taskbar[b-kvf7l8al41] {
    display: none; /* Desktop-এ হাইড থাকবে */
}

@media (max-width: 768px) {

    /* মোবাইলে স্ক্রলিং যেন টাস্কবারের নিচে ঢাকা না পড়ে সেটার জন্য পেজের নিচে জায়গা রাখা হলো */
    .app-main[b-kvf7l8al41] {
        padding-bottom: 75px !important;
    }

    .mobile-bottom-taskbar[b-kvf7l8al41] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 58px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        align-items: center !important;
        justify-items: center !important;
        z-index: 1200 !important;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08) !important;
        padding: 4px 1px !important;
    }

    .taskbar-item[b-kvf7l8al41] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #64748b;
        padding: 2px 0;
        width: 100%;
        min-width: 0;
        transition: all 0.15s ease-in-out;
    }

    .taskbar-icon[b-kvf7l8al41] {
        font-size: 1.05rem; /* আইকন সাইজ একটু ছোট করে ব্যালেন্স করা হলো */
        line-height: 1;
        margin-bottom: 2px;
    }

    .taskbar-label[b-kvf7l8al41] {
        font-size: 0.58rem; /* ফন্ট সাইজ সামান্য এডজাস্ট করা হলো */
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -0.2px; /* ফন্টের মধ্যকার ফাঁকা জায়গা সামঞ্জস্য করার জন্য */
        max-width: 100%;
        text-align: center;
    }

    /* Active Page Highlight Status (Native App Look) */
    .taskbar-item.active[b-kvf7l8al41] {
        color: #2563eb;
        font-weight: 800;
    }

        .taskbar-item.active .taskbar-icon[b-kvf7l8al41] {
            transform: scale(1.1); /* হালকা জুমিং এফেক্ট */
        }

    /* Force Icon and Label to be Vertical Column */
    .mobile-bottom-taskbar .taskbar-item[b-kvf7l8al41] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        text-decoration: none !important; /* Removes link underline */
        color: #64748b !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        padding: 2px 0 !important;
    }

    .mobile-bottom-taskbar .taskbar-item:hover[b-kvf7l8al41],
    .mobile-bottom-taskbar .taskbar-item:focus[b-kvf7l8al41] {
        text-decoration: none !important; /* Removes focus/hover underline */
    }

    .mobile-bottom-taskbar .taskbar-icon[b-kvf7l8al41] {
        font-size: 1.1rem !important;
        line-height: 1 !important;
        margin: 0 auto 2px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    .mobile-bottom-taskbar .taskbar-label[b-kvf7l8al41] {
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        letter-spacing: -0.2px !important;
    }

    /* Active Menu Highlight (Native App Feel) */
    .mobile-bottom-taskbar .taskbar-item.active[b-kvf7l8al41] {
        color: #2563eb !important;
    }

    .mobile-bottom-taskbar .taskbar-item.active .taskbar-icon[b-kvf7l8al41] {
        transform: scale(1.1) !important;
    }

    /* ABSOLUTE UNDERLINE & BORDER REMOVAL FOR TASKBAR */
    .mobile-bottom-taskbar a[b-kvf7l8al41],
    .mobile-bottom-taskbar .taskbar-item[b-kvf7l8al41],
    .mobile-bottom-taskbar .taskbar-label[b-kvf7l8al41],
    .mobile-bottom-taskbar .taskbar-icon[b-kvf7l8al41] {
        text-decoration: none !important;
        border: none !important;
        border-bottom: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background-image: none !important;
    }

    .mobile-bottom-taskbar a:hover[b-kvf7l8al41],
    .mobile-bottom-taskbar a:focus[b-kvf7l8al41],
    .mobile-bottom-taskbar a:active[b-kvf7l8al41],
    .mobile-bottom-taskbar a.active[b-kvf7l8al41] {
        text-decoration: none !important;
        border: none !important;
        border-bottom: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Ensure label spans don't inherit default link decorations */
    .mobile-bottom-taskbar .taskbar-label[b-kvf7l8al41] {
        display: inline-block !important;
        border-bottom: none !important;
    }

    /* =========================================================
   TASKBAR STRICT NO-UNDERLINE FIX
   ========================================================= */

    /* Direct styling on the anchor element */
    .mobile-bottom-taskbar a[b-kvf7l8al41],
    .mobile-bottom-taskbar .taskbar-item[b-kvf7l8al41],
    .mobile-bottom-taskbar a.active[b-kvf7l8al41],
    .mobile-bottom-taskbar .active[b-kvf7l8al41] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        text-decoration-line: none !important;
        -webkit-text-decoration-line: none !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        background-image: none !important;
    }

        /* Remove hover / focus / active decorations on link & descendants */
        .mobile-bottom-taskbar a:hover[b-kvf7l8al41],
        .mobile-bottom-taskbar a:focus[b-kvf7l8al41],
        .mobile-bottom-taskbar a:active[b-kvf7l8al41],
        .mobile-bottom-taskbar a:visited[b-kvf7l8al41],
        .mobile-bottom-taskbar a *[b-kvf7l8al41] {
            text-decoration: none !important;
            text-decoration-line: none !important;
            border-bottom: none !important;
        }

    /* Force Icon span to stay clean */
    .mobile-bottom-taskbar .taskbar-icon[b-kvf7l8al41] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border-bottom: none !important;
    }
}
/* _content/EmployeeManagement/Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================
   NAV MENU - FINAL RESPONSIVE VERSION
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.top-row[b-zdilxqof6q] {
    height: 58px;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.navbar-brand[b-zdilxqof6q] {
    margin: 0;
    padding: 0;
    max-width: calc(100% - 60px);
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   MOBILE MENU BUTTON
   --------------------------------------------------------- */

.navbar-toggler[b-zdilxqof6q] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 10px;
    right: 12px;
    width: 42px;
    height: 38px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.10);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.90%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

    .navbar-toggler:hover[b-zdilxqof6q] {
        background-color: rgba(255, 255, 255, 0.18);
    }

    .navbar-toggler:checked[b-zdilxqof6q] {
        background-color: rgba(255, 255, 255, 0.24);
    }


/* ---------------------------------------------------------
   NAVIGATION CONTAINER
   --------------------------------------------------------- */

.nav-scrollable[b-zdilxqof6q] {
    display: none;
    width: 100%;
    padding: 6px 0 12px;
    overflow-x: hidden;
}

.navbar-toggler:checked ~ .nav-scrollable[b-zdilxqof6q] {
    display: block;
}

.nav-scrollable nav[b-zdilxqof6q] {
    width: 100%;
}


/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

.nav-section-title[b-zdilxqof6q] {
    padding: 13px 16px 5px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   NAV ITEM
   --------------------------------------------------------- */

.nav-item[b-zdilxqof6q] {
    width: 100%;
    padding: 2px 10px;
    font-size: 0.90rem;
}


    /*
   IMPORTANT:
   :deep() syntax is used because NavLink renders an <a>
   element through a child component.
*/

    .nav-item[b-zdilxqof6q] (.nav-link) {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 9px 11px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: 0.90rem;
        line-height: 1.25;
        text-decoration: none !important;
        cursor: pointer;
    }


    .nav-item[b-zdilxqof6q] (.nav-link:hover) {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff !important;
    }


    .nav-item[b-zdilxqof6q] (.nav-link.active) {
        background: rgba(255, 255, 255, 0.20);
        color: #ffffff !important;
        font-weight: 600;
    }


    /* ---------------------------------------------------------
   NAV ICONS
   --------------------------------------------------------- */

    .nav-item[b-zdilxqof6q] (.bi) {
        width: 19px;
        min-width: 19px;
        height: 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        flex-shrink: 0;
        color: #ffffff;
    }


/* Home icon */

.bi-house-door-fill-nav-menu[b-zdilxqof6q] {
    display: inline-block;
    width: 19px;
    min-width: 19px;
    height: 19px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}


/* ---------------------------------------------------------
   USER PANEL
   --------------------------------------------------------- */

.nav-user-panel[b-zdilxqof6q] {
    margin: 3px 10px 5px;
    padding: 10px 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.nav-user-name[b-zdilxqof6q] {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-role[b-zdilxqof6q] {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bi[b-zdilxqof6q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    margin-right: 0.75rem;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   LOGOUT FORM
   --------------------------------------------------------- */

.nav-item form[b-zdilxqof6q] {
    width: 100%;
    margin: 0;
    padding: 0;
}

    .nav-item form .nav-link[b-zdilxqof6q] {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 9px 11px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: 0.90rem;
        line-height: 1.25;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

        .nav-item form .nav-link:hover[b-zdilxqof6q] {
            background: rgba(255, 255, 255, 0.10);
            color: #ffffff !important;
        }



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .top-row[b-zdilxqof6q] {
        position: relative;
        width: 100%;
        height: 58px;
        min-height: 58px;
    }

    .navbar-toggler[b-zdilxqof6q] {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 2;
    }

    .nav-scrollable[b-zdilxqof6q] {
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100dvh - 58px);
        max-height: calc(100dvh - 58px);
        overflow-y: auto;
        overflow-x: hidden;
        background-image: linear-gradient( 180deg, rgb(5, 39, 103) 0%, #3a0647 70% );
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px 0 24px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        z-index: 1;
    }

    .nav-section-title[b-zdilxqof6q] {
        padding-top: 11px;
    }

    .nav-item[b-zdilxqof6q] {
        padding-left: 8px;
        padding-right: 8px;
    }

        .nav-item[b-zdilxqof6q] (.nav-link),
        .nav-item form .nav-link[b-zdilxqof6q] {
            min-height: 42px;
            padding-top: 8px;
            padding-bottom: 8px;
        }
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 360px) {

    .top-row[b-zdilxqof6q] {
        padding-left: 10px;
    }

    .navbar-brand[b-zdilxqof6q] {
        max-width: calc(100% - 55px);
        font-size: 0.94rem;
    }

    .navbar-toggler[b-zdilxqof6q] {
        right: 9px;
    }

    .nav-item[b-zdilxqof6q] (.nav-link),
    .nav-item form .nav-link[b-zdilxqof6q] {
        font-size: 0.87rem;
    }
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 769px) {

    .navbar-toggler[b-zdilxqof6q] {
        display: none;
    }

    .nav-scrollable[b-zdilxqof6q] {
        display: block;
        height: calc(100vh - 58px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    .navbar-brand[b-zdilxqof6q] {
        max-width: 100%;
        font-size: 0.95rem;
    }

    /* =========================================================
   FINAL NAVLINK COLOR OVERRIDE
   ========================================================= */

    [b-zdilxqof6q] .nav-item a.nav-link,
    [b-zdilxqof6q] .nav-item a.nav-link:visited {
        color: rgba(255, 255, 255, 0.86) !important;
        text-decoration: none !important;
    }

        [b-zdilxqof6q] .nav-item a.nav-link:hover,
        [b-zdilxqof6q] .nav-item a.nav-link:focus {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.10) !important;
            text-decoration: none !important;
        }

        [b-zdilxqof6q] .nav-item a.nav-link.active {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.20) !important;
            font-weight: 600;
        }
}

/* =========================================================
   MOBILE HEADER NAV LOGOUT BUTTON
   ========================================================= */

.nav-logout-icon-btn[b-zdilxqof6q] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
}

    .nav-logout-icon-btn:hover[b-zdilxqof6q],
    .nav-logout-icon-btn:focus[b-zdilxqof6q] {
        background: #dc2626 !important;
        color: #ffffff !important;
        border-color: #dc2626 !important;
    }

/* Ensure navbar layout fits brand, logout icon & toggler smoothly */
@media (max-width: 768px) {
    .app-brand[b-zdilxqof6q] {
        padding-right: 8px !important;
        max-width: calc(100% - 100px) !important;
    }
}

.top-row .navbar-toggler[b-zdilxqof6q] {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   FIX FOR OVERLAPPING HEADER LOGOUT & TOGGLER
   ========================================================= */

/* Action Container Alignment */
.header-actions-wrapper[b-zdilxqof6q] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 8px !important;
    z-index: 100 !important;
}

    /* Reset Default Absolute Positioning of Toggler */
    .top-row .navbar-toggler[b-zdilxqof6q],
    .header-actions-wrapper .navbar-toggler[b-zdilxqof6q] {
        position: static !important;
        margin: 0 !important;
        transform: none !important;
        display: inline-block !important;
    }

/* Styled Logout Icon Button */
.nav-logout-icon-btn[b-zdilxqof6q] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

    .nav-logout-icon-btn:hover[b-zdilxqof6q],
    .nav-logout-icon-btn:focus[b-zdilxqof6q] {
        background: #dc2626 !important;
        color: #ffffff !important;
        border-color: #dc2626 !important;
    }
/* mobile header logout button absolute positioning */
.mobile-logout-form[b-zdilxqof6q] {
    position: absolute !important;
    top: 50% !important;
    right: 68px !important; /* hamburger menu-er thik pashe boste */
    transform: translateY(-50%) !important;
    z-index: 1050 !important;
}
/* _content/EmployeeManagement/Components/Pages/AddEmployee.razor.rz.scp.css */
/* =========================================================
   ADD EMPLOYEE PAGE
   ========================================================= */

.employee-form-page[b-hbpke0l2bj] {
    width: 100%;
    min-width: 0;
}


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

.employee-form-header[b-hbpke0l2bj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .employee-form-header h1[b-hbpke0l2bj] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .employee-form-header p[b-hbpke0l2bj] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-hbpke0l2bj] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.employee-form-message[b-hbpke0l2bj] {
    margin-bottom: 16px;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.employee-form-card[b-hbpke0l2bj] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.form-section[b-hbpke0l2bj] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

    .form-section:last-of-type[b-hbpke0l2bj] {
        border-bottom: 0;
    }

.form-section-title[b-hbpke0l2bj] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   FORM GRID
   ========================================================= */

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

.form-field[b-hbpke0l2bj] {
    min-width: 0;
}

.form-field-full[b-hbpke0l2bj] {
    grid-column: 1 / -1;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-hbpke0l2bj] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-hbpke0l2bj] {
    color: #dc3545;
}

[b-hbpke0l2bj] .form-control,
[b-hbpke0l2bj] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

[b-hbpke0l2bj] .validation-message {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.78rem;
}


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

.active-field[b-hbpke0l2bj] {
    display: flex;
    flex-direction: column;
}

.active-check[b-hbpke0l2bj] {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 7px;
}

    .active-check .form-check-input[b-hbpke0l2bj] {
        margin: 0;
        width: 18px;
        height: 18px;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.employee-form-actions[b-hbpke0l2bj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.save-btn[b-hbpke0l2bj],
.cancel-btn[b-hbpke0l2bj] {
    min-width: 130px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .employee-form-header[b-hbpke0l2bj] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .employee-form-header h1[b-hbpke0l2bj] {
            font-size: 1.35rem;
        }

        .employee-form-header p[b-hbpke0l2bj] {
            font-size: 0.84rem;
        }

    .back-btn[b-hbpke0l2bj] {
        width: 100%;
        min-height: 44px;
    }


    .form-section[b-hbpke0l2bj] {
        padding: 15px 13px;
    }


    .form-grid[b-hbpke0l2bj] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    .form-field-full[b-hbpke0l2bj] {
        grid-column: auto;
    }


    [b-hbpke0l2bj] .form-control,
    [b-hbpke0l2bj] .form-select {
        min-height: 46px;
        font-size: 16px;
    }


    .active-check[b-hbpke0l2bj] {
        min-height: 46px;
    }


    .employee-form-actions[b-hbpke0l2bj] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
    }


    .save-btn[b-hbpke0l2bj],
    .cancel-btn[b-hbpke0l2bj] {
        width: 100%;
        min-height: 46px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .form-section[b-hbpke0l2bj] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .employee-form-actions[b-hbpke0l2bj] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/ChangePassword.razor.rz.scp.css */
/* =========================================================
   CHANGE PASSWORD PAGE
   ========================================================= */

.change-password-page[b-ulbvswuhvu] {
    width: 100%;
    min-width: 0;
}


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

.change-password-header[b-ulbvswuhvu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .change-password-header h1[b-ulbvswuhvu] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .change-password-header p[b-ulbvswuhvu] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-ulbvswuhvu] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.password-message-area[b-ulbvswuhvu] {
    scroll-margin-top: 16px;
}

.password-message[b-ulbvswuhvu] {
    margin-bottom: 16px;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.change-password-card[b-ulbvswuhvu] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECTION
   ========================================================= */

.password-section[b-ulbvswuhvu] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.password-section-title[b-ulbvswuhvu] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   GRID
   ========================================================= */

.password-form-grid[b-ulbvswuhvu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.password-field[b-ulbvswuhvu] {
    min-width: 0;
}

.full-width-field[b-ulbvswuhvu] {
    grid-column: 1 / -1;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-ulbvswuhvu] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-ulbvswuhvu] {
    color: #dc3545;
}

.form-control[b-ulbvswuhvu] {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

.field-hint[b-ulbvswuhvu] {
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.75rem;
}


/* =========================================================
   SECURITY NOTE
   ========================================================= */

.password-security-note[b-ulbvswuhvu] {
    margin: 16px 20px 0;
    padding: 12px 14px;
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    border-radius: 8px;
}

.security-note-title[b-ulbvswuhvu] {
    margin-bottom: 3px;
    color: #084298;
    font-size: 0.82rem;
    font-weight: 700;
}

.security-note-text[b-ulbvswuhvu] {
    color: #084298;
    font-size: 0.78rem;
    line-height: 1.45;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.password-actions[b-ulbvswuhvu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    margin-top: 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.change-password-btn[b-ulbvswuhvu],
.cancel-btn[b-ulbvswuhvu] {
    min-width: 145px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .change-password-header[b-ulbvswuhvu] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .change-password-header h1[b-ulbvswuhvu] {
            font-size: 1.35rem;
        }

        .change-password-header p[b-ulbvswuhvu] {
            font-size: 0.84rem;
        }

    .back-btn[b-ulbvswuhvu] {
        width: 100%;
        min-height: 44px;
    }


    .password-section[b-ulbvswuhvu] {
        padding: 15px 13px;
    }


    .password-form-grid[b-ulbvswuhvu] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .full-width-field[b-ulbvswuhvu] {
        grid-column: auto;
    }


    .form-control[b-ulbvswuhvu] {
        min-height: 46px;
        font-size: 16px;
    }


    .password-security-note[b-ulbvswuhvu] {
        margin: 13px 13px 0;
    }


    .password-actions[b-ulbvswuhvu] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
        margin-top: 13px;
    }


    .change-password-btn[b-ulbvswuhvu],
    .cancel-btn[b-ulbvswuhvu] {
        width: 100%;
        min-height: 46px;
    }


    .password-message[b-ulbvswuhvu] {
        padding: 10px 12px;
        font-size: 0.90rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .password-section[b-ulbvswuhvu] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .password-security-note[b-ulbvswuhvu] {
        margin-left: 11px;
        margin-right: 11px;
    }

    .password-actions[b-ulbvswuhvu] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/EditEmployee.razor.rz.scp.css */
/* =========================================================
   EDIT EMPLOYEE PAGE
   ========================================================= */

.employee-edit-page[b-8wa78w6nuj] {
    width: 100%;
    min-width: 0;
}


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

.employee-edit-header[b-8wa78w6nuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .employee-edit-header h1[b-8wa78w6nuj] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .employee-edit-header p[b-8wa78w6nuj] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-8wa78w6nuj] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE / STATE
   ========================================================= */

.employee-edit-message[b-8wa78w6nuj] {
    margin-bottom: 16px;
}

.employee-edit-state[b-8wa78w6nuj] {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
}

.employee-not-found[b-8wa78w6nuj] {
    flex-direction: column;
    text-align: center;
}


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

.employee-edit-card[b-8wa78w6nuj] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECTION
   ========================================================= */

.edit-section[b-8wa78w6nuj] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.edit-section-title[b-8wa78w6nuj] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   GRID
   ========================================================= */

.edit-grid[b-8wa78w6nuj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.edit-field[b-8wa78w6nuj] {
    min-width: 0;
}

.edit-field-full[b-8wa78w6nuj] {
    grid-column: 1 / -1;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-8wa78w6nuj] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-8wa78w6nuj] {
    color: #dc3545;
}

[b-8wa78w6nuj] .form-control,
[b-8wa78w6nuj] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

.employee-code-input[b-8wa78w6nuj] {
    background: #f1f3f5 !important;
    font-weight: 600;
}

[b-8wa78w6nuj] .validation-message {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.78rem;
}


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

.active-field[b-8wa78w6nuj] {
    display: flex;
    flex-direction: column;
}

.active-check[b-8wa78w6nuj] {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 7px;
}

    .active-check .form-check-input[b-8wa78w6nuj] {
        width: 18px;
        height: 18px;
        margin: 0;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.employee-edit-actions[b-8wa78w6nuj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.update-btn[b-8wa78w6nuj],
.cancel-btn[b-8wa78w6nuj] {
    min-width: 140px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .employee-edit-header[b-8wa78w6nuj] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .employee-edit-header h1[b-8wa78w6nuj] {
            font-size: 1.35rem;
        }

        .employee-edit-header p[b-8wa78w6nuj] {
            font-size: 0.84rem;
        }

    .back-btn[b-8wa78w6nuj] {
        width: 100%;
        min-height: 44px;
    }


    .edit-section[b-8wa78w6nuj] {
        padding: 15px 13px;
    }


    .edit-grid[b-8wa78w6nuj] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    .edit-field-full[b-8wa78w6nuj] {
        grid-column: auto;
    }


    [b-8wa78w6nuj] .form-control,
    [b-8wa78w6nuj] .form-select {
        min-height: 46px;
        font-size: 16px;
    }


    .active-check[b-8wa78w6nuj] {
        min-height: 46px;
    }


    .employee-edit-actions[b-8wa78w6nuj] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
    }


    .update-btn[b-8wa78w6nuj],
    .cancel-btn[b-8wa78w6nuj] {
        width: 100%;
        min-height: 46px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .edit-section[b-8wa78w6nuj] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .employee-edit-actions[b-8wa78w6nuj] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/Employees.razor.rz.scp.css */
/* =========================================================
   EMPLOYEE LIST PAGE
   ========================================================= */

.employee-page[b-xec7791sud] {
    width: 100%;
    min-width: 0;
}


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

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

    .employee-header h1[b-xec7791sud] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .employee-header p[b-xec7791sud] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.add-employee-btn[b-xec7791sud] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.add-symbol[b-xec7791sud] {
    font-size: 1.15rem;
    line-height: 1;
}

.employee-header-actions[b-xec7791sud] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wage-management-btn[b-xec7791sud] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* =========================================================
   EMPLOYEE SEARCH
   ========================================================= */

.employee-search-card[b-xec7791sud] {
    margin-bottom: 16px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.employee-search-label[b-xec7791sud] {
    margin-bottom: 7px;
    color: #495057;
    font-size: 0.80rem;
    font-weight: 700;
}

.employee-search-row[b-xec7791sud] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-search-input-wrap[b-xec7791sud] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.employee-search-input[b-xec7791sud] {
    min-height: 42px;
    padding-right: 42px;
    font-size: 1rem;
    border-radius: 7px;
}

.employee-search-clear[b-xec7791sud] {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

    .employee-search-clear:hover[b-xec7791sud] {
        background: #f1f3f5;
        color: #212529;
    }

.employee-result-count[b-xec7791sud] {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.80rem;
    white-space: nowrap;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.employee-message[b-xec7791sud] {
    margin-bottom: 18px;
}


/* =========================================================
   LOADING / EMPTY STATE
   ========================================================= */

.employee-state-card[b-xec7791sud] {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
}


/* =========================================================
   DESKTOP TABLE
   ========================================================= */

/*.employee-table-wrapper {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
}*/

.employee-table-wrapper[b-xec7791sud] {
    display: block;
}

.employee-mobile-list[b-xec7791sud] {
    display: none;
}
.employee-table[b-xec7791sud] {
    vertical-align: middle;
}

    .employee-table thead th[b-xec7791sud] {
        padding: 12px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        color: #495057;
        font-size: 0.80rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .employee-table tbody td[b-xec7791sud] {
        padding: 12px 14px;
        font-size: 0.88rem;
        border-bottom-color: #edf0f2;
    }

    .employee-table tbody tr:last-child td[b-xec7791sud] {
        border-bottom: 0;
    }

    .employee-table tbody tr:hover[b-xec7791sud] {
        background: #fafbfc;
    }

.employee-code[b-xec7791sud] {
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.employee-name[b-xec7791sud] {
    font-weight: 600;
    color: #212529;
}

.wage-cell[b-xec7791sud] {
    white-space: nowrap;
    font-weight: 600;
}

.action-column[b-xec7791sud] {
    min-width: 260px;
}


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

.status-badge[b-xec7791sud] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-active[b-xec7791sud] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-inactive[b-xec7791sud] {
    background: #e9ecef;
    color: #6c757d;
}


/* =========================================================
   DESKTOP ACTIONS
   ========================================================= */

.employee-actions[b-xec7791sud] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}


/* =========================================================
   MOBILE LIST
   ========================================================= */

.employee-mobile-list[b-xec7791sud] {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .employee-header[b-xec7791sud] {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

        .employee-header h1[b-xec7791sud] {
            font-size: 1.35rem;
        }

        .employee-header p[b-xec7791sud] {
            font-size: 0.84rem;
        }

    .add-employee-btn[b-xec7791sud] {
        width: 100%;
        min-height: 46px;
        font-size: 0.95rem;
    }


    /* Hide desktop table */

    .employee-table-wrapper[b-xec7791sud] {
        display: none !important;
    }


    /* Show mobile cards */

    .employee-mobile-list[b-xec7791sud] {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }


    .employee-card[b-xec7791sud] {
        width: 100%;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        overflow: hidden;
    }


    .employee-card-header[b-xec7791sud] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }


    .employee-card-identity[b-xec7791sud] {
        min-width: 0;
    }


    .employee-card-name[b-xec7791sud] {
        font-size: 1rem;
        font-weight: 700;
        color: #212529;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }


    .employee-card-code[b-xec7791sud] {
        margin-top: 3px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #6c757d;
    }


    .employee-card-body[b-xec7791sud] {
        padding: 12px 14px;
    }


    .employee-info-row[b-xec7791sud] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border-bottom: 1px dashed #e9ecef;
    }


        .employee-info-row:last-child[b-xec7791sud] {
            border-bottom: 0;
        }


    .employee-info-label[b-xec7791sud] {
        color: #6c757d;
        font-size: 0.80rem;
    }


    .employee-info-value[b-xec7791sud] {
        min-width: 0;
        color: #212529;
        font-size: 0.86rem;
        font-weight: 600;
        text-align: right;
        overflow-wrap: anywhere;
    }


    .employee-wage[b-xec7791sud] {
        white-space: nowrap;
    }


    .employee-card-actions[b-xec7791sud] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 14px;
        border-top: 1px solid #e9ecef;
        background: #ffffff;
    }


        .employee-card-actions .btn[b-xec7791sud] {
            min-height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.88rem;
            font-weight: 600;
        }

    .employee-search-row[b-xec7791sud] {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    .employee-search-input[b-xec7791sud] {
        min-height: 46px;
        font-size: 16px;
    }

    .employee-result-count[b-xec7791sud] {
        text-align: right;
    }

    .employee-search-card[b-xec7791sud] {
        padding: 12px;
        margin-bottom: 14px;
    }

    .employee-header-actions[b-xec7791sud] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wage-management-btn[b-xec7791sud],
    .add-employee-btn[b-xec7791sud] {
        width: 100%;
        min-height: 46px;
    }

    /* Mobile Actions Grid */
    .employee-card-actions-grid[b-xec7791sud] {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 6px;
        padding: 10px 12px;
        border-top: 1px solid #e9ecef;
        background: #ffffff;
    }

    /* Vibrant Summary Grid */
    .timeline-summary-grid[b-xec7791sud] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 items per row */
        gap: 6px !important;
    }

    .ts-card[b-xec7791sud] {
        padding: 7px 11px !important;
        border-radius: 8px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 48px;
        position: relative;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease-in-out;
    }

    /* Subtle Hover Effect */
    .ts-card:hover[b-xec7791sud] {
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    /* বামদিকের ইনফরমেশন টেক্সট */
    .ts-card-info[b-xec7791sud] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .ts-label[b-xec7791sud] {
        font-size: 0.68rem !important;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* ডানদিকের স্টাইলিশ আইকন */
    .ts-card-icon[b-xec7791sud] {
        font-size: 1.15rem;
        opacity: 0.75;
        flex-shrink: 0;
        margin-left: 6px;
    }

    .ts-val[b-xec7791sud] {
        font-size: 0.88rem !important;
        font-weight: 800;
        line-height: 1.2;
        margin-top: 2px;
    }

    /* =========================================================
   PROFESSIONAL COLOR THEMES (SOFT & BALANCED)
   ========================================================= */

    /* Gross Earned - Deep Slate Blue */
    .ts-purple[b-xec7791sud] {
        background: #f1f5f9;
        border-left: 4px solid #475569 !important;
        color: #1e293b;
    }

        .ts-purple .ts-label[b-xec7791sud] {
            color: #64748b;
        }

    /* Net Payable - Modern Emerald Forest */
    .ts-green[b-xec7791sud] {
        background: #ecfdf5;
        border-left: 4px solid #059669 !important;
        color: #064e3b;
    }

        .ts-green .ts-label[b-xec7791sud] {
            color: #047857;
        }

    /* Present - Soft Corporate Blue */
    .ts-blue[b-xec7791sud] {
        background: #eff6ff;
        border-left: 4px solid #2563eb !important;
        color: #1e3a8a;
    }

        .ts-blue .ts-label[b-xec7791sud] {
            color: #3b82f6;
        }

    /* Absent - Soft Rose Crimson */
    .ts-red[b-xec7791sud] {
        background: #fff1f2;
        border-left: 4px solid #e11d48 !important;
        color: #881337;
    }

        .ts-red .ts-label[b-xec7791sud] {
            color: #f43f5e;
        }

    /* Opening Adv - Muted Warm Amber */
    .ts-amber[b-xec7791sud] {
        background: #fffbeeb;
        border-left: 4px solid #d97706 !important;
        color: #78350f;
    }

        .ts-amber .ts-label[b-xec7791sud] {
            color: #b45309;
        }

    /* New Adv Taken - Muted Coral Orange */
    .ts-orange[b-xec7791sud] {
        background: #fff7ed;
        border-left: 4px solid #ea580c !important;
        color: #7c2d12;
    }

        .ts-orange .ts-label[b-xec7791sud] {
            color: #c2410c;
        }

    /* Adv Adjusted - Soft Teal Cyan */
    .ts-cyan[b-xec7791sud] {
        background: #f0fdfa;
        border-left: 4px solid #0d9488 !important;
        color: #134e4a;
    }

        .ts-cyan .ts-label[b-xec7791sud] {
            color: #0f766e;
        }

    /* Opening Neg - Muted Wine Maroon */
    .ts-darkred[b-xec7791sud] {
        background: #fdf2f2;
        border-left: 4px solid #9f1239 !important;
        color: #4c0519;
    }

        .ts-darkred .ts-label[b-xec7791sud] {
            color: #be123c;
        }

    /* Neg Recovered - Soft Mint Gray */
    .ts-teal[b-xec7791sud] {
        background: #f0fdf4;
        border-left: 4px solid #16a34a !important;
        color: #14532d;
    }

        .ts-teal .ts-label[b-xec7791sud] {
            color: #15803d;
        }

    /* Closing Neg - Soft Brick Red */
    .ts-danger[b-xec7791sud] {
        background: #fef2f2;
        border-left: 4px solid #dc2626 !important;
        color: #7f1d1d;
    }

    .ts-danger .ts-label[b-xec7791sud] {
        color: #b91c1c;
    }

    .ts-full[b-xec7791sud] {
        grid-column: span 2 !important; /* Net Payable takes full width */
    }

    /* Calendar Compact Tile Grid */
    .calendar-grid-container[b-xec7791sud] {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    /* Clean Single-Line Salary Status Alert */
    .salary-status-alert[b-xec7791sud] {
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 6px;
        letter-spacing: 0.2px;
    }

    .calendar-tile[b-xec7791sud] {
        background: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 3px 2px;
        text-align: center;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .tile-date[b-xec7791sud] {
        font-size: 0.62rem;
        font-weight: 700;
        border-radius: 3px;
        padding: 1px 0;
        margin: 1px 0;
    }

    .tile-status[b-xec7791sud] {
        font-size: 0.62rem;
        font-weight: 700;
        border-radius: 3px;
        padding: 1px;
    }

    .badge-p[b-xec7791sud] {
        background: #d1e7dd;
        color: #0f5132;
    }

    .badge-h[b-xec7791sud] {
        background: #fff3cd;
        color: #664d03;
    }

    .badge-a[b-xec7791sud] {
        background: #f8d7da;
        color: #842029;
    }

    .badge-off[b-xec7791sud] {
        background: #e2e3e5;
        color: #41464b;
    }

    .tile-wage[b-xec7791sud] {
        font-size: 0.62rem;
        font-weight: 600;
        color: #198754;
    }

    .tile-adv[b-xec7791sud] {
        font-size: 0.58rem;
        font-weight: 700;
        color: #fd7e14;
    }
    /* Prominent Wage Display */
    .tile-wage-badge[b-xec7791sud] {
        font-size: 0.70rem;
        font-weight: 800;
        color: #0f5132;
        background: #e8f5e9;
        border-radius: 3px;
        padding: 1px 0;
        line-height: 1.1;
    }

    /* Prominent Advance Display */
    .tile-adv-badge[b-xec7791sud] {
        font-size: 0.65rem;
        font-weight: 800;
        color: #856404;
        background: #fff3cd;
        border: 1px solid #ffeba8;
        border-radius: 3px;
        padding: 1px 0;
        margin-top: 1px;
        line-height: 1.1;
    }

    .tile-gross-flag[b-xec7791sud] {
        font-size: 0.58rem;
        font-weight: 800;
        background: #ffc107;
        color: #000000;
        border-radius: 3px;
        margin-top: 1px;
        padding: 1px 0;
    }

    .last-day-tile[b-xec7791sud] {
        border: 2px solid #ffc107;
        background: #fffdf0;
    }

    .timeline-modal-backdrop[b-xec7791sud] {
        background: rgba(0, 0, 0, 0.7);
        z-index: 2000 !important;
    }

    /* Profile Header Card */
    .emp-profile-card[b-xec7791sud] {
        border-left: 4px solid #0d6efd !important;
    }
        /* Modal Content & Header Position */
        .timeline-modal-backdrop .modal-dialog[b-xec7791sud] {
            margin: 15px auto;
        }

        .timeline-modal-backdrop .modal-content[b-xec7791sud] {
            border-radius: 10px;
            overflow: hidden;
        }

        .timeline-modal-backdrop .modal-header[b-xec7791sud] {
            position: sticky;
            top: 0;
            z-index: 1060 !important;
            background-color: #212529 !important;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

/*    .employee-card-header,
    .employee-card-body,
    .employee-card-actions {
        padding-left: 11px;
        padding-right: 11px;
    }*/

    .employee-info-row[b-xec7791sud] {
        gap: 8px;
    }

    .employee-card-actions[b-xec7791sud] {
        grid-template-columns: 1fr;
    }

    /* Employee Card Layout Adjustments */
    .employee-card-header[b-xec7791sud],
    .employee-card-body[b-xec7791sud],
    .employee-card-actions-grid[b-xec7791sud] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Actions Grid Split in Small Screen */
    .employee-card-actions-grid[b-xec7791sud] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* 360 Timeline Summary Grid Adjustments */
    .timeline-summary-grid[b-xec7791sud] {
        grid-template-columns: 1fr; /* Single column layout for very small screens */
        gap: 5px;
    }

    .ts-full[b-xec7791sud] {
        grid-column: span 1;
    }

    .ts-label[b-xec7791sud] {
        font-size: 0.65rem;
    }

    .ts-val[b-xec7791sud] {
        font-size: 0.82rem;
    }

    /* Calendar Grid Adjustments for 360px Width */
    .calendar-grid-container[b-xec7791sud] {
        grid-template-columns: repeat(4, 1fr); /* 5 column-er bodol-e 4 column jate screen size overflowing na hoy */
        gap: 3px;
    }

    .calendar-tile[b-xec7791sud] {
        min-height: 48px;
        padding: 2px;
    }

    .tile-date[b-xec7791sud] {
        font-size: 0.68rem;
    }

    .tile-status[b-xec7791sud] {
        font-size: 0.60rem;
    }

    .tile-wage[b-xec7791sud],
    .tile-adv[b-xec7791sud] {
        font-size: 0.58rem;
    }

}
/* _content/EmployeeManagement/Components/Pages/EmployeesWage.razor.rz.scp.css */
/* =========================================================
   EMPLOYEE WAGE MANAGEMENT
   ========================================================= */

.wage-page[b-n9q96qsawc] {
    width: 100%;
    min-width: 0;
}


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

.wage-header[b-n9q96qsawc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .wage-header h1[b-n9q96qsawc] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .wage-header p[b-n9q96qsawc] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-n9q96qsawc] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.wage-message[b-n9q96qsawc] {
    margin-bottom: 16px;
}

.wage-message-area[b-n9q96qsawc] {
    scroll-margin-top: 12px;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.wage-card[b-n9q96qsawc] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: visible;
}


/* =========================================================
   SECTION
   ========================================================= */

.wage-section[b-n9q96qsawc] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.wage-section-title[b-n9q96qsawc] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.required-mark[b-n9q96qsawc] {
    color: #dc3545;
}


/* =========================================================
   SEARCH
   ========================================================= */

.employee-search-wrap[b-n9q96qsawc] {
    position: relative;
    width: 100%;
    max-width: 650px;
}

.form-label[b-n9q96qsawc] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.employee-search-box[b-n9q96qsawc] {
    position: relative;
}

.employee-search-input[b-n9q96qsawc] {
    min-height: 44px;
    padding-right: 42px;
    font-size: 1rem;
    border-radius: 7px;
}

.employee-search-clear[b-n9q96qsawc] {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
}

    .employee-search-clear:hover[b-n9q96qsawc] {
        background: #f1f3f5;
        color: #212529;
    }


/* =========================================================
   SEARCH RESULT
   ========================================================= */

.employee-search-results[b-n9q96qsawc] {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.employee-search-result[b-n9q96qsawc] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #f0f1f2;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
}

    .employee-search-result:last-child[b-n9q96qsawc] {
        border-bottom: 0;
    }

    .employee-search-result:hover[b-n9q96qsawc] {
        background: #f8f9fa;
    }

.result-name[b-n9q96qsawc] {
    min-width: 0;
    color: #212529;
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.result-code[b-n9q96qsawc] {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.76rem;
    font-weight: 600;
}

.employee-search-empty[b-n9q96qsawc] {
    padding: 13px;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
}

.employee-search-result.highlighted[b-n9q96qsawc] {
    background: #e7f1ff;
}

    .employee-search-result.highlighted .result-name[b-n9q96qsawc] {
        color: #084298;
    }


/* =========================================================
   SELECTED EMPLOYEE
   ========================================================= */

.selected-employee-card[b-n9q96qsawc] {
    max-width: 650px;
    border: 1px solid #dee2e6;
    border-radius: 9px;
    overflow: hidden;
}

.selected-employee-header[b-n9q96qsawc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.selected-name[b-n9q96qsawc] {
    color: #212529;
    font-size: 1rem;
    font-weight: 700;
}

.selected-code[b-n9q96qsawc] {
    margin-top: 3px;
    color: #6c757d;
    font-size: 0.78rem;
    font-weight: 600;
}

.employee-selected-badge[b-n9q96qsawc] {
    padding: 4px 9px;
    background: #d1e7dd;
    border-radius: 999px;
    color: #0f5132;
    font-size: 0.72rem;
    font-weight: 700;
}


/* =========================================================
   CURRENT WAGE
   ========================================================= */

.current-wage-grid[b-n9q96qsawc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wage-info-box[b-n9q96qsawc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
}

    .wage-info-box + .wage-info-box[b-n9q96qsawc] {
        border-left: 1px solid #e9ecef;
    }

.wage-info-label[b-n9q96qsawc] {
    color: #6c757d;
    font-size: 0.76rem;
}

.wage-info-value[b-n9q96qsawc] {
    color: #212529;
    font-size: 0.90rem;
    font-weight: 700;
}

.wage-amount[b-n9q96qsawc] {
    color: #0d6efd;
    font-size: 1.05rem;
}


/* =========================================================
   NEW WAGE FORM
   ========================================================= */

.wage-form-grid[b-n9q96qsawc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    max-width: 650px;
}

.wage-field[b-n9q96qsawc] {
    min-width: 0;
}

.wage-field-full[b-n9q96qsawc] {
    grid-column: 1 / -1;
}

.wage-field .form-control[b-n9q96qsawc],
.wage-field .form-select[b-n9q96qsawc] {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}


/* =========================================================
   AMOUNT
   ========================================================= */

.amount-input-wrap[b-n9q96qsawc] {
    position: relative;
}

.amount-prefix[b-n9q96qsawc] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    z-index: 2;
    color: #495057;
    font-weight: 600;
}

.wage-amount-input[b-n9q96qsawc] {
    padding-left: 30px;
}


/* =========================================================
   ACTION
   ========================================================= */

.wage-actions[b-n9q96qsawc] {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.update-wage-btn[b-n9q96qsawc] {
    min-width: 150px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .wage-header[b-n9q96qsawc] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .wage-header h1[b-n9q96qsawc] {
            font-size: 1.35rem;
        }

        .wage-header p[b-n9q96qsawc] {
            font-size: 0.84rem;
        }

    .back-btn[b-n9q96qsawc] {
        width: 100%;
        min-height: 44px;
    }


    .wage-section[b-n9q96qsawc] {
        padding: 15px 13px;
    }


    .employee-search-wrap[b-n9q96qsawc],
    .selected-employee-card[b-n9q96qsawc],
    .wage-form-grid[b-n9q96qsawc] {
        max-width: 100%;
    }


    .employee-search-input[b-n9q96qsawc],
    .wage-field .form-control[b-n9q96qsawc],
    .wage-field .form-select[b-n9q96qsawc] {
        min-height: 46px;
        font-size: 16px;
    }


    .employee-search-results[b-n9q96qsawc] {
        max-height: 230px;
    }


    .employee-search-result[b-n9q96qsawc] {
        padding: 11px 10px;
    }


    .current-wage-grid[b-n9q96qsawc] {
        grid-template-columns: 1fr;
    }

    .wage-info-box + .wage-info-box[b-n9q96qsawc] {
        border-left: 0;
        border-top: 1px solid #e9ecef;
    }


    .wage-form-grid[b-n9q96qsawc] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wage-field-full[b-n9q96qsawc] {
        grid-column: auto;
    }


    .wage-actions[b-n9q96qsawc] {
        padding: 13px;
    }

    .update-wage-btn[b-n9q96qsawc] {
        width: 100%;
        min-height: 46px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .wage-section[b-n9q96qsawc] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .selected-employee-header[b-n9q96qsawc] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .employee-search-result[b-n9q96qsawc] {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .wage-actions[b-n9q96qsawc] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/EmployeeWeeklyOffManagement.razor.rz.scp.css */
/* =========================================================
   EMPLOYEE WEEKLY OFF
   ========================================================= */

.weeklyoff-page[b-w4ei9c83od] {
    width: 100%;
    min-width: 0;
}


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

.weeklyoff-header[b-w4ei9c83od] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .weeklyoff-header h1[b-w4ei9c83od] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .weeklyoff-header p[b-w4ei9c83od] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-w4ei9c83od] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.weeklyoff-message[b-w4ei9c83od] {
    margin-bottom: 14px;
}

.weeklyoff-message-area[b-w4ei9c83od] {
    scroll-margin-top: 16px;
}

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

.weeklyoff-card[b-w4ei9c83od] {
    margin-bottom: 16px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}

.weeklyoff-section-title[b-w4ei9c83od] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   EMPLOYEE INFORMATION
   ========================================================= */

.employee-info-grid[b-w4ei9c83od] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.employee-info-item[b-w4ei9c83od] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.info-label[b-w4ei9c83od] {
    color: #6c757d;
    font-size: 0.76rem;
}

.info-value[b-w4ei9c83od] {
    color: #212529;
    font-size: 0.90rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}


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

.status-badge[b-w4ei9c83od] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 64px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-active[b-w4ei9c83od] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-inactive[b-w4ei9c83od] {
    background: #e9ecef;
    color: #6c757d;
}


/* =========================================================
   FORM
   ========================================================= */

.weeklyoff-form-grid[b-w4ei9c83od] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.weeklyoff-field[b-w4ei9c83od] {
    min-width: 0;
}

.form-label[b-w4ei9c83od] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

[b-w4ei9c83od] .form-control,
[b-w4ei9c83od] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}


/* =========================================================
   PAID CHECK
   ========================================================= */

.weeklyoff-paid-field[b-w4ei9c83od] {
    display: flex;
    flex-direction: column;
}

.paid-check[b-w4ei9c83od] {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 7px;
}

    .paid-check .form-check-input[b-w4ei9c83od] {
        width: 18px;
        height: 18px;
        margin: 0;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.weeklyoff-actions[b-w4ei9c83od] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

    .weeklyoff-actions .btn[b-w4ei9c83od] {
        min-height: 42px;
        font-weight: 600;
    }


/* =========================================================
   HISTORY
   ========================================================= */

.history-card[b-w4ei9c83od] {
    padding: 0;
    overflow: hidden;
}

.history-title-row[b-w4ei9c83od] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.history-count[b-w4ei9c83od] {
    color: #6c757d;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.weeklyoff-table[b-w4ei9c83od] {
    vertical-align: middle;
}

    .weeklyoff-table thead th[b-w4ei9c83od] {
        padding: 11px 13px;
        background: #ffffff;
        color: #495057;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .weeklyoff-table tbody td[b-w4ei9c83od] {
        padding: 11px 13px;
        font-size: 0.86rem;
    }


/* =========================================================
   MOBILE HISTORY
   ========================================================= */

.weeklyoff-mobile-history[b-w4ei9c83od] {
    display: none;
}


/* =========================================================
   STATE
   ========================================================= */

.weeklyoff-state-card[b-w4ei9c83od] {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
    text-align: center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .weeklyoff-header[b-w4ei9c83od] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .weeklyoff-header h1[b-w4ei9c83od] {
            font-size: 1.35rem;
        }

        .weeklyoff-header p[b-w4ei9c83od] {
            font-size: 0.84rem;
        }

    .back-btn[b-w4ei9c83od] {
        width: 100%;
        min-height: 44px;
    }


    .weeklyoff-card[b-w4ei9c83od] {
        padding: 14px 12px;
        margin-bottom: 14px;
    }


    .employee-info-grid[b-w4ei9c83od] {
        grid-template-columns: 1fr;
        gap: 8px;
    }


    .weeklyoff-form-grid[b-w4ei9c83od] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    [b-w4ei9c83od] .form-control,
    [b-w4ei9c83od] .form-select {
        min-height: 46px;
        font-size: 16px;
    }


    .paid-check[b-w4ei9c83od] {
        min-height: 46px;
    }


    .weeklyoff-actions[b-w4ei9c83od] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }

        .weeklyoff-actions .btn[b-w4ei9c83od] {
            width: 100%;
            min-height: 46px;
        }


    /* Desktop history off */

    .weeklyoff-table-wrapper[b-w4ei9c83od] {
        display: none;
    }


    /* Mobile history on */

    .weeklyoff-mobile-history[b-w4ei9c83od] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }


    .history-card[b-w4ei9c83od] {
        padding: 0;
    }


    .history-title-row[b-w4ei9c83od] {
        padding: 14px 12px;
    }


    .history-item-card[b-w4ei9c83od] {
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 9px;
    }


    .history-item-header[b-w4ei9c83od] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }


    .history-day[b-w4ei9c83od] {
        color: #212529;
        font-size: 0.95rem;
        font-weight: 700;
    }


    .history-policy[b-w4ei9c83od] {
        margin-top: 3px;
        color: #6c757d;
        font-size: 0.76rem;
        font-weight: 600;
    }


    .history-item-body[b-w4ei9c83od] {
        padding: 9px 12px;
    }


    .history-info-row[b-w4ei9c83od] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed #e9ecef;
    }


        .history-info-row:last-child[b-w4ei9c83od] {
            border-bottom: 0;
        }


    .history-info-label[b-w4ei9c83od] {
        color: #6c757d;
        font-size: 0.78rem;
    }


    .history-info-value[b-w4ei9c83od] {
        color: #212529;
        font-size: 0.84rem;
        font-weight: 600;
        text-align: right;
    }


    .history-item-action[b-w4ei9c83od] {
        padding: 10px 12px;
        border-top: 1px solid #e9ecef;
    }


        .history-item-action .btn[b-w4ei9c83od] {
            width: 100%;
            min-height: 42px;
            font-weight: 600;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .weeklyoff-card[b-w4ei9c83od] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .history-card[b-w4ei9c83od] {
        padding: 0;
    }

    .weeklyoff-mobile-history[b-w4ei9c83od] {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* _content/EmployeeManagement/Components/Pages/Login.razor.rz.scp.css */
/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page[b-38nitrafrx] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg,#f4f7fb,#e9eef7);
}


/* =========================================================
   WRAPPER
   ========================================================= */

.login-wrapper[b-38nitrafrx] {
    width: 100%;
    max-width: 430px;
}


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

.login-card[b-38nitrafrx] {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 10px 35px rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.05);
}


/* =========================================================
   BRAND
   ========================================================= */

.login-brand[b-38nitrafrx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.brand-icon[b-38nitrafrx] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#0d6efd,#0b5ed7);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.login-brand h1[b-38nitrafrx] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #212529;
}

.login-brand p[b-38nitrafrx] {
    margin: 2px 0 0;
    font-size: .82rem;
    color: #6c757d;
}


/* =========================================================
   HEADING
   ========================================================= */

.login-heading[b-38nitrafrx] {
    margin-bottom: 22px;
}

    .login-heading h2[b-38nitrafrx] {
        margin: 0 0 5px;
        font-size: 1.45rem;
        font-weight: 700;
        color: #212529;
    }

    .login-heading p[b-38nitrafrx] {
        margin: 0;
        font-size: .9rem;
        color: #6c757d;
    }


/* =========================================================
   FORM
   ========================================================= */

.login-card .form-label[b-38nitrafrx] {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.login-card .form-control[b-38nitrafrx] {
    min-height: 46px;
    font-size: 1rem;
    border-radius: 8px;
}

    .login-card .form-control:focus[b-38nitrafrx] {
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    }


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

.login-btn[b-38nitrafrx] {
    width: 100%;
    min-height: 46px;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 600;
}


/* =========================================================
   ALERT
   ========================================================= */

.login-alert[b-38nitrafrx] {
    font-size: .9rem;
    border-radius: 8px;
    margin-bottom: 18px;
}


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

.login-footer[b-38nitrafrx] {
    text-align: center;
    margin-top: 22px;
    font-size: .78rem;
    color: #adb5bd;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .login-page[b-38nitrafrx] {
        align-items: flex-start;
        padding: 18px 12px;
    }

    .login-wrapper[b-38nitrafrx] {
        max-width: 100%;
    }

    .login-card[b-38nitrafrx] {
        border-radius: 14px;
        padding: 22px 18px;
    }

    .login-brand[b-38nitrafrx] {
        margin-bottom: 24px;
    }

    .brand-icon[b-38nitrafrx] {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .login-brand h1[b-38nitrafrx] {
        font-size: 1.05rem;
    }

    .login-heading h2[b-38nitrafrx] {
        font-size: 1.3rem;
    }

    .login-card .form-control[b-38nitrafrx] {
        min-height: 48px;
        font-size: 16px;
    }

    .login-btn[b-38nitrafrx] {
        min-height: 48px;
        font-size: 1rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .login-card[b-38nitrafrx] {
        padding: 18px 14px;
    }

    .login-brand h1[b-38nitrafrx] {
        font-size: .98rem;
    }

    .login-brand p[b-38nitrafrx] {
        font-size: .75rem;
    }

    .login-heading h2[b-38nitrafrx] {
        font-size: 1.2rem;
    }
}
/* _content/EmployeeManagement/Components/Pages/RolePermissionManagement.razor.rz.scp.css */
/* =========================================================
   ROLE PERMISSION PAGE
   ========================================================= */

.role-permission-page[b-v0h7qiuiib] {
    width: 100%;
    min-width: 0;
}


/* HEADER */

.role-permission-header[b-v0h7qiuiib] {
    margin-bottom: 18px;
}

    .role-permission-header h1[b-v0h7qiuiib] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .role-permission-header p[b-v0h7qiuiib] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }


/* MESSAGE */

.role-message-area[b-v0h7qiuiib] {
    scroll-margin-top: 16px;
}

.role-message[b-v0h7qiuiib] {
    margin-bottom: 16px;
}


/* LOADING / EMPTY */

.role-state-card[b-v0h7qiuiib],
.role-empty-card[b-v0h7qiuiib] {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    text-align: center;
}

.role-state-card[b-v0h7qiuiib] {
    flex-direction: row;
    gap: 8px;
    color: #6c757d;
}

.role-empty-card[b-v0h7qiuiib] {
    color: #6c757d;
}

.role-empty-title[b-v0h7qiuiib] {
    color: #343a40;
    font-weight: 700;
}

.role-empty-text[b-v0h7qiuiib] {
    font-size: 0.84rem;
}


/* ROLE SELECTOR */

.role-selector-card[b-v0h7qiuiib] {
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.role-selector-content[b-v0h7qiuiib] {
    padding: 16px;
}

.role-selector-field[b-v0h7qiuiib] {
    max-width: 520px;
}

.form-label[b-v0h7qiuiib] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-v0h7qiuiib] {
    color: #dc3545;
}

[b-v0h7qiuiib] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

.field-hint[b-v0h7qiuiib] {
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.75rem;
}


/* SUMMARY */

.permission-summary[b-v0h7qiuiib] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

    .permission-summary > div[b-v0h7qiuiib] {
        display: flex;
        align-items: baseline;
        gap: 5px;
        padding: 7px 11px;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 7px;
    }

.summary-value[b-v0h7qiuiib] {
    color: #212529;
    font-size: 0.90rem;
    font-weight: 700;
}

.summary-label[b-v0h7qiuiib] {
    color: #6c757d;
    font-size: 0.75rem;
}


/* MODULES */

.permission-module-list[b-v0h7qiuiib] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.permission-module-card[b-v0h7qiuiib] {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
}

.permission-module-header[b-v0h7qiuiib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.module-name[b-v0h7qiuiib] {
    min-width: 0;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.module-count[b-v0h7qiuiib] {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.72rem;
    white-space: nowrap;
}

.permission-module-body[b-v0h7qiuiib] {
    padding: 6px 14px;
}


/* PERMISSION ROW */

.permission-row[b-v0h7qiuiib] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 10px 2px;
    border-bottom: 1px solid #edf0f2;
    cursor: pointer;
}

    .permission-row:last-child[b-v0h7qiuiib] {
        border-bottom: 0;
    }

    .permission-row:hover[b-v0h7qiuiib] {
        background: #fafbfc;
    }

.permission-checkbox[b-v0h7qiuiib] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.permission-info[b-v0h7qiuiib] {
    min-width: 0;
}

.permission-name[b-v0h7qiuiib] {
    color: #212529;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.permission-code[b-v0h7qiuiib] {
    margin-top: 2px;
    color: #6c757d;
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}


/* ACTIONS */

.permission-actions[b-v0h7qiuiib] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.save-permission-btn[b-v0h7qiuiib] {
    min-width: 170px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .role-permission-header[b-v0h7qiuiib] {
        margin-bottom: 14px;
    }

        .role-permission-header h1[b-v0h7qiuiib] {
            font-size: 1.35rem;
        }

        .role-permission-header p[b-v0h7qiuiib] {
            font-size: 0.84rem;
        }

    .role-selector-content[b-v0h7qiuiib] {
        padding: 13px;
    }

    .role-selector-field[b-v0h7qiuiib] {
        max-width: none;
    }

    [b-v0h7qiuiib] .form-select {
        min-height: 46px;
        font-size: 16px;
    }

    .permission-summary[b-v0h7qiuiib] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .permission-summary > div[b-v0h7qiuiib] {
            justify-content: center;
            padding: 8px;
        }

    .permission-module-list[b-v0h7qiuiib] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .permission-module-header[b-v0h7qiuiib] {
        padding: 11px 12px;
    }

    .permission-module-body[b-v0h7qiuiib] {
        padding: 5px 12px;
    }

    .permission-row[b-v0h7qiuiib] {
        min-height: 48px;
        padding: 11px 2px;
    }

    .permission-checkbox[b-v0h7qiuiib] {
        width: 20px;
        height: 20px;
    }

    .permission-actions[b-v0h7qiuiib] {
        margin-top: 13px;
        padding: 12px;
    }

    .save-permission-btn[b-v0h7qiuiib] {
        width: 100%;
        min-height: 46px;
    }

    .role-message[b-v0h7qiuiib] {
        padding: 10px 12px;
        font-size: 0.90rem;
    }
}


/* VERY SMALL MOBILE */

@media (max-width: 360px) {

    .permission-summary[b-v0h7qiuiib] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .permission-module-header[b-v0h7qiuiib] {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}
/* _content/EmployeeManagement/Components/Pages/SalaryGeneration.razor.rz.scp.css */
/* =========================================================
   PAYROLL PAGE (MOBILE & WEB EXECUTIVE LAYOUT)
   ========================================================= */

.payroll-page[b-at52nn864m] {
    width: 100%;
    min-width: 0;
}

/* HEADER */
.payroll-header[b-at52nn864m] {
    margin-bottom: 16px;
}

    .payroll-header h1[b-at52nn864m] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 800;
        color: #1e293b;
    }

    .payroll-header p[b-at52nn864m] {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 0.88rem;
    }

/* MESSAGE */
.payroll-message-area[b-at52nn864m] {
    scroll-margin-top: 16px;
}

.payroll-message[b-at52nn864m] {
    margin-bottom: 16px;
    border-radius: 8px;
}

/* CARD */
.payroll-card[b-at52nn864m] {
    margin-bottom: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.section-title[b-at52nn864m] {
    margin-bottom: 12px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* PERIOD ROW */
.period-row[b-at52nn864m] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.period-field[b-at52nn864m] {
    width: 180px;
}

.form-label[b-at52nn864m] {
    margin-bottom: 6px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
}

.form-select[b-at52nn864m],
.form-control[b-at52nn864m] {
    min-height: 42px;
    border-radius: 8px;
    border-color: #cbd5e1;
}

.load-preview-btn[b-at52nn864m] {
    min-height: 42px;
    min-width: 190px;
    border-radius: 8px;
}

/* =========================================================
   SUMMARY GRID (2-COLUMN EQUAL FIT ON MOBILE)
   ========================================================= */

.payroll-summary[b-at52nn864m] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.summary-card[b-at52nn864m] {
    min-width: 0;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.summary-label[b-at52nn864m] {
    display: block;
    margin-bottom: 3px;
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
}

.summary-card strong[b-at52nn864m] {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Soft Color Palette for Summary */
.sc-blue[b-at52nn864m] {
    background: #eff6ff;
    border-left: 4px solid #2563eb !important;
    color: #1e3a8a;
}

    .sc-blue .summary-label[b-at52nn864m] {
        color: #2563eb;
    }

.sc-green[b-at52nn864m] {
    background: #f0fdf4;
    border-left: 4px solid #16a34a !important;
    color: #14532d;
}

    .sc-green .summary-label[b-at52nn864m] {
        color: #16a34a;
    }

.sc-red[b-at52nn864m] {
    background: #fef2f2;
    border-left: 4px solid #dc2626 !important;
    color: #7f1d1d;
}

    .sc-red .summary-label[b-at52nn864m] {
        color: #dc2626;
    }

.sc-purple[b-at52nn864m] {
    background: #f5f3ff;
    border-left: 4px solid #7c3aed !important;
    color: #4c1d95;
}

    .sc-purple .summary-label[b-at52nn864m] {
        color: #7c3aed;
    }

.sc-amber[b-at52nn864m] {
    background: #fffbeeb;
    border-left: 4px solid #d97706 !important;
    color: #78350f;
}

    .sc-amber .summary-label[b-at52nn864m] {
        color: #d97706;
    }

.sc-emerald[b-at52nn864m] {
    background: #ecfdf5;
    border-left: 4px solid #059669 !important;
    color: #064e3b;
}

    .sc-emerald .summary-label[b-at52nn864m] {
        color: #059669;
    }

/* TOOLBAR */
.payroll-toolbar[b-at52nn864m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.payroll-search-wrap[b-at52nn864m] {
    width: min(420px, 100%);
}

.selection-count[b-at52nn864m] {
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.82rem;
}

/* TABLE VIEW */
.payroll-table-wrapper[b-at52nn864m] {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.payroll-table[b-at52nn864m] {
    min-width: 1150px;
    vertical-align: middle;
}

    .payroll-table thead th[b-at52nn864m] {
        padding: 12px 10px;
        background: #f8fafc;
        color: #475569;
        font-size: 0.75rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .payroll-table tbody td[b-at52nn864m] {
        padding: 10px;
        font-size: 0.82rem;
    }

.employee-name[b-at52nn864m] {
    color: #0f172a;
    font-weight: 700;
}

.employee-code[b-at52nn864m] {
    color: #64748b;
    font-size: 0.72rem;
}

.net-cell[b-at52nn864m] {
    color: #059669;
    font-weight: 800;
}

.adjustment-cell[b-at52nn864m] {
    width: 145px;
}

    .adjustment-cell .form-control[b-at52nn864m] {
        min-height: 34px;
        text-align: right;
    }

.status-badge[b-at52nn864m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
}

.status-ready[b-at52nn864m] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-issue[b-at52nn864m] {
    background: #f8d7da;
    color: #842029;
}

.status-generated[b-at52nn864m] {
    background: #e2e3e5;
    color: #41464b;
}

.payroll-mobile-list[b-at52nn864m] {
    display: none;
}

.payroll-empty[b-at52nn864m] {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    text-align: center;
}

/* FORM GRID */
.app-form-grid-3[b-at52nn864m] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.app-summary-grid[b-at52nn864m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.app-summary-card[b-at52nn864m] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    border-radius: 8px;
}

    .app-summary-card.success[b-at52nn864m] {
        background: #ecfdf5;
        border-color: #a7f3d0;
    }

.app-summary-label[b-at52nn864m] {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.app-summary-value[b-at52nn864m] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    margin-top: 2px;
}

/* FLOATING GENERATE BAR */
.generate-bar[b-at52nn864m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.generate-btn[b-at52nn864m] {
    min-width: 220px;
    min-height: 42px;
    border-radius: 8px;
}

/* =========================================================
   MOBILE RESPONSIVE (MAX-WIDTH 767.98PX)
   ========================================================= */

@media (max-width: 767.98px) {

    .payroll-page[b-at52nn864m] {
        padding-bottom: 90px;
    }

    .period-row[b-at52nn864m] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .period-field[b-at52nn864m] {
        width: 100%;
    }

    /* Summary Grid: Always 2 Columns on Mobile */
    .payroll-summary[b-at52nn864m] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .summary-card[b-at52nn864m] {
        padding: 8px 10px;
    }

    .summary-label[b-at52nn864m] {
        font-size: 0.65rem;
    }

    .summary-card strong[b-at52nn864m] {
        font-size: 0.88rem;
    }

    .payroll-toolbar[b-at52nn864m] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .selection-count[b-at52nn864m] {
        text-align: right;
    }

    /* Hide Table, Show Mobile Cards */
    .payroll-table-wrapper[b-at52nn864m] {
        display: none;
    }

    .payroll-mobile-list[b-at52nn864m] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .payroll-mobile-card[b-at52nn864m] {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }

    .mobile-card-header[b-at52nn864m] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 10px;
        background: #f8fafc;
        border-bottom: 1px solid #f1f5f9;
    }

    .mobile-employee[b-at52nn864m] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .mobile-card-body[b-at52nn864m] {
        padding: 10px;
    }

    .mobile-info-row[b-at52nn864m], .mobile-net-row[b-at52nn864m] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px dashed #f1f5f9;
    }

        .mobile-info-row span[b-at52nn864m] {
            color: #64748b;
            font-size: 0.75rem;
        }

        .mobile-info-row strong[b-at52nn864m] {
            font-size: 0.82rem;
        }

    .mobile-input-field[b-at52nn864m] {
        padding: 6px 0;
    }

        .mobile-input-field label[b-at52nn864m] {
            display: block;
            margin-bottom: 4px;
            color: #475569;
            font-size: 0.75rem;
            font-weight: 600;
        }

    .mobile-net-row span[b-at52nn864m], .mobile-net-row strong[b-at52nn864m] {
        color: #059669;
        font-weight: 800;
        font-size: 0.88rem;
    }

    .mobile-card-actions[b-at52nn864m] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px 10px;
        background: #fafafa;
        border-top: 1px solid #f1f5f9;
    }

    .breakdown-grid[b-at52nn864m] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px;
        background: #f8fafc;
    }

        .breakdown-grid > div[b-at52nn864m] {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            padding: 6px 8px;
            border-radius: 6px;
        }

        .breakdown-grid span[b-at52nn864m] {
            font-size: 0.65rem;
            color: #64748b;
            display: block;
        }

        .breakdown-grid strong[b-at52nn864m] {
            font-size: 0.78rem;
            color: #0f172a;
        }

    .app-form-grid-3[b-at52nn864m] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .app-summary-grid[b-at52nn864m] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Fixed Sticky Mobile App Action Bar */
    .generate-bar[b-at52nn864m] {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 1050;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .generate-info[b-at52nn864m] {
        font-size: 0.75rem;
        color: #334155;
    }

    .generate-btn[b-at52nn864m] {
        min-width: 0;
        padding: 8px 14px;
        font-size: 0.80rem;
        border-radius: 8px;
    }

    /* 2-Column Grid for Salary Payment & Posting Form */
    .mobile-inputs-2col[b-at52nn864m] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 10px !important;
        padding: 4px 0 !important;
    }

        .mobile-inputs-2col .mobile-input-field[b-at52nn864m] {
            padding: 0 !important; /* Extra vertical padding remove for compact view */
        }

    /* Salary Payment & Posting 2-column form */
    .mobile-form-2col[b-at52nn864m] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px 8px !important;
    }

    .mobile-field-full[b-at52nn864m] {
        grid-column: span 2 !important;
    }

    /* Labels & Input Box Size Tuning */
    .mobile-inputs-2col label[b-at52nn864m],
    .mobile-form-2col label[b-at52nn864m] {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: #475569 !important;
        margin-bottom: 3px !important;
        white-space: nowrap !important;
        display: block !important;
    }

    .mobile-inputs-2col .form-control[b-at52nn864m],
    .mobile-form-2col .form-control[b-at52nn864m],
    .mobile-form-2col .form-select[b-at52nn864m] {
        min-height: 38px !important;
        font-size: 0.82rem !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
    }
}
/* _content/EmployeeManagement/Components/Pages/UserAdd.razor.rz.scp.css */
/* =========================================================
   ADD USER PAGE
   ========================================================= */

.user-form-page[b-cwwzj0hp6w] {
    width: 100%;
    min-width: 0;
}


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

.user-form-header[b-cwwzj0hp6w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .user-form-header h1[b-cwwzj0hp6w] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .user-form-header p[b-cwwzj0hp6w] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-cwwzj0hp6w] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE / STATE
   ========================================================= */

.user-form-message[b-cwwzj0hp6w] {
    margin-bottom: 16px;
}

.user-message-area[b-cwwzj0hp6w] {
    scroll-margin-top: 16px;
}

.user-form-state[b-cwwzj0hp6w] {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
}


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

.user-form-card[b-cwwzj0hp6w] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECTION
   ========================================================= */

.user-form-section[b-cwwzj0hp6w] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.user-section-title[b-cwwzj0hp6w] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   GRID
   ========================================================= */

.user-form-grid[b-cwwzj0hp6w] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.user-field[b-cwwzj0hp6w] {
    min-width: 0;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-cwwzj0hp6w] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-cwwzj0hp6w] {
    color: #dc3545;
}

[b-cwwzj0hp6w] .form-control,
[b-cwwzj0hp6w] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

[b-cwwzj0hp6w] .validation-message {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.78rem;
}

.field-hint[b-cwwzj0hp6w],
.status-hint[b-cwwzj0hp6w] {
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.75rem;
}


/* =========================================================
   ACTIVE USER
   ========================================================= */

.active-user-box[b-cwwzj0hp6w] {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

    .active-user-box .form-check-input[b-cwwzj0hp6w] {
        width: 19px;
        height: 19px;
        margin: 0;
        flex-shrink: 0;
    }

    .active-user-box .form-check-label[b-cwwzj0hp6w] {
        color: #212529;
        font-size: 0.88rem;
        font-weight: 600;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.user-form-actions[b-cwwzj0hp6w] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.save-user-btn[b-cwwzj0hp6w],
.cancel-user-btn[b-cwwzj0hp6w] {
    min-width: 130px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .user-form-header[b-cwwzj0hp6w] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .user-form-header h1[b-cwwzj0hp6w] {
            font-size: 1.35rem;
        }

        .user-form-header p[b-cwwzj0hp6w] {
            font-size: 0.84rem;
        }

    .back-btn[b-cwwzj0hp6w] {
        width: 100%;
        min-height: 44px;
    }


    .user-form-section[b-cwwzj0hp6w] {
        padding: 15px 13px;
    }


    .user-form-grid[b-cwwzj0hp6w] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    [b-cwwzj0hp6w] .form-control,
    [b-cwwzj0hp6w] .form-select {
        min-height: 46px;
        font-size: 16px;
    }


    .active-user-box[b-cwwzj0hp6w] {
        min-height: 58px;
    }


    .user-form-actions[b-cwwzj0hp6w] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
    }


    .save-user-btn[b-cwwzj0hp6w],
    .cancel-user-btn[b-cwwzj0hp6w] {
        width: 100%;
        min-height: 46px;
    }

    .user-form-message[b-cwwzj0hp6w] {
        padding: 10px 12px;
        font-size: 0.90rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .user-form-section[b-cwwzj0hp6w] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .user-form-actions[b-cwwzj0hp6w] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/UserEdit.razor.rz.scp.css */
/* =========================================================
   EDIT USER PAGE
   ========================================================= */

.user-edit-page[b-b73lm6ojs8] {
    width: 100%;
    min-width: 0;
}


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

.user-edit-header[b-b73lm6ojs8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .user-edit-header h1[b-b73lm6ojs8] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .user-edit-header p[b-b73lm6ojs8] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-b73lm6ojs8] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   CENTRAL MESSAGE
   ========================================================= */

.user-message-area[b-b73lm6ojs8] {
    scroll-margin-top: 16px;
}

.user-form-message[b-b73lm6ojs8] {
    margin-bottom: 16px;
}


/* =========================================================
   LOADING / EMPTY STATE
   ========================================================= */

.user-edit-state[b-b73lm6ojs8] {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
    text-align: center;
}


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

.user-edit-card[b-b73lm6ojs8] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECTION
   ========================================================= */

.user-edit-section[b-b73lm6ojs8] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.user-section-title[b-b73lm6ojs8] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   GRID
   ========================================================= */

.user-form-grid[b-b73lm6ojs8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.user-field[b-b73lm6ojs8] {
    min-width: 0;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-b73lm6ojs8] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-b73lm6ojs8] {
    color: #dc3545;
}

[b-b73lm6ojs8] .form-control,
[b-b73lm6ojs8] .form-select {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

.readonly-field[b-b73lm6ojs8] {
    background: #f1f3f5 !important;
    color: #6c757d;
    cursor: not-allowed;
}

[b-b73lm6ojs8] .validation-message {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.78rem;
}

.field-hint[b-b73lm6ojs8],
.status-hint[b-b73lm6ojs8] {
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.75rem;
}


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

.active-user-box[b-b73lm6ojs8] {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

    .active-user-box .form-check-input[b-b73lm6ojs8] {
        width: 19px;
        height: 19px;
        margin: 0;
        flex-shrink: 0;
    }

    .active-user-box .form-check-label[b-b73lm6ojs8] {
        color: #212529;
        font-size: 0.88rem;
        font-weight: 600;
    }


/* =========================================================
   ACTIONS
   ========================================================= */

.user-edit-actions[b-b73lm6ojs8] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    background: #f8f9fa;
}

.update-user-btn[b-b73lm6ojs8],
.cancel-user-btn[b-b73lm6ojs8] {
    min-width: 130px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .user-edit-header[b-b73lm6ojs8] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .user-edit-header h1[b-b73lm6ojs8] {
            font-size: 1.35rem;
        }

        .user-edit-header p[b-b73lm6ojs8] {
            font-size: 0.84rem;
        }

    .back-btn[b-b73lm6ojs8] {
        width: 100%;
        min-height: 44px;
    }


    .user-edit-section[b-b73lm6ojs8] {
        padding: 15px 13px;
    }


    .user-form-grid[b-b73lm6ojs8] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    [b-b73lm6ojs8] .form-control,
    [b-b73lm6ojs8] .form-select {
        min-height: 46px;
        font-size: 16px;
    }


    .active-user-box[b-b73lm6ojs8] {
        min-height: 58px;
    }


    .user-edit-actions[b-b73lm6ojs8] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
    }


    .update-user-btn[b-b73lm6ojs8],
    .cancel-user-btn[b-b73lm6ojs8] {
        width: 100%;
        min-height: 46px;
    }


    .user-form-message[b-b73lm6ojs8] {
        padding: 10px 12px;
        font-size: 0.90rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .user-edit-section[b-b73lm6ojs8] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .user-edit-actions[b-b73lm6ojs8] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/UserResetPassword.razor.rz.scp.css */
/* =========================================================
   RESET PASSWORD PAGE
   ========================================================= */

.reset-password-page[b-toseiebdct] {
    width: 100%;
    min-width: 0;
}


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

.reset-password-header[b-toseiebdct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

    .reset-password-header h1[b-toseiebdct] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .reset-password-header p[b-toseiebdct] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.back-btn[b-toseiebdct] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.reset-message-area[b-toseiebdct] {
    scroll-margin-top: 16px;
}

.reset-message[b-toseiebdct] {
    margin-bottom: 16px;
}


/* =========================================================
   LOADING / NOT FOUND
   ========================================================= */

.reset-state-card[b-toseiebdct] {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
    text-align: center;
}


/* =========================================================
   MAIN CARD
   ========================================================= */

.reset-password-card[b-toseiebdct] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    overflow: hidden;
}


/* =========================================================
   SECTION
   ========================================================= */

.reset-section[b-toseiebdct] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.reset-section-title[b-toseiebdct] {
    margin-bottom: 14px;
    color: #343a40;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =========================================================
   GRID
   ========================================================= */

.reset-form-grid[b-toseiebdct] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.reset-field[b-toseiebdct] {
    min-width: 0;
}


/* =========================================================
   CONTROLS
   ========================================================= */

.form-label[b-toseiebdct] {
    margin-bottom: 6px;
    color: #495057;
    font-size: 0.84rem;
    font-weight: 600;
}

.required-mark[b-toseiebdct] {
    color: #dc3545;
}

.form-control[b-toseiebdct] {
    min-height: 44px;
    font-size: 1rem;
    border-radius: 7px;
}

.readonly-field[b-toseiebdct] {
    background: #f1f3f5 !important;
    color: #6c757d;
    cursor: not-allowed;
}

.field-hint[b-toseiebdct] {
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.75rem;
}


/* =========================================================
   SECURITY NOTE
   ========================================================= */

.reset-security-note[b-toseiebdct] {
    margin: 16px 20px 0;
    padding: 12px 14px;
    background: #fff8e1;
    border: 1px solid #ffe69c;
    border-radius: 8px;
}

.security-note-title[b-toseiebdct] {
    margin-bottom: 3px;
    color: #664d03;
    font-size: 0.82rem;
    font-weight: 700;
}

.security-note-text[b-toseiebdct] {
    color: #664d03;
    font-size: 0.78rem;
    line-height: 1.45;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.reset-actions[b-toseiebdct] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    margin-top: 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.reset-btn[b-toseiebdct],
.cancel-btn[b-toseiebdct] {
    min-width: 140px;
    min-height: 42px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .reset-password-header[b-toseiebdct] {
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        margin-bottom: 14px;
    }

        .reset-password-header h1[b-toseiebdct] {
            font-size: 1.35rem;
        }

        .reset-password-header p[b-toseiebdct] {
            font-size: 0.84rem;
        }

    .back-btn[b-toseiebdct] {
        width: 100%;
        min-height: 44px;
    }


    .reset-section[b-toseiebdct] {
        padding: 15px 13px;
    }


    .reset-form-grid[b-toseiebdct] {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    .form-control[b-toseiebdct] {
        min-height: 46px;
        font-size: 16px;
    }


    .reset-security-note[b-toseiebdct] {
        margin: 13px 13px 0;
    }


    .reset-actions[b-toseiebdct] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px;
        margin-top: 13px;
    }


    .reset-btn[b-toseiebdct],
    .cancel-btn[b-toseiebdct] {
        width: 100%;
        min-height: 46px;
    }


    .reset-message[b-toseiebdct] {
        padding: 10px 12px;
        font-size: 0.90rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .reset-section[b-toseiebdct] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .reset-security-note[b-toseiebdct] {
        margin-left: 11px;
        margin-right: 11px;
    }

    .reset-actions[b-toseiebdct] {
        padding-left: 11px;
        padding-right: 11px;
    }
}
/* _content/EmployeeManagement/Components/Pages/Users.razor.rz.scp.css */
/* =========================================================
   USER LIST PAGE
   ========================================================= */

.user-page[b-5w4jgnoj3g] {
    width: 100%;
    min-width: 0;
}


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

.user-header[b-5w4jgnoj3g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

    .user-header h1[b-5w4jgnoj3g] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
        color: #212529;
    }

    .user-header p[b-5w4jgnoj3g] {
        margin: 4px 0 0;
        color: #6c757d;
        font-size: 0.88rem;
    }

.add-user-btn[b-5w4jgnoj3g] {
    flex-shrink: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.add-symbol[b-5w4jgnoj3g] {
    font-size: 1.15rem;
    line-height: 1;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.user-message[b-5w4jgnoj3g] {
    margin-bottom: 16px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.user-search-card[b-5w4jgnoj3g] {
    margin-bottom: 16px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.user-search-label[b-5w4jgnoj3g] {
    margin-bottom: 7px;
    color: #495057;
    font-size: 0.80rem;
    font-weight: 700;
}

.user-search-row[b-5w4jgnoj3g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-search-input-wrap[b-5w4jgnoj3g] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.user-search-input[b-5w4jgnoj3g] {
    min-height: 42px;
    padding-right: 42px;
    font-size: 1rem;
    border-radius: 7px;
}

.user-search-clear[b-5w4jgnoj3g] {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
}

    .user-search-clear:hover[b-5w4jgnoj3g] {
        background: #f1f3f5;
        color: #212529;
    }

.user-result-count[b-5w4jgnoj3g] {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.80rem;
    white-space: nowrap;
}


/* =========================================================
   STATE
   ========================================================= */

.user-state-card[b-5w4jgnoj3g] {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    color: #6c757d;
}


/* =========================================================
   DESKTOP TABLE
   ========================================================= */

.user-table-wrapper[b-5w4jgnoj3g] {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    overflow: hidden;
}

.user-table[b-5w4jgnoj3g] {
    vertical-align: middle;
}

    .user-table thead th[b-5w4jgnoj3g] {
        padding: 12px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        color: #495057;
        font-size: 0.80rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .user-table tbody td[b-5w4jgnoj3g] {
        padding: 12px 14px;
        font-size: 0.88rem;
        border-bottom-color: #edf0f2;
    }

    .user-table tbody tr:last-child td[b-5w4jgnoj3g] {
        border-bottom: 0;
    }

    .user-table tbody tr:hover[b-5w4jgnoj3g] {
        background: #fafbfc;
    }

.username-text[b-5w4jgnoj3g],
.fullname-text[b-5w4jgnoj3g] {
    font-weight: 600;
    color: #212529;
}

.role-badge[b-5w4jgnoj3g] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e7f1ff;
    color: #084298;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-badge[b-5w4jgnoj3g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-active[b-5w4jgnoj3g] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-inactive[b-5w4jgnoj3g] {
    background: #e9ecef;
    color: #6c757d;
}

.last-login-cell[b-5w4jgnoj3g] {
    white-space: nowrap;
}

.action-column[b-5w4jgnoj3g] {
    min-width: 210px;
}

.user-actions[b-5w4jgnoj3g] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}


/* =========================================================
   MOBILE LIST
   ========================================================= */

.user-mobile-list[b-5w4jgnoj3g] {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .user-header[b-5w4jgnoj3g] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 14px;
    }

        .user-header h1[b-5w4jgnoj3g] {
            font-size: 1.35rem;
        }

        .user-header p[b-5w4jgnoj3g] {
            font-size: 0.84rem;
        }

    .add-user-btn[b-5w4jgnoj3g] {
        width: 100%;
        min-height: 46px;
        font-size: 0.95rem;
    }


    .user-search-card[b-5w4jgnoj3g] {
        padding: 12px;
        margin-bottom: 14px;
    }

    .user-search-row[b-5w4jgnoj3g] {
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    .user-search-input[b-5w4jgnoj3g] {
        min-height: 46px;
        font-size: 16px;
    }

    .user-search-clear[b-5w4jgnoj3g] {
        right: 6px;
    }

    .user-result-count[b-5w4jgnoj3g] {
        text-align: right;
    }


    /* Desktop table off */

    .user-table-wrapper[b-5w4jgnoj3g] {
        display: none;
    }


    /* Mobile cards on */

    .user-mobile-list[b-5w4jgnoj3g] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .user-card[b-5w4jgnoj3g] {
        width: 100%;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        overflow: hidden;
    }

    .user-card-header[b-5w4jgnoj3g] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }

    .user-card-identity[b-5w4jgnoj3g] {
        min-width: 0;
    }

    .user-card-name[b-5w4jgnoj3g] {
        color: #212529;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .user-card-username[b-5w4jgnoj3g] {
        margin-top: 3px;
        color: #6c757d;
        font-size: 0.78rem;
        font-weight: 600;
    }

    .user-card-body[b-5w4jgnoj3g] {
        padding: 12px 14px;
    }

    .user-info-row[b-5w4jgnoj3g] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border-bottom: 1px dashed #e9ecef;
    }

        .user-info-row:last-child[b-5w4jgnoj3g] {
            border-bottom: 0;
        }

    .user-info-label[b-5w4jgnoj3g] {
        flex-shrink: 0;
        color: #6c757d;
        font-size: 0.80rem;
    }

    .user-info-value[b-5w4jgnoj3g] {
        min-width: 0;
        color: #212529;
        font-size: 0.84rem;
        font-weight: 600;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .user-card-actions[b-5w4jgnoj3g] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 14px;
        border-top: 1px solid #e9ecef;
    }

        .user-card-actions .btn[b-5w4jgnoj3g] {
            min-height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.84rem;
            font-weight: 600;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .user-card-header[b-5w4jgnoj3g],
    .user-card-body[b-5w4jgnoj3g],
    .user-card-actions[b-5w4jgnoj3g] {
        padding-left: 11px;
        padding-right: 11px;
    }

    .user-info-row[b-5w4jgnoj3g] {
        gap: 8px;
    }

    .user-card-actions[b-5w4jgnoj3g] {
        grid-template-columns: 1fr;
    }
}