/* Kite People — extras on top of the shared Kite UI kit */
.hr-cal { max-width: 46rem; }
.hr-cal-h, .hr-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.hr-cal-h span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding-bottom: .2rem; }
.hr-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; min-height: 3.6rem; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); text-align: left; font-size: .7rem; }
.hr-day .n { font-size: .68rem; color: var(--muted); }
.hr-day b { font-size: .82rem; }
.hr-day small { font-size: .6rem; color: var(--muted); }
.hr-day .late { position: absolute; top: .25rem; right: .3rem; font-style: normal; font-size: .55rem; font-weight: 800; color: var(--warn); text-transform: uppercase; }
.hr-day.today { box-shadow: 0 0 0 2px var(--accent); }
.hr-day.tone-green { background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.hr-day.tone-amber { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.hr-day.tone-red { background: color-mix(in srgb, var(--bad) 9%, var(--surface)); }
.hr-day.tone-blue { background: color-mix(in srgb, var(--info) 9%, var(--surface)); }
.hr-day.tone-purple { background: color-mix(in srgb, var(--violet) 9%, var(--surface)); }
.hr-punch { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.hr-clock { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin: .15rem 0; font-variant-numeric: tabular-nums; }
.hr-punch-btn { padding: .8rem 1.4rem; font-size: 1rem; border-radius: 12px; }
.hr-muster { font-size: .7rem; }
.hr-muster th, .hr-muster td { padding: .25rem .3rem !important; text-align: center; white-space: nowrap; }
.hr-muster td.nm { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.hr-muster .c-P, .hr-muster .c-OD, .hr-muster .c-WFH { color: var(--good); font-weight: 700; }
.hr-muster .c-A, .hr-muster .c-LOP { color: var(--bad); font-weight: 800; }
.hr-muster .c-HD, .hr-muster .c-HL { color: var(--warn); font-weight: 700; }
.hr-muster .c-L { color: var(--info); font-weight: 700; }
.hr-muster .c-H { color: var(--violet); }
.hr-muster .c-WO, .hr-muster .c-- { color: var(--muted); }
.hr-org ul { list-style: none; }
.hr-bal { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
.hr-bal .kpi .v { font-size: 1.4rem; }
.hr-ann { border-left: 3px solid var(--accent); padding: .5rem .7rem; margin-bottom: .6rem; background: var(--inner); border-radius: 0 8px 8px 0; }
.hr-ann h4 { margin: 0 0 .2rem; font-size: .88rem; }
.hr-ann p { margin: 0; font-size: .8rem; white-space: pre-wrap; }
.hr-pay-inputs input { width: 5.5rem; padding: .25rem .35rem; font-size: .75rem; }
@media (max-width: 640px) {
  .hr-day { min-height: 3rem; padding: .2rem .25rem; }
  .hr-day small { display: none; }
  .hr-clock { font-size: 1.6rem; }
  .hr-punch-btn { width: 100%; justify-content: center; }
}