/* HRPA: light surfaces, generous touch targets and compact work areas. */
:root{--forest:#123e38;--green:#16715a;--green-light:#e5f6eb;--leaf:#b9edaf;--ink:#203b37;--muted:#60746f;--line:#dce7e2;--canvas:#f5f8f7;--radius:20px;--shadow:0 8px 30px #244e3910}
body{background:var(--canvas);font-family:Inter,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
button,input,select,textarea{font:inherit}h1{font-size:clamp(26px,2.5vw,36px);font-weight:650;letter-spacing:-1.1px}h2{letter-spacing:-.4px}a,button,input,select,textarea{transition:background-color .16s,box-shadow .16s,border-color .16s}
:focus-visible{outline:3px solid #389b81;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5}
.app-shell{grid-template-columns:232px minmax(0,1fr)}
.sidebar{background:#fff;border-right:1px solid #e4ece7;padding:29px 16px 20px}
.brand{gap:11px;letter-spacing:-.3px}.brand-mark{width:44px;height:44px;min-width:44px;border-radius:13px;background:none;box-shadow:0 4px 10px #123e3815}.brand-mark img{display:block;width:100%;height:100%}.brand small{font-size:11px;letter-spacing:.2px;color:#647c74}
.nav-caption{color:#74877e;letter-spacing:1.7px;font-size:10px;margin:32px 12px 13px}.nav-item{border-radius:12px;margin:4px 0;padding:11px 12px;color:#526c63;gap:12px;font-weight:500}.nav-item:hover{background:#f1f7f3;color:#123e38}.nav-item.active{color:#123e38;background:#dbf3e1;box-shadow:inset 3px 0 #248063;font-weight:650}.nav-symbol{font-family:"Segoe UI Symbol",sans-serif;font-size:20px;line-height:1;width:23px;color:inherit}.workspace-note{font-size:10px;color:#657b71}.export-link{color:#355c4e}
/* Keep header popovers above page cards and avoid capturing mobile fixed positioning. */
.topbar{position:relative;z-index:30;height:76px;padding:0 32px;background:#ffffffd9;border-bottom:1px solid #e4ece7}.topbar-company{color:#43695b;font-size:11px;letter-spacing:2px}.topbar-company span{color:#6d837b}.account-area{gap:14px}.account-area select{border-radius:10px;background:#f6f9f7}.notification-bell{border-radius:13px;background:#f0f7f3;color:var(--forest)}
.main-content{padding:30px 32px 36px;max-width:1600px}.page-heading{margin-bottom:24px;align-items:center}.page-heading p{margin-top:6px;color:var(--muted)}.eyebrow{color:#3c8067;font-size:10px;letter-spacing:1.6px}.section-space{margin-top:24px}
.button{border-radius:12px;padding:10px 17px;font-weight:600;min-height:42px}.button-primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 10px #16715a20}.button-primary:hover{background:#105a47;border-color:#105a47;box-shadow:0 6px 14px #16715a30}.button-secondary{background:#fff;border-color:#ceded4;color:#264f40}.button-quiet{background:transparent;color:#526b61}.button-small{min-height:36px;padding:7px 12px}.text-link{color:#16715a;font-weight:600}
.panel{border:1px solid #e4ece7;border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.panel-heading{padding:19px 23px;border-bottom:1px solid #edf2ee}.panel-heading h2{font-size:17px}.panel-heading p{font-size:12px}.detail-section{padding:23px}.notice{border-radius:14px}.empty-state{padding:32px 22px}.form-panel,.request-create-page{max-width:880px}
.stats-grid{gap:16px;margin-bottom:16px}.stat-card{position:relative;padding:19px 22px;border:0;border-radius:20px;box-shadow:none;min-height:0;overflow:hidden;background:#e2f5e8;color:#244e3b}.stat-card:nth-child(2){background:#e9efff;color:#344978}.stat-card:nth-child(3){background:#fff0e3;color:#795031}.stat-card:after{content:"";position:absolute;right:-17px;bottom:-34px;width:125px;height:125px;border:23px solid #ffffff50;border-radius:50%;pointer-events:none}.stat-card strong{font-size:36px;line-height:1.2;margin:8px 0;font-weight:600;letter-spacing:-1px}.stat-label{font-weight:600;color:inherit}.stat-meta{color:inherit;opacity:.83;font-size:12px}.stat-card:hover{box-shadow:0 7px 20px #244e3912}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}.action-grid:empty{display:none}.approval-queue-card{margin:0;padding:15px 18px;border:1px solid #e4ece7;border-radius:16px;background:#fff;box-shadow:0 3px 14px #244e3908;gap:12px}.approval-queue-card p{font-size:12px;margin:3px 0 0;color:#61756b}.approval-queue-card strong{font-size:14px}.approval-queue-card:hover{border-color:#acd5bd;background:#fafffb}.approval-queue-card .count-pill{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:32px;height:32px;padding:0 8px;margin:0;line-height:1;font-variant-numeric:tabular-nums;color:#28674c;background:#e7f5e9}.shortening-queue-card .count-pill{background:#fff0e3;color:#775137}
.balance-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.balance-card{border:1px solid #e0eae3;border-radius:18px;padding:19px;background:#fff;box-shadow:0 5px 18px #244e3908}.balance-card:first-child{background:linear-gradient(145deg,#f3fcef,#e7f5e8);border-color:#d1e8cc}.balance-card h3{font-size:14px;color:#315e49}.balance-value{color:#214d37;font-size:29px;line-height:1.2;margin:14px 0 8px;letter-spacing:-.7px}.balance-caption,.balance-origin{color:#5e7569;font-size:12px}.balance-calculation{margin-top:14px;padding-top:10px;border-top:1px solid #e3ece5}.balance-calculation summary{font-size:11px;color:#557361}.balance-breakdown{font-size:12px}
.quick-links{gap:16px}.quick-links>a{border-radius:17px;background:#fff;border:1px solid #e4ece7;padding:18px 22px;box-shadow:0 3px 14px #244e3908}.quick-links>a>span:first-child{background:#e9f5ee;color:#307258;border-radius:12px;width:40px;height:40px;display:grid;place-items:center}.quick-links>a:nth-child(2)>span:first-child{background:#edf0ff;color:#61689b}
.data-table th{background:#f8faf9;color:#698176;font-size:10px;letter-spacing:.8px;border-bottom:1px solid #e5eee7;padding:12px 20px;font-weight:600}.data-table td{padding:14px 20px;border-bottom:1px solid #edf3ee}.data-table tbody tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#f5faf7}.data-table .employee-avatar{box-shadow:0 2px 6px #244e3910}.status-badge,.badge{border-radius:8px;padding:4px 9px;font-weight:500}.status-approved{background:#e1f4e6;color:#24633c}.status-pending{background:#fff1d6;color:#826025}.status-rejected{background:#ffebe9;color:#a1453b}
.filters,.report-filters,.calendar-options{gap:12px;padding:16px 20px;background:#fff}.filters input,.filters select,.report-filters input,.report-filters select{min-height:42px}.field{min-width:0}.field label,.django-form label{color:#405f51;font-size:12px;font-weight:600;margin-bottom:7px}.field input,.field select,.field textarea,.django-form input:not([type=checkbox]):not([type=hidden]),.django-form select,.django-form textarea{border:1px solid #d7e3da;border-radius:12px;background:#fbfdfb;color:#203b37;padding:11px 13px;min-height:44px;box-shadow:inset 0 1px 2px #244e3904}.field input:focus,.field select:focus,.field textarea:focus,.django-form input:focus,.django-form select:focus,.django-form textarea:focus{border-color:#3b9d78;box-shadow:0 0 0 3px #dff3e8;outline:none}.django-form textarea{min-height:76px;resize:vertical}.django-form input[type=checkbox]{accent-color:var(--green)}
.profile-tabs{gap:6px;border-bottom:0;padding:6px;background:#edf3ef;border-radius:14px;width:fit-content;margin:20px 0}.profile-tab{border:0;border-radius:10px;padding:9px 17px;color:#526e60}.profile-tab.active{background:#fff;color:#166146;box-shadow:0 2px 8px #264f4014}.profile-drive{max-width:680px}.profile-drive .detail-section{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}.profile-drive .detail-section>p{margin:0}.resource-item{padding:18px 22px}.form-actions{gap:9px;padding-top:18px}
.calendar-toolbar{padding:18px 22px;gap:12px}.calendar-title{font-size:21px}.calendar-event,.timeline-bar{border-radius:7px}.calendar-table th{background:#f7faf8}.timeline-name{background:#fff}.calendar-options label{color:#456653}.calendar-options input[type=checkbox]{accent-color:var(--green)}.segmented-control{background:#eef4f0;border:0;padding:4px;border-radius:12px}.segmented-control a,.segmented-control button{border-radius:9px}
dialog::backdrop{background:#19382e55;backdrop-filter:blur(5px)}.request-create-dialog,.request-reject-dialog,.request-confirm-dialog{border:1px solid #e3ece4;border-radius:24px;box-shadow:0 25px 90px #123e3833}.request-create-dialog{width:min(660px,calc(100vw - 24px));padding:24px;max-height:calc(100dvh - 24px)}.request-create-header{margin-bottom:19px}.request-create-header h2{font-size:23px;letter-spacing:-.6px}.request-create-grid{gap:13px 16px}.request-create-privacy{font-size:11px;margin:11px 0}.request-create-form textarea{height:76px;min-height:64px}.request-preview{background:#f0f8f2;border:1px solid #dceade;border-radius:15px;padding:14px}.request-preview-state:empty{display:none}.request-preview .small,.request-preview li{font-size:12px}.request-create-actions{position:sticky;bottom:-24px;background:#fff;z-index:2;padding:15px 0 1px;margin-top:15px;box-shadow:0 -7px 15px #ffffffd9}.request-create-dialog-close{border:0;background:#f0f5f1;border-radius:50%;width:36px;height:36px;color:#4b685a}
.login-story{background:linear-gradient(145deg,#123e38,#24785a);color:#fff}.login-intro h1{letter-spacing:-2px}.login-intro h1 span{color:#c8efb7}.login-story .brand small{color:#c0ded0}.login-form-side{background:#f5f9f5}.login-card{max-width:410px}.login-card h2{font-size:30px}.login-card input{border-radius:12px}.login-body .brand-mark{width:52px;height:52px}
/* The native fields remain editable and retain browser/server validation. */
input.hr-picker-input{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b7356' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='16' rx='4'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18'/%3E%3C/svg%3E")!important;background-position:right 12px center!important;background-repeat:no-repeat!important;padding-right:40px!important;min-width:0}
input.hr-picker-input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232b7356' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")!important}input.hr-picker-input::-webkit-calendar-picker-indicator{display:none}
.hr-picker{padding:22px;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto;border:1px solid #dce9df;border-radius:25px;box-shadow:0 25px 90px #123e3840;color:var(--ink);background:#fff}.hr-picker::backdrop{background:#173c2c44;backdrop-filter:blur(4px)}.hr-picker button{font:inherit;cursor:pointer}.hr-picker button:disabled{cursor:not-allowed;opacity:.3}.hr-picker-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.hr-picker-head h2{font-size:15px;margin:0;line-height:1.4}.hr-picker-close{width:38px;height:38px;flex-shrink:0;border:0;border-radius:50%;background:#f0f5f1;color:#406550;font-size:22px!important}.hr-picker-hero{background:#e8f6eb;color:#1a6748;border-radius:16px;padding:16px;margin-bottom:17px;font-size:22px;font-weight:600;letter-spacing:-.4px}.hr-picker-nav{display:flex;align-items:center;gap:7px;margin-bottom:13px}.hr-picker-nav button{border:0;border-radius:12px;background:#f0f5f1;color:#345f49;width:42px;height:42px;font-size:24px}.hr-picker-nav select,.hr-picker-nav input{border:0;background:#f5f8f5;border-radius:10px;padding:9px 7px;height:42px;color:#244f37;font-weight:600;min-width:0}.hr-picker-nav select{flex:1;width:120px}.hr-picker-nav input{width:66px}.hr-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.hr-picker-weekday{text-align:center;font-size:11px;color:#6c8274;padding:5px 0 10px}.hr-picker-day{height:42px;border:0;border-radius:12px;background:transparent;color:#2e4d3b;font-weight:500}.hr-picker-day:hover{background:#e8f4eb}.hr-picker-day.is-weekend{color:#8e6258}.hr-picker-day.is-today{box-shadow:inset 0 0 0 1.5px #81bf96}.hr-picker-day[aria-pressed=true]{background:#22734f;color:#fff;box-shadow:0 4px 9px #22734f22}.hr-picker-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;border-top:1px solid #e8eee9;padding-top:14px}.hr-picker-foot button{border:0;border-radius:11px;padding:10px 12px;min-height:42px;color:#3a654d;background:#edf5ef;font-weight:600;font-size:13px}.hr-picker-foot button:last-child{background:#22734f;color:#fff}
.hr-time-preview{text-align:center;font-size:38px;letter-spacing:1px;font-variant-numeric:tabular-nums}.hr-time-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hr-time-label{font-size:12px;color:#5b7966;text-align:center;margin-bottom:8px}.hr-time-list{height:218px;overflow:auto;overscroll-behavior:contain;border-radius:15px;border:1px solid #e1ece3;background:#f8fbf8;scrollbar-width:thin;scrollbar-color:#bbd6c4 transparent;scroll-padding:85px}.hr-time-list button{display:block;width:calc(100% - 12px);margin:4px 6px;border:0;border-radius:11px;height:43px;background:transparent;color:#52745e;font-size:21px;font-variant-numeric:tabular-nums}.hr-time-list button:hover{background:#e6f2e8}.hr-time-list button[aria-pressed=true]{background:#d9efdf;color:#1f6540;font-weight:700}.hr-time-error{font-size:12px;color:#9e4336;margin:10px 0 0}
@media(min-width:1100px){.balance-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.balance-value{font-size:27px}.balance-card{padding:18px 15px}}
@media(max-width:1050px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.main-content{padding:25px 22px}.topbar{padding:0 22px}.account-area{gap:9px}.stat-card{padding:17px}.balance-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}.action-grid{gap:12px}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:static;width:auto;height:auto;padding:14px 16px 8px}.brand{font-size:15px}.brand-mark{width:36px;height:36px;min-width:36px}.sidebar .nav-caption,.sidebar .sidebar-bottom{display:none}.nav-list{display:flex;overflow:auto;gap:5px;padding:8px 0 0}.nav-item{flex:0 0 auto;padding:10px;font-size:12px;white-space:nowrap;margin:0}.nav-item.active{box-shadow:none}.nav-symbol{font-size:17px;width:18px}.topbar{height:auto;min-height:62px;padding:10px 16px;flex-wrap:wrap;gap:9px}.topbar-company{display:none}.account-area{width:100%;gap:8px;justify-content:flex-end;flex-wrap:wrap}.header-request-create{margin-right:auto}.main-content{padding:22px 16px}.page-heading{gap:12px;align-items:flex-start}.page-heading h1{font-size:28px}.page-heading p{font-size:12px}.page-heading>.button{padding:9px 12px;white-space:normal;text-align:center}.stats-grid{gap:9px}.stat-card{padding:15px 12px}.stat-label{font-size:11px}.stat-card strong{font-size:29px}.stat-meta{font-size:10px}.action-grid{grid-template-columns:1fr 1fr;gap:9px}.approval-queue-card{padding:13px;flex-wrap:wrap;align-items:center;gap:9px}.approval-queue-card>div{flex:1 0 100%}.approval-queue-card strong{font-size:12px}.approval-queue-card p{font-size:11px}.approval-queue-card>span:last-child{margin-left:auto}.balance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.balance-card{padding:17px 14px}.balance-card:last-child:nth-child(odd){grid-column:auto}.panel-heading{padding:17px}.data-table td,.data-table th{padding:12px 16px}.quick-links{grid-template-columns:1fr 1fr;gap:9px}.quick-links>a{padding:14px;gap:10px}.quick-links>a>span:first-child{display:none}.quick-links strong{font-size:12px}.quick-links small{font-size:10px}.request-create-dialog{padding:19px}.request-create-actions{bottom:-19px;flex-wrap:wrap}.request-create-actions .button{flex:1 1 auto;justify-content:center;font-size:12px}.request-create-grid{gap:12px}.profile-tabs{width:auto}.profile-tab{padding:9px 12px}.filters,.report-filters{padding:14px;gap:10px}.field input,.field select,.django-form input,.django-form select,.django-form textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

svg.nav-symbol{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body:has(dialog[open]){overflow:hidden}
@media(max-width:480px){.header-request-create{font-size:0!important;width:38px;padding:8px;min-height:38px;gap:0}.header-request-create span{font-size:20px;line-height:1}.account-area>.account-name{margin:0;min-width:0}.account-area .button-small{padding:7px 8px}.account-area{gap:7px}.nav-list{scrollbar-width:none}.nav-list::-webkit-scrollbar{display:none}}

/* Stronger colour accents, keeping work surfaces light. */
:root{--green:#087c65;--green-light:#d9f6e4;--muted:#536c66;--canvas:#f6f9f8}
.main-content{background:radial-gradient(ellipse at 95% 0,#e7e4ff66,transparent 43%),radial-gradient(ellipse at 0 0,#daf4e866,transparent 40%)}
.nav-item.active{background:#c9f3d8;color:#11583f;box-shadow:inset 4px 0 #118660}.nav-item:nth-child(3n+2):not(.active) .nav-symbol{color:#7054a4}.nav-item:nth-child(3n):not(.active) .nav-symbol{color:#297e9d}
.button-primary{background:#087c65;border-color:#087c65;box-shadow:0 5px 13px #087c6529}.button-primary:hover{background:#06624f;border-color:#06624f}.notification-bell{background:#e0f6ea;color:#176d4c}
.stat-card{background:#16846e;color:#fff}.stat-card:nth-child(2){background:#e2d7ff;color:#483776}.stat-card:nth-child(3){background:#ffdbb6;color:#774a24}.stat-card:after{border-color:#ffffff30}.stat-card:first-child .stat-label,.stat-card:first-child strong,.stat-card:first-child .stat-meta{color:#fff}.stat-card:first-child .stat-meta{opacity:.9}
.approval-queue-card{border-left:4px solid #8b6bce}.shortening-queue-card{border-left-color:#e6a261}.approval-queue-card .count-pill{background:#eee4ff;color:#64449a}.shortening-queue-card .count-pill{background:#ffe6cb;color:#8b5428}
.balance-card:first-child{background:linear-gradient(140deg,#daf7ba,#eefbe5);border-color:#c7e8a5}.balance-card:nth-child(2){background:#eee7ff;border-color:#e2d7f7}.balance-card:nth-child(3){background:#e0f2ff;border-color:#d0e7f5}.balance-card:nth-child(4){background:#fff0dc;border-color:#f4e1c6}.balance-card:nth-child(5){background:#ffe9ec;border-color:#f5dce2}
.balance-card:nth-child(2) h3{color:#654d88}.balance-card:nth-child(3) h3{color:#316781}.balance-card:nth-child(4) h3{color:#89612d}.balance-card:nth-child(5) h3{color:#8d5364}.balance-card:nth-child(2) .balance-dot{background:#9273cb}.balance-card:nth-child(3) .balance-dot{background:#5a9abd}.balance-card:nth-child(4) .balance-dot{background:#d7a35c}.balance-card:nth-child(5) .balance-dot{background:#d0869c}.balance-calculation{border-color:#345b4220}
.quick-links>a:first-child{background:#e6f7ed;border-color:#d4ecdf}.quick-links>a:nth-child(2){background:#eef0ff;border-color:#dfe3f8}.quick-links>a>span:first-child{background:#c8ecd7}.quick-links>a:nth-child(2)>span:first-child{background:#dfe1fb}
.panel-heading{background:linear-gradient(105deg,#f0f8f3,#fff 65%)}.profile-tab.active{background:#d4f0e0;color:#126347}.hr-picker-hero{background:linear-gradient(120deg,#daf5df,#eef8cc)}.hr-time-preview{background:linear-gradient(120deg,#e6e2ff,#e0f2fa);color:#415385}.hr-time-list button[aria-pressed=true]{background:#dcd5fa;color:#56417d}.calendar-options{background:#f0f8f3}.calendar-toolbar{background:linear-gradient(110deg,#f4f0ff,#fff 60%)}

/* Balance details float over the next section without changing card height. */
.balance-card:has(.balance-popover[open]){position:relative;z-index:20}
.balance-popover{position:relative}
.balance-popover-panel{position:absolute;top:calc(100% + 12px);left:-16px;width:calc(100% + 32px);min-width:min(300px,calc(100vw - 32px));box-sizing:border-box;max-height:min(440px,60dvh);overflow:auto;overscroll-behavior:contain;padding:20px;background:#fff;border:1px solid #dce8e0;border-radius:18px;box-shadow:0 16px 48px #193e3829;color:var(--ink)}
.balance-popover-panel>.balance-breakdown{margin-top:0;padding-top:0;border-top:0}
.balance-popover-panel .balance-breakdown{font-size:12px;gap:9px}
.balance-popover-panel .balance-origin{font-size:12px}
.balance-popover-panel .balance-breakdown dt{color:#63796b}
.balance-popover-panel .balance-breakdown dd{font-variant-numeric:tabular-nums;color:#315e49}
.balance-popover-panel .balance-calculation>.balance-origin{margin-top:0}
@media print{.balance-popover-panel{position:static;width:auto;min-width:0;max-height:none;overflow:visible;box-shadow:none}}