@import url('/fonts/filament/filament/inter/index.css');

:root {
    --hr-ink:#17203a; --hr-muted:#516078; --hr-line:#dce3ef; --hr-accent:#3549a3;
    --hr-surface:#f4f6fc; --hr-pale:#eaf0ff; --hr-brand:#162451;
}
.hr-body { margin:0; min-height:100vh; font:15px/1.55 Inter,system-ui,sans-serif; color:var(--hr-ink); background:var(--hr-surface); }
.hr-body * { box-sizing:border-box; }
.hr-wrap { max-width:1180px; margin:auto; padding:2rem 1.25rem 4rem; }
.hr-login { max-width:510px; padding-top:clamp(2rem,10vw,6rem); }
.hr-top { background:#fff; border-bottom:1px solid var(--hr-line); }
.hr-top-inner { max-width:1180px; margin:auto; min-height:70px; padding:0 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:.65rem; }
.hr-top nav,.hr-brand { display:flex; align-items:center; gap:.85rem; }
.hr-brand { color:var(--hr-ink); text-decoration:none; font-weight:700; font-size:1rem; }
.hr-brand span:first-child { background:var(--hr-brand); color:#fff; padding:.42rem .56rem; border-radius:.55rem; letter-spacing:.04em; }
.hr-top nav a,.hr-quiet { color:var(--hr-accent); text-decoration:none; min-height:44px; padding:.55rem; background:none; border:0; font:inherit; cursor:pointer; }
.hr-page-head,.hr-card-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.hr-page-head { margin-bottom:1.1rem; }
.hr-body h1 { font-size:clamp(1.65rem,4vw,2.5rem); line-height:1.2; letter-spacing:-.035em; margin:0 0 .4rem; }
.hr-card h2,.hr-panel h2 { font-size:1.12rem; font-weight:700; margin:0 0 .55rem; }
.hr-kicker { margin:0 0 .3rem; color:var(--hr-muted); }
.hr-card { border:1px solid var(--hr-line); border-radius:1rem; background:#fff; padding:clamp(1rem,3vw,1.65rem); min-width:0; }
.hr-login .hr-card { padding:2.2rem; }
.hr-login .hr-primary { margin-top:.5rem; }
.hr-dashboard { display:grid; grid-template-columns:1.3fr 1fr; gap:1rem; align-items:start; }
.hr-today { background:linear-gradient(145deg,#fff 52%,#f2f5ff); }
.hr-shift { font-size:clamp(1.3rem,3.4vw,2.2rem); font-weight:700; margin:.45rem 0 .8rem; letter-spacing:-.03em; }
.hr-shift small { display:block; color:var(--hr-muted); font-size:.85rem; }
.hr-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.hr-metrics div { background:#fff; border:1px solid var(--hr-line); padding:.65rem .8rem; border-radius:.65rem; }
.hr-metrics dt,.hr-muted,.hr-form small { color:var(--hr-muted); }
.hr-metrics dd { margin:.15rem 0; font-size:1.1rem; font-weight:700; }
.hr-pill { display:inline-flex; background:var(--hr-pale); color:#28408a; font-size:.82rem; font-weight:650; padding:.28rem .65rem; border-radius:.55rem; }
.hr-form { display:grid; gap:.65rem; margin-top:.75rem; }
.hr-form label { display:grid; gap:.24rem; font-weight:550; }
.hr-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.hr-form :is(input:not([type=checkbox]),select,textarea), .hr-filter :is(input,select) {
    width:100%; min-height:44px; border:1px solid #b8c4d8; border-radius:.55rem; background:#fff; padding:.5rem .65rem; font:inherit; color:var(--hr-ink); }
.hr-form [hidden],#punch-review[hidden] { display:none; }
.hr-form textarea { resize:vertical; }
.hr-primary,.hr-secondary { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; padding:.53rem .95rem; min-height:44px; border-radius:.6rem; font:inherit; font-weight:650; text-decoration:none; cursor:pointer; }
.hr-primary { background:var(--hr-accent); border:1px solid var(--hr-accent); color:#fff; }
.hr-secondary { background:#fff; border:1px solid var(--hr-line); color:var(--hr-accent); }
.hr-primary:disabled { opacity:.65; cursor:wait; }
.hr-primary:hover { background:#273982; }
.hr-form p { margin:0; }
.hr-notice,.hr-error { padding:.65rem .9rem; border-radius:.6rem; background:#e9f7ef; color:#1b5d41; }
.hr-error { background:#fff0ee; color:#8f281d; }
ul.hr-error { padding-left:1.8rem; }
.hr-table-wrap { overflow:auto; }
.hr-table { width:100%; border-collapse:collapse; text-align:left; }
.hr-table td,.hr-table th { padding:.62rem .55rem; border-bottom:1px solid var(--hr-line); vertical-align:top; }
.hr-table th { color:var(--hr-muted); font-weight:650; white-space:nowrap; }
.hr-table a { color:var(--hr-accent); text-decoration:underline; }
.hr-list-row { padding:.65rem 0; border-bottom:1px solid var(--hr-line); }
.hr-list-row p { margin:.15rem 0; }
.hr-panel { display:grid; gap:1rem; color:var(--hr-ink); }
.hr-tabs,.hr-filter,.hr-actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.hr-tabs a { padding:.55rem .75rem; border-radius:.55rem; border:1px solid var(--hr-line); min-height:42px; }
.hr-tabs [aria-current=page] { background:var(--hr-pale); color:var(--hr-accent); font-weight:650; }
.hr-filter label { min-width:min(100%,10rem); }
.hr-filter input,.hr-filter select { display:block; }
.hr-panel details { padding:.7rem 0; border-bottom:1px solid var(--hr-line); }
.hr-panel summary { cursor:pointer; }
.hr-panel .hr-card { border-radius:.7rem; }
.hr-schedule label.inline { display:flex; align-items:center; gap:.4rem; }
.hr-schedule input[type=checkbox] { width:1.1rem; height:1.1rem; }
.hr-audit { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.83rem; }
:where(.hr-body,.hr-panel) :focus-visible { outline:3px solid #556bdd; outline-offset:2px; }
@media(max-width:760px) {
    .hr-dashboard { grid-template-columns:1fr; }
    .hr-top-inner { padding:0 .8rem; }
    .hr-top nav { gap:.25rem; }
    .hr-wrap { padding-inline:.9rem; }
    .hr-filter label,.hr-filter button { flex:1 1 100%; }
}
@media(max-width:375px) { .hr-fields { grid-template-columns:1fr; } }