/* NEXAR UX 5.0 / Stage 11 — Human Resources complete visual layer.
   Visual enhancement only: contract/leave/attendance/request logic, 21–20 periods,
   real Supabase data, Excel preview and A4 print actions remain unchanged. */
.nx4-workspace.workspace--hr{--nx5-hr-brand:#008FCB}
.nx4-workspace .nx4-hr-dashboard,.nx4-workspace .nx4-hr-profile,.nx4-workspace .nx4-hr-operations,.nx4-workspace .nx4-hr-exchange{min-width:0}
.nx4-workspace .nx4-hr-hero,.nx4-workspace .hr-profile-hero,.nx4-workspace .nx4-hr-op-hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid #8BC6E23D;border-radius:18px;background:radial-gradient(ellipse 58% 66% at 83% 0%,#3A85C078,transparent 75%),linear-gradient(120deg,#102842,#124570 76%,#1C5A82);box-shadow:0 18px 42px -31px #1248748A;color:#fff}
.nx4-workspace .nx4-hr-hero:before,.nx4-workspace .hr-profile-hero:before,.nx4-workspace .nx4-hr-op-hero:before{content:"";position:absolute;z-index:-1;inset:-30%;background:linear-gradient(#E7F7FF06 1px,transparent 1px),linear-gradient(90deg,#E7F7FF06 1px,transparent 1px);background-size:55px 55px;transform:rotate(-10deg)}
.nx4-workspace .nx4-hr-eyebrow,.nx4-workspace .hr-profile-kicker{color:#C5EDFF;font-size:11px;font-weight:900;letter-spacing:.04em}
.nx4-workspace .nx4-hr-hero h2,.nx4-workspace .hr-profile-hero h2,.nx4-workspace .nx4-hr-op-hero h2{color:white;font-size:clamp(23px,2.6vw,33px);font-weight:900;line-height:1.45}
.nx4-workspace .nx4-hr-hero p,.nx4-workspace .nx4-hr-op-hero p{color:#D8EAF8;font-size:13px;line-height:1.9}
.nx4-workspace .nx4-hr-hero-tags{display:flex;gap:8px;flex-wrap:wrap}
.nx4-workspace .nx4-hr-hero-tags>span{font-size:11px;line-height:1.7;background:#FFFFFF13;border:1px solid #FFFFFF2D;border-radius:8px;padding:7px 10px;color:#E8F6FF}
.nx4-workspace .nx4-hr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.nx4-workspace .nx4-hr-kpi{position:relative;isolation:isolate;min-width:0;border:1px solid var(--nx4-line-light);border-radius:15px;background:var(--nx4-panel);padding:16px;box-shadow:0 12px 29px -23px #11466B66}
.nx4-workspace .nx4-hr-kpi:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:16px;width:33px;height:3px;border-radius:0 0 4px 4px;background:var(--nx5-hr-brand)}
.nx4-workspace .nx4-hr-kpi:nth-child(2):before{background:#6385D0}.nx4-workspace .nx4-hr-kpi:nth-child(3):before{background:#AB63BF}.nx4-workspace .nx4-hr-kpi:nth-child(4):before{background:#D78B5D}
.nx4-workspace .nx4-hr-kpi-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid color-mix(in srgb,var(--nx5-hr-brand) 22%,var(--nx4-line-light));background:color-mix(in srgb,var(--nx5-hr-brand) 9%,var(--nx4-panel))}
.nx4-workspace .nx4-hr-kpi-label{color:var(--nx5-tone-secondary);font-size:12px;line-height:1.7;font-weight:800}
.nx4-workspace .nx4-hr-kpi strong{font-size:clamp(25px,2.7vw,38px);font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-surface,.nx4-workspace .hr-info-panel,.nx4-workspace .hr-activity-panel,.nx4-workspace .hr-records-panel,.nx4-workspace .hr-notes{min-width:0;border:1px solid var(--nx4-line-light);border-radius:15px;background:var(--nx4-panel);box-shadow:0 11px 30px -28px #123B676E}
.nx4-workspace .nx4-hr-surface-head h3,.nx4-workspace .hr-list-heading h3{font-size:17px;line-height:1.55;font-weight:900;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-surface-head p,.nx4-workspace .nx4-hr-data-note{font-size:12px;line-height:1.9;color:var(--nx5-tone-secondary)}
.nx4-workspace .nx4-hr-employee-link{border-radius:10px;min-height:62px;gap:10px}
.nx4-workspace .nx4-hr-employee-link:focus-visible{outline:2px solid var(--nx5-hr-brand);outline-offset:2px}
.nx4-workspace .nx4-hr-employee-monogram{flex:none;background:color-mix(in srgb,var(--nx5-hr-brand) 10%,var(--nx4-panel));color:var(--nx5-hr-brand);border:1px solid color-mix(in srgb,var(--nx5-hr-brand) 24%,var(--nx4-line-light));font-weight:900}
.nx4-workspace .nx4-hr-employee-name{font-size:13px;font-weight:900;line-height:1.65;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-employee-state{font-size:11px;font-weight:850;line-height:1.6}
.nx4-workspace .nx4-hr-dept-row{gap:9px}
.nx4-workspace .nx4-hr-dept-label{font-size:12px;font-weight:800;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-dept-track{height:7px;background:color-mix(in srgb,var(--nx5-hr-brand) 9%,var(--nx4-paper));border-radius:99px;overflow:hidden}
.nx4-workspace .nx4-hr-dept-fill{border-radius:99px;background:linear-gradient(90deg,#008FCB,#5A9ED6)}
.nx4-workspace .nx4-hr-actions-grid{gap:10px}
.nx4-workspace .nx4-hr-action{min-height:69px;padding:13px;border:1px solid var(--nx4-line-light);border-radius:11px;background:var(--nx4-panel)}
.nx4-workspace .nx4-hr-action:hover{border-color:color-mix(in srgb,var(--nx5-hr-brand) 35%,var(--nx4-line-light));background:color-mix(in srgb,var(--nx5-hr-brand) 5%,var(--nx4-panel))}
.nx4-workspace .nx4-hr-action strong{font-size:13px;line-height:1.6;font-weight:900;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-action small{font-size:11px;line-height:1.8;color:var(--nx5-tone-secondary)}
.nx4-workspace .hr-profile-identity{gap:13px;min-width:0}
.nx4-workspace .hr-profile-avatar{width:70px;height:70px;flex:none;border:2px solid #B5E1F478;border-radius:20px;background:#FFFFFF20;display:grid;place-items:center}
.nx4-workspace .hr-profile-heading h2{overflow-wrap:anywhere}
.nx4-workspace .nx4-hr-contact{font-size:12px;line-height:1.8;color:#E2F2FE}
.nx4-workspace .hr-profile-state{font-size:11px;font-weight:900}
.nx4-workspace .hr-profile-tabs{display:flex;gap:7px;overflow:auto;max-width:100%;scrollbar-width:thin;padding:5px;border:1px solid var(--nx4-line-light);border-radius:13px;background:var(--nx4-panel)}
.nx4-workspace .hr-profile-tab{min-height:44px;flex:none;white-space:nowrap;border-radius:9px;font-size:12px;font-weight:850;color:var(--nx5-tone-secondary);padding:9px 14px}
.nx4-workspace .hr-profile-tab.active{background:color-mix(in srgb,var(--nx5-hr-brand) 8%,var(--nx4-panel));color:var(--nx5-tone-primary);border-color:color-mix(in srgb,var(--nx5-hr-brand) 32%,var(--nx4-line-light));box-shadow:inset 0 -2px var(--nx5-hr-brand)}
.nx4-workspace .hr-profile-tab:focus-visible{outline:2px solid var(--nx5-hr-brand);outline-offset:2px}
.nx4-workspace .hr-info-grid{gap:12px}
.nx4-workspace .hr-info-grid>div{min-width:0;border:1px solid var(--nx4-line-light);border-radius:10px;background:var(--nx4-paper);padding:12px}
.nx4-workspace .hr-info-grid small,.nx4-workspace .hr-record-value>span{font-size:11px;line-height:1.7;color:var(--nx5-tone-secondary)}
.nx4-workspace .hr-info-grid strong,.nx4-workspace .hr-record-value strong{font-size:13px;line-height:1.8;font-weight:900;color:var(--nx5-tone-primary);overflow-wrap:anywhere}
.nx4-workspace .hr-record-card{min-width:0;border:1px solid var(--nx4-line-light);border-radius:11px;background:var(--nx4-panel);padding:15px;gap:11px}
.nx4-workspace .hr-record-card:hover{border-color:color-mix(in srgb,var(--nx5-hr-brand) 23%,var(--nx4-line-light))}
.nx4-workspace .hr-period-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;border:1px solid color-mix(in srgb,var(--nx5-hr-brand) 21%,var(--nx4-line-light));background:color-mix(in srgb,var(--nx5-hr-brand) 5%,var(--nx4-panel));border-radius:10px;color:var(--nx5-tone-secondary);font-size:12px;line-height:1.8}
.nx4-workspace .hr-period-strip input{min-height:42px;font-size:14px;border-radius:9px}
.nx4-workspace .nx4-hr-op-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.nx4-workspace .nx4-hr-op-summary>div{border:1px solid var(--nx4-line-light);border-radius:11px;background:var(--nx4-panel);padding:14px;min-width:0}
.nx4-workspace .nx4-hr-op-summary strong{font-size:clamp(21px,2vw,31px);font-variant-numeric:tabular-nums;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-op-surface{min-width:0;border:1px solid var(--nx4-line-light);background:var(--nx4-panel);border-radius:15px}
.nx4-workspace .nx4-hr-op-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.nx4-workspace .nx4-hr-op-control{font-size:12px;line-height:1.7;font-weight:850;color:var(--nx5-tone-secondary)}
.nx4-workspace .nx4-hr-op-control .input{min-height:44px;border-radius:9px;font-size:13px}
.nx4-workspace .nx4-hr-op-record{min-width:0;border:1px solid var(--nx4-line-light);background:var(--nx4-panel);border-radius:11px;padding:14px}
.nx4-workspace .nx4-hr-op-record-heading strong{font-size:13px;line-height:1.65;font-weight:900;color:var(--nx5-tone-primary)}
.nx4-workspace .nx4-hr-op-state{font-size:11px;font-weight:900;border:1px solid currentColor;border-radius:8px}
.nx4-workspace .nx4-hr-op-description{font-size:12px;line-height:1.9;color:var(--nx5-tone-secondary)}
.nx4-workspace .nx4-hr-op-buttons .button{min-height:40px}
.nx4-workspace .nx4-hr-exchange-hero{border-radius:18px}
.nx4-workspace .nx4-hr-exchange-cards>section,.nx4-workspace .nx4-hr-exchange-panel,.nx4-workspace .nx4-hr-exchange-review{border-radius:14px;border-color:var(--nx4-line-light)}
.nx4-workspace .nx4-hr-exchange-panel h3{font-size:16px;font-weight:900}
.nx4-workspace .nx4-hr-exchange-upload-card:focus-within{outline:2px solid var(--nx5-hr-brand);outline-offset:2px}
.nx4-workspace .nx4-hr-exchange-table-wrap th{font-size:11px;line-height:1.7}
.nx4-workspace .nx4-hr-exchange-table-wrap td{font-size:12px;line-height:1.8}
.nx4-workspace .nx4-hr-contract-print{font-size:12px;min-height:38px}
@media(max-width:1100px){
 .nx4-workspace .nx4-hr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nx4-workspace .nx4-hr-op-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
 .nx4-workspace .nx4-hr-hero,.nx4-workspace .hr-profile-hero,.nx4-workspace .nx4-hr-op-hero{padding:17px;border-radius:14px}
 .nx4-workspace .nx4-hr-hero h2,.nx4-workspace .hr-profile-hero h2,.nx4-workspace .nx4-hr-op-hero h2{font-size:22px}
 .nx4-workspace .nx4-hr-kpis{gap:8px}
 .nx4-workspace .nx4-hr-kpi{padding:13px;min-height:115px}
 .nx4-workspace .nx4-hr-kpi strong{font-size:25px}
 .nx4-workspace .nx4-hr-surface,.nx4-workspace .hr-info-panel,.nx4-workspace .hr-activity-panel,.nx4-workspace .hr-records-panel{padding:13px;border-radius:12px}
 .nx4-workspace .hr-profile-avatar{width:57px;height:57px;border-radius:15px}
 .nx4-workspace .hr-profile-tab{min-height:44px;font-size:12px;padding:9px 12px}
 .nx4-workspace .hr-info-grid{grid-template-columns:1fr}
 .nx4-workspace .hr-record-card{padding:12px}
 .nx4-workspace .nx4-hr-op-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nx4-workspace .nx4-hr-op-toolbar .nx4-hr-op-control{width:100%}
 .nx4-workspace .nx4-hr-op-toolbar .input{font-size:16px;min-height:46px}
 .nx4-workspace .nx4-hr-op-buttons{display:flex;flex-wrap:wrap;gap:8px}
 .nx4-workspace .nx4-hr-op-buttons .button{min-height:44px}
}
@media(max-width:359px){
 .nx4-workspace .nx4-hr-kpis,.nx4-workspace .nx4-hr-op-summary{grid-template-columns:1fr}
 .nx4-workspace .nx4-hr-kpi{min-height:98px}
 .nx4-workspace .hr-record-card{padding:10px}
}
@media(prefers-reduced-motion:reduce){.nx4-workspace :is(.nx4-hr-kpi,.hr-record-card,.nx4-hr-op-record,.nx4-hr-action){transition:none!important;transform:none!important}}