*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#172033}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px #0001;margin-bottom:16px}
.login-card{width:min(420px,100%)}
h1,h2,h3{margin-top:0}
label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{width:100%;padding:10px;border:1px solid #cfd6e1;border-radius:7px;background:#fff}
button{border:0;border-radius:7px;padding:10px 14px}
.primary{background:#1f6feb;color:white}
.secondary{background:#e8edf5;color:#172033}
.danger{background:#d83b3b;color:#fff}
.muted,.label{color:#667085}
.error{color:#b42318;margin-top:10px;min-height:20px}
.topbar{background:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dde3ec;gap:15px}
.topbar h1{margin:0;font-size:21px}
nav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 20px;background:#fff;border-bottom:1px solid #dde3ec}
nav button.active{background:#1f6feb;color:#fff}
main{max-width:1200px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.big{font-size:30px;font-weight:700;margin:8px 0}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f5}
.row:last-child{border-bottom:0}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.full{grid-column:1/-1}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px;border-bottom:1px solid #edf0f5;vertical-align:top}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2f7;font-size:12px}
.badge.pending{background:#fff4cc}
.badge.approved{background:#e5f6ea}
.badge.denied,.badge.cancelled,.badge.disputed{background:#fde8e8}
.badge.awaiting{background:#e8efff}
.notice{padding:12px;border-radius:8px;background:#f8fafc;margin:10px 0}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.calendar-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #dce2ea}
.cal-cell{min-height:105px;border-right:1px solid #dce2ea;border-bottom:1px solid #dce2ea;padding:7px;background:#fff}
.cal-head{min-height:auto;background:#f1f4f8;font-weight:700;text-align:center}
.cal-day{font-weight:700}
.event{font-size:12px;padding:4px;margin-top:5px;border-radius:5px;background:#eef2f7}
.holiday{background:#fff0c2}
.pending{border:1px dashed #9aa7b8}
@media(max-width:700px){
  main{padding:12px}.topbar{padding:12px;align-items:flex-start}
  nav{padding:8px 12px;overflow-x:auto;flex-wrap:nowrap}
  nav button{white-space:nowrap}
  .formgrid{grid-template-columns:1fr}
  table{font-size:13px}
  th,td{padding:7px}
  .cal-cell{min-height:78px;padding:4px}
  .event{font-size:11px}
}