:root{--bg:#f6f8fc;--card:#fff;--ink:#172033;--muted:#6b7280;--line:#e5eaf2;--blue:#1557c0;--blue2:#0f3d91;--danger:#b42318;--ok:#067647;--shadow:0 6px 24px rgba(25,39,70,.07)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}.topbar{position:sticky;top:0;z-index:10;height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 max(18px,calc((100vw - 1280px)/2));box-shadow:0 1px 8px rgba(0,0,0,.03)}.brand{font-weight:800;color:var(--blue2);text-decoration:none;white-space:nowrap}.brand span{font-weight:600;color:#e12c39}.nav-scroll{display:flex;gap:4px;overflow:auto;flex:1}.nav-scroll a{padding:10px 11px;border-radius:9px;color:#39445a;text-decoration:none;white-space:nowrap}.nav-scroll a:hover{background:#eef4ff;color:var(--blue)}.container{max-width:1280px;margin:0 auto;padding:24px 18px 60px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:4px 0 18px}.page-head h1{margin:0 0 4px;font-size:26px}.page-head p,p{color:var(--muted);margin:0}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}.grid{display:grid;gap:14px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stat b{font-size:24px;display:block}.stat span{color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick{display:block;padding:20px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700}.quick:hover{border-color:#a9c7fa;background:#f7faff}.btn{border:1px solid #cbd5e1;background:#fff;color:#24324a;padding:9px 13px;border-radius:9px;cursor:pointer;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.ghost{background:transparent}.btn.danger{color:var(--danger)}.btn.small{padding:6px 9px;font-size:12px}.btn.wide{width:100%}.stack{display:grid;gap:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.span-2{grid-column:1/-1}label{display:grid;gap:6px;font-weight:650;color:#344054}input,select,textarea{width:100%;border:1px solid #cfd7e5;border-radius:9px;padding:10px 11px;background:#fff;color:#172033;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#6ca0ed;box-shadow:0 0 0 3px rgba(21,87,192,.1)}textarea{min-height:80px;resize:vertical}.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}.check input{width:auto}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#667085;background:#fafbfc}.badge,.pill{display:inline-block;padding:5px 8px;border-radius:999px;background:#eef4ff;color:#174ea6;font-size:11px;font-weight:750}.badge.warn{background:#fff4e5;color:#9a6700}.pill{font-size:14px;padding:8px 12px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px}.alert.ok{background:#ecfdf3;color:var(--ok)}.alert.err{background:#fff1f0;color:var(--danger)}.empty{text-align:center;color:var(--muted);padding:40px}.metric-row{display:flex;gap:30px;flex-wrap:wrap}.metric-row span{display:grid}.metric-row small,.list-row small,small{color:var(--muted)}.list{display:grid}.list-row{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}.impact{padding:10px;border-radius:9px;background:#f5f8ff;color:#24509a;font-size:12px}.narrow{max-width:560px}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#eef4ff,#f8fafc 45%)}.login-card{width:min(420px,calc(100vw - 30px));background:#fff;padding:30px;border-radius:20px;border:1px solid var(--line);box-shadow:0 18px 60px rgba(27,49,91,.12)}.login-card h1{margin:12px 0 4px}.login-card>p{margin-bottom:22px}.login-mark{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:900}@media(max-width:900px){.topbar{height:auto;min-height:60px;padding:10px 12px;align-items:center;flex-wrap:wrap}.nav-scroll{order:3;width:100%}.container{padding:16px 12px 50px}.grid.cards,.grid.three,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.two{grid-template-columns:1fr}.page-head{align-items:stretch;flex-direction:column}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}}@media(max-width:520px){.grid.cards,.grid.three,.quick-grid{grid-template-columns:1fr}.card{border-radius:13px;padding:14px}.page-head h1{font-size:22px}.inline input,.inline select{min-width:140px;flex:1}.brand{font-size:15px}.nav-scroll a{padding:8px 9px;font-size:13px}}
.perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.spread{justify-content:space-between;width:100%}@media(max-width:650px){.perm-grid{grid-template-columns:1fr}}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.calendar-weekdays{margin-bottom:8px}.calendar-weekdays b{text-align:center;color:var(--muted);font-size:12px}.calendar-day,.calendar-empty{min-height:128px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:10px;display:grid;align-content:start;gap:7px}.calendar-date{display:flex;justify-content:space-between;color:#475467}.calendar-day strong{font-size:12px}.status-present{border-color:#b7e4ca}.status-half-day{border-color:#f5d78e}.status-absent{border-color:#f2b8b5}.status-off-day{background:#f7f9fc}.status-leave{border-color:#c8b8f7}@media(max-width:700px){.calendar-grid,.calendar-weekdays{min-width:760px}.calendar-grid{overflow:visible}.calendar-weekdays{overflow:visible}main.container:has(.calendar-grid){overflow-x:auto}.calendar-day{min-height:115px}}
/* HRMS mobile/PWA shell */
.top-actions{display:flex;align-items:center;gap:8px}.mobile-menu,.mobile-bottom-nav{display:none}.offline-banner{display:none;position:sticky;top:0;z-index:30;background:#7a2e0e;color:#fff;padding:8px 14px;text-align:center;font-size:12px}.is-offline .offline-banner{display:block}.is-offline .btn.primary,.is-offline button[type=submit]{opacity:.72}.install-btn{white-space:nowrap}
.mobile-menu summary{list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu{position:relative}.mobile-menu-card{position:absolute;right:0;top:44px;width:min(280px,calc(100vw - 24px));padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 46px rgba(16,24,40,.16);z-index:40}.mobile-menu-card a,.mobile-menu-card button{display:block;width:100%;text-align:left;padding:12px;border:0;background:transparent;color:var(--ink);text-decoration:none;border-radius:9px;font:inherit}.mobile-menu-card a:hover,.mobile-menu-card button:hover{background:#f2f6fc}.mobile-menu-card form{margin:0}.menu-install{font-weight:750;color:var(--blue)!important}
@media(max-width:760px){body{padding-bottom:72px}.topbar{height:58px;min-height:58px;padding:8px 12px;flex-wrap:nowrap}.desktop-nav,.desktop-logout{display:none}.mobile-menu{display:block}.top-actions{margin-left:auto}.container{padding:14px 11px 34px}.mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));box-shadow:0 -5px 20px rgba(25,39,70,.06);backdrop-filter:blur(12px)}.mobile-bottom-nav a{display:grid;justify-items:center;gap:1px;padding:5px 3px;text-decoration:none;color:#475467;border-radius:10px}.mobile-bottom-nav a:active{background:#eef4ff;color:var(--blue)}.mobile-bottom-nav span{font-size:19px;line-height:20px;font-weight:800}.mobile-bottom-nav small{font-size:10px;color:inherit}.card{padding:13px;margin-bottom:12px;box-shadow:0 3px 14px rgba(25,39,70,.05)}th,td{padding:10px 11px}.table-wrap{margin-left:-2px;margin-right:-2px}.page-head{margin-bottom:13px}.page-head h1{font-size:21px}.btn{min-height:40px}.btn.small{min-height:34px}.form-grid{gap:11px}.grid{gap:10px}.metric-row{gap:16px}}
@media(max-width:390px){.brand{max-width:175px;overflow:hidden;text-overflow:ellipsis}.install-btn{display:none!important}.mobile-bottom-nav small{font-size:9px}}
.attendance-mobile{display:none}.compact-table{min-width:0}.compact-table th{width:55%;text-transform:none;font-size:13px;letter-spacing:0}
@media(max-width:760px){.attendance-desktop{display:none}.attendance-mobile{display:grid;gap:9px;margin-bottom:12px}.attendance-mobile-row{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;box-shadow:0 3px 14px rgba(25,39,70,.04)}.attendance-mobile-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--line)}.attendance-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding-top:10px}.attendance-mobile-grid span{display:grid;gap:2px}.attendance-mobile-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.04em}.attendance-mobile-grid b{font-size:13px}.compact-table{width:100%;min-width:0}.compact-table th,.compact-table td{padding:9px 8px}}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 0 4px}.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--blue);text-decoration:none;font-weight:700}.pager-btn.disabled{color:#98a2b3;background:#f8fafc}.pager-info{color:var(--muted);font-size:12px}@media(max-width:520px){.pager{justify-content:space-between}.pager-info{font-size:11px}}

/* FINANCE_COMPACT_V1 */
.finance-head{align-items:center}
.finance-balance{min-width:190px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 15px;display:grid;gap:2px;box-shadow:var(--shadow)}
.finance-balance small{font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.finance-balance b{font-size:22px;color:var(--blue2)}

.finance-workspace{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(260px,.75fr);gap:14px;align-items:start}
.finance-entry-card{padding:16px}
.finance-entry-card h2,.finance-history-card h2{margin:0;font-size:18px}
.finance-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

.finance-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 12px}
.finance-form-grid label{font-size:12px;gap:5px}
.finance-form-grid input,.finance-form-grid select,.finance-form-grid textarea{padding:8px 9px;border-radius:8px}
.finance-form-grid textarea{min-height:60px}
.finance-note-field{grid-column:span 2}

.finance-entry-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.finance-rule-note{font-size:11px;color:var(--muted);line-height:1.5;max-width:720px}
.finance-save-btn{min-width:130px}

.finance-side{display:grid;gap:14px}
.finance-tool,.finance-help-card{margin-bottom:0;padding:14px}
.finance-tool summary,.finance-manager-summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.finance-tool summary::-webkit-details-marker,.finance-manager-summary::-webkit-details-marker{display:none}
.finance-tool summary>span:first-child,.finance-manager-summary>span:first-child{display:grid;gap:2px}
.finance-chevron{font-size:18px;color:var(--muted)}
details[open]>.finance-tool summary .finance-chevron,
details[open]>.finance-manager-summary .finance-chevron{transform:rotate(180deg)}
.finance-tool-body{display:grid;gap:11px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.finance-mini-grid{display:grid;grid-template-columns:1fr;gap:10px}
.finance-check{font-size:12px}
.finance-check span{display:grid;gap:2px}

.finance-help-card>b{display:block;margin-bottom:10px}
.finance-rule-list{display:grid;gap:0}
.finance-rule-list span{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.finance-rule-list span:last-child{border-bottom:0;padding-bottom:0}
.finance-rule-list strong{font-size:12px}
.finance-rule-list small{font-size:11px}

.finance-manager{padding:0;overflow:hidden;margin-top:14px}
.finance-manager-summary{padding:14px 16px}
.finance-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.finance-option-row{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.finance-option-row:nth-child(odd){border-right:1px solid var(--line)}
.finance-option-info{display:grid;gap:2px;min-width:0}
.finance-option-info b{font-size:13px}
.finance-option-info small{font-size:10px}
.finance-option-id{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.finance-option-action{display:flex;align-items:center;gap:6px;flex-shrink:0}
.finance-option-action select{width:auto;min-width:92px;padding:6px 7px;font-size:12px}

.finance-history-card{padding:0;overflow:hidden}
.finance-history-card>.finance-section-head{padding:15px 16px 12px;margin:0}
.finance-history-table table{min-width:980px}
.finance-history-table th,.finance-history-table td{padding:9px 10px}
.finance-history-table td{vertical-align:middle}
.finance-history-table td:first-child{display:grid;gap:2px;white-space:nowrap}
.finance-history-table td:first-child small{font-size:10px}
.finance-amount{font-weight:750;white-space:nowrap}
.finance-muted-badge{background:#f2f4f7;color:#667085}
.finance-cancel-form{display:flex;gap:6px;align-items:center}
.finance-cancel-form input{width:130px;padding:6px 8px;font-size:11px}

@media(max-width:1050px){
    .finance-workspace{grid-template-columns:1fr}
    .finance-side{grid-template-columns:1fr 1fr}
    .finance-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
    .finance-head{align-items:stretch}
    .finance-balance{width:100%;min-width:0}
    .finance-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .finance-note-field{grid-column:1/-1}
    .finance-entry-footer{align-items:stretch;flex-direction:column}
    .finance-save-btn{width:100%}
    .finance-side{grid-template-columns:1fr}
    .finance-option-grid{grid-template-columns:1fr}
    .finance-option-row:nth-child(odd){border-right:0}
}

@media(max-width:480px){
    .finance-form-grid{grid-template-columns:1fr}
    .finance-note-field{grid-column:auto}
    .finance-option-row{align-items:stretch;flex-direction:column}
    .finance-option-action{width:100%}
    .finance-option-action select{flex:1}
}


/* FINANCE_CANCEL_COMPACT_V1 */
.finance-cancel{
    position:relative;
    display:inline-block;
}

.finance-cancel>summary{
    list-style:none;
    user-select:none;
}

.finance-cancel>summary::-webkit-details-marker{
    display:none;
}

.finance-cancel-popover{
    position:absolute;
    z-index:8;
    right:0;
    top:calc(100% + 6px);
    width:230px;
    padding:9px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 10px 30px rgba(25,39,70,.14);
}

.finance-cancel-popover input{
    min-width:0;
    padding:7px 8px;
    font-size:11px;
}

@media(max-width:760px){
    .finance-cancel-popover{
        position:fixed;
        left:12px;
        right:12px;
        bottom:82px;
        top:auto;
        width:auto;
        grid-template-columns:1fr;
        padding:12px;
    }
}



/* =========================================================
   HRMS_GLOBAL_STAFF_COMBOBOX_V1
========================================================= */

.hrms-global-staff-picker{
    position:relative;
    width:100%;
    min-width:220px;
}

.inline .hrms-global-staff-picker{
    flex:1 1 280px;
    min-width:240px;
}

.hrms-global-staff-input{
    width:100%;
    box-sizing:border-box;
}

.hrms-global-staff-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;

    z-index:15000;

    max-height:320px;
    overflow-y:auto;

    padding:6px;

    background:#fff;

    border:1px solid #dbe3ef;
    border-radius:12px;

    box-shadow:
        0 20px 50px rgba(15,23,42,.16),
        0 5px 15px rgba(15,23,42,.08);
}

.hrms-global-staff-option{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    width:100%;

    margin:0;
    padding:10px 12px;

    border:0;
    border-radius:8px;

    background:#fff;
    color:#111827;

    text-align:left;
    cursor:pointer;
}

.hrms-global-staff-option:hover,
.hrms-global-staff-option.is-active{
    background:#eff6ff;
}

.hrms-global-staff-option b{
    font-size:13px;
    line-height:1.35;
}

.hrms-global-staff-option small{
    display:block;

    margin-top:2px;

    color:#64748b;
    font-size:11px;
}

.hrms-global-staff-empty{
    padding:14px;

    color:#64748b;

    font-size:12px;
    text-align:center;
}

.hrms-staff-error{
    display:block;
    margin-top:5px;
    color:#b91c1c;
}

@media(max-width:700px){

    .inline .hrms-global-staff-picker{
        flex:1 1 100%;
        min-width:100%;
    }

    .hrms-global-staff-menu{
        max-height:260px;
    }
}

/* HRMS_DATE_DMY_STAFF_SEARCH_V1 */

/*
 * Staff filtering:
 * hidden results must stay hidden even when an older component
 * stylesheet defines display:flex.
 */
[data-staff-option][hidden]{
    display:none !important;
}

[data-staff-empty][hidden]{
    display:none !important;
}


/*
 * Global DD/MM/YYYY date field.
 *
 * The original ISO date input remains in the form so Laravel/backend
 * continues receiving YYYY-MM-DD.
 */
.hrms-date-dmy{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
}

.hrms-date-dmy-display{
    width:100%;
    padding-right:42px !important;
}

.hrms-date-dmy-picker{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:8px;
    background:transparent;

    cursor:pointer;
    font-size:17px;
    line-height:1;
}

.hrms-date-dmy-picker:hover{
    background:#f1f5f9;
}

/*
 * Keep the real date control available to showPicker()
 * without visually exposing YYYY-MM-DD.
 */
.hrms-date-dmy-native{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    right:0 !important;
    bottom:0 !important;

    opacity:0 !important;
    pointer-events:none !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
}


/* HRMS_DATE_DMY_FALLBACK_V4 */

.hrms-date-v4{
    position:relative;
    display:block;
    width:100%;
}

.hrms-date-v4-display{
    width:100% !important;
    padding-right:42px !important;
}

.hrms-date-v4-button{
    position:absolute;

    right:6px;
    top:50%;

    transform:translateY(-50%);

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0 !important;
    border-radius:7px;

    padding:0 !important;
    margin:0 !important;

    background:transparent;

    cursor:pointer;
}

.hrms-date-v4-button:hover{
    background:#f1f5f9;
}

.hrms-date-v4-native{
    position:absolute !important;

    right:3px !important;
    bottom:2px !important;

    width:2px !important;
    height:2px !important;

    min-width:0 !important;
    min-height:0 !important;

    opacity:0 !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;

    pointer-events:none !important;
}