:root {
    --vghr-ink: #10231c;
    --vghr-green: #0b513d;
    --vghr-green-2: #147258;
    --vghr-gold: #c8a86a;
    --vghr-cream: #f6f4ee;
    --vghr-line: #dfe5e1;
    --vghr-muted: #66756e;
    --vghr-white: #fff;
    --vghr-shadow: 0 18px 55px rgba(16, 35, 28, .09);
}

.vghr-app, .vghr-login-wrap, .vghr-admin {
    color: var(--vghr-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.vghr-app *, .vghr-login-wrap *, .vghr-admin * { box-sizing: border-box; }
.vghr-app a, .vghr-login-wrap a, .vghr-admin a { color: inherit; text-decoration: none; }

.vghr-login-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    min-height: 720px;
    overflow: hidden;
    background: var(--vghr-white);
    border: 1px solid rgba(16, 35, 28, .08);
    border-radius: 24px;
    box-shadow: var(--vghr-shadow);
}

.vghr-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(44px, 7vw, 100px);
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 82% 18%, rgba(200, 168, 106, .28), transparent 28%),
        linear-gradient(145deg, #092f26, #0b513d 65%, #147258);
}

.vghr-login-brand::after {
    position: absolute;
    right: -110px;
    bottom: -170px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 130px rgba(255, 255, 255, .02);
}

.vghr-v {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    place-items: center;
    color: #0b513d;
    background: var(--vghr-gold);
    border-radius: 17px;
    font: 800 29px/1 Georgia, serif;
}

.vghr-login-brand > p:first-of-type {
    margin: 0 0 46px;
    color: #e9dbbf;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
}

.vghr-login-brand h1 {
    max-width: 560px;
    margin: 0;
    color: white;
    font: 500 clamp(48px, 6.2vw, 82px)/.98 Georgia, "Times New Roman", serif;
    letter-spacing: -.045em;
}

.vghr-login-brand h1 em { color: #dec99f; font-weight: 400; }
.vghr-login-copy { max-width: 520px; margin: 32px 0 !important; color: rgba(255, 255, 255, .76); font-size: 17px; line-height: 1.7; }
.vghr-secure { display: flex; flex-wrap: wrap; gap: 12px 26px; color: #eee5d3; font-size: 13px; }

.vghr-login-panel { align-self: center; padding: clamp(42px, 7vw, 90px); }
.vghr-kicker, .vghr-page-head p { margin: 0 0 13px; color: var(--vghr-green-2); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.vghr-login-panel h2 { margin: 0 0 10px; color: var(--vghr-ink); font: 500 clamp(38px, 4vw, 56px)/1.05 Georgia, serif; letter-spacing: -.035em; }
.vghr-login-panel > p:not(.vghr-kicker) { margin: 0 0 36px; color: var(--vghr-muted); line-height: 1.6; }
.vghr-login-panel form p { margin: 0 0 20px; }
.vghr-login-panel label, .vghr-form label, .vghr-filter label { display: grid; gap: 8px; color: #31483f; font-size: 12px; font-weight: 750; letter-spacing: .025em; }

.vghr-login-panel input[type="text"],
.vghr-login-panel input[type="password"],
.vghr-form input:not([type="checkbox"]), .vghr-form select, .vghr-form textarea,
.vghr-filter input, .vghr-leave-admin textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--vghr-ink);
    background: white;
    border: 1px solid #cfdbd5;
    border-radius: 9px;
    outline: 0;
    box-shadow: none;
    font: 500 14px/1.4 inherit;
    transition: border-color .2s, box-shadow .2s;
}

.vghr-login-panel input:focus, .vghr-form input:focus, .vghr-form select:focus, .vghr-form textarea:focus {
    border-color: var(--vghr-green-2);
    box-shadow: 0 0 0 3px rgba(20, 114, 88, .12);
}

.vghr-login-panel .login-submit input, .vghr-primary {
    display: inline-flex;
    min-height: 50px;
    padding: 13px 22px;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--vghr-green);
    border: 0;
    border-radius: 9px;
    box-shadow: 0 8px 22px rgba(11, 81, 61, .18);
    cursor: pointer;
    font: 750 13px/1.2 inherit;
    letter-spacing: .02em;
    transition: transform .18s, background .18s;
}

.vghr-login-panel .login-submit input { width: 100%; }
.vghr-login-panel .login-submit input:hover, .vghr-primary:hover { color: white; background: var(--vghr-green-2); transform: translateY(-1px); }
.vghr-login-panel .login-remember { display: flex; grid: none; align-items: center; gap: 8px; font-weight: 600; }
.vghr-forgot { display: inline-block; margin-top: 5px; color: var(--vghr-green-2) !important; font-size: 13px; font-weight: 700; }

.vghr-app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 790px;
    overflow: hidden;
    background: var(--vghr-cream);
    border: 1px solid #e2e6e3;
    border-radius: 22px;
    box-shadow: var(--vghr-shadow);
}

.vghr-sidebar {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 31px 22px;
    flex-direction: column;
    color: rgba(255, 255, 255, .8);
    background: linear-gradient(180deg, #092f26, #0b513d);
}

.vghr-side-brand { display: flex; margin: 0 10px 39px; align-items: center; gap: 11px; color: white; font-size: 13px; font-weight: 850; letter-spacing: .12em; }
.vghr-side-brand > b { display: grid; width: 39px; height: 39px; place-items: center; color: var(--vghr-green); background: var(--vghr-gold); border-radius: 11px; font: 800 20px/1 Georgia, serif; }
.vghr-side-brand i { color: var(--vghr-gold); font-style: normal; }
.vghr-user-mini { display: flex; margin-bottom: 27px; padding: 15px 11px 21px; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.vghr-user-mini > span { display: grid; width: 41px; height: 41px; flex: 0 0 41px; place-items: center; color: #183f33; background: #dfcfaa; border-radius: 50%; font-size: 12px; font-weight: 850; }
.vghr-user-mini b, .vghr-user-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vghr-user-mini b { max-width: 150px; color: white; font-size: 13px; }
.vghr-user-mini small { max-width: 150px; margin-top: 3px; color: rgba(255, 255, 255, .56); font-size: 10px; }
.vghr-sidebar nav { display: grid; gap: 5px; }
.vghr-sidebar nav a { display: flex; padding: 12px 13px; align-items: center; justify-content: space-between; border-radius: 8px; font-size: 13px; font-weight: 650; }
.vghr-sidebar nav a:hover, .vghr-sidebar nav a.active { color: white; background: rgba(255, 255, 255, .1); }
.vghr-sidebar nav a.active { box-shadow: inset 3px 0 var(--vghr-gold); }
.vghr-sidebar nav a b { color: var(--vghr-gold); font-size: 18px; }
.vghr-admin-link, .vghr-logout { margin-top: auto; padding: 13px; font-size: 11px; font-weight: 750; }
.vghr-admin-link { margin-bottom: 3px; color: #ead9b7 !important; border: 1px solid rgba(200, 168, 106, .36); border-radius: 8px; }
.vghr-admin-link + .vghr-logout { margin-top: 0; }
.vghr-logout { color: rgba(255, 255, 255, .58) !important; }

.vghr-main { min-width: 0; padding: clamp(28px, 4.6vw, 58px); }
.vghr-page-head { display: flex; margin-bottom: 31px; align-items: flex-end; justify-content: space-between; gap: 22px; }
.vghr-page-head h1 { margin: 0; color: var(--vghr-ink); font: 500 clamp(34px, 4vw, 50px)/1.04 Georgia, serif; letter-spacing: -.035em; }
.vghr-live-time { color: var(--vghr-muted); font: 650 13px/1 inherit; }
.vghr-hero-card { display: flex; margin-bottom: 20px; padding: clamp(25px, 4vw, 38px); align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; color: white; background: linear-gradient(125deg, #0a4737, #147258); border-radius: 16px; box-shadow: 0 13px 35px rgba(11, 81, 61, .16); }
.vghr-hero-card h2 { margin: 3px 0 7px; color: white; font: 500 clamp(25px, 3vw, 34px)/1.14 Georgia, serif; }
.vghr-hero-card p:not(.vghr-kicker) { margin: 0; color: rgba(255, 255, 255, .68); font-size: 13px; }
.vghr-hero-card .vghr-kicker { color: #e0cd9f; }
.vghr-hero-card .vghr-primary { color: #173c31; background: var(--vghr-gold); box-shadow: none; white-space: nowrap; }
.vghr-clock-complete { padding: 13px 19px; color: #193f34; background: #e4d1a8; border-radius: 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }

.vghr-stats { display: grid; margin-bottom: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.vghr-stats article, .vghr-admin-stats article { padding: 21px; background: white; border: 1px solid var(--vghr-line); border-radius: 12px; }
.vghr-stats small, .vghr-admin-stats small { display: block; margin-bottom: 16px; color: #76837d; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.vghr-stats b, .vghr-admin-stats b { display: block; overflow: hidden; color: var(--vghr-ink); font: 600 23px/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.vghr-stats span, .vghr-admin-stats span { display: block; margin-top: 7px; color: #7a8982; font-size: 10px; }
.vghr-columns, .vghr-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vghr-card, .vghr-admin-card { min-width: 0; padding: clamp(20px, 3vw, 29px); background: white; border: 1px solid var(--vghr-line); border-radius: 13px; }
.vghr-card-title { display: flex; margin-bottom: 20px; align-items: center; justify-content: space-between; gap: 12px; }
.vghr-card-title h3, .vghr-card > h3, .vghr-admin-card h2, .vghr-admin-card > h3 { margin: 0; color: var(--vghr-ink); font: 600 20px/1.2 Georgia, serif; }
.vghr-card-title span, .vghr-card-title a { color: var(--vghr-green-2); font-size: 10px; font-weight: 800; }
.vghr-news, .vghr-holiday, .vghr-admin-row { display: flex; padding: 15px 0; align-items: flex-start; gap: 13px; border-top: 1px solid #edf0ee; }
.vghr-news > span { width: 7px; height: 7px; margin-top: 6px; flex: 0 0 7px; background: var(--vghr-gold); border-radius: 50%; }
.vghr-news small { color: var(--vghr-green-2); font-size: 9px; font-weight: 800; }
.vghr-news h4, .vghr-holiday h4 { margin: 3px 0; color: var(--vghr-ink); font-size: 13px; }
.vghr-news p, .vghr-holiday p { margin: 0; color: var(--vghr-muted); font-size: 11px; line-height: 1.55; }
.vghr-holiday { align-items: center; }
.vghr-holiday time { display: grid; width: 47px; height: 51px; flex: 0 0 47px; place-content: center; text-align: center; background: #edf5f1; border-radius: 8px; }
.vghr-holiday time b { color: var(--vghr-green); font: 700 17px/1 Georgia, serif; }
.vghr-holiday time small { color: var(--vghr-green-2); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.vghr-muted { color: var(--vghr-muted); font-size: 13px; }

.vghr-form { display: grid; margin-top: 22px; gap: 16px; }
.vghr-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.vghr-form textarea { resize: vertical; }
.vghr-form .vghr-primary { justify-self: start; }
.vghr-check { display: flex !important; grid: none !important; align-items: center; gap: 9px !important; }
.vghr-status { display: inline-flex; padding: 5px 9px; align-items: center; color: #5a625e; background: #edf0ee; border-radius: 99px; font-size: 9px; font-weight: 850; letter-spacing: .03em; }
.vghr-status.approved { color: #1d664e; background: #e6f3ed; }
.vghr-status.pending { color: #866515; background: #faf0d1; }
.vghr-status.rejected { color: #9b3f43; background: #f8e8e8; }

.vghr-table-wrap { width: 100%; overflow-x: auto; }
.vghr-table-wrap table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.vghr-table-wrap th, .vghr-table-wrap td { padding: 14px 12px; text-align: left; border: 0; border-bottom: 1px solid #edf0ee; white-space: nowrap; }
.vghr-table-wrap th { color: #74817b; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.vghr-table-wrap td { color: #344b42; font-size: 12px; }
.vghr-table-wrap a { color: var(--vghr-green-2); font-weight: 750; }
.vghr-profile-list { display: grid; margin: 18px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--vghr-line); }
.vghr-profile-list div { padding: 20px; background: white; }
.vghr-profile-list dt { margin-bottom: 6px; color: #78867f; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.vghr-profile-list dd { margin: 0; color: var(--vghr-ink); font-size: 13px; font-weight: 650; }
.vghr-notice { margin: 0 0 18px; padding: 13px 16px; color: #185a44; background: #e5f3ed; border: 1px solid #c9e2d7; border-radius: 9px; font-size: 12px; font-weight: 700; }
.vghr-notice.error { color: #8e3439; background: #f9e9ea; border-color: #efcfd1; }
.vghr-empty { max-width: 560px; margin: 90px auto; padding: 48px; text-align: center; background: white; border-radius: 15px; box-shadow: var(--vghr-shadow); }

.vghr-leave-item, .vghr-document-list article {
    display: flex;
    padding: 17px 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #edf0ee;
}
.vghr-leave-item small, .vghr-document-list small, .vghr-payslip-grid small { color: var(--vghr-green-2); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.vghr-leave-item h4, .vghr-document-list h4 { margin: 5px 0; color: var(--vghr-ink); font-size: 13px; }
.vghr-leave-item p, .vghr-document-list p { margin: 0; color: var(--vghr-muted); font-size: 10px; }
.vghr-payslip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.vghr-payslip-grid article { padding: 22px; background: #f8faf8; border: 1px solid var(--vghr-line); border-radius: 11px; }
.vghr-doc-icon { display: grid; width: 42px; height: 42px; margin-bottom: 16px; flex: 0 0 42px; place-items: center; color: var(--vghr-green); background: #e5f0eb; border-radius: 9px; font: 800 11px/1 inherit; }
.vghr-payslip-grid h3 { margin: 6px 0; color: var(--vghr-ink); font: 600 19px/1.2 Georgia, serif; }
.vghr-payslip-grid p { margin: 0 0 18px; color: var(--vghr-muted); font-size: 11px; }
.vghr-payslip-grid a, .vghr-document-list a { color: var(--vghr-green-2); font-size: 10px; font-weight: 850; white-space: nowrap; }
.vghr-document-list .vghr-doc-icon { margin: 0; }
.vghr-document-list article > div:nth-child(2) { margin-right: auto; }
.vghr-profile-card { overflow: hidden; background: white; border: 1px solid var(--vghr-line); border-radius: 13px; }
.vghr-profile-hero { display: flex; padding: 31px; align-items: center; gap: 17px; color: white; background: linear-gradient(115deg, #0a4032, #147258); }
.vghr-profile-hero > span { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; color: #163e32; background: #dfcda5; border-radius: 50%; font: 750 17px/1 inherit; }
.vghr-profile-hero h2 { margin: 0 0 5px; color: white; font: 500 27px/1.1 Georgia, serif; }
.vghr-profile-hero p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 11px; }
.vghr-profile-grid { display: grid; padding: 26px 31px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.vghr-profile-grid small, .vghr-profile-grid b { display: block; }
.vghr-profile-grid small { margin-bottom: 7px; color: #7a8881; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.vghr-profile-grid b { color: var(--vghr-ink); font-size: 12px; }
.vghr-profile-note { margin: 0; padding: 15px 31px; color: var(--vghr-muted); background: #f7f8f6; border-top: 1px solid var(--vghr-line); font-size: 10px; }

.vghr-admin { max-width: 1380px; margin: 22px 20px 30px 0; }
.vghr-admin-head { display: flex; padding: 28px 32px; align-items: center; justify-content: space-between; gap: 20px; color: white; background: linear-gradient(120deg, #092f26, #0b513d); border-radius: 14px 14px 0 0; }
.vghr-admin-head h1 { margin: 0; color: white; font: 500 31px/1.1 Georgia, serif; }
.vghr-admin-head p { margin: 6px 0 0; color: rgba(255, 255, 255, .62); font-size: 11px; }
.vghr-admin-head a { color: #f0dfbc; font-size: 12px; font-weight: 750; }
.vghr-admin-tabs { display: flex; padding: 0 19px; overflow-x: auto; background: white; border: 1px solid var(--vghr-line); border-top: 0; }
.vghr-admin-tabs a { padding: 16px 13px 13px; color: #607168; border-bottom: 3px solid transparent; font-size: 11px; font-weight: 750; white-space: nowrap; }
.vghr-admin-tabs a.active { color: var(--vghr-green); border-bottom-color: var(--vghr-gold); }
.vghr-admin-body { padding: 24px; background: #f4f5f3; border-radius: 0 0 14px 14px; }
.vghr-admin-stats { display: grid; margin-bottom: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vghr-admin-row { align-items: center; justify-content: space-between; }
.vghr-admin-row > div { min-width: 0; }
.vghr-admin-row b, .vghr-admin-row span, .vghr-admin-row small { display: block; }
.vghr-admin-row b { color: var(--vghr-ink); font-size: 12px; }
.vghr-admin-row span, .vghr-admin-row small { margin-top: 4px; color: var(--vghr-muted); font-size: 10px; }
.vghr-admin-row > a { color: var(--vghr-green-2); font-size: 11px; font-weight: 800; }
.vghr-filter { display: flex; margin: 0 0 18px; align-items: end; gap: 12px; }
.vghr-filter input { min-height: 38px; padding: 7px 10px; }
.vghr-leave-admin { display: grid; padding: 22px 0; grid-template-columns: minmax(0, 1fr) minmax(210px, .44fr); gap: 25px; border-top: 1px solid var(--vghr-line); }
.vghr-leave-admin h3 { margin: 5px 0; color: var(--vghr-ink); font: 600 18px/1.2 Georgia, serif; }
.vghr-leave-admin p, .vghr-leave-admin blockquote { color: var(--vghr-muted); font-size: 11px; }
.vghr-leave-admin blockquote { margin: 12px 0 0; padding-left: 13px; border-left: 2px solid var(--vghr-gold); }
.vghr-leave-admin form { display: grid; margin-top: 12px; gap: 8px; }
.vghr-leave-admin textarea { min-height: 64px; resize: vertical; }

@media (max-width: 1050px) {
    .vghr-app { grid-template-columns: 210px minmax(0, 1fr); }
    .vghr-sidebar { padding-inline: 15px; }
    .vghr-stats, .vghr-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vghr-login-brand, .vghr-login-panel { padding: 55px; }
}

@media (max-width: 760px) {
    .vghr-login-wrap { grid-template-columns: 1fr; border-radius: 15px; }
    .vghr-login-brand { min-height: 430px; padding: 40px 28px; }
    .vghr-login-panel { padding: 45px 28px; }
    .vghr-app { display: block; border-radius: 0; }
    .vghr-sidebar { padding: 18px; }
    .vghr-side-brand { margin: 0 4px 17px; }
    .vghr-user-mini { margin-bottom: 13px; padding: 10px 4px 15px; }
    .vghr-sidebar nav { display: flex; margin: 0 -4px 12px; padding: 0 4px 6px; overflow-x: auto; }
    .vghr-sidebar nav a { flex: 0 0 auto; padding: 9px 12px; }
    .vghr-sidebar nav a b { display: none; }
    .vghr-sidebar nav a.active { box-shadow: inset 0 -2px var(--vghr-gold); }
    .vghr-admin-link, .vghr-logout { margin: 5px 0 0; padding: 8px 4px; }
    .vghr-main { padding: 28px 18px 40px; }
    .vghr-page-head, .vghr-hero-card { align-items: flex-start; flex-direction: column; }
    .vghr-columns, .vghr-admin-grid { grid-template-columns: 1fr; }
    .vghr-payslip-grid, .vghr-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vghr-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vghr-admin { margin-right: 10px; }
    .vghr-admin-head { padding: 22px; align-items: flex-start; flex-direction: column; }
    .vghr-admin-body { padding: 13px; }
    .vghr-leave-admin { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .vghr-stats, .vghr-admin-stats, .vghr-form-row, .vghr-profile-list, .vghr-payslip-grid, .vghr-profile-grid { grid-template-columns: 1fr; }
    .vghr-main { padding-inline: 13px; }
    .vghr-card, .vghr-admin-card { padding: 18px; }
    .vghr-filter { align-items: stretch; flex-direction: column; }
}