/* NEXAR — implementation layer v2.0. Tokens live in design-tokens.css.
   CSS in styles.css is retained temporarily for behavior/layout compatibility.
   This file loads LAST to guarantee the canonical compact, Cairo-based visual language. */

/* 01 · Type, hierarchy and brand mark */
.brand-icon{padding:0;overflow:hidden}
.brand-icon img{display:block;width:100%;height:100%;object-fit:cover}
.loading-boot .brand-icon{animation:none;box-shadow:none}

html,body,#app{font-family:var(--nx-font-family);letter-spacing:0}
body{font-size:var(--nx-text-md);color:var(--nx-text);background:var(--nx-bg);line-height:var(--nx-leading-normal)}
button,input,select,textarea{font-family:var(--nx-font-family);letter-spacing:0}
.brand strong{font-size:18px;letter-spacing:.12em;font-weight:800;line-height:1.3}
.brand small{font-size:9px;font-weight:600;letter-spacing:.01em}
.brand-icon,.loading-boot .brand-icon{
 width:38px;height:38px;display:grid;place-items:center;
 background:var(--nx-navy);border:1px solid color-mix(in srgb,var(--nx-navy) 80%,#fff);
 border-radius:10px;transform:none;box-shadow:none;color:#fff;letter-spacing:0;
}
.brand-icon:before,.brand-icon:after{display:none}
.brand-icon svg{width:26px;height:26px;color:#fff;stroke:unset;transform:none}
.brand-glyph{font-size:23px;text-shadow:none;transform:none;letter-spacing:-.07em}
.topbar{min-height:var(--nx-header-height);padding:9px clamp(14px,3vw,42px);border-bottom:1px solid var(--nx-border);box-shadow:none}
.topbar .brand strong{font-size:17px}.topbar .brand small{font-size:9px}
.topbar .left,.topbar .right{gap:10px}
.icon-btn{height:38px;width:38px;border-radius:var(--nx-radius-md);box-shadow:none}
.icon-btn svg{width:18px;height:18px}
.company-pill{min-height:38px;padding:7px 11px;border-radius:var(--nx-radius-md);font-size:11px;background:var(--nx-surface);box-shadow:none}
.avatar{width:35px;height:35px;border-radius:10px;box-shadow:none}
.user-info{gap:8px}
.user-info small{font-size:9px}
.button{min-height:var(--nx-button-md);padding:9px 15px;border-radius:var(--nx-radius-md);font-size:12px;font-weight:700;box-shadow:none;background:var(--nx-brand);transition:background var(--nx-motion-base) var(--nx-ease),box-shadow var(--nx-motion-base) var(--nx-ease),transform var(--nx-motion-base) var(--nx-ease)}
.button:hover{transform:translateY(var(--nx-hover-rise));box-shadow:var(--nx-shadow-sm);filter:none;background:var(--nx-brand-hover)}
.button.tiny{min-height:var(--nx-button-sm);padding:7px 12px}
.button.ghost{background:var(--nx-surface);color:var(--nx-text);border:1px solid var(--nx-border)}
.input{min-height:var(--nx-input-height);padding:9px 12px;border-radius:var(--nx-radius-md);font-size:12px}
.input:focus{border-color:var(--nx-brand);box-shadow:var(--nx-focus-ring)}
:where(button,a,input,textarea,select):focus-visible{outline:2px solid var(--nx-brand);outline-offset:2px}

/* 02 · Compact portal, not a promotional landing page */
.hub-v2{background:var(--nx-bg)}
.hub-v2 .hub-content{max-width:var(--nx-content-width);padding:24px clamp(14px,3vw,32px) 24px}
.hub-hero{
 display:flex;min-height:0;max-height:none;padding:25px 30px;
 background:var(--nx-surface);border:1px solid var(--nx-border);
 border-radius:var(--nx-radius-2xl);box-shadow:var(--nx-shadow-sm);
 color:var(--nx-text);animation:none;align-items:center
}
.hub-hero:before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--nx-brand) 3%,transparent));opacity:1}
.hub-hero:after{inset:16px auto 16px 0;width:3px;background:var(--nx-brand);border-radius:4px;opacity:1;mask-image:none}
.hub-hero-glow,.hero-art,.hero-art-orbit,.hero-art-spark,.hero-art-pill{display:none!important;animation:none!important}
.hub-hero-content{max-width:none;width:100%}
.hero-eyebrow{
 min-height:0;padding:0;background:none;border:none;border-radius:0;
 color:var(--nx-brand);font-size:10px;letter-spacing:.02em;font-weight:800;
 font-family:var(--nx-font-family)
}
.hero-live-dot{width:6px;height:6px;background:var(--nx-brand);box-shadow:none;animation:none}
.hero-eyebrow-divider{background:var(--nx-border-strong)}
.hub-hero .hero-heading{
 margin:10px 0 5px;font-size:clamp(24px,2.2vw,30px);
 font-weight:800;line-height:1.45;letter-spacing:-.02em;color:var(--nx-text)
}
.hub-hero .hero-heading span{
 background:none;-webkit-background-clip:initial;background-clip:initial;
 color:var(--nx-brand)
}
.hub-hero .hero-sub{color:var(--nx-text-soft);font-size:12px;line-height:1.8;max-width:90ch;margin:0}
.hub-hero .hero-sub strong{color:var(--nx-text)}
.hero-meta{margin-top:14px;gap:8px}
.hero-meta span{padding:5px 9px;border:1px solid var(--nx-border);border-radius:8px;background:var(--nx-surface-soft);color:var(--nx-text-soft);font-size:10px}
.hero-meta svg{width:13px;height:13px;color:var(--nx-brand)}
.applications-section{padding-top:7px}
.section-heading-rich{margin:20px 0 12px;align-items:center}
.section-kicker{font-family:var(--nx-font-family);font-size:9px;font-weight:700;letter-spacing:.055em;color:var(--nx-text-muted)}
.section-heading-rich h2{font-size:19px;margin:4px 0 1px}
.section-heading-rich p{font-size:11px;line-height:1.6;margin-top:4px;color:var(--nx-text-muted)}
.section-count{height:22px;min-width:25px;border-radius:6px;background:var(--nx-brand-soft);color:var(--nx-brand);font-size:10px}
.section-tag{padding:8px 10px;border-radius:9px;box-shadow:none;font-size:10px}
.hub-v2 .grid-apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nx-grid-gap)}
.app-card{
 height:auto;min-height:var(--nx-appcard-minheight);padding:14px var(--nx-appcard-pad) 12px;
 border:1px solid var(--nx-border);border-radius:var(--nx-radius-xl);
 background:var(--nx-surface)!important;box-shadow:var(--nx-shadow-xs);
 transition:transform var(--nx-motion-base) var(--nx-ease),border-color var(--nx-motion-base) var(--nx-ease),box-shadow var(--nx-motion-base) var(--nx-ease);
 animation:none;
}
.app-card:before,.app-card-decoration{display:none}
.app-card:after{right:0;top:16px;bottom:16px;width:3px;border-radius:4px;background:var(--app-accent);opacity:.6}
.app-card:hover{transform:translateY(var(--nx-hover-rise));border-color:color-mix(in srgb,var(--app-accent) 40%,var(--nx-border));box-shadow:var(--nx-shadow-md)}
.app-card-top{min-height:var(--nx-appcard-icon)}
.app-card .app-icon{
 height:var(--nx-appcard-icon);width:var(--nx-appcard-icon);margin:0;
 border:1px solid color-mix(in srgb,var(--app-accent) 15%,var(--nx-border));
 border-radius:var(--nx-radius-md);
 background:color-mix(in srgb,var(--app-accent) 9%,var(--nx-surface));
 box-shadow:none
}
.app-card .app-icon:before{display:none}
.app-card .app-icon svg{width:21px;height:21px;stroke-width:1.8;filter:none}
.app-card-index{font-size:10px;letter-spacing:0;color:var(--nx-text-muted);opacity:.8}
.app-card-index span{font-size:8px}
.app-card-content{flex:1;margin-top:9px}
.app-card-category{font-family:var(--nx-font-family);font-size:9px;letter-spacing:.02em;color:var(--app-accent);margin-bottom:3px;font-weight:700}
.app-card strong{font-size:var(--nx-appcard-title);line-height:1.55;margin:0 0 2px;font-weight:800}
.app-card-description{
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
 overflow:hidden;max-width:46ch;font-size:11px;line-height:1.6;color:var(--nx-text-soft)
}
.app-card-bottom{min-height:28px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nx-border)}
.app-card-status{font-size:9px;color:var(--nx-text-muted)}
.app-card-status i{width:5px;height:5px;box-shadow:none}
.app-card-enter{font-size:10px;font-weight:700}
.app-card-enter svg{height:14px;width:14px}
.app-card:hover .app-card-enter svg{transform:translateX(-2px)}
.hub-footer{margin-top:21px;padding-top:16px;font-size:10px;color:var(--nx-text-muted)}

/* 03 · Modules: dense business workspace */
.workspace{background:var(--nx-bg)}
.sidebar{
 width:var(--nx-sidebar-width);flex:0 0 var(--nx-sidebar-width);
 padding:15px 10px;background:var(--nx-surface);color:var(--nx-text);
 border-left:1px solid var(--nx-border);box-shadow:none
}
.sidebar-head{padding:8px 9px 16px;border-color:var(--nx-border)}
.sidebar-head .brand strong{font-size:16px}
.sidebar-module{padding:10px;margin-top:16px;border-radius:12px}
.sidebar-module .app-icon{width:37px;height:37px;border-radius:10px}
.sidebar-module .app-icon svg{width:18px;height:18px}
.sidebar-module small{font-size:10px}
.sidebar-menu{margin-top:19px;gap:4px}
.sidebar-caption{font-size:10px;padding:7px 11px}
.sidebar-link{min-height:39px;padding:9px 11px;font-size:11px;border-radius:9px}
.sidebar-link svg{width:16px;height:16px}
.sidebar-link.active{border-radius:9px;box-shadow:inset -3px 0 var(--app-accent)}
.sidebar-bottom{padding-top:10px}
.workspace .topbar{min-height:var(--nx-header-height);padding:9px clamp(14px,2.3vw,25px)}
.workspace main{padding:20px clamp(14px,2.3vw,26px);max-width:1440px}
.workspace-title{padding:16px 20px;min-height:92px;margin-bottom:13px;border-radius:var(--nx-radius-xl);box-shadow:var(--nx-shadow-xs)}
.workspace-title:before{opacity:.6;width:170px}
.workspace-title:after{top:16px;bottom:16px;width:3px}
.workspace-title-details{gap:12px}
.workspace-title-icon{width:43px;height:43px;border-radius:11px}
.workspace-title-icon svg{width:22px;height:22px}
.workspace-title .eyebrow{font-size:9px;font-weight:700}
.workspace-title h1{font-size:21px;line-height:1.4;margin:3px 0}
.workspace-title p{font-size:11px;line-height:1.5}
.workspace-live{font-size:10px;padding:7px 9px}
.workspace-actions{gap:7px}
.workspace .button:not(.ghost):not(.danger){background:var(--app-accent);box-shadow:none}

/* 04 · Data visual controls */
.metric-grid{gap:var(--nx-grid-gap);margin-bottom:var(--nx-grid-gap)}
.metric{
 min-height:var(--nx-kpi-height);padding:13px var(--nx-kpi-pad);
 border:1px solid var(--nx-border);border-radius:var(--nx-radius-xl);
 background:var(--nx-surface);box-shadow:var(--nx-shadow-xs)
}
.metric:after{display:none}
.metric-top{min-height:27px}
.metric-symbol{width:30px;height:30px;border-radius:8px}
.metric-symbol svg{width:16px;height:16px}
.metric-trace{display:none}
.metric-label{font-size:10px;margin-top:6px}
.metric strong{font-size:var(--nx-kpi-value);line-height:1.3;margin-top:4px}
.metric small{font-size:10px;margin-top:3px}
.panels{gap:var(--nx-grid-gap)}
.panel{padding:18px;border:1px solid var(--nx-border);border-radius:var(--nx-radius-xl);box-shadow:var(--nx-shadow-xs)}
.panel h3{font-size:14px;margin-bottom:6px}.panel p{font-size:11px;line-height:1.75}
.recent-item{padding:9px 0}.recent-item strong{font-size:12px}
.subtle-box{padding:10px 12px;margin:8px 0;font-size:11px;border-radius:10px}
.empty-state{min-height:175px;padding:23px 12px;gap:8px}
.empty-state-orbit{width:68px;height:68px}
.empty-state-orbit .app-icon{width:42px;height:42px}
.empty-state strong{font-size:12px}
.empty-state p{font-size:11px}
.table-panel{border-radius:var(--nx-radius-xl);box-shadow:var(--nx-shadow-xs)}
.table-toolbar{padding:12px 15px;gap:10px}
.table-toolbar .input{min-width:min(280px,100%)}
table{font-size:11px}
th{height:var(--nx-table-head);padding:10px 13px;font-size:10px;background:var(--nx-surface-soft)}
td{height:var(--nx-table-row);padding:10px 13px}
.table-status{font-size:10px;padding:5px 9px;border-radius:7px}
.table-actions .icon-btn{width:30px;height:30px;border-radius:8px}
.pagination{padding:11px 14px;font-size:10px}
.dialog{max-width:var(--nx-dialog-md);border-radius:var(--nx-radius-xl);box-shadow:var(--nx-shadow-lg)}
.dialog-head{padding:16px 20px}
.dialog-head h2{font-size:16px}
.dialog-content{padding:19px 20px}
.dialog-section-title{margin-bottom:15px}
.dialog-section-icon{width:39px;height:39px}
.dialog-section-title strong{font-size:12px}
.form-label{font-size:11px;gap:7px;margin-bottom:12px}
.dialog-actions{padding:12px 20px;gap:8px}
.record-card-title{font-size:12px}
.record-card-sub{font-size:10px}
.toast{border-radius:var(--nx-radius-md);font-size:11px}

/* 05 · Theme consistency */
[data-theme="dark"] .hub-hero,[data-theme="dark"] .app-card{background:var(--nx-surface)!important;color:var(--nx-text)}
[data-theme="dark"] .hero-meta span{background:var(--nx-surface-soft)}
[data-theme="dark"] .app-card .app-icon{box-shadow:none}
[data-theme="dark"] .brand-icon{background:#111e3b;border-color:#576685}
[data-theme="dark"] .avatar{background:var(--nx-surface-muted);color:var(--nx-text)}

/* 06 · Responsive + accessible motion */
@media(max-width:1100px){
 .hub-v2 .grid-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .workspace .topbar .topbar-title{display:none}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
 .hub-v2 .hub-content{padding:16px}
 .hub-hero{padding:20px 23px;border-radius:var(--nx-radius-xl)}
 .sidebar{position:fixed;right:0;transform:translateX(105%);z-index:21}
 .workspace.mobile-open .sidebar{transform:translateX(0)}
 .workspace main{padding:13px 15px}
 .panels{grid-template-columns:1fr}
}
@media(max-width:620px){
 .hub-v2 .hub-content{padding:11px 12px 20px}
 .topbar{padding:8px 12px}
 .hub-hero{padding:16px;border-radius:var(--nx-radius-lg)}
 .hub-hero .hero-heading{font-size:23px;line-height:1.5}
 .hub-hero .hero-sub{font-size:11px}
 .hero-meta{margin-top:9px}
 .hero-meta span{font-size:9px;padding:5px 7px}
 .section-heading-rich{margin:18px 0 10px}
 .section-heading-rich h2{font-size:17px}
 .hub-v2 .grid-apps{grid-template-columns:1fr;gap:9px}
 .app-card{min-height:148px;padding:12px 15px 10px;border-radius:13px}
 .app-card .app-icon{width:38px;height:38px}
 .app-card .app-icon svg{width:19px;height:19px}
 .app-card-content{margin-top:6px}
 .app-card strong{font-size:14px;margin-bottom:2px}
 .app-card-description{font-size:10px}
 .app-card-bottom{margin-top:6px}
 .section-tag{display:none}
 .hub-footer{margin-top:14px}
 .workspace-title{padding:13px 15px;border-radius:13px}
 .workspace-title-icon{width:38px;height:38px}
 .workspace-title h1{font-size:19px}
 .workspace-title p{font-size:10px}
 .workspace-actions{margin-top:3px}
 .metric-grid{gap:9px}
 .metric{min-height:104px;padding:11px}
 .metric strong{font-size:21px}
 .panel{padding:13px}
 .record-card{padding:13px}
 .dialog{border-radius:17px 17px 0 0}
 .dialog-content{padding:14px}
 .form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .app-card:hover,.button:hover{transform:none}
}


/* ============================================================
   NEXAR V2.1 — FUNCTIONAL ICONS, COMPACT CARDS, WORKSPACE
   ============================================================ */
.nx-vivid-icon{display:inline-block;flex:none;width:20px;height:20px;color:inherit;stroke-width:1.8;overflow:visible}
.nx-vivid-halo{opacity:.045}
.app-icon .nx-vivid-icon{width:23px;height:23px}
.app-card .nx-vivid-icon{width:24px;height:24px}
.workspace-title-icon .nx-vivid-icon{width:23px;height:23px}
.sidebar-module .nx-vivid-icon{width:20px;height:20px}
.sidebar-link .nx-vivid-icon{width:17px;height:17px}
.metric-symbol .nx-vivid-icon{width:19px;height:19px}
.button .nx-vivid-icon{width:15px;height:15px}
.shortcut-icon .nx-vivid-icon{width:18px;height:18px}
.app-card{
 --app-accent:#5163c4;
 display:flex;flex-direction:column;justify-content:space-between;
 min-height:139px;height:auto;padding:15px 16px 11px;
 border-radius:14px;border-color:var(--nx-border);
 background:var(--nx-surface)!important;position:relative;
 box-shadow:var(--nx-shadow-xs);text-align:right
}
.app-card:after{top:15px;bottom:15px;width:2px;opacity:.48}
.app-card-main{display:flex;gap:12px;align-items:flex-start;min-width:0;flex:1}
.app-card .app-icon{
 flex:none;width:46px;height:46px;margin:0;
 border-radius:12px;color:var(--app-accent);
 background:color-mix(in srgb,var(--app-accent) 11%,var(--nx-surface));
 border:1px solid color-mix(in srgb,var(--app-accent) 20%,var(--nx-border));
}
.app-card-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.app-card-num{font:700 9px var(--nx-font-family);color:var(--nx-text-muted);letter-spacing:.02em;margin-bottom:2px}
.app-card-copy strong{margin:0 0 1px;font-size:15px;font-weight:800;letter-spacing:-.015em}
.app-card-copy .app-card-description{font-size:10px;line-height:1.65;max-width:unset;-webkit-line-clamp:2;color:var(--nx-text-soft)}
.app-card-pointer{display:flex;justify-content:center;align-items:center;flex:none;color:var(--app-accent);padding-top:11px;opacity:.8}
.app-card-pointer svg{width:16px;height:16px}
.app-card-footer{
 border-top:1px solid var(--nx-border);margin-top:11px;padding-top:8px;
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 font-size:10px;line-height:1.4
}
.app-card-indicator{display:inline-flex;align-items:center;gap:7px;color:var(--nx-text-muted)}
.app-card-indicator i{width:6px;height:6px;border-radius:50%;background:var(--app-accent)}
.app-card-link{font-size:10px;font-weight:700;color:var(--app-accent)}
.app-card:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(17,40,79,.075)}
.app-card:hover .app-card-pointer{transform:translateX(-2px)}
.app-card:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px}
.app-card[disabled] .app-card-link{opacity:.65}
.hub-hero{padding:18px 23px;border-radius:14px;min-height:auto}
.hub-hero .hero-heading{font-size:23px;line-height:1.5;margin:7px 0 1px}
.hub-hero .hero-sub{font-size:11px}
.hero-meta{margin-top:10px}
.applications-section{padding-top:4px}
.section-heading-rich{margin:17px 0 10px}
.hub-v2 .grid-apps{gap:11px}
.hub-footer{margin-top:18px}
.sidebar{width:238px;flex-basis:238px}
.sidebar-menu{gap:3px}
.sidebar-link{position:relative;display:flex;align-items:center;gap:11px;text-align:right;min-height:40px}
.sidebar-link>span{flex:1}
.sidebar-link svg{color:var(--nx-text-muted);transition:color var(--nx-motion-base) var(--nx-ease)}
.sidebar-link:hover svg,.sidebar-link.active svg{color:var(--app-accent)}
.sidebar-link.active{background:color-mix(in srgb,var(--app-accent) 10%,var(--nx-surface));border-color:color-mix(in srgb,var(--app-accent) 13%,var(--nx-border))}
.sidebar-caption-split{margin-top:14px!important}
.sidebar-company{display:flex;align-items:center;gap:9px;margin-bottom:7px;padding:10px 7px;min-width:0}
.sidebar-company-avatar{width:35px;height:35px;display:grid;place-items:center;flex:none;border-radius:9px;background:var(--nx-surface-muted);color:var(--app-accent)}
.sidebar-company-avatar svg{width:18px;height:18px}
.sidebar-company strong{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--nx-text)}
.sidebar-company small{display:block;margin-top:2px;font-size:9px;color:var(--nx-text-muted)}
.sidebar-return{font-size:11px}
.metric{min-height:112px;border-radius:13px;overflow:hidden}
.metric::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--metric-accent,var(--app-accent));opacity:.75}
.metric-symbol{color:var(--metric-accent,var(--app-accent));background:color-mix(in srgb,var(--metric-accent,var(--app-accent)) 11%,var(--nx-surface))}
.metric-active{--metric-accent:#1685bc}
.metric-leave{--metric-accent:#a36cce}
.metric-departments{--metric-accent:#6e75d3}
.metric-pending{--metric-accent:#db6178}
.metric-value{--metric-accent:#7464d9}
.metric-total{--metric-accent:var(--app-accent)}
.metric .metric-label{font-size:11px}
.metric strong{font-size:26px;line-height:1.25}
.panels{grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel-heading>svg{width:20px;height:20px;color:var(--app-accent);opacity:.75}
.panel-heading h3{margin:0;font-size:14px}
.panel-heading p{margin:3px 0 0;font-size:10px}
.recent-item{min-height:49px}
.recent-copy{min-width:0;flex:1}.recent-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-status{margin-inline-start:auto;padding:5px 8px;border:1px solid var(--nx-border);border-radius:7px;font-size:10px;color:var(--nx-text-soft)}
.panel-shortcuts{display:flex;flex-direction:column}
.shortcut-row{display:flex;align-items:center;gap:10px;width:100%;text-align:right;border:1px solid var(--nx-border);border-radius:10px;background:var(--nx-surface);padding:10px;margin-bottom:7px;color:var(--nx-text);transition:background var(--nx-motion-base)}
.shortcut-row:hover{background:var(--nx-surface-soft);border-color:color-mix(in srgb,var(--app-accent) 24%,var(--nx-border))}
.shortcut-row>.nx-vivid-icon,.shortcut-row>svg:last-child{width:15px;height:15px;margin-inline-start:auto;color:var(--nx-text-muted)}
.shortcut-row>span:nth-child(2){min-width:0;flex:1}
.shortcut-row strong{display:block;font-size:11px}
.shortcut-row small{display:block;font-size:10px;margin-top:3px;color:var(--nx-text-muted)}
.shortcut-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,var(--nx-surface))}
.workspace-context{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:12px;color:var(--nx-text-muted);font-size:10px}
.workspace-context svg{width:14px;height:14px;color:var(--app-accent)}
@media(max-width:1060px){.panels{grid-template-columns:1fr}}
@media(max-width:850px){.sidebar{position:fixed;right:0;transform:translateX(105%)}}
@media(max-width:620px){
 .hub-hero{padding:15px;border-radius:12px}.hub-hero .hero-heading{font-size:20px}
 .hub-v2 .grid-apps{gap:9px}
 .app-card{min-height:105px;padding:11px 12px 9px;border-radius:12px}
 .app-card-main{gap:10px}
 .app-card .app-icon{width:39px;height:39px;border-radius:10px}
 .app-card .app-icon .nx-vivid-icon{width:21px;height:21px}
 .app-card-copy strong{font-size:13px}.app-card-copy .app-card-description{font-size:10px;-webkit-line-clamp:1}
 .app-card-num{font-size:8px}.app-card-footer{margin-top:7px;padding-top:6px}
 .app-card-pointer{padding-top:7px}
 .sidebar{width:min(84vw,270px);flex-basis:auto}
 .metric{min-height:106px}.metric strong{font-size:22px}
 .panel{padding:13px}
 .recent-status{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.app-card:hover{transform:none}.app-card-pointer{transition:none}}


/* V2.1.1 — Function-colored record controls and mobile data cards */
.app-card .app-icon .nx-vivid-icon{width:24px;height:24px}
.record-filter{min-width:140px;max-width:175px}
.records-toolbar-main,.records-toolbar-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.records-search{position:relative;display:flex;align-items:center;flex:1;min-width:225px;max-width:330px}
.records-search>svg{position:absolute;right:11px;width:17px;height:17px;color:var(--nx-text-muted);z-index:1;pointer-events:none}
.records-search .input{width:100%;min-width:0;padding-right:36px;background:var(--nx-surface-soft)}
.records-toolbar-main .badge{white-space:nowrap}
.table-actions [data-action="edit-record"]{color:var(--nx-brand)}
.table-actions [data-action="delete-record"]{color:#d64e68}
.table-actions [data-action="delete-record"]:hover{color:#c83953;border-color:color-mix(in srgb,#d64e68 30%,var(--nx-border));background:color-mix(in srgb,#d64e68 7%,var(--nx-surface))}
.table-status,.record-card-status{--status-color:var(--app-accent);display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--status-color);background:color-mix(in srgb,var(--status-color) 9%,var(--nx-surface));border:1px solid color-mix(in srgb,var(--status-color) 12%,var(--nx-border));border-radius:7px}
.table-status[data-status="active"],.table-status[data-status="available"],.table-status[data-status="approved"],.record-card-status[data-status="active"],.record-card-status[data-status="available"],.record-card-status[data-status="approved"]{--status-color:#2586bf}
.table-status[data-status="on_leave"],.table-status[data-status="paused"],.table-status[data-status="planned"],.record-card-status[data-status="on_leave"],.record-card-status[data-status="paused"],.record-card-status[data-status="planned"]{--status-color:#9465c4}
.table-status[data-status="suspended"],.table-status[data-status="rejected"],.table-status[data-status="retired"],.record-card-status[data-status="suspended"],.record-card-status[data-status="rejected"],.record-card-status[data-status="retired"]{--status-color:#d2556d}
.table-status[data-status="maintenance"],.table-status[data-status="submitted"],.table-status[data-status="draft"],.record-card-status[data-status="maintenance"],.record-card-status[data-status="submitted"],.record-card-status[data-status="draft"]{--status-color:#b57739}
.table-status[data-status="completed"],.table-status[data-status="received"],.record-card-status[data-status="completed"],.record-card-status[data-status="received"]{--status-color:#5f6bd0}
.record-mobile{padding:0}
.record-card{padding:13px;border-top:1px solid var(--nx-border);background:var(--nx-surface)}
.record-card-header{display:flex;align-items:center;gap:10px}
.record-card-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--app-accent) 10%,var(--nx-surface));color:var(--app-accent)}
.record-card-icon svg{height:19px;width:19px}
.record-card-headline{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.record-card-headline strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--nx-text)}
.record-card-headline small{font-size:10px;color:var(--nx-text-muted)}
.record-card-status{padding:5px 8px;font-size:9px;white-space:nowrap}
.record-card-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.record-card-fields div{min-width:0;padding:8px;background:var(--nx-surface-soft);border:1px solid var(--nx-border);border-radius:8px}
.record-card-fields dt{font-size:9px;color:var(--nx-text-muted)}
.record-card-fields dd{font-size:11px;color:var(--nx-text);font-weight:700;margin:3px 0 0;word-break:break-word}
.record-card-actions{display:flex;justify-content:flex-end;margin-top:8px}
.record-card-actions .table-actions{display:flex;gap:6px}
@media(max-width:620px){
 .records-toolbar-main{width:100%;gap:7px}
 .records-search{min-width:0;width:100%;max-width:none;flex:1 1 100%}
 .record-filter{flex:1;min-width:0;max-width:unset;height:37px}
 .records-toolbar-actions{width:100%;justify-content:flex-end}
 .record-card-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app-card .app-icon .nx-vivid-icon{width:21px;height:21px}
}
@media(max-width:375px){.record-card-fields{grid-template-columns:1fr}}


/* v2.2 · Refined palette selector and neutral swatch treatment */
.palette-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.palette-choice{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:right;padding:12px;border:1px solid var(--nx-border);background:var(--nx-surface);color:var(--nx-text);border-radius:11px;min-width:0;transition:border-color .18s ease,transform .18s ease}
.palette-choice:hover{border-color:var(--nx-brand);transform:translateY(-1px)}
.palette-choice.selected{border:2px solid var(--nx-brand);padding:11px;background:color-mix(in srgb,var(--nx-brand) 4%,var(--nx-surface))}
.palette-choice>span:last-child{display:block;min-width:0}
.palette-choice strong{display:block;font:800 11px Cairo,system-ui}
.palette-choice small{display:block;font:500 10px Cairo,system-ui;color:var(--nx-text-muted)}
.palette-dots{display:flex;gap:5px;width:100%;direction:ltr}
.palette-dots i{width:25%;height:14px;border-radius:4px;background:#a2b3ca}
.palette-dots[data-variant="signature"] i:first-child{background:#246F96}
.palette-dots[data-variant="signature"] i:nth-child(2){background:#75538F}
.palette-dots[data-variant="signature"] i:last-child{background:#C45276}
.palette-dots[data-variant="calm"] i:first-child{background:#52799A}
.palette-dots[data-variant="calm"] i:nth-child(2){background:#7D6B90}
.palette-dots[data-variant="calm"] i:last-child{background:#A66880}
.palette-dots[data-variant="modern"] i:first-child{background:#149BCA}
.palette-dots[data-variant="modern"] i:nth-child(2){background:#7956E2}
.palette-dots[data-variant="modern"] i:last-child{background:#E95486}
.app-card .app-icon{background:color-mix(in srgb,var(--app-accent) 10%,var(--nx-surface));border-color:color-mix(in srgb,var(--app-accent) 19%,var(--nx-border))}
.workspace-title-icon,.sidebar-module .app-icon{background:color-mix(in srgb,var(--app-accent) 9%,var(--nx-surface))}
[data-theme="dark"] .app-card{background:var(--nx-surface)!important}
[data-theme="dark"] .app-card .app-icon,[data-theme="dark"] .palette-choice.selected{background:color-mix(in srgb,var(--app-accent,var(--nx-brand)) 14%,var(--nx-surface))}
@media(max-width:620px){.palette-choices{gap:6px}.palette-choice{padding:9px}.palette-choice.selected{padding:8px}}


/* NEXAR 2.3 — Strong categorical color differentiation */
.app-card,.workspace{--app-ink:color-mix(in srgb,var(--app-accent) 76%,#17223b)}
.app-card{
 background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 8%,var(--nx-surface)) 0%,var(--nx-surface) 42%)!important;
 border-color:color-mix(in srgb,var(--app-accent) 24%,var(--nx-border));
}
.app-card:before{
 display:block;content:"";position:absolute;inset:0 0 auto 0;
 width:100%;height:3px;background:var(--app-accent);
 filter:none;transform:none;border-radius:0;opacity:1;
}
.app-card:after{background:var(--app-accent);width:3px;opacity:.94}
.app-card:hover{
 background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 11%,var(--nx-surface)),var(--nx-surface) 50%)!important;
 border-color:color-mix(in srgb,var(--app-accent) 55%,var(--nx-border))
}
.app-card .app-icon{
 color:var(--app-accent);
 background:color-mix(in srgb,var(--app-accent) 17%,var(--nx-surface));
 border:1px solid color-mix(in srgb,var(--app-accent) 35%,var(--nx-border));
}
.app-card-copy .app-card-num,.app-card-link,.app-card-pointer{color:var(--app-ink)}
.app-card-indicator i{background:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 11%,transparent)}
.workspace .workspace-title:after{width:4px;opacity:1}
.workspace .workspace-title-icon{background:color-mix(in srgb,var(--app-accent) 16%,var(--nx-surface));border-color:color-mix(in srgb,var(--app-accent) 25%,var(--nx-border))}
.workspace .workspace-title-icon svg,.sidebar-module .app-icon svg{color:var(--app-accent)}
.sidebar-module{
 background:color-mix(in srgb,var(--app-accent) 9%,var(--nx-surface));
 border-color:color-mix(in srgb,var(--app-accent) 26%,var(--nx-border))
}
.sidebar-link.active{
 border-right:3px solid var(--app-accent);
 border-color:color-mix(in srgb,var(--app-accent) 25%,var(--nx-border));
 color:var(--app-ink);
 background:color-mix(in srgb,var(--app-accent) 13%,var(--nx-surface))
}
.sidebar-link.active svg{color:var(--app-accent)}
.workspace .button:not(.ghost):not(.danger){
 background:var(--app-accent);
 border:1px solid color-mix(in srgb,var(--app-accent) 85%,#1d2742);
 color:white
}
.metric:before{width:4px;opacity:1}
.metric-symbol{
 background:color-mix(in srgb,var(--metric-accent,var(--app-accent)) 15%,var(--nx-surface));
 border:1px solid color-mix(in srgb,var(--metric-accent,var(--app-accent)) 19%,var(--nx-border))
}
[data-theme="dark"] .app-card,.hub-v2[data-theme="dark"] .app-card{
 --app-ink:color-mix(in srgb,var(--app-accent) 74%,white);
 background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 15%,var(--nx-surface)) 0%,var(--nx-surface) 55%)!important;
}
[data-theme="dark"] .workspace{--app-ink:color-mix(in srgb,var(--app-accent) 75%,white)}
[data-theme="dark"] .app-card-copy .app-card-num,[data-theme="dark"] .app-card-link{color:var(--app-ink)}
@media(max-width:620px){
 .app-card:before{height:2px}
 .app-card:after{width:2px}
}


/* NEXAR Bold Signature v2.3 — operational UX polish */
.records-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 16px}
.records-toolbar-main{display:flex;flex:1 1 570px;align-items:flex-end;gap:8px;min-width:0}
.records-toolbar-main .badge{align-self:center}
.records-toolbar-actions{display:flex;flex:0 0 auto;align-items:center;gap:7px}
.record-select-label{display:flex;flex-direction:column;gap:4px;font:700 10px var(--nx-font-family);color:var(--nx-text-muted)}
.record-select-label>span{padding-inline:3px}
.record-select-label .input{height:38px;min-height:38px;font-size:11px;padding:5px 10px;background:var(--nx-surface)}
.record-filter{min-width:124px;max-width:150px}
.record-sort{min-width:126px;max-width:145px}
.records-search{height:40px;min-width:170px;max-width:325px}
.records-search .input{height:39px;min-height:39px}
.records-pagination{display:flex;justify-content:space-between;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 15px}
.records-pager-controls{display:flex;align-items:center;gap:8px}
.record-page-size{flex-direction:row;gap:8px;align-items:center;margin-inline-end:5px}
.record-page-size select{min-width:64px}
.page-nav{height:32px;width:32px;border-radius:9px;display:grid;place-items:center}
.page-nav svg{height:15px;width:15px}
.page-nav:not(.next) svg{transform:rotate(180deg)}
.page-nav:disabled{opacity:.32;cursor:default}
.page-number{white-space:nowrap;min-width:47px;text-align:center;font-weight:800;font-size:11px;color:var(--nx-text)}
.hr-department-panel{margin-top:var(--nx-grid-gap);--hr-accent:var(--nx-hr-accent);--app-accent:var(--nx-hr-accent)}
.hr-department-panel .panel-heading{margin-bottom:15px}
.hr-department-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;row-gap:13px}
.hr-department-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(65px,1.2fr) auto;gap:11px;align-items:center;min-width:0}
.hr-department-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;font-size:11px;color:var(--nx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-department-index{font:700 10px system-ui;color:var(--nx-text-muted)}
.hr-department-track{height:7px;border-radius:20px;background:color-mix(in srgb,var(--nx-hr-accent) 8%,var(--nx-surface-muted));overflow:hidden}
.hr-department-fill{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--nx-hr-accent),color-mix(in srgb,var(--nx-hr-accent) 64%,white));transition:width .18s ease}
.hr-department-count{font:700 11px var(--nx-font-family);white-space:nowrap;color:var(--nx-text)}
.hr-department-count small{font-size:9px;color:var(--nx-text-muted)}
.hr-department-footnote{font-size:10px;color:var(--nx-text-muted);margin:14px 0 0}
.dialog-backdrop{z-index:70}
.dialog{width:min(calc(100vw - 28px),var(--nx-dialog-md));max-height:min(90dvh,810px);overflow:auto;overscroll-behavior:contain}
.dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--nx-surface)}
.dialog .dialog-actions{position:sticky;bottom:0;z-index:2;background:var(--nx-surface-soft)}
.dialog .form-label .input{width:100%;background:var(--nx-surface)}
.dialog-section-icon{background:color-mix(in srgb,var(--app-accent) 13%,var(--nx-surface));color:var(--app-accent)}
.dialog-backdrop .button.danger{background:#C93452;color:white;border-color:#BB2946}
.dialog-backdrop .button.danger:hover{background:#AE2843}
.workspace .panel:focus-within{border-color:color-mix(in srgb,var(--app-accent) 20%,var(--nx-border))}
@media(max-width:1130px){
 .records-toolbar-main{flex-basis:100%}
 .records-toolbar-actions{width:100%;justify-content:flex-end}
}
@media(max-width:800px){
 .hr-department-grid{grid-template-columns:1fr}
 .records-search{max-width:none;flex:1 1 220px}
}
@media(max-width:620px){
 .records-toolbar{gap:9px;padding:11px 12px}
 .records-toolbar-main{gap:7px;align-items:flex-end}
 .records-search{height:40px;max-width:none;flex:1 1 100%}
 .record-select-label{flex:1 1 125px;min-width:0}
 .record-select-label .input{max-width:none;width:100%}
 .records-toolbar-main .badge{flex:0 0 auto;align-self:center}
 .records-toolbar-actions{justify-content:space-between}
 .records-toolbar-actions .button{flex:1;justify-content:center}
 .records-pagination{font-size:10px;justify-content:center;text-align:center;flex-direction:column;padding:12px}
 .records-pager-controls{width:100%;justify-content:center}
 .record-page-size{flex:0 0 auto}
 .record-page-size>span{display:none}
 .record-page-size .input{max-width:68px}
 .hr-department-row{grid-template-columns:minmax(90px,1fr) minmax(75px,1.2fr) auto;gap:7px}
 .hr-department-name{font-size:10px}
 .hr-department-grid{gap:11px}
 .dialog-backdrop{align-items:flex-end}
 .dialog{width:100%;max-width:none;max-height:92dvh;border-radius:18px 18px 0 0}
 .dialog .dialog-head,.dialog .dialog-actions{padding-inline:16px}
 .dialog .dialog-content{padding:16px}
}
@media(prefers-reduced-motion:reduce){
 .hr-department-fill{transition:none}
}

/* Retain viewport scroll position when an accessible modal opens. */
body:has(.dialog-backdrop){overflow:hidden}


/* NEXAR HR FOUNDATION v1 — Employee profile, contracts, leaves, attendance */
.hr-view-record{color:var(--nx-hr-ink);background:var(--nx-hr-soft);border:1px solid color-mix(in srgb,var(--nx-hr-accent) 17%,var(--nx-border))}
[data-theme="dark"] .hr-view-record{color:var(--nx-hr-accent);background:color-mix(in srgb,var(--nx-hr-accent) 13%,var(--nx-surface))}
.form-field-wide{grid-column:1/-1}
.form-field-wide textarea{min-height:88px;resize:vertical}
.hr-profile{display:flex;flex-direction:column;gap:12px;min-width:0}
.hr-profile-hero{background:linear-gradient(105deg,color-mix(in srgb,var(--nx-hr-accent) 9%,var(--nx-surface)),var(--nx-surface) 65%);border:1px solid color-mix(in srgb,var(--nx-hr-accent) 22%,var(--nx-border));border-radius:var(--nx-radius-xl);padding:16px 20px;position:relative;overflow:hidden}
.hr-profile-hero:before{content:"";position:absolute;top:12px;bottom:12px;right:0;width:3px;background:var(--nx-hr-accent);border-radius:4px}
.hr-back{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--nx-hr-ink);font-size:10px;font-weight:700;padding:0;margin-bottom:14px}
.hr-back svg{width:14px;height:14px;transform:rotate(180deg)}
.hr-back:hover{text-decoration:underline}
.hr-profile-identity{display:flex;align-items:center;gap:13px}
.hr-profile-avatar{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:color-mix(in srgb,var(--nx-hr-accent) 19%,var(--nx-surface));border:1px solid color-mix(in srgb,var(--nx-hr-accent) 23%,var(--nx-border));color:var(--nx-hr-ink);font-size:23px;font-weight:800;flex-shrink:0}
.hr-profile-heading{flex:1;min-width:0}
.hr-profile-kicker{display:block;font:700 9px var(--nx-font-family);color:var(--nx-hr-ink);letter-spacing:.025em}
.hr-profile-heading h2{font-size:19px;color:var(--nx-text);font-weight:800;margin:2px 0 3px;line-height:1.4}
.hr-profile-heading p{font-size:11px;color:var(--nx-text-soft);margin:0}
.hr-profile-state{display:inline-flex;align-items:center;gap:7px;color:var(--nx-hr-ink);font-size:10px;font-weight:800;border:1px solid color-mix(in srgb,var(--nx-hr-accent) 24%,var(--nx-border));background:color-mix(in srgb,var(--nx-hr-accent) 9%,var(--nx-surface));border-radius:8px;padding:7px 11px}
.hr-profile-state:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nx-hr-accent)}
.hr-profile-state[data-status="archived"],.hr-profile-state[data-status="suspended"]{color:var(--nx-danger);background:var(--nx-danger-soft);border-color:color-mix(in srgb,var(--nx-danger) 18%,var(--nx-border))}
.hr-profile-state[data-status="archived"]:before,.hr-profile-state[data-status="suspended"]:before{background:var(--nx-danger)}
.hr-profile-tabs{display:flex;align-items:center;gap:4px;background:var(--nx-surface);border:1px solid var(--nx-border);border-radius:12px;padding:5px;overflow-x:auto;scrollbar-width:thin}
.hr-profile-tab{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 0 auto;min-height:38px;padding:8px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--nx-text-soft);font-size:11px;font-weight:700;white-space:nowrap;transition:background .16s}
.hr-profile-tab svg{width:17px;height:17px}
.hr-profile-tab.active{background:color-mix(in srgb,var(--nx-hr-accent) 10%,var(--nx-surface));color:var(--nx-hr-ink);border-color:color-mix(in srgb,var(--nx-hr-accent) 22%,var(--nx-border))}
.hr-profile-tab:hover:not(.active){background:var(--nx-surface-soft)}
.hr-profile-panels{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.9fr);gap:12px;align-items:start}
.hr-profile-panels>.panel{min-width:0}
.hr-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0 0}
.hr-info-grid>div{padding:11px 12px;border:1px solid var(--nx-border);background:var(--nx-surface-soft);border-radius:9px;min-width:0}
.hr-info-grid dt{font-size:10px;color:var(--nx-text-muted);font-weight:600}
.hr-info-grid dd{font-size:12px;color:var(--nx-text);font-weight:800;margin:5px 0 0;word-break:break-word}
.hr-count-row{width:100%;display:flex;gap:10px;align-items:center;background:var(--nx-surface);border:1px solid var(--nx-border);color:var(--nx-text);border-radius:10px;padding:10px;margin:7px 0;text-align:right;font-size:11px}
.hr-count-row:hover{background:color-mix(in srgb,var(--nx-hr-accent) 5%,var(--nx-surface));border-color:color-mix(in srgb,var(--nx-hr-accent) 25%,var(--nx-border))}
.hr-count-icon{width:33px;height:33px;border-radius:9px;background:color-mix(in srgb,var(--nx-hr-accent) 11%,var(--nx-surface));color:var(--nx-hr-accent);display:grid;place-items:center}
.hr-count-icon svg{width:18px;height:18px}
.hr-count-row>span:nth-child(2){flex:1;min-width:0}
.hr-count-row>strong{font-size:17px}
.hr-count-row>svg{color:var(--nx-hr-accent);height:15px;width:15px}
.hr-info-helper{margin:15px 0 0;color:var(--nx-text-muted);font-size:10px;line-height:1.8}
.hr-notes{grid-column:1/-1}.hr-notes p{white-space:pre-wrap;word-break:break-word}
.hr-records-panel{padding:17px}
.hr-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.hr-list-heading h3{font-size:15px;margin:0 0 2px}
.hr-list-heading p{font-size:10px;margin:0;color:var(--nx-text-muted)}
.hr-list-heading .button{font-size:11px;min-height:36px}
.hr-record-list{display:grid;gap:8px}
.hr-record-card{position:relative;display:flex;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--nx-border);border-radius:11px;background:var(--nx-surface-soft)}
.hr-record-card:hover{border-color:color-mix(in srgb,var(--nx-hr-accent) 28%,var(--nx-border))}
.hr-record-card-main{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:10px;min-width:0;flex:1}
.hr-record-value{display:flex;flex-direction:column;gap:4px;min-width:0}
.hr-record-value span{font-size:10px;color:var(--nx-text-muted)}
.hr-record-value strong{font-size:11px;font-weight:800;line-height:1.5;color:var(--nx-text);overflow-wrap:anywhere}
.hr-record-value.lead strong{color:var(--nx-hr-ink);font-size:12px}
.hr-record-edit{flex:0 0 auto;color:var(--nx-hr-ink);border:1px solid var(--nx-border);background:var(--nx-surface)}
.hr-record-empty{text-align:center;padding:31px 12px;background:var(--nx-surface-soft);border-radius:11px;border:1px dashed var(--nx-border-strong)}
.hr-record-empty strong{font-size:12px}
.hr-record-empty p{margin:5px 0 0;color:var(--nx-text-muted);font-size:11px}
.hr-editor{width:min(95vw,740px);max-width:740px}
.hr-editor .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.hr-editor-intro{display:flex;align-items:center;gap:10px;margin:0 0 15px;padding:11px;background:color-mix(in srgb,var(--nx-hr-accent) 6%,var(--nx-surface));border-radius:10px}
.hr-editor-intro p{margin:0;font-size:11px;color:var(--nx-text-soft)}
.hr-editor-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;color:var(--nx-hr-ink);background:color-mix(in srgb,var(--nx-hr-accent) 12%,var(--nx-surface))}
.hr-editor-icon svg{width:19px;height:19px}
.hr-required{color:var(--nx-danger)}
.hr-textarea{resize:vertical;min-height:90px}
.hr-field-wide{grid-column:1/-1}
[data-theme="dark"] .hr-back,[data-theme="dark"] .hr-profile-kicker,[data-theme="dark"] .hr-profile-avatar,[data-theme="dark"] .hr-record-value.lead strong,[data-theme="dark"] .hr-record-edit,[data-theme="dark"] .hr-profile-tab.active{color:var(--nx-hr-accent)}
@media(max-width:1050px){
 .hr-profile-panels{grid-template-columns:1fr}
 .hr-record-card-main{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
 .hr-profile-hero{padding:13px}
 .hr-profile-avatar{width:44px;height:44px;font-size:19px;border-radius:12px}
 .hr-profile-heading h2{font-size:16px}
 .hr-profile-identity{flex-wrap:wrap}
 .hr-profile-state{margin-right:auto}
 .hr-profile-tab{font-size:10px;padding:7px 9px}
 .hr-info-grid{gap:7px}
 .hr-info-grid>div{padding:9px}
 .hr-info-grid dd{font-size:11px}
 .hr-record-card{align-items:flex-start;padding:12px}
 .hr-record-card-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .hr-record-edit{width:33px;height:33px}
 .hr-editor{width:100%;max-width:100%;max-height:92dvh}
 .hr-editor .form-grid{grid-template-columns:1fr}
 .hr-list-heading .button{width:100%;justify-content:center}
}

/* Inline employee edit in profile header */
.hr-employee-edit{flex:0 0 auto;min-height:34px;font-size:10px;border-color:color-mix(in srgb,var(--nx-hr-accent) 29%,var(--nx-border))!important;color:var(--nx-hr-ink)!important;background:var(--nx-surface)!important}
.hr-employee-edit svg{width:15px;height:15px}
@media(max-width:680px){.hr-employee-edit{order:3;min-height:32px;flex:1 1 auto}.hr-profile-state{order:4}}
[data-theme="dark"] .hr-employee-edit{color:var(--nx-hr-accent)!important}


/* HR attendance period selector, 21 previous -> 20 selected month */
.hr-period-strip{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 15px;margin-bottom:15px;border:1px solid color-mix(in srgb,var(--nx-hr-accent) 24%,var(--nx-border));background:color-mix(in srgb,var(--nx-hr-accent) 7%,var(--nx-surface));border-radius:11px}
.hr-period-strip>div{display:grid;gap:3px;min-width:0}
.hr-period-strip strong{font-size:12px;font-weight:800;color:var(--nx-text)}
.hr-period-strip small{font-size:10px;color:var(--nx-text-soft)}
.hr-period-strip label{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:700;color:var(--nx-text-soft)}
.hr-period-strip .input{min-height:38px;height:38px;width:157px;font-family:var(--nx-font-family);font-size:12px;background:var(--nx-surface)}
.hr-profile-loading{display:flex;align-items:center;gap:9px;min-height:140px;font-size:12px;color:var(--nx-text-soft)}
.hr-profile-loading svg{width:19px;height:19px;color:var(--nx-hr-accent)}
@media(max-width:620px){.hr-period-strip{padding:11px}.hr-period-strip>div{flex:1 1 100%}.hr-period-strip label{width:100%;justify-content:space-between}.hr-period-strip .input{min-width:155px;flex:0 0 auto}}