:root{font-family:Inter,system-ui,Arial,sans-serif;color:#172033;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}header{background:#172033;color:white;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}header div{display:flex;gap:12px;align-items:center}header small{opacity:.7}header a{color:white}nav{display:flex;gap:8px;padding:10px 16px;background:white;border-bottom:1px solid #e4e8ef;overflow:auto;position:sticky;top:0;z-index:10}nav a{white-space:nowrap;text-decoration:none;color:#172033;background:#edf1f6;padding:8px 10px;border-radius:9px}main{max-width:1400px;margin:auto;padding:18px}.card{background:white;border:1px solid #e3e7ef;border-radius:15px;padding:18px;margin-bottom:16px;box-shadow:0 5px 20px rgba(20,30,50,.05)}.login{max-width:420px;margin:60px auto}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.metric{background:white;border:1px solid #e3e7ef;border-radius:12px;padding:15px}.metric span{display:block;color:#667085;font-size:12px}.metric b{font-size:24px}label{display:block;margin:10px 0;font-size:13px;font-weight:600}input,select,textarea{width:100%;padding:10px;border:1px solid #ccd4df;border-radius:9px;font:inherit}button,.button{display:inline-block;border:0;border-radius:9px;background:#172033;color:white;padding:10px 13px;text-decoration:none;cursor:pointer;font-weight:600}.secondary{background:#e8edf5;color:#172033}.ok{background:#19764a}.danger{background:#a62e2e}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.person{display:flex;gap:10px;align-items:center}.person img,.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#172033;color:white;display:grid;place-items:center;font-weight:800}.person small,.siteRow small,.employeeRow small{display:block;color:#667085}.employeeRow,.siteRow,.notification{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f4}.notification{display:block}.notification span{float:right;color:#667085;font-size:12px}.muted{color:#667085}.flash{background:#e9f5ee;padding:10px;border-radius:9px;margin-bottom:12px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #edf0f4;text-align:left}.map{height:68vh;border-radius:14px;overflow:hidden}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:15px}.day{min-height:85px;border:1px solid #e1e6ee;border-radius:10px;padding:8px;background:#fafbfc}.day small{display:block;margin-top:18px}.worked{background:#edf8f2}.leave{background:#fff5df}.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
@media(max-width:800px){.grid2,.metrics{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}.calendar{grid-template-columns:repeat(4,1fr)}.filters{grid-template-columns:1fr}.employeeRow,.siteRow{align-items:flex-start;flex-direction:column}}