:root{--ink:#16243b;--paper:#f4f6f8;--card:#fff;--line:#dfe4ea;--brass:#b9852a;--ok:#1f7a5a;--bad:#b3392f;--mut:#667085}
*{box-sizing:border-box}body{margin:0;font:15px/1.6 Cairo,"Noto Sans SC",system-ui,sans-serif;background:var(--paper);color:var(--ink)}
.side{position:fixed;inset-block:0;inset-inline-start:0;width:230px;background:var(--ink);color:#fff;padding:18px 12px;overflow:auto;transition:transform .2s}
.side h1{font-size:19px;margin:4px 10px 18px;color:#fff}.side h1 b{color:var(--brass)}
.side a{display:block;color:#c9d3e3;text-decoration:none;padding:9px 12px;border-radius:8px;margin-block:2px}
.side a.on,.side a:hover{background:#243857;color:#fff}.side .lg{margin-top:18px;display:flex;gap:6px;padding:0 10px}.side .lg a{padding:3px 9px;border:1px solid #3a4f73;font-size:13px}
main{margin-inline-start:230px;padding:22px;max-width:1200px}
.top{display:none;background:var(--ink);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:5}.top button{background:none;border:0;color:#fff;font-size:22px}
@media(max-width:820px){.side{transform:translateX(calc(var(--dx,-1)*100%))}[dir=rtl] .side{--dx:1}.side.open{transform:none}main{margin:0;padding:14px}.top{display:flex;gap:12px;align-items:center}}
h2{margin:0 0 16px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.k{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;border-inline-start:4px solid var(--brass)}.k small{color:var(--mut)}.k div{font-size:21px;font-weight:700}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;overflow-x:auto}
table{width:100%;border-collapse:collapse}th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}th{color:var(--mut);font-weight:600}
td.n,th.n{text-align:end;font-variant-numeric:tabular-nums}tr.tot td{font-weight:700;background:#f0f3f7}
input,select,button.b{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);max-width:100%}
button.b{background:var(--ink);color:#fff;border:0;cursor:pointer}button.b.g{background:var(--ok)}button.b.r{background:var(--bad)}button.b.l{background:#e8ecf2;color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tag{padding:2px 9px;border-radius:99px;font-size:12px;background:#e8ecf2}.tag.posted{background:#d7efe5;color:var(--ok)}.tag.approved{background:#f6e8c8;color:#7a5410}
.err{background:#fbe4e1;color:var(--bad);padding:10px;border-radius:8px;margin-bottom:12px}.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bar{height:12px;border-radius:6px;background:#e8ecf2;margin:6px 0 14px}.bar i{display:block;height:100%;border-radius:6px}
.login{max-width:340px;margin:12vh auto;background:var(--card);padding:26px;border-radius:12px;border:1px solid var(--line)}.login input{width:100%;margin-bottom:10px}
.tabs a{padding:6px 14px;border-radius:8px;text-decoration:none;color:var(--ink);background:#e8ecf2}.tabs a.on{background:var(--ink);color:#fff}
@media print{.side,.top,.tabs,button{display:none!important}main{margin:0}}

/* ---- motion & interaction ---- */
main>*{animation:up .45s cubic-bezier(.2,.8,.2,1) both}main>*:nth-child(2){animation-delay:.05s}main>*:nth-child(3){animation-delay:.1s}main>*:nth-child(4){animation-delay:.15s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.grid .k{animation:pop .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s,box-shadow .2s}
.grid .k:nth-child(2){animation-delay:.06s}.grid .k:nth-child(3){animation-delay:.12s}.grid .k:nth-child(4){animation-delay:.18s}.grid .k:nth-child(5){animation-delay:.24s}.grid .k:nth-child(6){animation-delay:.3s}
.k:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(22,36,59,.12)}
.bar i{transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.side a{transition:background .2s,padding .2s}.side a:hover{padding-inline-start:18px}
tr{transition:background .15s}tbody tr:hover td{background:#f3f6fa}
#ls tr,#il tr{animation:up .3s both}
button.b,.b{position:relative;overflow:hidden;transition:transform .15s,filter .15s,box-shadow .15s}
button.b:hover,a.b:hover{filter:brightness(1.12);box-shadow:0 4px 12px rgba(22,36,59,.2)}button.b:active{transform:scale(.96)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rp .6s linear;pointer-events:none}@keyframes rp{to{transform:scale(3);opacity:0}}
.tag{animation:pop .4s both}.err{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login{animation:pop .5s both}#df{transition:color .25s}
.flt{margin-bottom:10px;width:100%;max-width:260px}th.sr{cursor:pointer;user-select:none}th.sr:hover{color:var(--ink)}th.sr::after{content:" ⇅";opacity:.35}th.asc::after{content:" ↑";opacity:1}th.desc::after{content:" ↓";opacity:1}
.ov{position:fixed;inset:0;background:rgba(10,18,32,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:4}.ov.on{opacity:1;pointer-events:auto}.side{z-index:6}
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
.k.fl{animation:flash .9s}@keyframes flash{30%{background:#fff4d6;transform:scale(1.04)}}.live{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px;margin-bottom:12px}.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pl 1.4s infinite}@keyframes pl{50%{opacity:.25}}
.mo{display:flex;gap:14px;align-items:flex-end;margin-top:10px}.mo>div{flex:1;text-align:center;font-size:12px;color:var(--mut)}.mo .bs{display:flex;gap:3px;align-items:flex-end;height:130px;justify-content:center}.mo .bs b{width:40%;max-width:26px;border-radius:5px 5px 0 0;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.tag.red{background:#fbe4e1;color:var(--bad)}
.tag.blue{background:#dbe8fb;color:#1d4f91}

/* ---- employees / payroll ---- */
.ftabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px;border-bottom:1px solid var(--line)}
.ftabs button{font:inherit;border:0;background:none;padding:9px 16px;cursor:pointer;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-1px}
.ftabs button.on{color:var(--ink);font-weight:600;border-color:var(--brass)}
.tp{display:none}.tp.on{display:block;animation:up .25s both}
.avatar{height:84px;width:84px;object-fit:cover;border-radius:50%;border:2px solid var(--line)}
.avatar.sm{height:40px;width:40px;border-width:1px;display:inline-grid;vertical-align:middle}
.avatar.lg{height:120px;width:120px}
.avatar.ph{display:inline-grid;place-items:center;background:#e8ecf2;font-weight:700;color:var(--ink)}
.prof{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin-top:10px}.kv span{color:var(--mut)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:16px}.cols2>.box{margin-bottom:0}
input.num{width:96px;text-align:end}
tr.off td{opacity:.55}
.doc{display:grid;gap:4px;justify-items:center;text-decoration:none;color:var(--ink);max-width:110px;text-align:center}
@media print{.noprint{display:none!important}.slip,.prof,.box{box-shadow:none;border:1px solid #bbb}}