/* Attendance & Leave pages on the desktop (hrms.js). Desktop tokens: --blue, --good, --amber, --warn (red), --panel, --line, --muted, --text. */
#view-attendance, #view-leave, #view-team { --hol:#0369a1; --hol-bg:#e0f2fe; --edit:#7c3aed; }
#view-attendance .card, #view-leave .card, #view-team .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
#view-attendance .btn, #view-leave .btn, #view-team .btn, .hr-modal .btn { display:inline-flex; align-items:center; gap:6px; width:auto; padding:8px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); font:inherit; font-weight:600; cursor:pointer; box-shadow:none; }
#view-attendance .btn.btn-primary, #view-leave .btn.btn-primary, #view-team .btn.btn-primary, .hr-modal .btn.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
#view-attendance .btn.btn-sm, #view-leave .btn.btn-sm, #view-team .btn.btn-sm { padding:5px 10px; font-size:12.5px; }
#view-attendance .btn:disabled, #view-team .btn:disabled, #view-leave .btn:disabled { opacity:.6; cursor:default; }

.hr-wrap { display:grid; gap:14px; }
.hr-today { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hr-k { font-size:13px; color:var(--muted); font-weight:600; }
.hr-v { font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hr-v span { color:var(--muted-2); margin:0 6px; font-weight:600; }
.hr-s { font-size:12.5px; color:var(--muted); }
#hrPunch { min-width:150px; justify-content:center; padding:12px 18px; font-size:15px; }
.hr-note { padding:10px 12px; border-radius:10px; background:var(--blue-050); font-size:13.5px; }
.hr-note.bad { background:var(--warn-bg); color:var(--warn); }

.hr-month-head { display:flex; align-items:center; gap:10px; margin:4px 0 10px; }
.hr-month-head b { font-size:17px; }
.hr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:12px; }
.hr-stats > div { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.hr-stats span { display:block; font-size:12px; color:var(--muted); font-weight:600; }
.hr-stats b { font-size:20px; } .hr-stats b.bad { color:var(--warn); } .hr-stats em { display:block; font-style:normal; font-size:11.5px; color:var(--amber); }
.hr-month { display:grid; grid-template-columns:minmax(360px,1fr) minmax(0,1.2fr); gap:14px; align-items:start; }
@media (max-width:1100px) { .hr-month { grid-template-columns:1fr; } }

.hr-cal-h, .hr-cal-g { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; text-align:center; }
.hr-cal-h span { font-size:11.5px; font-weight:700; color:var(--muted); padding-bottom:4px; }
.hr-cd { position:relative; min-height:64px; border:0; border-radius:10px; background:var(--line-2); color:var(--muted); font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:6px 2px; gap:1px; overflow:hidden; }
.hr-cd b { font-size:17px; font-weight:800; }
.hr-cd em { font-style:normal; font-size:10.5px; font-weight:600; white-space:nowrap; }
.hr-cd i { font-style:normal; font-size:12px; font-weight:800; }
.hr-cd.present { background:var(--good-bg); color:var(--good); }
.hr-cd.half, .hr-cd.partial { background:var(--amber-bg); color:var(--amber); }
.hr-cd.partial { background:transparent; box-shadow:inset 0 0 0 2px var(--amber-bg); }
.hr-cd.short, .hr-cd.absent { background:var(--warn-bg); color:var(--warn); }
.hr-cd.holiday { background:var(--hol-bg); color:var(--hol); }
.hr-cd.off { background:transparent; outline:1.5px dashed var(--line); outline-offset:-3px; color:var(--muted); }
.hr-cd.future { background:transparent; opacity:.35; cursor:default; }
.hr-cd.today { box-shadow:inset 0 0 0 2px var(--blue); }
.hr-cd s.cn { position:absolute; top:0; width:0; height:0; border-style:solid; }
.hr-cd s.cn.in { left:0; border-width:16px 16px 0 0; border-color:var(--edit) transparent transparent transparent; }
.hr-cd s.cn.out { right:0; border-width:0 16px 16px 0; border-color:transparent var(--edit) transparent transparent; }
.hr-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--muted); }
.hr-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.hr-legend i.present { background:var(--good); } .hr-legend i.half { background:var(--amber); } .hr-legend i.short { background:var(--warn); opacity:.55; }
.hr-legend i.partial { box-shadow:inset 0 0 0 2px var(--amber); } .hr-legend i.absent { background:var(--warn); } .hr-legend i.holiday { background:var(--hol); }
.hr-legend i.off { outline:1px dashed var(--muted); outline-offset:-1px; } .hr-legend i.none { background:var(--line-2); box-shadow:inset 0 0 0 1px var(--line); }
.hr-legend i.cn-in { width:0; height:0; border-radius:0; border-style:solid; border-width:10px 10px 0 0; border-color:var(--edit) transparent transparent transparent; }
.hr-legend i.cn-out { width:0; height:0; border-radius:0; border-style:solid; border-width:0 10px 10px 0; border-color:transparent var(--edit) transparent transparent; }

.hr-days { padding:0 !important; overflow:auto; max-height:640px; }
.hr-table { width:100%; border-collapse:collapse; font-size:13px; }
.hr-table th { text-align:left; font-size:11.5px; color:var(--muted); font-weight:700; padding:9px 12px; background:var(--line-2); position:sticky; top:0; z-index:1; }
.hr-table td { padding:9px 12px; border-top:1px solid var(--line-2); vertical-align:top; }
.hr-table tr.flash td { background:var(--blue-050); transition:background .3s; }
.hr-right { text-align:right; white-space:nowrap; }
.hr-st { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--line-2); color:var(--muted); }
.hr-st.present { background:var(--good-bg); color:var(--good); } .hr-st.half, .hr-st.partial { background:var(--amber-bg); color:var(--amber); }
.hr-st.short, .hr-st.absent { background:var(--warn-bg); color:var(--warn); } .hr-st.holiday { background:var(--hol-bg); color:var(--hol); }
.hr-lop { font-size:11.5px; font-weight:800; color:var(--warn); }
.hr-tag { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--line-2); color:var(--muted); margin:1px 0; }
.hr-tag.warn { background:var(--amber-bg); color:var(--amber); } .hr-tag.bad { background:var(--warn-bg); color:var(--warn); }
.hr-edit { font-size:12px; color:var(--amber); margin-top:3px; } .hr-edit b { font-weight:700; } .hr-edit span { display:block; color:var(--muted); }
.hr-hint { font-size:12px; color:var(--muted); margin-top:4px; }

.hr-leave { display:grid; grid-template-columns:minmax(320px,420px) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:1000px) { .hr-leave { grid-template-columns:1fr; } }
.hr-form { display:grid; gap:10px; } .hr-form h3, .hr-h3 { margin:0 0 6px; font-size:15px; }
.hr-field { display:grid; gap:5px; font-size:12.5px; color:var(--muted); font-weight:600; }
.hr-field input, .hr-field select, .hr-field textarea { font:inherit; color:var(--text); padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); font-weight:400; }
.hr-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.hr-tabs { display:inline-flex; gap:4px; background:var(--line-2); padding:3px; border-radius:10px; margin-bottom:12px; }
.hr-tabs button { border:0; background:none; padding:7px 14px; border-radius:8px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer; }
.hr-tabs button.on { background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.hr-teamhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin-bottom:12px; }
.hr-teamhead > b { font-size:16px; } .hr-teamhead > span { color:var(--muted); } .hr-teamhead > span b { color:var(--text); font-size:17px; }
.hr-chips { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.hr-chips button { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.hr-chips button.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.hr-chips input[type=date] { border:1px solid var(--line); border-radius:999px; padding:5px 10px; font:inherit; font-size:12.5px; }

.hr-modal { position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.45); display:grid; place-items:center; padding:20px; }
.hr-box { background:var(--panel); border-radius:14px; padding:20px 22px; width:min(460px,100%); box-shadow:var(--shadow-lg); display:grid; gap:12px; }
.hr-box h3 { margin:0; font-size:17px; } .hr-box p { margin:0; color:var(--muted); font-size:13.5px; }
.hr-acts { display:flex; justify-content:flex-end; gap:8px; }
.hr-box .hr-chips button.on { background:var(--blue); border-color:var(--blue); }

/* Spacing like the other pages; hidden fields really hidden */
#view-attendance, #view-leave, #view-team { padding:18px 22px 28px; }
.hr-field[hidden] { display:none; }
.hr-cd i { font-size:13px; }
#view-attendance.active, #view-leave.active, #view-team.active { overflow:auto; }
.hr-days .hr-table td:nth-child(-n+4), .hr-days .hr-table th { white-space:nowrap; }