/* corehr screens: styles for this module only. Loaded after index.html and theme.css, so a plain selector here wins ties.
   Core HR and Helpdesk share the module's Preact components, so most of the look is set here once per component:
   gradient avatars, stat tiles drawn like the directory count cards, cards with an icon in the header. */

/* ---- avatars: the directory's gradient everywhere ---- */
.chr .avatar.av-g{background:var(--av,linear-gradient(135deg,#6366f1,#8b5cf6));color:#fff;font-weight:600;letter-spacing:.02em;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(79,70,229,.45)}
.chr .pf-avatar{background:var(--av,linear-gradient(135deg,#6366f1,#8b5cf6));box-shadow:0 0 0 3px #fff,0 8px 18px -8px rgba(79,70,229,.55);letter-spacing:.02em}

/* ---- stat tiles: the directory count card ---- */
.chr .tiles.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:12px;margin-bottom:18px}
.chr .tiles .tile.ck{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:14px 16px 16px;border:1px solid var(--hr-line,#e2e8f0);border-left:1px solid var(--hr-line,#e2e8f0);border-radius:16px;background:#fff;text-align:left;font:inherit;color:inherit;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05);cursor:default;min-width:0;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.chr .tiles .tile.ck::before{content:none;display:none}
.chr .tiles button.tile.ck{cursor:pointer}
.chr .tiles button.tile.ck:hover{transform:translateY(-2px);background:#fff;border-color:rgba(var(--cg),.35);box-shadow:0 10px 24px -12px rgba(var(--cg),.45)}
.chr .tiles .tile.ck.on{border-color:var(--c1);background:linear-gradient(135deg,rgba(var(--cg),.08),#fff 70%);box-shadow:0 0 0 3px rgba(var(--cg),.16),0 10px 24px -14px rgba(var(--cg),.5)}
.chr .tiles .ck-i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 14px -6px rgba(var(--cg),.8),inset 0 1px 0 rgba(255,255,255,.3)}
.chr .tiles .ck-t{display:grid;min-width:0}
.chr .tiles .ck-t b{font-size:24px;font-weight:650;line-height:1.1;letter-spacing:-.02em;color:#0f172a}
.chr .tiles .ck-t span{font-size:12.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chr .tiles .ck-t small{font-size:11.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.chr .tiles .tile.ck.zero .ck-t b{color:#94a3b8}
.chr .tiles .ck-m{position:absolute;left:16px;right:16px;bottom:8px;height:3px;border-radius:3px;background:#f1f5f9;overflow:hidden}
.chr .tiles .ck-m i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2))}
#page.page-in .chr .tiles .tile.ck{animation:db-rise .5s cubic-bezier(.2,.7,.2,1) both}
#page.page-in .chr .tiles .tile.ck:nth-child(2){animation-delay:.04s}#page.page-in .chr .tiles .tile.ck:nth-child(3){animation-delay:.08s}#page.page-in .chr .tiles .tile.ck:nth-child(n+4){animation-delay:.12s}
#page.page-in .chr .tiles .ck-m i{animation:db-grow .9s cubic-bezier(.2,.7,.2,1) .15s both;transform-origin:left}
.chr .stack>.tiles.ck-grid{margin-bottom:0}

/* ---- cards: a quiet header with an optional gradient icon, no rule under it ---- */
.chr .card-h{border-bottom:0;padding:16px 20px 8px;align-items:center}
.chr .card>.card-h+div:not(.card-b){border-top:1px solid rgba(111,99,240,.08)}
.chr .card-h .card-ht{flex:1 1 auto;min-width:0}
.chr .card.has-ic .card-h{flex-wrap:nowrap}
.chr .card.has-ic .card-h>.row{flex:none}
.chr .card-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--c1,#5B4CF0),var(--c2,#8F7DF6));box-shadow:0 6px 12px -7px rgba(var(--cg,111,99,240),.8),inset 0 1px 0 rgba(255,255,255,.3)}
.chr .card-b{padding:8px 20px 18px}
.chr .card-h h3{font-size:14.5px;color:#1E1B4B}
.chr .pc .pc-t{gap:10px;color:#1E1B4B}
.chr .pc>header{padding:16px 18px 8px}

/* ---- tables inside cards and grids: the directory's quiet header and roomy rows ---- */
.chr .tbl th{background:#FAFAFF;color:#64748b;font-size:11px;padding:11px 14px;border-bottom-color:rgba(111,99,240,.1)}
.chr .tbl td{padding:11px 14px;border-bottom-color:#F1F0FB;vertical-align:middle}
.chr .tbl tr.click td:first-child{box-shadow:inset 3px 0 0 transparent}
.chr .tbl tr.click:hover td{background:#F8F7FF}
.chr .tbl tr.click:hover td:first-child{box-shadow:inset 3px 0 0 #6F63F0}
.chr .tbl-bar{background:linear-gradient(180deg,#fafaff,#fff);border-bottom-color:rgba(111,99,240,.08)}
.chr .person{gap:10px}
.chr .person .pn{color:#0f172a;font-weight:600}

/* ---- bars and meters: gradient fill ---- */
.chr .bar{background:#F1F0FB}
.chr .bar i{background:linear-gradient(90deg,#5B4CF0,#8F7DF6);border-radius:99px}
#page.page-in .chr .bar i{animation:db-grow .9s cubic-bezier(.2,.7,.2,1) .15s both;transform-origin:left}

/* ---- alert bars: icon in a soft tile, rounder ---- */
.chr .abar{border-radius:14px;padding:10px 14px}

/* ---- employee profile ---- */
.chr .pf-strip .pf-s{display:flex;align-items:center;gap:10px;min-width:0}
.chr .pf-strip .pf-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:#F1F0FB;color:#5B4CF0}
.chr .pf-strip .pf-sv{display:grid;min-width:0}
.chr .pf-strip .pf-sv b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  #page.page-in .chr .tiles .tile.ck,#page.page-in .chr .tiles .ck-m i,#page.page-in .chr .bar i{animation:none}
  .chr .tiles .tile.ck{transition:none}
}

/* ---- a thing in a list gets a soft icon chip (document policy rows) ---- */
.chr .ic-row{display:inline-flex;align-items:center;gap:12px}
.chr .ic-chip{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#F1F0FB;color:#5B4CF0}

/* ---- org chart boxes: avatar for people, an icon tile for units ---- */
.chr .on-card{border-radius:16px;border-top-width:3px;padding:14px 14px 12px}
.chr .on-card .avatar{margin-bottom:2px}
.chr .on-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--tone),color-mix(in srgb,var(--tone) 55%,#fff));margin-bottom:2px}

/* ---- helpdesk satisfaction: the average beside a bar per star ---- */
.chr .fb-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.chr .fb-bars{display:grid;gap:4px;min-width:0}
.chr .fb-bars .bar-row{grid-template-columns:2.5rem 1fr 2rem;margin:0}
.chr .fb-bars .bar i{background:linear-gradient(90deg,#B45309,#FBBF24)}
@media (max-width:600px){.chr .fb-sum{grid-template-columns:1fr}}
@media (max-width:600px){.chr .card.has-ic .card-h{flex-wrap:wrap}}