/* ASCEND 4.0.Q — HR Admin workspace. Ported from the approved handover source; scoped to #hr-root. */
#hr-root{--navy:#00286E;--blue:#0155A2;--ink:#172B4D;--muted:#52647A;--line:#D4E0EA;font-family:Montserrat,sans-serif;color:var(--ink);font-size:14px;line-height:1.5}
#hr-root *{box-sizing:border-box}
#hr-root .app{min-height:100vh;min-height:100dvh;position:relative;isolation:isolate;display:grid;grid-template-columns:238px minmax(0,1fr);background:radial-gradient(ellipse at 0 0,#FFFFFF 0%,#FFFFFF9C 25%,transparent 65%),radial-gradient(ellipse at 0 60%,#DAEEEF,transparent 65%),radial-gradient(ellipse at 100% 100%,#E6EFDA,transparent 65%),#EAF2F8}
#hr-root .app.nav-hidden{grid-template-columns:minmax(0,1fr)}
#hr-root .app.nav-hidden .sidebar{display:none}
#hr-root [hidden]{display:none!important}
#hr-root button,#hr-root summary{font-family:Montserrat,sans-serif;touch-action:manipulation;cursor:pointer}
#hr-root button{font-size:14px;line-height:1.5;font-weight:500;min-height:44px}
#hr-root button:focus-visible,#hr-root summary:focus-visible,#hr-root a:focus-visible,#hr-root input:focus-visible,#hr-root select:focus-visible,#hr-root textarea:focus-visible{outline:3px solid #0391A3;outline-offset:3px}
#hr-root button:disabled{opacity:.55;cursor:default}
#hr-root img{display:block;height:auto;max-width:100%}
#hr-root svg.lucide{width:18px;height:18px;flex-shrink:0}
/* sidebar */
#hr-root .sidebar{background:linear-gradient(135deg,#FFFFFFDB,#FFFFFF8F);border-right:1px solid #FFFFFFD9;box-shadow:inset 1px 1px #FFFFFFE6,6px 8px 24px -16px #173D5938;backdrop-filter:blur(24px);padding:27px 16px 20px;display:flex;flex-direction:column;min-width:0;z-index:3;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
#hr-root .brand img{width:180px;margin:0 auto}
#hr-root .version{font-size:11px;text-align:center;color:var(--muted);margin-top:7px}
#hr-root .role{display:flex;align-items:center;gap:9px;color:var(--navy);font-size:14px;font-weight:600;border-bottom:1px solid var(--line);padding:26px 10px 21px;margin-bottom:20px}
#hr-root .role svg{color:var(--blue)}
#hr-root nav.main-nav{display:grid;gap:6px}
#hr-root .nav-group{display:grid;gap:6px}
#hr-root .nav-label{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 3px;padding:0 10px}
#hr-root .nav-item{display:flex;align-items:center;gap:10px;padding:11px 10px;border:0;background:transparent;text-align:left;color:var(--muted);border-radius:10px;width:100%;min-height:48px;font-size:13px;text-decoration:none;line-height:1.5}
#hr-root .nav-item[aria-current=page]{background:#DCEEF7;color:var(--navy);font-weight:600;box-shadow:inset 3px 0 var(--blue)}
#hr-root .nav-item:hover{background:#EAF4FB}
#hr-root .workforce{border-top:1px solid var(--line);margin-top:14px;padding-top:18px}
#hr-root .sidebar-foot{margin-top:auto;padding-top:38px}
#hr-root .company-wrap{position:relative;width:145px;aspect-ratio:1230/620;overflow:hidden;margin:0 auto 14px}
#hr-root .company{position:absolute;width:117.724%;max-width:none;left:-9.35%;top:-37.097%;filter:url(#ascend-company-white-key)}
#hr-root .copyright{font-size:11px;line-height:1.6;text-align:center;color:var(--muted);margin:0}
/* top bar */
#hr-root .work-area{min-width:0;display:flex;flex-direction:column}
#hr-root .topbar{position:sticky;top:0;z-index:4;min-height:90px;background:linear-gradient(135deg,#FFFFFFC7,#FFFFFF70);border-bottom:1px solid #FFFFFFBD;backdrop-filter:blur(24px);display:flex;align-items:center;gap:12px;padding:16px 25px}
#hr-root .icon-button{background:transparent;color:var(--navy);border:1px solid transparent;border-radius:10px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px}
#hr-root .icon-button:hover{background:#EAF4FB}
#hr-root .breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;min-width:0;flex-wrap:wrap}
#hr-root .breadcrumb svg{width:14px;height:14px}
#hr-root .breadcrumb .current{color:var(--navy);font-weight:500}
#hr-root .top-right{display:flex;align-items:center;gap:20px;margin-left:auto;min-width:0}
#hr-root .clock{text-align:right;display:grid;gap:1px;font-variant-numeric:tabular-nums}
#hr-root .clock-time{font-size:16px;font-weight:600;color:var(--navy);line-height:1.3}
#hr-root .clock-date,#hr-root .clock-zone{font-size:11px;color:var(--muted)}
#hr-root .profile{position:relative}
#hr-root .profile summary{list-style:none;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;border-radius:50%;background:#DCEAF5;color:var(--navy);font-size:14px;font-weight:600;border:1px solid #FFFFFF}
#hr-root .profile summary::-webkit-details-marker{display:none}
#hr-root .profile-menu{position:absolute;right:0;top:54px;width:240px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;box-shadow:8px 16px 32px #173D5926;z-index:10}
#hr-root .profile-menu p{margin:0 0 4px}
#hr-root .profile-menu small{display:block;color:var(--muted);font-size:12px;margin-bottom:12px}
#hr-root .profile-menu button{display:block;width:100%;text-align:left;border:0;background:#F1F7FB;color:var(--navy);border-radius:8px;padding:10px;margin-top:6px}
#hr-root .mobile-brand{display:none}
/* page */
#hr-root main{padding:25px 24px 30px;min-width:0;flex:1}
#hr-root .preview-banner{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.6;color:#6B4A00;background:#FFF6DD;border:1px solid #F0DDA5;border-radius:12px;padding:10px 14px;margin-bottom:18px}
#hr-root .preview-banner svg{margin-top:2px;width:16px;height:16px}
#hr-root .preview-banner button{min-height:0;border:0;background:transparent;color:#6B4A00;text-decoration:underline;padding:0 2px;font-size:12px;font-weight:600}
#hr-root .page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
#hr-root h1{font-size:26px;line-height:1.25;letter-spacing:-.6px;font-weight:700;color:var(--navy);margin:0 0 8px}
#hr-root h1:focus{outline:none}
#hr-root .subtitle{font-size:14px;color:var(--muted);line-height:1.6;margin:0;max-width:560px}
#hr-root h2{font-size:18px;font-weight:600;line-height:1.3;color:var(--navy);margin:0 0 8px}
#hr-root h3{font-size:16px;font-weight:600;line-height:1.4;color:var(--navy);margin:0 0 8px}
#hr-root .primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(145deg,#0861AE,#0155A2 65%,#004C94);color:#FFF;border:1px solid #004D93;border-radius:10px;padding:11px 15px;font-weight:600;box-shadow:inset 0 1px 0 #FFFFFF26,2px 5px 10px -4px #00286E30;text-decoration:none}
#hr-root .primary:hover{background:#003F7D}
#hr-root .secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#FFFFFFB3;border:1px solid #AABFD2;color:var(--blue);border-radius:10px;padding:10px 12px;font-size:12px;text-decoration:none;font-weight:500}
#hr-root .secondary:disabled{color:var(--muted)}
#hr-root .glass{background:linear-gradient(135deg,#FFFFFFD9,#FFFFFFB3 60%,#F4F9FBC9);border:1px solid #FFFFFFC9;border-right-color:#CFDBE570;border-bottom-color:#BDCFDD99;border-radius:18px;box-shadow:inset 1px 1px 0 #FFFFFFE6,2px 5px 10px #173D5908,9px 17px 30px -18px #173D5929;backdrop-filter:blur(20px);min-width:0}
@supports not (backdrop-filter:blur(1px)){#hr-root .glass,#hr-root .sidebar,#hr-root .topbar{background:#F8FCFD}}
#hr-root .muted-copy{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
#hr-root .module-icon{width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:#E4F0F7;border-radius:12px;color:var(--blue);flex-shrink:0}
#hr-root .text-action{display:inline-flex;align-items:center;gap:6px;color:var(--blue);background:transparent;border:0;padding:0;min-height:44px;font-size:12px;font-weight:600;text-align:left;text-decoration:none}
#hr-root .text-action svg{width:14px;height:14px}
#hr-root .plain-action{border:0;background:transparent;color:var(--blue);font-size:12px}
#hr-root .page-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px;align-items:center}
#hr-root .hierarchy-path{display:flex;align-items:center;gap:5px 8px;flex-wrap:wrap;margin:0 0 14px;color:var(--muted);font-size:12px}
#hr-root .hierarchy-path svg{width:13px;height:13px}
#hr-root .hierarchy-path span:first-child{color:var(--navy);font-weight:600}
#hr-root .hierarchy-actions{margin-bottom:10px}
#hr-root .hierarchy-actions>.primary{font-size:12px;padding:10px 12px}
#hr-root .parent-guidance{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 16px;max-width:700px}
#hr-root .secondary-actions{padding-top:15px;border-top:1px solid var(--line)}
#hr-root .action-menu{position:relative;z-index:6}
#hr-root .action-menu summary{list-style:none;min-height:44px;font-size:12px}
#hr-root .action-menu summary::-webkit-details-marker{display:none}
#hr-root .action-popover{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;border:1px solid #CFDBE5;border-radius:12px;background:#FFF;box-shadow:8px 14px 32px #173D5929;padding:7px}
#hr-root .action-popover button{border:0;background:transparent;text-align:left;color:var(--ink);width:100%;padding:10px;border-radius:6px;font-size:12px}
#hr-root .action-popover button:hover:not(:disabled){background:#EAF4FB}
#hr-root .totals-label{font-size:11px;color:var(--muted);margin-bottom:9px}
#hr-root .org-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:22px}
#hr-root .total{display:flex;align-items:center;gap:13px;padding:17px}
#hr-root .total span{display:block;font-size:12px;color:var(--muted)}
#hr-root .total strong{display:block;font-size:28px;line-height:1.25;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
#hr-root .org-workspace-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
#hr-root .tree-panel{padding:15px 12px}
#hr-root .tree-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:10px}
#hr-root .tree-heading h2{font-size:14px;margin:0}
#hr-root .org-input{font:400 14px/1.5 Montserrat,sans-serif;min-height:44px;width:100%;min-width:0;color:var(--ink);background:#FFFFFFD9;border:1px solid #64748B;border-radius:9px;padding:10px 11px}
#hr-root .org-input::placeholder{color:#64748B;opacity:1}
#hr-root .org-input[aria-invalid=true]{border-color:#B42318}
#hr-root .tree-controls{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);margin:8px 0 10px;color:var(--muted);flex-wrap:wrap}
#hr-root .tree-controls button{font-size:11px;background:transparent;border:0;color:var(--blue);padding:8px 0}
#hr-root .tree ul{list-style:none;margin:0;padding:0}
#hr-root .tree ul ul{margin-left:8px;border-left:1px solid var(--line);padding-left:5px}
#hr-root .tree-row{display:flex;align-items:center}
#hr-root .tree-twist{min-width:28px;min-height:44px;border:0;background:transparent;color:var(--muted);padding:0;display:flex;align-items:center;justify-content:center}
#hr-root .tree-twist svg{width:14px;height:14px;transition:transform .15s}
#hr-root .tree-twist[aria-expanded=true] svg{transform:rotate(90deg)}
#hr-root .tree-spacer{min-width:28px}
#hr-root .tree-node{flex:1;display:flex;gap:7px;align-items:flex-start;padding:10px 7px;text-align:left;background:transparent;border:0;border-radius:8px;color:var(--muted);font-size:12px;line-height:1.5;min-height:44px;overflow-wrap:anywhere}
#hr-root .tree-node svg{width:14px;height:14px;margin-top:2px}
#hr-root .tree-node.selected{background:#DCEEF7;color:var(--navy);font-weight:600}
#hr-root .tree-blank,#hr-root .selected-blank,#hr-root .changes-empty,#hr-root .record-empty,#hr-root .cadres-empty,#hr-root .activity-empty{text-align:center;color:var(--muted)}
#hr-root .tree-blank{padding:25px 4px 18px}
#hr-root .tree-blank svg,#hr-root .changes-empty svg,#hr-root .record-empty svg,#hr-root .activity-empty svg{display:block;margin:0 auto 15px;color:var(--blue);width:22px;height:22px}
#hr-root .tree-blank h3,#hr-root .changes-empty h3,#hr-root .record-empty h3,#hr-root .activity-empty h3{font-size:14px}
#hr-root .tree-blank p,#hr-root .changes-empty p,#hr-root .record-empty p,#hr-root .activity-empty p{font-size:12px;line-height:1.7;margin:0 auto;max-width:360px}
#hr-root .selected-profile{padding:22px;min-height:310px}
#hr-root .selected-blank{padding:13px 0}
#hr-root .selected-blank .module-icon{margin:0 auto 16px}
#hr-root .selected-blank h2{font-size:20px}
#hr-root .selected-blank p{font-size:14px;line-height:1.7;max-width:350px;margin:0 auto 20px}
#hr-root .selected-top{display:flex;align-items:flex-start;gap:13px}
#hr-root .selected-identity{min-width:0;flex:1}
#hr-root .selected-identity h2{font-size:21px;overflow-wrap:anywhere}
#hr-root .structure-code{font-size:12px;color:var(--muted);margin:0 0 9px;overflow-wrap:anywhere}
#hr-root .status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;border-radius:6px;font-weight:500;color:#18794E;background:#EAF7EF}
#hr-root .status-pill.inactive{color:#52647A;background:#EBF0F4}
#hr-root .selected-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 18px}
#hr-root .selected-counts>div{border-left:1px solid var(--line);padding-left:12px}
#hr-root .selected-counts>div:first-child{border-left:0;padding-left:0}
#hr-root .selected-counts span{font-size:11px;color:var(--muted);display:block}
#hr-root .selected-counts strong{font-size:22px;font-weight:600;color:var(--navy)}
#hr-root dl.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0;padding-top:15px;border-top:1px solid var(--line)}
#hr-root dl.facts dt{font-size:11px;color:var(--muted)}
#hr-root dl.facts dd{margin:2px 0 0;font-size:13px;overflow-wrap:anywhere}
#hr-root .scope-note{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.6}
#hr-root .structure-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid #BFCFDE;margin:22px 0 16px}
#hr-root .structure-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:12px;padding:10px 9px}
#hr-root .structure-tabs .selected-tab{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
#hr-root .records-panel{overflow:hidden}
#hr-root .records-head{padding:20px 20px 15px}
#hr-root .records-head h2{margin-bottom:4px}
#hr-root .record-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:0 20px 18px}
#hr-root .search-field{flex:1;min-width:180px}
#hr-root label{display:block;font-size:12px;color:var(--ink);font-weight:500}
#hr-root label>.org-input,#hr-root .search-field .org-input{margin-top:6px;font-size:16px}
#hr-root .filter-count{font-size:11px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background:#DCEEF7;color:var(--navy)}
#hr-root .advanced-filters{flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding-top:12px}
#hr-root .table-wrap{width:100%;overflow-x:auto}
#hr-root table.records{border-collapse:collapse;width:100%}
#hr-root table.records th{font-size:11px;font-weight:500;color:var(--muted);text-align:left;background:#EAF2F780;padding:12px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
#hr-root table.records td{font-size:12px;line-height:1.6;vertical-align:top;padding:12px 10px;border-bottom:1px solid #E0E8EF;overflow-wrap:anywhere}
#hr-root .record-name{font-size:13px;font-weight:600;text-align:left;border:0;background:transparent;color:var(--blue);padding:0;min-height:0;overflow-wrap:anywhere}
#hr-root table.records small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
#hr-root .records-foot{font-size:11px;color:var(--muted);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#hr-root .pager{display:flex;align-items:center;gap:8px}
#hr-root .pager button{min-height:36px;font-size:12px;padding:4px 12px;border:1px solid #AABFD2;border-radius:8px;background:#FFFFFFB3;color:var(--blue)}
#hr-root .record-empty,#hr-root .cadres-empty{padding:35px 20px}
#hr-root .other-section{padding:26px 20px;border-top:1px solid var(--line)}
#hr-root .other-section p{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 6px;max-width:640px}
#hr-root .insights-grid,#hr-root .cadre-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
#hr-root .insights,#hr-root .changes,#hr-root .cadre-governance,#hr-root .cadre-activity{padding:20px}
#hr-root .insights h2,#hr-root .changes h2{font-size:16px;margin-bottom:16px}
#hr-root .insight-row{display:flex;gap:15px;align-items:center;justify-content:space-between}
#hr-root .insight-row h3{font-size:12px;margin:0 0 3px}
#hr-root .insight-row p{font-size:11px;color:var(--muted);margin:0}
#hr-root .insight-row strong{font-size:24px;color:var(--navy);font-weight:600}
#hr-root .insight-row.second{border-top:1px solid var(--line);padding-top:15px;margin-top:8px}
#hr-root .changes-head,#hr-root .activity-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
#hr-root .changes-head h2,#hr-root .activity-heading h2{margin:0}
#hr-root .activity-heading span{font-size:11px;color:var(--muted)}
#hr-root .changes ol,#hr-root .cadre-activity ol{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:15px}
#hr-root .changes li,#hr-root .cadre-activity li{display:flex;gap:10px;align-items:flex-start}
#hr-root .changes li svg,#hr-root .cadre-activity li svg{color:var(--muted);margin-top:3px;width:15px;height:15px}
#hr-root .changes li strong,#hr-root .cadre-activity li strong{display:block;font-size:12px;font-weight:500;line-height:1.6}
#hr-root .changes li span,#hr-root .cadre-activity li span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#hr-root .sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* cadres */
#hr-root .cadres-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#hr-root .cadres-tools>div{display:flex;gap:8px}
#hr-root .workspace-context{font-size:12px;color:var(--muted)}
#hr-root .cadre-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:20px}
#hr-root .cadre-kpi{padding:16px}
#hr-root .cadre-kpi span{display:block;font-size:12px;color:var(--muted)}
#hr-root .cadre-kpi strong{display:block;font-size:28px;font-weight:700;color:var(--navy);line-height:1.3}
#hr-root .cadre-kpi small{font-size:11px;color:var(--muted)}
#hr-root .cadre-directory{overflow:hidden}
#hr-root .cadre-directory-head{display:flex;justify-content:space-between;gap:12px;padding:20px 20px 10px;align-items:flex-start}
#hr-root .columns-menu{position:relative}
#hr-root .columns-menu summary{list-style:none;display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:0 10px;font-size:12px;color:var(--blue);border:1px solid #AABFD2;border-radius:10px;background:#FFFFFFB3}
#hr-root .columns-menu summary::-webkit-details-marker{display:none}
#hr-root .columns-popover{position:absolute;right:0;top:50px;z-index:6;background:#FFF;border:1px solid #CFDBE5;border-radius:12px;padding:10px 14px;min-width:170px;box-shadow:8px 14px 32px #173D5929}
#hr-root .columns-popover label{display:flex;gap:8px;align-items:center;min-height:36px}
#hr-root .cadres-empty .module-icon{margin:0 auto 13px}
#hr-root .cadres-empty h3{font-size:16px}
#hr-root .cadres-empty p{font-size:12px;max-width:380px;margin:0 auto 16px;line-height:1.7}
#hr-root .mapping-review-item{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
#hr-root .mapping-review-item h3{font-size:13px;margin:0}
#hr-root .mapping-review-item p{font-size:11px;color:var(--muted);margin:0}
#hr-root .mapping-review-item strong{font-size:22px;color:var(--navy);margin-left:auto}
#hr-root .review-footnote,#hr-root .panel-description{font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.6}
/* forms */
#hr-root .form-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
#hr-root .new-org-form{min-width:0;display:grid;gap:18px}
#hr-root .form-section{padding:24px}
#hr-root .form-section-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px}
#hr-root .form-section-heading h2{font-size:18px;margin:0 0 3px}
#hr-root .form-section-heading p{font-size:12px;color:var(--muted);margin:0}
#hr-root .required-mark{color:#B42318}
#hr-root .optional-label{font-size:11px;font-weight:400;color:var(--muted);margin-left:7px}
#hr-root .organization-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 16px}
#hr-root .full-width{grid-column:1/-1}
#hr-root .org-field{min-width:0}
#hr-root .org-field>label{font-size:14px;margin-bottom:8px}
#hr-root .org-field .org-input{font-size:16px;min-height:50px;background:#FFFFFFE6;padding:12px}
#hr-root textarea.org-input{resize:vertical}
#hr-root .field-hint{font-size:12px;color:var(--muted);line-height:1.6;margin:7px 0 0}
#hr-root .field-error{font-size:12px;color:#B42318;line-height:1.6;margin:7px 0 0}
#hr-root .character-count{font-size:11px;color:var(--muted);text-align:right;margin:4px 0 0}
#hr-root .optional-contact>summary{padding:19px 23px;color:var(--navy);font-size:16px;font-weight:600;min-height:60px;display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer}
#hr-root .optional-contact>summary::-webkit-details-marker{display:none}
#hr-root .contact-fields{padding:4px 24px 24px}
#hr-root .logo-upload-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#hr-root .logo-preview{width:72px;height:72px;border:1px dashed #AABFD2;border-radius:12px;background:#FFFFFFA6;display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden}
#hr-root .logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
#hr-root .create-org-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
#hr-root .create-org-actions button{min-height:48px;padding:12px 18px;font-size:14px}
#hr-root .org-validation{font-size:13px;color:#B42318;text-align:right;min-height:18px}
#hr-root .discard-confirmation{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;font-size:13px;background:#FFF6DD;border:1px solid #F0DDA5;border-radius:12px;padding:10px 14px}
#hr-root .form-context{padding:21px 19px}
#hr-root .context-heading{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--blue)}
#hr-root .context-heading h2{font-size:16px;margin:0}
#hr-root .form-context p{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 10px}
#hr-root .form-context dl{margin:12px 0 0}
#hr-root .form-context dl>div{margin-bottom:14px}
#hr-root .form-context dt{font-size:11px;color:var(--muted);margin-bottom:3px}
#hr-root .form-context dd{margin:0;font-size:13px;overflow-wrap:anywhere}
#hr-root .new-category-field{padding:16px;background:#EAF4FB80;border-left:3px solid var(--blue);border-radius:9px}
#hr-root .mapping-block{margin-bottom:22px}
#hr-root .mapping-heading{display:flex;justify-content:space-between;align-items:center}
#hr-root .mapping-heading h3{font-size:14px;margin:0 0 8px}
#hr-root .mapping-count{font-size:11px;color:var(--muted)}
#hr-root .mapping-empty{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);background:#FFFFFF8F;border:1px dashed #AABFD2;border-radius:12px;padding:14px;margin-bottom:10px}
#hr-root .mapping-empty p{margin:2px 0 0}
#hr-root .chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
#hr-root .chip{display:inline-flex;align-items:center;gap:6px;background:#DCEEF7;color:var(--navy);border-radius:999px;padding:2px 4px 2px 12px;font-size:12px}
#hr-root .chip button{min-height:30px;min-width:30px;border:0;background:transparent;color:var(--navy);border-radius:50%;padding:0}
#hr-root .picker{border:1px solid #AABFD2;border-radius:12px;background:#FFFFFFD9;padding:12px;margin-bottom:10px}
#hr-root .picker-list{max-height:220px;overflow:auto;margin-top:8px}
#hr-root .picker-list label{display:flex;gap:10px;align-items:center;min-height:40px;font-size:13px;font-weight:400;overflow-wrap:anywhere}
#hr-root .picker-list .lvl{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
#hr-root .requirements-note{display:flex;gap:9px;font-size:12px;color:var(--muted);line-height:1.6;margin:6px 0 0}
#hr-root .cadre-status-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#hr-root .status-option{display:flex;align-items:flex-start;gap:10px;padding:16px;border:1px solid #AABFD2;border-radius:12px;background:#FFFFFFA6;min-height:80px;font-size:14px}
#hr-root .status-option:has(input:checked){border-color:var(--blue);background:#DCEEF780;box-shadow:inset 0 0 0 1px var(--blue)}
#hr-root .status-option input{margin:4px 0 0;accent-color:var(--blue);min-width:17px;min-height:17px}
#hr-root .status-option strong{display:block;font-weight:500;color:var(--navy)}
#hr-root .status-option small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
#hr-root dialog{border:1px solid #FFFFFFC9;border-radius:20px;background:#FFF;box-shadow:12px 24px 60px #173D5940;padding:24px;max-width:min(640px,calc(100vw - 32px));width:100%;color:var(--ink);font-family:Montserrat,sans-serif}
#hr-root dialog::backdrop{background:#00286E40}
#hr-root dialog h2{margin-bottom:6px}
#hr-root dialog p{font-size:13px;color:var(--muted);line-height:1.6}
#hr-root .dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
#hr-root .import-report{max-height:200px;overflow:auto;font-size:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:12px;background:#F8FCFD}
#hr-root .import-report.err{border-color:#E7B8B3;color:#B42318}
#hr-root .import-report ul{margin:6px 0 0;padding-left:18px}
#hr-root .blocker{max-width:620px;margin:30px auto;padding:34px 28px;text-align:center}
#hr-root .blocker .module-icon{margin:0 auto 16px}
#hr-root .blocker p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 10px}
#hr-root .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#00286E;color:#FFF;border-radius:12px;padding:12px 18px;font-size:13px;z-index:50;box-shadow:8px 16px 32px #173D5940;max-width:calc(100vw - 32px)}
@media(max-width:1100px){#hr-root .cadre-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}#hr-root .form-layout{grid-template-columns:1fr}#hr-root .form-layout .form-context{order:-1}}
@media(max-width:950px) and (min-width:701px){#hr-root .org-workspace-grid{grid-template-columns:1fr}}
@media(max-width:700px){
#hr-root .app{display:block}
#hr-root .sidebar{display:none}
#hr-root .app.nav-open .sidebar{display:flex;position:fixed;top:140px;left:12px;right:12px;bottom:12px;height:auto;z-index:8;padding:18px;background:#F4FAFC;box-shadow:8px 18px 40px #173D5930;border:1px solid #FFF;border-radius:16px}
#hr-root .app.nav-open .sidebar .brand,#hr-root .app.nav-open .sidebar .role,#hr-root .app.nav-open .sidebar .sidebar-foot{display:none}
#hr-root .topbar{padding:14px;gap:6px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#hr-root .breadcrumb{display:none}
#hr-root .mobile-brand{display:block;justify-self:center}
#hr-root .mobile-brand img{width:120px}
#hr-root .top-right{display:contents}
#hr-root .clock{grid-row:2;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;justify-content:flex-end}
#hr-root .clock-time{font-size:14px}
#hr-root .clock-zone{flex-basis:100%}
#hr-root .profile{grid-row:1;grid-column:3}
#hr-root main{padding:22px 16px 28px}
#hr-root h1{font-size:24px}
#hr-root .page-head{flex-wrap:wrap}
#hr-root .page-head>.primary{width:100%;font-size:16px}
#hr-root .org-totals{gap:8px}
#hr-root .total{padding:13px 9px;display:block}
#hr-root .total .module-icon{display:none}
#hr-root .total strong{font-size:24px}
#hr-root .org-workspace-grid{grid-template-columns:1fr}
#hr-root .page-actions{display:grid;grid-template-columns:1fr 1fr}
#hr-root .page-actions>*{width:100%}
#hr-root .page-actions .secondary,#hr-root .page-actions .primary{width:100%;white-space:normal}
#hr-root .selected-profile{padding:18px;min-height:0}
#hr-root .search-field{flex-basis:100%}
#hr-root .advanced-filters{grid-template-columns:1fr}
#hr-root table.records thead{display:none}
#hr-root table.records,#hr-root table.records tbody{display:block;width:100%}
#hr-root table.records tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:16px 18px;border-top:1px solid var(--line)}
#hr-root table.records td{display:block;border:0;padding:0;min-width:0}
#hr-root table.records td:first-child{grid-column:1/-1}
#hr-root table.records td:before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
#hr-root table.records td:first-child:before,#hr-root table.records td.act:before{display:none}
#hr-root .insights-grid,#hr-root .cadre-review-grid{grid-template-columns:1fr}
#hr-root .cadre-kpis{grid-template-columns:1fr 1fr}
#hr-root .organization-fields,#hr-root .cadre-status-options,#hr-root dl.facts{grid-template-columns:1fr}
#hr-root .form-section{padding:20px 18px}
#hr-root .create-org-actions{display:grid;grid-template-columns:1fr}
#hr-root .create-org-actions .primary{grid-row:1}
}

/* employees */
#hr-root .eyebrow{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
#hr-root .status-pill.onboarding{color:#7A5200;background:#FFF1CC}
#hr-root .emp-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:20px 20px 14px;align-items:end}
#hr-root .emp-filters label{margin-bottom:6px}
#hr-root .emp-filters .org-input{font-size:14px}
#hr-root .emp-filter-actions{display:flex;gap:10px;align-items:center}
#hr-root .emp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 20px 8px}
#hr-root .emp-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#hr-root .check-inline{display:inline-flex;gap:6px;align-items:center;font-size:12px;min-height:36px}
#hr-root .tool-note{font-size:11px;color:var(--muted);margin:0;padding:0 20px 4px;text-align:right}
#hr-root .emp-cell{display:flex;gap:10px;align-items:center}
#hr-root .emp-cell input{min-width:18px;min-height:18px;accent-color:var(--blue)}
#hr-root .avatar{width:34px;height:34px;border-radius:50%;background:#DCEAF5;color:var(--navy);font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#hr-root .sort-btn{border:0;background:transparent;color:inherit;font:inherit;min-height:0;padding:0;cursor:pointer}
@media(max-width:1000px){#hr-root .emp-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#hr-root .tool-note{text-align:left}}
@media(max-width:700px){#hr-root .emp-filters{grid-template-columns:1fr}#hr-root table.records td:first-child .emp-cell{padding-right:36px}}

/* onboarding wizard */
#hr-root .stepper{display:flex;align-items:flex-start;gap:0;margin:0 0 20px;padding:0;list-style:none}
#hr-root .stepper li{flex:1;display:flex;align-items:center;gap:10px;min-width:0;position:relative}
#hr-root .stepper li:not(:last-child)::after{content:"";flex:1;height:2px;background:#C9D8E5;margin:0 12px}
#hr-root .stepper li.done:not(:last-child)::after{background:var(--blue)}
#hr-root .step-dot{width:32px;height:32px;border-radius:50%;border:2px solid #AABFD2;background:#FFFFFFB3;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--muted);flex-shrink:0}
#hr-root .stepper li.current .step-dot{background:var(--blue);border-color:var(--blue);color:#FFF}
#hr-root .stepper li.done .step-dot{background:var(--blue);border-color:var(--blue);color:#FFF}
#hr-root .step-text{font-size:12px;line-height:1.4;min-width:0}
#hr-root .step-text strong{display:block;font-size:13px;color:var(--navy)}
#hr-root .step-text span{color:var(--muted)}
#hr-root .photo-box{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px;border:1px dashed #AABFD2;border-radius:14px;background:#FFFFFF8F}
#hr-root .photo-box .avatar{width:64px;height:64px;font-size:20px;overflow:hidden}
#hr-root .avatar img{width:100%;height:100%;object-fit:cover}
#hr-root .toggle-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
#hr-root .toggle-row input{margin-top:4px;min-width:18px;min-height:18px;accent-color:var(--blue)}
#hr-root .toggle-row strong{display:block;font-size:14px;font-weight:500;color:var(--navy)}
#hr-root .toggle-row small{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:2px}
#hr-root .notice-box{display:flex;gap:10px;font-size:12px;line-height:1.6;color:var(--muted);background:#EAF4FB99;border:1px solid #CFE3F1;border-radius:12px;padding:12px 14px;margin:0 0 14px}
#hr-root .notice-box.warn{background:#FFF6DD;border-color:#F0DDA5;color:#6B4A00}
#hr-root .notice-box svg{margin-top:2px;width:16px;height:16px}
#hr-root .review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0 0 16px}
#hr-root .review-list dt{font-size:11px;color:var(--muted)}
#hr-root .review-list dd{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
#hr-root .wizard-actions{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
#hr-root .wizard-actions .right{display:flex;gap:12px;flex-wrap:wrap}
#hr-root .wizard-actions button,#hr-root .wizard-actions a{min-height:48px;padding:12px 18px;font-size:14px}
#hr-root .done-card{max-width:640px;margin:10px auto;padding:30px 26px}
#hr-root .done-card h1{font-size:24px}
#hr-root .mail-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;background:#F8FCFD}
#hr-root .mail-item pre{white-space:pre-wrap;word-break:break-word;font:12px/1.6 Montserrat,sans-serif;margin:8px 0 0;color:var(--ink)}
#hr-root .drafts-strip{padding:14px 18px;margin-bottom:16px}
#hr-root .drafts-strip h2{font-size:14px;margin:0 0 8px}
#hr-root .draft-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
@media(max-width:700px){#hr-root .step-text span{display:none}#hr-root .stepper li:not(:last-child)::after{margin:0 6px}#hr-root .review-list{grid-template-columns:1fr}#hr-root .wizard-actions .right{width:100%}#hr-root .wizard-actions .right>*{flex:1}}

/* date field */
#hr-root .field-label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px}
#hr-root .date-parts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr);gap:8px}
#hr-root .date-parts .org-input{font-size:16px;min-height:50px;padding:10px 8px;background:#FFFFFFE6}
#hr-root [data-date-wrap] .date-parts select[aria-invalid=true]{border-color:#B42318}

/* assignments */
#hr-root dialog.wide{max-width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
#hr-root .move-current{display:grid;gap:4px;background:#EAF4FB99;border:1px solid #CFE3F1;border-radius:12px;padding:12px 14px;margin:12px 0 4px;font-size:13px}
#hr-root .move-current small{color:var(--muted);font-size:12px}
#hr-root .timeline{list-style:none;margin:14px 0 0;padding:0 0 0 16px;border-left:2px solid #C9D8E5;display:grid;gap:16px}
#hr-root .timeline li{position:relative;padding-left:14px;font-size:13px}
#hr-root .timeline li::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:#AABFD2;border:2px solid #FFF}
#hr-root .timeline li.current::before{background:var(--blue)}
#hr-root .timeline small{display:block;color:var(--muted);font-size:12px;line-height:1.6}
#hr-root .range-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;grid-column:1/-1}
#hr-root .link-btn{border:0;background:transparent;color:var(--blue);font-weight:600;font-size:12px;padding:0;min-height:36px;text-align:left}
@media(max-width:700px){#hr-root .range-row{grid-template-columns:1fr}}
#hr-root .row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
#hr-root .row-actions .secondary{min-height:36px;padding:6px 10px}

#hr-root .status-pill.preceptor{color:#7A5200;background:#FFF1CC}
#cadre-kpis4,#hr-root .kpis-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1000px){#hr-root .kpis-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* teams */
#hr-root .team-panel{padding:18px 18px 12px}
#hr-root .team-tools{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end;margin-bottom:14px}
#hr-root .team-tools .search-field{flex:1;min-width:200px}
#hr-root .team-tools>div:not(.search-field):not(.team-tool-btns){min-width:200px}
#hr-root .team-tools label{margin-bottom:6px}
#hr-root .team-tools .org-input{font-size:14px}
#hr-root .team-tool-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
#hr-root .team-tree,#hr-root .team-tree ul{list-style:none;margin:0;padding:0}
#hr-root .team-tree ul{margin-left:22px;padding-left:12px;border-left:2px solid #D4E0EA}
#hr-root .team-item{margin:8px 0}
#hr-root .team-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) 70px minmax(90px,170px) auto;gap:10px 12px;align-items:center;background:linear-gradient(135deg,#FFFFFFE0,#FFFFFFA6);border:1px solid #FFFFFFC9;border-right-color:#CFDBE570;border-bottom-color:#BDCFDD99;border-radius:14px;padding:6px 14px 6px 6px;box-shadow:inset 1px 1px 0 #FFFFFFE6,2px 4px 8px #173D5908}
#hr-root .team-icon{width:38px;height:38px;border-radius:11px;background:#E4F0F7;color:var(--blue);display:flex;align-items:center;justify-content:center}
#hr-root .team-l0 .team-icon{background:#DCEEF7}
#hr-root .team-name{border:0;background:transparent;text-align:left;padding:6px 0;min-height:44px;color:var(--ink);display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;border-radius:8px;min-width:0}
#hr-root .team-name:hover strong{color:var(--blue);text-decoration:underline}
#hr-root .team-name strong{font-size:14px;font-weight:600;color:var(--navy);overflow-wrap:anywhere}
#hr-root .team-name small{flex-basis:100%;font-size:11px;font-weight:400;color:var(--muted);line-height:1.5}
#hr-root .team-level{font-size:10px;font-weight:500;color:#2B5FA8;background:#E6EEFB;border-radius:6px;padding:1px 7px}
#hr-root .team-count{text-align:right;line-height:1.1}
#hr-root .team-count strong{display:block;font-size:20px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
#hr-root .team-count small{font-size:10px;color:var(--muted)}
#hr-root .team-bar{height:8px;background:#E3ECF3;border-radius:99px;overflow:hidden}
#hr-root .team-bar span{display:block;height:100%;background:linear-gradient(90deg,#0861AE,#0391A3);border-radius:99px;min-width:0}
#hr-root .team-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
#hr-root .team-chips span,#hr-root .chip-blue,#hr-root .chip-amber,#hr-root .chip-warn,#hr-root .chip-ok,#hr-root .chip-muted{font-size:11px;font-weight:600;border-radius:99px;padding:3px 10px;white-space:nowrap}
#hr-root .chip-blue{color:#0155A2;background:#DCEEF7}
#hr-root .chip-amber{color:#7A5200;background:#FFF1CC}
#hr-root .chip-warn{color:#B42318;background:#FDE8E6}
#hr-root .chip-ok{color:#18794E;background:#EAF7EF}
#hr-root .chip-muted{color:#52647A;background:#EBF0F4}
@media(max-width:900px){#hr-root .team-row{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"tw ic nm ct" ". . bar bar" ". . ch ch"}#hr-root .team-row>.tree-twist,#hr-root .team-row>.tree-spacer{grid-area:tw}#hr-root .team-icon{grid-area:ic}#hr-root .team-name{grid-area:nm}#hr-root .team-count{grid-area:ct}#hr-root .team-bar{grid-area:bar}#hr-root .team-chips{grid-area:ch;justify-content:flex-start}}
@media(max-width:700px){#hr-root .team-tree ul{margin-left:10px;padding-left:8px}#hr-root .team-icon{display:none}#hr-root .team-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tw nm ct" ". bar bar" ". ch ch"}}

/* teams workspace (people-focused) */
#hr-root .tree-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--navy);background:#E4F0F7;border-radius:99px;padding:1px 8px;flex-shrink:0}
#hr-root .tree-label{min-width:0;overflow-wrap:anywhere}
#hr-root .dot-warn{display:inline-block;width:9px;height:9px;border-radius:50%;background:#D9822B;margin:4px 4px 0 6px;flex-shrink:0;vertical-align:middle}
#hr-root .team-main{min-height:420px}
#hr-root .team-stats>div{border-left:1px solid var(--line);padding-left:12px}
#hr-root .team-stats>div:first-child{border-left:0;padding-left:0}
#hr-root .team-stats .stat-warn strong{color:#B25E00}
#hr-root .team-sub{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 4px}
#hr-root .team-sub .search-field{flex:1;min-width:200px}
#hr-root .team-sub label{margin-bottom:6px}
#hr-root .team-sub .org-input{font-size:14px}
#hr-root .pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
#hr-root .pair-grid h3{font-size:15px;margin-bottom:6px}
#hr-root .pair-card{border:1px solid var(--line);border-radius:14px;background:#FFFFFF99;padding:12px 14px;margin-top:10px}
#hr-root .pair-head{display:flex;gap:10px;align-items:center}
#hr-root .pair-head>div{flex:1;min-width:0}
#hr-root .pair-head strong{display:block;font-size:13px;color:var(--navy)}
#hr-root .pair-head small{font-size:11px;color:var(--muted)}
#hr-root .mentee-list,#hr-root .needs-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
#hr-root .mentee-list li,#hr-root .needs-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;padding:2px 0;border-top:1px solid #E6EEF4}
#hr-root .mentee-list li:first-child,#hr-root .needs-list li:first-child{border-top:0}
#hr-root .needs-list{margin-top:10px}
#hr-root .needs-list li{min-height:40px}
#hr-root .mix-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
#hr-root .mix-list li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(60px,1fr) 28px;gap:10px;align-items:center;font-size:13px}
#hr-root .mix-list strong{text-align:right;color:var(--navy)}
@media(max-width:1100px) and (min-width:701px){#hr-root .org-workspace-grid{grid-template-columns:1fr}}
@media(max-width:800px){#hr-root .pair-grid{grid-template-columns:1fr}#hr-root .team-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:14px}}
@media(max-width:800px){#hr-root .team-stats>div:nth-child(odd){border-left:0;padding-left:0}#hr-root .team-stats>div:nth-child(even){border-left:1px solid var(--line);padding-left:16px}}
/* overview cards: numbers line up even when a label wraps */
#hr-root .cadre-kpi{display:flex;flex-direction:column}
#hr-root .cadre-kpi small{margin-top:auto;padding-top:2px}
@media(max-width:1300px){#hr-root .kpis-4 .cadre-kpi span{min-height:3em}}
@media(max-width:700px){#hr-root .cadre-kpi span{min-height:3em}}

/* licenses & credentials */
#hr-root .status-pill.unverified,#hr-root .status-pill.nearing{color:#7A5200;background:#FFF1CC}
#hr-root .status-pill.expired,#hr-root .status-pill.rejected{color:#B42318;background:#FDE8E6}
#hr-root .kind-pill{font-size:10px;font-weight:600;color:#2B5FA8;background:#E6EEFB;border-radius:6px;padding:1px 7px}
#hr-root .txt-bad{color:#B42318}
#hr-root .txt-warn{color:#946200}
#hr-root .row-old td{opacity:.6}
#hr-root .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
#hr-root .filter-chip{min-height:36px;border:1px solid #AABFD2;border-radius:99px;background:#FFFFFFB3;color:var(--ink);font-size:12px;padding:4px 14px}
#hr-root .filter-chip strong{color:var(--navy);margin-left:4px}
#hr-root .filter-chip.on{background:#DCEEF7;border-color:var(--blue);color:var(--navy)}
#hr-root .req-chip{display:inline-block;font-size:11px;font-weight:600;border-radius:99px;padding:3px 10px;margin:2px 4px 2px 0}
#hr-root .req-chip.valid{color:#18794E;background:#EAF7EF}
#hr-root .req-chip.missing,#hr-root .req-chip.expired,#hr-root .req-chip.rejected{color:#B42318;background:#FDE8E6}
#hr-root .req-chip.pending{color:#7A5200;background:#FFF1CC}
#hr-root .req-row{display:flex;flex-wrap:wrap;align-items:center}
#hr-root .file-chip{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:8px;background:#F8FCFD;font-size:13px}
#hr-root .file-chip small{color:var(--muted)}
#hr-root .sec-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
#hr-root .rule-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:12px 0 14px}
#hr-root .rule-form label{margin-bottom:6px}
#hr-root .rule-form .org-input{font-size:14px}
#hr-root .cred-box{border:1px solid var(--line);border-radius:14px;background:#FFFFFF8F;padding:14px 16px;margin:0 0 14px}
#hr-root .cred-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
@media(max-width:800px){#hr-root .rule-form{grid-template-columns:1fr}}
/* spacing under section headers with an action button */
#hr-root .sec-head{margin-bottom:16px;gap:10px 16px}
#hr-root .sec-head h3{margin-bottom:4px}
#hr-root .sec-head p{margin:0}
#hr-root .rule-form{margin-top:16px}

/* mandatory scope + advanced rules */
#hr-root .scope-box{border:1px solid var(--line);border-radius:12px;background:#FFFFFF8F;padding:10px 14px;margin:0}
#hr-root .scope-box legend{font-size:12px;font-weight:600;color:var(--navy);padding:0 6px}
#hr-root .scope-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;max-height:220px;overflow:auto}
#hr-root .scope-cols strong{font-size:12px;color:var(--muted)}
#hr-root details.adv{border:1px solid var(--line);border-radius:14px;background:#FFFFFF66;padding:0 16px}
#hr-root details.adv>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--navy);list-style:none}
#hr-root details.adv>summary::-webkit-details-marker{display:none}
#hr-root details.adv>summary::before{content:"▸";color:var(--blue)}
#hr-root details.adv[open]>summary::before{content:"▾"}
#hr-root details.adv>section{padding-bottom:14px}
@media(max-width:700px){#hr-root .scope-cols{grid-template-columns:1fr}}

#hr-root .role-sub{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.4;margin-top:1px}
#hr-root .lock-note{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
#hr-root .lock-note svg{width:13px;height:13px}
#hr-root .shared-tag{font-size:10px;font-weight:600;color:#52647A;background:#EBF0F4;border-radius:6px;padding:1px 7px}

#hr-root .iam-blank{min-height:360px}

/* ---- cleaner, compact sidebar (replaces the earlier oversized layout) ---- */
#hr-root .app{grid-template-columns:228px minmax(0,1fr)}
#hr-root .sidebar{padding:16px 10px 10px;display:flex;flex-direction:column;overflow:hidden}
#hr-root .brand img{width:128px}
#hr-root .version{margin-top:4px;font-size:10px}
#hr-root .role{padding:12px 8px 10px;margin-bottom:8px;font-size:13px;gap:8px;align-items:flex-start}
#hr-root .role svg{margin-top:2px}
#hr-root .role-sub{font-size:11px}
#hr-root .main-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:block;padding:0 2px 6px 0;scrollbar-width:thin;scrollbar-color:#C9D8E5 transparent}
#hr-root .nav-group{gap:1px;display:block}
#hr-root .nav-group+.nav-group{border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
#hr-root .nav-label{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:32px;padding:0 10px;margin:0;border:0;background:transparent;border-radius:8px;color:var(--muted);font:600 10.5px/1.4 Montserrat,sans-serif;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;text-align:left}
#hr-root .nav-label:hover{color:var(--navy);background:#EAF4FB80}
#hr-root .nav-label svg{width:14px;height:14px;transition:transform .15s}
#hr-root .nav-group.collapsed .nav-label svg{transform:rotate(-90deg)}
#hr-root .nav-items{display:grid;gap:1px}
#hr-root .nav-items[hidden]{display:none}
#hr-root .nav-item{min-height:38px;padding:7px 10px;font-size:13px;gap:10px;border-radius:9px;line-height:1.35}
#hr-root .nav-item svg{width:17px;height:17px}
#hr-root .workforce{margin-top:6px;padding-top:4px}
#hr-root .sidebar-foot{margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
#hr-root .company-wrap{width:104px;margin:0 auto 4px}
#hr-root .copyright{font-size:10px;line-height:1.45}

@media(max-width:1000px) and (min-width:701px){#hr-root .app{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:700px){
#hr-root .app.nav-open .sidebar{display:flex;position:fixed;top:140px;left:12px;right:auto;bottom:auto;width:min(300px,calc(100vw - 24px));height:auto;max-height:calc(100dvh - 156px);padding:8px;overflow:hidden;background:#F8FCFD;border-radius:16px;box-shadow:8px 18px 40px #173D5933;z-index:20}
#hr-root .app.nav-open .sidebar .main-nav{overflow-y:auto}
#hr-root .app.nav-open .sidebar .brand,#hr-root .app.nav-open .sidebar .role,#hr-root .app.nav-open .sidebar .sidebar-foot{display:none}
}

/* ---- sidebar v3: ONE simple scrolling column (no nested scrollbars, nothing pinned that steals space) ---- */
#hr-root .sidebar{display:block;overflow-y:auto;overflow-x:hidden;padding:14px 10px 14px;scrollbar-width:thin;scrollbar-color:#C9D8E5 transparent}
#hr-root .main-nav{flex:none;min-height:0;overflow:visible;padding:0}
#hr-root .brand img{width:118px}
#hr-root .role{padding:8px 8px 10px;margin-bottom:6px}
#hr-root .nav-item{min-height:36px;padding:6px 10px}
#hr-root .nav-label{min-height:30px}
#hr-root .sidebar-foot{margin-top:12px;padding-top:12px}
#hr-root .company-wrap{width:96px}
@media(max-width:700px){
#hr-root .app.nav-open .sidebar{display:block;overflow-y:auto}
#hr-root .app.nav-open .sidebar .main-nav{overflow:visible}
}
@media(max-width:1100px) and (min-width:701px){
#hr-root .app{grid-template-columns:218px minmax(0,1fr)}
#hr-root .nav-item{gap:8px;padding:6px 8px;font-size:12.5px}
#hr-root .nav-label{letter-spacing:.4px;padding:0 8px;font-size:10px}
#hr-root .topbar{padding:12px 16px}
#hr-root main{padding:20px 18px 26px}
}

/* =====================================================================================================
   MOBILE FIRST PASS — most users are on phones. Everything below only applies at phone width (<=700px).
   ===================================================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:700px){
/* the menu is a drawer on phones: hidden until opened (fixes the menu showing permanently above the page) */
#hr-root .app:not(.nav-open) .sidebar{display:none}
#hr-root .work-area{overflow-x:clip}

/* compact top bar: ☰  logo  time  avatar — one slim sticky row */
#hr-root .topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;gap:4px;align-items:center;min-height:56px;padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top));padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
#hr-root .topbar .mobile-brand{grid-column:2;justify-self:start;display:block;line-height:1}
#hr-root .topbar .mobile-brand img{width:92px}
#hr-root .topbar .mobile-brand .version{display:none}
#hr-root .top-right{display:contents}
#hr-root .clock{grid-row:1;grid-column:3;display:block;text-align:right}
#hr-root .clock-time{font-size:13px;white-space:nowrap}
#hr-root .clock-date,#hr-root .clock-zone{display:none}
#hr-root .profile{grid-row:1;grid-column:4;margin:0}
#hr-root .profile summary{min-width:40px;min-height:40px}
#hr-root .profile-menu{position:fixed;top:60px;right:10px;left:10px;width:auto}

/* page chrome */
#hr-root main{padding:14px 14px calc(28px + env(safe-area-inset-bottom));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
#hr-root h1{font-size:22px;margin-bottom:6px}
#hr-root .subtitle{font-size:13px;line-height:1.55}
#hr-root .page-head{margin-bottom:12px;gap:10px}
#hr-root .eyebrow{margin-bottom:2px}
#hr-root .preview-banner{font-size:11px;padding:8px 10px;margin-bottom:12px;line-height:1.5}
#hr-root .preview-banner .banner-more{display:none}
#hr-root .cadre-kpis,#hr-root .kpis-4{gap:8px;margin-bottom:12px}
#hr-root .cadre-kpi{padding:12px}
#hr-root .cadre-kpi strong{font-size:24px}
#hr-root .glass{border-radius:16px}

/* thumb-sized controls: 44px minimum targets */
#hr-root button,#hr-root .secondary,#hr-root .primary,#hr-root .icon-button{min-height:44px}
#hr-root .secondary{padding:10px 14px;font-size:13px}
#hr-root .row-actions .secondary,#hr-root .pager button{min-height:44px;min-width:44px;padding:8px 14px;font-size:13px}
#hr-root .nav-item,#hr-root .nav-label{min-height:46px}
#hr-root .filter-chip{min-height:44px;padding:6px 16px;font-size:13px}
#hr-root .structure-tabs button{min-height:46px;padding:10px 12px;font-size:13px}
#hr-root .check-inline,#hr-root .toggle-row,#hr-root .status-option,#hr-root .picker-list label{min-height:44px}
#hr-root input[type=checkbox],#hr-root input[type=radio]{width:22px;height:22px}
#hr-root .emp-cell input{min-width:22px;min-height:22px}
#hr-root .text-action,#hr-root .plain-action{min-height:44px}
#hr-root .tree-node,#hr-root .tree-twist{min-height:46px}
#hr-root .tree-twist{min-width:40px}

/* no iPhone auto-zoom: inputs are at least 16px */
#hr-root input:not([type=checkbox]):not([type=radio]):not([type=file]),#hr-root select,#hr-root textarea,#hr-root .org-input{font-size:16px!important}

/* wide rows become cards; actions wrap into a full-width, easy-to-tap row */
#hr-root table.records tr{padding:14px 14px}
#hr-root table.records td.act{grid-column:1/-1!important;grid-row:auto!important;text-align:left!important;justify-self:stretch!important;padding-top:4px}
#hr-root table.records td.act .row-actions{justify-content:flex-start;gap:8px}
#hr-root table.records td.act .row-actions .secondary{flex:1 1 auto}
#hr-root .record-name{font-size:15px}
#hr-root .records-foot,#hr-root .pager{flex-wrap:wrap;gap:8px}

/* forms: single column, never wider than the screen, Save/Cancel always reachable */
#hr-root .cadre-status-options{grid-template-columns:1fr!important}
#hr-root .form-layout,#hr-root .new-org-form{min-width:0}
#hr-root .form-section{padding:16px 14px}
#hr-root .organization-fields{gap:16px}
#hr-root .create-org-actions,#hr-root .wizard-actions{padding:12px 0;margin-top:8px}
#hr-root .wizard-actions button,#hr-root .wizard-actions a{min-height:48px}
#hr-root .org-validation{text-align:left}
#hr-root .form-context{order:-1}
#hr-root .step-text strong{font-size:12px}

/* filters: search stays visible, the rest folds away behind one button */
#hr-root .emp-filters{padding:14px 14px 10px;gap:10px}
#hr-root .emp-filters.filters-collapsed>div:not(:first-child):not(.emp-filter-actions),#hr-root .emp-filters.filters-collapsed>.range-row{display:none}
#hr-root .emp-filters.filters-collapsed .emp-filter-actions{display:none}
#hr-root .filters-toggle{width:100%;justify-content:center;gap:8px}
#hr-root .emp-toolbar{padding:6px 14px 8px}
#hr-root .emp-tools{width:100%}
#hr-root .emp-tools>.secondary,#hr-root .emp-tools>select{flex:1 1 calc(50% - 8px)}
#hr-root .tool-note{padding:0 14px 4px}
#hr-root .chip-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px!important;margin-left:0;scrollbar-width:none}
#hr-root .chip-row::-webkit-scrollbar{display:none}
#hr-root .filter-chip{flex:0 0 auto}

/* trees (Organization, Teams): collapsed behind one tap so the content comes first */
#hr-root .tree-panel.tree-collapsed>:not(.tree-heading){display:none}
#hr-root .tree-panel .tree-heading{margin-bottom:0}
#hr-root .tree-panel:not(.tree-collapsed) .tree-heading{margin-bottom:10px}
#hr-root .tree-toggle-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;min-height:48px;border:0;background:transparent;padding:0 2px;text-align:left;font-weight:600;color:var(--navy)}
#hr-root .tree-toggle-btn small{font-weight:400;color:var(--muted);font-size:12px;display:block}
#hr-root .tree-panel{padding:10px 14px}

/* dialogs become bottom sheets */
#hr-root dialog{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));overflow:auto}
#hr-root dialog.wide{max-width:100vw}
#hr-root dialog .dialog-actions{position:sticky;bottom:calc(-1 * (18px + env(safe-area-inset-bottom)));background:linear-gradient(to top,#fff 75%,#fff0);padding:12px 0 4px;margin-top:12px;flex-direction:column-reverse;align-items:stretch}
#hr-root dialog .dialog-actions>*{width:100%;justify-content:center}
#hr-root dialog .dialog-actions .row-actions{width:100%;justify-content:stretch}
#hr-root dialog .dialog-actions .row-actions>*{flex:1 1 auto}
#hr-root dialog h2{font-size:18px;padding-right:8px}
#hr-root .date-parts{gap:6px}
#hr-root .date-parts .org-input{padding:10px 6px}
#hr-root .toast{left:12px;right:12px;transform:none;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center}

/* team workspace */
#hr-root .pair-grid{gap:14px}
#hr-root .selected-profile{padding:14px}
#hr-root .org-workspace-grid{gap:12px}
}
@media(max-width:380px){
#hr-root h1{font-size:20px}
#hr-root .clock-time{font-size:12px}
#hr-root .topbar .mobile-brand img{width:80px}
#hr-root .cadre-kpis,#hr-root .kpis-4{grid-template-columns:1fr 1fr}
#hr-root .cadre-kpi span{font-size:11px}
}

/* ---- mobile: inline text links get a comfortable tap area ---- */
@media(max-width:700px){
#hr-root main td a,#hr-root main .tree-node,#hr-root .banner a,#hr-root main .link-btn{display:inline-flex;align-items:center;min-height:44px}
#hr-root main .tree-node{display:flex}
#hr-root .banner a{min-height:36px}
}

/* ---- phone drawer: dimmed backdrop, closes on tap-outside / scroll / navigation ---- */
#hr-root .nav-scrim{display:none}
@media(max-width:700px){
#hr-root .app.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:#0A1E3C66;z-index:19;-webkit-tap-highlight-color:transparent}
#hr-root .app.nav-open .topbar{position:sticky;z-index:21}
#hr-root .app.nav-open .sidebar{top:calc(env(safe-area-inset-top,0px) + 64px)!important;z-index:22;max-height:calc(100dvh - 80px)}
}

/* ---- Employee workspace ---- */
#hr-root button.danger{background:#B42318;color:#fff;border:0;border-radius:10px;min-height:44px;padding:0 18px;font:600 13px Montserrat,sans-serif;cursor:pointer}
#hr-root .status-pill.rejected{color:#B42318;background:#FDECEA}
#hr-root .status-pill.nearing{color:#7A5200;background:#FFF1CC}
#hr-root .file-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#hr-root details>summary{list-style:none}
#hr-root details>summary::-webkit-details-marker{display:none}

/* ===== Employee workspace: design from the Employee handover (panels, tabs, record cards) ===== */
#hr-root .ew-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
#hr-root .ew-head h1{font-size:26px;margin:0 0 8px}
#hr-root .ew-kicker{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#52647A;margin:0 0 7px}
#hr-root .ew-copy{font-size:13px;line-height:1.7;color:#52647A;margin:0;max-width:520px}
#hr-root .ew-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 19px;border-bottom:1px solid #CCDCE7;padding-bottom:9px}
#hr-root .ew-tabs button{border:0;border-radius:9px;background:transparent;color:#52647A;display:flex;align-items:center;gap:7px;padding:10px 12px;font:500 12px Montserrat,sans-serif;min-height:44px;cursor:pointer}
#hr-root .ew-tabs button:hover{background:#EAF4FB}
#hr-root .ew-tabs button[aria-selected=true]{background:#DCEEF7;color:#00286E;font-weight:600;box-shadow:inset 0 -2px #0155A2}
#hr-root .ew-tabs svg{width:17px;height:17px;flex-shrink:0}
#hr-root .ew-panel{padding:22px;margin-bottom:16px;min-width:0}
#hr-root .ew-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
#hr-root .ew-sec-head h2,#hr-root .ew-panel h2{font-size:18px;margin:0 0 6px;color:#00286E;font-weight:600}
#hr-root .ew-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:transparent;border:0;color:#0155A2;font:600 12px Montserrat,sans-serif;padding:0;text-align:left;cursor:pointer;text-decoration:none}
#hr-root .ew-link:hover{color:#003F7D}
#hr-root .ew-link svg{width:15px;height:15px}
#hr-root .ew-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;border:1px solid #AABFD2;border-radius:10px;background:#FFFFFF70;color:#0155A2;font:500 12px Montserrat,sans-serif;cursor:pointer}
#hr-root .ew-tool svg{width:16px;height:16px}
#hr-root .ew-empty{text-align:center;padding:34px 10px 38px;border-top:1px solid #D4E0EA}
#hr-root .ew-empty-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:#E0EEF7;color:#0155A2;border-radius:16px;margin:0 auto 16px}
#hr-root .ew-empty h3{font-size:17px;margin:0 0 10px;color:#00286E}
#hr-root .ew-empty p{max-width:380px;margin:0 auto 18px;font-size:12px;line-height:1.8;color:#52647A}
#hr-root .ew-notice{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:#E7F2F7;border-radius:11px;font-size:11px;line-height:1.8;color:#52647A;margin-top:16px}
#hr-root .ew-notice svg{width:17px;height:17px;flex-shrink:0;color:#0155A2;margin-top:3px}
#hr-root .ew-help{margin:18px 0 0;border-top:1px solid #D4E0EA;padding-top:15px;font-size:12px;color:#0155A2}
#hr-root .ew-help summary{min-height:35px;cursor:pointer;display:flex;align-items:center}
#hr-root .ew-help p{font-size:12px;color:#52647A;line-height:1.8;margin:8px 0}
#hr-root .ew-note{font-size:11px;line-height:1.8;color:#52647A;margin:14px 0 0}
#hr-root .ew-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#hr-root .ew-record{background:#F8FBFD;border:1px solid #D4E0EA;border-radius:14px;padding:17px;min-width:0}
#hr-root .ew-record h3{font-size:14px;overflow-wrap:anywhere;margin:8px 0;color:#00286E}
#hr-root .ew-record p{font-size:11px;line-height:1.8;color:#52647A;overflow-wrap:anywhere;margin:6px 0}
#hr-root .ew-badges{display:flex;gap:6px;flex-wrap:wrap}
#hr-root .ew-badge{font-size:11px;border-radius:6px;padding:3px 7px;background:#E6EEF5;color:#52647A}
#hr-root .ew-badge.ok{background:#EAF7EF;color:#18794E}
#hr-root .ew-badge.attention{background:#FFF1DA;color:#87580B}
#hr-root .ew-badge.expired{background:#FCE8E6;color:#B42318}
#hr-root .ew-rec-actions{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;border-top:1px solid #D4E0EA;margin-top:13px;padding-top:6px}
#hr-root .ew-rec-actions button,#hr-root .ew-rec-actions a{border:0;background:transparent;color:#0155A2;font:500 12px Montserrat,sans-serif;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-decoration:none}
#hr-root .ew-rec-actions .del{color:#B42318}
#hr-root .ew-record details{font-size:11px;color:#52647A;line-height:1.8;margin-top:8px}
#hr-root .ew-record summary{min-height:32px;cursor:pointer;color:#0155A2}
#hr-root .ew-search{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px;margin:0 0 12px}
#hr-root .ew-field{display:grid;gap:7px;font-size:12px;color:#52647A;min-width:0;align-content:start}
#hr-root .ew-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 20px}
#hr-root .ew-chips button{min-height:36px;border:1px solid #C5D6E4;border-radius:8px;background:#FFFFFF80;color:#52647A;padding:6px 11px;font:500 11px Montserrat,sans-serif;cursor:pointer}
#hr-root .ew-chips button[aria-pressed=true]{border-color:#0155A2;background:#DCEEF7;color:#00286E}
#hr-root .ew-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:17px;font-size:11px;color:#52647A}
#hr-root .ew-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid #D4E0EA;padding-top:19px;margin-top:22px}
#hr-root .ew-form .organization-fields{grid-template-columns:1fr 1fr;gap:17px}
#hr-root .ew-form .toggle-row{grid-column:1/-1}
#hr-root .ew-summary{display:flex;gap:22px;flex-wrap:wrap;font-size:11px;color:#52647A;padding:12px 0;border-top:1px solid #D4E0EA;border-bottom:1px solid #D4E0EA;margin-bottom:20px}
#hr-root .ew-summary strong{font-size:14px;color:#00286E;margin-right:6px}
#hr-root .ew-identity{display:flex;align-items:center;gap:18px;padding:22px;margin-bottom:20px}
#hr-root .ew-photo{width:72px;height:72px;border-radius:50%;background:#DCEEF7;color:#00286E;display:grid;place-items:center;font-weight:600;font-size:24px;overflow:hidden;flex-shrink:0}
#hr-root .ew-photo img{width:100%;height:100%;object-fit:cover}
#hr-root .ew-meta{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:11px;color:#52647A;margin-top:10px;line-height:1.8}
#hr-root .ew-grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
#hr-root .ew-sub{font-size:14px;margin:0 0 10px;color:#00286E;font-weight:600}
#hr-root .ew-dl{margin:0;display:grid;gap:0}
#hr-root .ew-dl>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #D4E0EA80;font-size:12px}
#hr-root .ew-dl dt{color:#52647A;margin:0}
#hr-root .ew-dl dd{margin:0;color:#172B4D;font-weight:500;text-align:right;overflow-wrap:anywhere}
#hr-root .ew-person{padding:12px 0;border-bottom:1px solid #D4E0EA80;font-size:12px}
#hr-root .ew-person p{margin:3px 0 0;color:#52647A;font-size:11px;line-height:1.7}
#hr-root .ew-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr);gap:17px;align-items:start;margin-top:4px}
#hr-root .ew-table-wrap{overflow:auto}
#hr-root .ew-table{width:100%;border-collapse:collapse;font-size:12px;color:#52647A;text-align:left;line-height:1.7}
#hr-root .ew-table th{font-size:11px;font-weight:500;padding:10px 8px;background:#EAF2F74D}
#hr-root .ew-table td{padding:12px 8px;border-top:1px solid #D4E0EA80;vertical-align:top}
#hr-root .ew-table td strong{color:#172B4D}
#hr-root .ew-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
#hr-root .ew-stat{padding:17px;display:grid;gap:4px;font-size:11px;color:#52647A;text-align:left}
#hr-root .ew-stat strong{font-size:23px;color:#00286E;font-weight:600}
#hr-root .ew-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);gap:18px;align-items:start}
#hr-root .ew-rail{display:grid;gap:16px}
#hr-root .ew-rail p{font-size:12px;color:#52647A;line-height:1.7;margin:0 0 8px}
#hr-root .ew-steps{margin:0;padding-left:18px;font-size:11px;color:#52647A;line-height:1.8}
#hr-root .ew-steps li{margin-bottom:8px}
#hr-root .ew-steps strong{display:block;color:#00286E;font-size:12px}
#hr-root .ew-goal{background:#F8FBFD;border:1px solid #D4E0EA;border-radius:14px;margin-bottom:12px}
#hr-root .ew-goal>summary{padding:15px 17px;cursor:pointer;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;align-items:center;min-height:44px;list-style:none}
#hr-root .ew-goal>div{padding:0 17px 14px}
#hr-root .ew-acts{list-style:none;margin:8px 0;padding:0}
#hr-root .ew-acts li{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;border-top:1px solid #D4E0EA80;padding:4px 0}
/* dashboard */
#hr-root .welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;margin-bottom:18px}
#hr-root .welcome h2{font-size:19px;margin:0 0 7px;color:#00286E}
#hr-root .welcome-icon{width:48px;height:48px;border-radius:15px;background:#DCEEF7;display:flex;align-items:center;justify-content:center;color:#0155A2;flex-shrink:0}
#hr-root .summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
#hr-root .summary-card{padding:17px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:#172B4D;font-family:Montserrat,sans-serif;text-decoration:none;cursor:pointer}
#hr-root .summary-card:hover{background:#F1F8FD}
#hr-root .summary-top{display:flex;align-items:center;gap:8px;font-size:11px;color:#52647A;min-height:33px}
#hr-root .summary-top svg{width:16px;height:16px;flex-shrink:0;color:#0155A2}
#hr-root .summary-value{font-size:23px;color:#00286E;font-weight:600;line-height:1.5;margin:5px 0}
#hr-root .summary-copy{font-size:11px;line-height:1.7;color:#52647A}
#hr-root .dashboard-columns{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr);gap:18px;align-items:start}
#hr-root .dash-stack{display:grid;gap:18px;min-width:0}
#hr-root .panel-top{padding:20px 20px 16px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid #D4E0EA99}
#hr-root .panel-top h2{font-size:16px;margin:0 0 5px;color:#00286E}
#hr-root .panel-top p{font-size:11px;line-height:1.7;color:#52647A;margin:0}
#hr-root .panel-top>svg{color:#0155A2;flex-shrink:0;width:19px;height:19px;margin-top:2px}
#hr-root .panel-body{padding:20px}
#hr-root .panel-body h3{font-size:14px;margin:0 0 8px;color:#00286E}
#hr-root .panel-body p{font-size:12px;line-height:1.8;color:#52647A;margin:0}
#hr-root .quiet-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#52647A;background:#EDF3F7;border-radius:7px;padding:5px 8px;margin-bottom:12px}
#hr-root .action-list{margin:16px 0 0;padding:0;list-style:none}
#hr-root .action-list li+li{border-top:1px solid #D4E0EA80}
#hr-root .action-link{width:100%;border:0;background:transparent;padding:14px 0;display:flex;align-items:center;gap:10px;text-align:left;color:#00286E;text-decoration:none;cursor:pointer;font-family:Montserrat,sans-serif;min-height:44px}
#hr-root .action-link>svg{width:17px;height:17px;color:#0155A2;flex-shrink:0}
#hr-root .action-link>svg:last-child{margin-left:auto;width:15px}
#hr-root .action-link span{min-width:0;flex:1}
#hr-root .action-link strong{font-size:12px;font-weight:600;display:block;line-height:1.6}
#hr-root .action-link small{display:block;font-size:11px;line-height:1.7;color:#52647A;margin-top:2px}
#hr-root .panel-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px 8px}
#hr-root .bottom-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin:20px 0 0;padding:8px 0 0;border-top:1px solid #D4E0EA}
@media(max-width:960px){#hr-root .dashboard-columns,#hr-root .ew-split,#hr-root .ew-layout{grid-template-columns:1fr}#hr-root .ew-grid2{grid-template-columns:1fr}#hr-root .welcome{flex-wrap:wrap}}
@media(max-width:950px){#hr-root .ew-cards{grid-template-columns:1fr}}
@media(max-width:700px){
#hr-root .ew-head h1{font-size:24px}
#hr-root .ew-head>.primary{width:100%}
#hr-root .ew-panel{padding:18px}
#hr-root .ew-tabs button{flex:1 1 40%;justify-content:center;font-size:11px}
#hr-root .ew-search,#hr-root .ew-form .organization-fields{grid-template-columns:1fr}
#hr-root .ew-chips button{min-height:44px}
#hr-root .ew-actions>.primary{width:100%}
#hr-root .ew-identity{flex-wrap:wrap;padding:18px}
#hr-root .ew-stats{grid-template-columns:1fr;gap:10px}
#hr-root .summary-grid{grid-template-columns:1fr;gap:10px}
#hr-root .summary-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 15px;padding:14px 17px;width:100%}
#hr-root .summary-top{min-height:0}
#hr-root .summary-value{grid-column:2;grid-row:1/3;margin:0;align-self:center}
#hr-root .summary-copy{grid-column:1}
#hr-root .panel-top,#hr-root .panel-body{padding:18px}
#hr-root .welcome{padding:18px;gap:12px}
}

/* ===== NSO workspace ===== */
#hr-root .src-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;border-radius:6px;padding:3px 8px;white-space:nowrap}
#hr-root .src-badge.ascend{background:#E7F1FC;color:#174E86}
#hr-root .src-badge.adapted{background:#EEEAF9;color:#594084}
#hr-root .src-badge.custom{background:#E5F3EE;color:#21604C}
#hr-root .nb-name{color:#00286E;text-decoration:none}
#hr-root .nb-name:hover{text-decoration:underline}
#hr-root .nb-c{display:inline-flex;align-items:center;justify-content:center;min-width:32px;font-size:11px;font-weight:600;color:#00286E;background:#DCEEF7;border-radius:6px;padding:3px 7px}
#hr-root .nb-info{width:44px;height:44px;border:0;background:transparent;color:#0155A2;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#hr-root .nb-info:hover{background:#EAF4FB}
#hr-root .nb-info svg{width:18px;height:18px}
#hr-root .nb-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px}
#hr-root .nb-cover{margin:0;padding-left:18px;font-size:12px;color:#52647A;line-height:1.8}
#hr-root .nb-cover li{margin-bottom:6px}
#hr-root .nb-cover em{display:block;color:#775117;font-style:normal}
#hr-root .info-dialog{max-width:820px}
#hr-root .info-body{max-height:56vh;overflow:auto;padding-right:4px}
#hr-root dialog.info-dialog::backdrop{background:#17365373;backdrop-filter:blur(5px)}
#hr-root .nb-comp-row{border:1px solid #D4E0EA;border-radius:14px;background:#F8FBFD;margin-bottom:10px;overflow:hidden}
#hr-root .nb-comp-head{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:12px 14px;min-height:56px;cursor:pointer;font-family:Montserrat,sans-serif;color:#172B4D}
#hr-root .nb-comp-head:hover{background:#EEF6FB}
#hr-root .nb-comp-head>svg{width:18px;height:18px;color:#0155A2;flex-shrink:0}
#hr-root .nb-comp-name{flex:1;min-width:0}
#hr-root .nb-comp-name strong{display:block;font-size:13px;color:#00286E;line-height:1.4}
#hr-root .nb-comp-name small{display:block;font-size:11px;color:#52647A}
#hr-root .nb-comp-meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#hr-root .nb-comp-body{border-top:1px solid #D4E0EA;padding:8px 14px 14px}
#hr-root .nb-tools{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;padding:4px 0 10px}
#hr-root .nb-fill{display:flex;align-items:center;gap:8px;font-size:11px;color:#52647A}
#hr-root .nb-fill select{width:110px}
#hr-root .nb-item{display:grid;grid-template-columns:36px minmax(0,1fr) 52px 150px 100px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #D4E0EA80}
#hr-root .nb-item.off .nb-text{opacity:.55}
#hr-root .nb-inc{display:flex;align-items:center;justify-content:center;min-height:44px}
#hr-root .nb-inc input{width:20px;height:20px;accent-color:#0155A2}
#hr-root .nb-text span{font-size:12px;color:#172B4D;line-height:1.5}
#hr-root .nb-text small{display:block;font-size:11px;color:#52647A}
#hr-root .nb-cell small{display:none}
#hr-root .nb-flag{grid-column:2/-1;justify-self:start}
#hr-root .nb-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #D4E0EA}
#hr-root .nb-add .ew-field{flex:1 1 260px}
#hr-root .undo-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:flex;gap:14px;align-items:center;background:#00286E;color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:8px 16px 32px #173D5940;max-width:calc(100vw - 24px)}
#hr-root .undo-bar button{background:transparent;border:1px solid #ffffff80;color:#fff;border-radius:8px;min-height:40px;padding:0 14px;font:600 12px Montserrat,sans-serif;cursor:pointer}
@media(max-width:760px){
#hr-root .nb-item{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"inc text c" "cls cls cls" "p p p"}
#hr-root .nb-item>.nb-inc{grid-area:inc}
#hr-root .nb-item>.nb-text{grid-area:text}
#hr-root .nb-item>.nb-cc{grid-area:c}
#hr-root .nb-item>.nb-cl{grid-area:cls}
#hr-root .nb-item>.nb-pp{grid-area:p}
#hr-root .nb-flag{grid-column:1/-1}
#hr-root .nb-comp-head{flex-wrap:wrap}
#hr-root .nb-comp-meta{justify-content:flex-start;flex-basis:100%;padding-left:28px}
#hr-root .nb-filters{grid-template-columns:1fr}
#hr-root .ew-stats[style]{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){#hr-root .nb-cell .sr-label{position:static;width:auto;height:auto;margin:0 0 4px;clip:auto;overflow:visible;font-size:11px;color:#52647A;display:block}}
/* starting-point cards: equal height, button pinned to the bottom and styled as a real button */
#hr-root .nb-start{display:flex;flex-direction:column;padding:22px}
#hr-root .nb-start h3{font-size:16px;margin:0 0 8px}
#hr-root .nb-start p{flex:1;margin:0 0 16px;font-size:12px;line-height:1.7}
#hr-root .nb-start .ew-rec-actions{border:0;margin:0;padding:0}
#hr-root .nb-start .ew-rec-actions button{width:100%;justify-content:center;border-radius:10px;min-height:46px;padding:0 16px;font:600 13px Montserrat,sans-serif}
#hr-root .nb-start .ew-rec-actions button.primary{background:linear-gradient(145deg,#0861AE,#0155A2 65%,#004C94);color:#fff;border:1px solid #004D93}
#hr-root .nb-start .ew-rec-actions button.secondary{background:#FFFFFFB0;color:#0155A2;border:1px solid #AABFD2}
/* employee requirement rows (item, C, classification, required P, validated) */
#hr-root .er-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 10px;align-items:center;padding:10px 0;border-top:1px solid #D4E0EA80}
#hr-root .er-val{grid-column:1/-1;font-size:11px;color:#52647A}
@media(max-width:760px){#hr-root .er-item{grid-template-columns:minmax(0,1fr) auto}#hr-root .er-item .ew-badge{justify-self:start}#hr-root .er-item .nb-text{grid-column:1}#hr-root .er-item .nb-c{grid-column:2;grid-row:1}}
/* items whose C-level the source leaves unconfirmed */
#hr-root .nb-c-none{background:#FFF1DA;color:#87580B;white-space:nowrap}
#hr-root .cw-item{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px 14px;align-items:center;padding:10px 0;border-top:1px solid #D4E0EA80}
@media(max-width:760px){#hr-root .cw-item{grid-template-columns:1fr}#hr-root .cw-item .sr-label{position:static;width:auto;height:auto;margin:0 0 4px;clip:auto;overflow:visible;font-size:11px;color:#52647A;display:block}}
/* competency technical description snippet on cards */
#hr-root .nb-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px!important;line-height:1.6!important;color:#52647A}
/* family badges */
#hr-root .fam-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;border-radius:6px;padding:3px 8px;white-space:nowrap;border:1px solid transparent}
#hr-root .fam-badge i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
#hr-root .fam-a{background:#E3F1FB;color:#0B4F7C;border-color:#BBD9EE}
#hr-root .fam-b{background:#E2F5EC;color:#1E6B47;border-color:#B8E2CD}
#hr-root .fam-c{background:#F1EAFB;color:#5B3A9A;border-color:#D8C8F0}
#hr-root .fam-d{background:#FFF0DC;color:#8A5200;border-color:#F3D5A5}
#hr-root .fam-e{background:#E0F4F4;color:#0E6B6F;border-color:#AEDFE0}
#hr-root .fam-f{background:#FCE7F0;color:#9A2F63;border-color:#F0BFD5}
#hr-root .fam-g{background:#E8ECF2;color:#3F4F66;border-color:#C9D3E0}
#hr-root .fam-h{background:#EEF5D8;color:#51681B;border-color:#D3E3A6}
/* collapsible panel */
#hr-root .ew-collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}
#hr-root .ew-collapse>summary::-webkit-details-marker{display:none}
#hr-root .ew-collapse>summary h2{margin:0 0 4px}
#hr-root .ew-collapse>summary>svg{width:22px;height:22px;color:#0155A2;flex-shrink:0;transition:transform .15s}
#hr-root .ew-collapse[open]>summary>svg{transform:rotate(180deg)}
#hr-root .ew-collapse:focus-within>summary:focus-visible{outline:3px solid #0391A3;outline-offset:4px;border-radius:8px}
#hr-root .ew-collapse-body{margin-top:16px;border-top:1px solid #D4E0EA;padding-top:14px}
/* P chip sits right next to the C chip */
#hr-root .nb-p{background:#E3F3EA;color:#1E6B47}
@media(max-width:760px){#hr-root .er-item{grid-template-columns:auto auto minmax(0,1fr)}#hr-root .er-item .nb-text{grid-column:1/-1}#hr-root .er-item .nb-c{grid-column:auto;grid-row:auto}#hr-root .er-item .ew-badge{justify-self:start}}
/* (i) inside table headers */
#hr-root th .th-i{width:32px;height:32px;min-width:32px;margin-left:2px;vertical-align:middle}
#hr-root th .th-i svg{width:16px;height:16px}
#hr-root .ew-table th:nth-child(-n+4):has(.th-i){white-space:nowrap}
/* table header labels with an (i): one tidy line, centered, same size everywhere */
#hr-root .ew-table th{vertical-align:middle}
#hr-root .th-wrap{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
#hr-root .th-wrap-wide{white-space:normal;gap:6px}
#hr-root .th-sub{display:block;font-size:11px;font-weight:400;line-height:1.4;margin-top:2px}
#hr-root th .th-i{width:28px;height:28px;min-width:28px;margin:0;vertical-align:middle}
@media(pointer:coarse){#hr-root th .th-i{width:40px;height:40px;min-width:40px}}
#hr-root .ew-stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
@media(max-width:760px){#hr-root .th-wrap{white-space:normal}#hr-root .ew-table th:nth-child(-n+4):has(.th-i){white-space:normal}}
#hr-root .ew-table th,#hr-root .ew-table td{padding-left:6px;padding-right:6px}
#hr-root .ew-table th:last-child .th-wrap{align-items:flex-start}
#hr-root .ew-tool[aria-expanded=true]{background:#DCEEF7;border-color:#0155A2;color:#00286E}
/* C x P heat-map grid */
#hr-root .cp-wrap{overflow-x:auto;padding:4px 2px 8px}
#hr-root .cp-grid{display:grid;grid-template-columns:104px repeat(5,minmax(64px,1fr)) 64px;gap:6px;min-width:520px}
#hr-root .cp-axis{display:flex;flex-direction:column;justify-content:center;font-size:11px;color:#52647A;line-height:1.3;padding:4px 6px}
#hr-root .cp-axis strong{font-size:13px;color:#00286E}
#hr-root .cp-axis small{font-size:10.5px}
#hr-root .cp-head{align-items:center;text-align:center}
#hr-root .cp-corner{flex-direction:row;gap:8px;align-items:center;justify-content:center;font-weight:600}
#hr-root .cp-cell{min-height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font:600 17px Montserrat,sans-serif;border:1px solid transparent;padding:0}
#hr-root button.cp-cell{cursor:pointer;transition:transform .12s,box-shadow .12s}
#hr-root button.cp-cell:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px #173D5955}
#hr-root .cp-cell.h0{background:#F1F5F9;color:#9AA9BA;font-weight:400;border-color:#E3EAF1}
#hr-root .cp-cell.h1{background:#DCEEF7;color:#00286E}
#hr-root .cp-cell.h2{background:#B5D9EE;color:#00286E}
#hr-root .cp-cell.h3{background:#6FAEDB;color:#00286E}
#hr-root .cp-cell.h4{background:#0155A2;color:#fff}
#hr-root .cp-cell.sel{outline:3px solid #0391A3;outline-offset:2px}
#hr-root .cp-total{background:transparent;color:#52647A;font-size:13px;font-weight:600;min-height:56px}
@media(max-width:760px){#hr-root .cp-grid{grid-template-columns:78px repeat(5,minmax(52px,1fr)) 48px;min-width:430px}#hr-root .cp-cell{min-height:50px}}
/* items inside a tapped C x P square */
#hr-root .cp-sel{margin-top:18px;padding-top:16px;border-top:1px solid #D4E0EA}
#hr-root .cp-group{background:#fff;border:1px solid #D4E0EA;border-radius:12px;padding:10px 14px;margin-bottom:10px}
#hr-root .cp-group-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:6px}
#hr-root .cp-group-head .nb-name{font-weight:600;font-size:13px}
#hr-root .cp-item{grid-template-columns:minmax(0,1fr) auto}
/* collapsible competency groups inside a tapped C x P square */
#hr-root .cp-sel-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#hr-root details.cp-group{padding:0}
#hr-root details.cp-group>summary{list-style:none;cursor:pointer;padding:10px 14px;min-height:48px}
#hr-root details.cp-group>summary::-webkit-details-marker{display:none}
#hr-root details.cp-group>summary>svg{width:18px;height:18px;color:#0155A2;flex-shrink:0;transition:transform .15s;transform:rotate(-90deg)}
#hr-root details.cp-group[open]>summary>svg{transform:none}
#hr-root .cp-group-name{font-weight:600;font-size:13px;color:#00286E;flex:1;min-width:140px}
#hr-root .cp-group-body{padding:0 14px 10px;border-top:1px solid #D4E0EA80}
/* Philippine source markers */
#hr-root .ew-badge.ph{background:#E8EAFB;color:#2F3A8F}
/* all header (i) buttons sit on the first line of their header, top-aligned */
#hr-root .ew-table thead th{vertical-align:top}
#hr-root .th-wrap{display:inline-flex;align-items:flex-start;gap:4px}
#hr-root .th-wrap-wide{gap:6px}
#hr-root th .th-i{margin-top:-5px}
@media(pointer:coarse){#hr-root th .th-i{margin-top:-11px}}
/* final: every header (i) is the same size and centered on its header's first line */
#hr-root th .nb-info{width:28px;height:28px;min-width:28px;margin:-13px 0 0;vertical-align:top}
#hr-root th .nb-info svg{width:16px;height:16px}
@media(pointer:coarse){#hr-root th .nb-info{width:40px;height:40px;min-width:40px;margin:-19px 0 0}}

/* Executive workspace: bars, metric buttons and matrix cells in the same glass language */
#hr-root .ex-bar-row{display:grid;gap:5px;margin:0 0 12px}
#hr-root .ex-bar-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#172B4D;align-items:baseline}
#hr-root .ex-bar-label strong{font-weight:600;color:#00286E;white-space:nowrap}
#hr-root .ex-bar-label .ew-link{text-align:left}
#hr-root .ex-bar-track{height:8px;border-radius:99px;background:#DCE8F0;overflow:hidden}
#hr-root .ex-bar-fill{height:100%;border-radius:99px;background:#0391A3}
#hr-root .ex-metric{cursor:pointer;font:inherit;min-height:44px;width:100%}
#hr-root .ex-metric:hover{border-color:#0391A3}
#hr-root .ex-cell{display:grid;gap:3px;justify-items:start;background:none;border:0;padding:4px 0;min-height:44px;cursor:pointer;font:inherit;text-align:left;color:#52647A}
#hr-root .ex-cell small{font-size:11px}
#hr-root .ex-matrix td,#hr-root .ex-matrix th{vertical-align:top;min-width:140px}
#hr-root .ex-matrix td:first-child,#hr-root .ex-matrix th:first-child{min-width:170px}
@media(max-width:1000px){#hr-root .ew-stats[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){#hr-root .ew-search[style*="repeat(3"]{grid-template-columns:1fr!important}#hr-root .ew-stats[style*="repeat(3"]{grid-template-columns:1fr!important}}

/* Executive dashboard (handover layout): cards, stacked bars, doughnuts, heat map, matrix */
#hr-root .ex-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
#hr-root .ex-card .action-link{width:100%;justify-content:space-between}
#hr-root .ex-card .action-link b{font-size:15px;color:#00286E}
#hr-root .ex-big{display:grid;gap:2px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:#52647A;min-height:44px}
#hr-root .ex-big strong{font-size:30px;color:#00286E;font-weight:600;line-height:1.1}
#hr-root .ex-up{color:#21604C}#hr-root .ex-down{color:#8C3540}
#hr-root .ex-stack{display:flex;height:22px;border-radius:99px;overflow:hidden;background:#DCE8F0;margin:6px 0 4px}
#hr-root .ex-seg{display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;min-width:2px}
#hr-root .ex-seg.ok,#hr-root .ex-dot.ok,#hr-root .ex-arc.ok{background:#21604C;stroke:#21604C}
#hr-root .ex-seg.c1,#hr-root .ex-dot.c1,#hr-root .ex-arc.c1{background:#0391A3;stroke:#0391A3}
#hr-root .ex-seg.c2,#hr-root .ex-dot.c2,#hr-root .ex-arc.c2{background:#B97A12;stroke:#B97A12}
#hr-root .ex-seg.c3,#hr-root .ex-dot.c3,#hr-root .ex-arc.c3{background:#B84A58;stroke:#B84A58}
#hr-root .ex-seg.c4,#hr-root .ex-dot.c4,#hr-root .ex-arc.c4{background:#594084;stroke:#594084}
#hr-root .ex-seg.none,#hr-root .ex-dot.none{background:#9FB2C2}
#hr-root .ex-arc{background:none!important}
#hr-root .ex-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:#52647A}
#hr-root .ex-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
#hr-root .ex-donuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#hr-root .ex-donut{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#hr-root .ex-donut svg{width:112px;height:112px;flex:none}
#hr-root .ex-donut-n{font-size:17px;font-weight:600;fill:#00286E}
#hr-root .ex-two{display:flex;background:#F9E9E8}
#hr-root .ex-two .ex-met{background:#21604C}#hr-root .ex-two .ex-gap{background:#B84A58}
#hr-root .ex-heat{text-align:center;font-weight:600;color:#172B4D}
#hr-root .ex-heat small{display:block;font-weight:400;font-size:11px;color:#52647A}
#hr-root .ex-heat.h5{background:#CBE7DB}#hr-root .ex-heat.h4{background:#DDEFE6}#hr-root .ex-heat.h3{background:#FFF0D9}#hr-root .ex-heat.h2{background:#F9DDD2}#hr-root .ex-heat.h1{background:#F2C9C9}#hr-root .ex-heat.h0{background:#EEF3F7}
#hr-root .ex-worst td{background:#FFF7F6}
#hr-root .ex-cxp td,#hr-root .ex-cxp th{text-align:center;min-width:54px}
#hr-root .ex-cxp td.ex-target{background:#DCEEF7}
#hr-root .ex-cxp small{display:block;font-size:10px;color:#52647A}
@media(max-width:1100px){#hr-root .ex-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#hr-root .ex-cards,#hr-root .ex-donuts{grid-template-columns:1fr}#hr-root .ew-stats[style*="repeat(6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}#hr-root .ew-search[style*="repeat(4"]{grid-template-columns:1fr!important}}

/* Gated stages in the Competency Passport */
#hr-root .gp-lead{max-width:none;margin:0 0 10px}
#hr-root .gp-stage{border:1px solid #D4E0EA;border-radius:14px;margin:0 0 12px;overflow:hidden;background:#FFFFFFB3}
#hr-root .gp-stage.locked{background:#F4F8FB}
#hr-root .gp-stage-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 14px;background:#F1F7FB;color:#00286E}
#hr-root .gp-stage.locked .gp-stage-head{color:#52647A}
#hr-root .gp-stage-head svg{width:18px;height:18px}
#hr-root .gp-count{font-size:12px;color:#52647A}
#hr-root .gp-note{font-size:12px;font-weight:600;color:#775117}
#hr-root .gp-note.cleared{color:#21604C}#hr-root .gp-note.needs_development{color:#8C3540}
#hr-root .gp-row{display:grid;grid-template-columns:86px minmax(0,1fr) 74px 66px 104px 118px;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid #E3EDF4;font-size:12px}
#hr-root .gp-row.off{color:#8A99AA}
#hr-root .gp-th{font-weight:600;color:#52647A;border-top:0;padding-top:8px}
#hr-root .gp-st{font-weight:600;display:inline-flex;gap:5px;align-items:center}
#hr-root .gp-st.ok{color:#21604C}#hr-root .gp-st.expired{color:#8C3540}#hr-root .gp-st.avail{color:#0155A2}#hr-root .gp-st.attention{color:#775117}#hr-root .gp-st.locked{color:#8A99AA}
#hr-root .gp-st svg{width:14px;height:14px}
@media(max-width:760px){#hr-root .gp-th{display:none}#hr-root .gp-row{grid-template-columns:1fr 1fr;gap:4px 10px}#hr-root .gp-row>span:nth-child(2){grid-column:1/-1;order:-1;font-weight:600}}
@media(max-width:760px){#hr-root .gp-row>span[data-l]::before{content:attr(data-l) ": ";color:#52647A}}

/* HR Dashboard additions */
@media(max-width:1100px){#hr-root .ew-search[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){#hr-root .ew-search[style*="repeat(4"]{grid-template-columns:1fr!important}}
