:root{--canvas: #f3f0ea;--surface: #fbfaf7;--surface-2: #f7f4ee;--border: #e4dfd5;--border-strong: #d3cdc1;--ink: #1b1a17;--ink-2: #514d47;--ink-3: #6b665d;--ink-4: #a29b8f;--accent: #1b1a17;--accent-strong: #2a2825;--accent-ink: #1b1a17;--accent-soft: rgba(27, 26, 23, .1);--on-accent: #f6f3ed;--present: #2e6a4e;--present-bg: #e6efe9;--mild: #8a5a17;--mild-bg: #f4ecdc;--late: #97392b;--late-bg: #f3e4e0;--leave: #3f6272;--leave-bg: #e6ecef;--hero-shadow: 0 1px 0 rgba(27, 26, 23, .02), 0 12px 32px -24px rgba(27, 26, 23, .18);--pop-shadow: 0 1px 0 rgba(27, 26, 23, .02), 0 24px 60px -30px rgba(27, 26, 23, .28);--font-ar: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;--font-latin: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "IBM Plex Sans Arabic", system-ui, sans-serif;--font-serif: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;--r-card: 14px;--r-ctrl: 10px;--side: 248px}:root[data-theme=dark]{--canvas: #1f1c19;--surface: #292521;--surface-2: #332e29;--border: #403a34;--border-strong: #564e46;--ink: #efe9e1;--ink-2: #c8bfb5;--ink-3: #9a9086;--ink-4: #6f675d;--accent: #ddd3c5;--accent-strong: #e8e0d4;--accent-ink: #ddd3c5;--accent-soft: rgba(221, 211, 197, .12);--on-accent: #1f1c19;--present: #8fc79a;--present-bg: #29342a;--mild: #dcb66c;--mild-bg: #3c3420;--late: #df846e;--late-bg: #402b25;--leave: #9fb6c2;--leave-bg: #2b3339;--hero-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 12px 32px -24px rgba(0, 0, 0, .6);--pop-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 24px 60px -30px rgba(0, 0, 0, .7)}:root[data-theme=dark] .modal-overlay{background:#0009}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-ar);font-size:14px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"tnum" 1}button,input{font:inherit;color:inherit}h1,h2,h3{margin:0;font-weight:500}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}.muted{color:var(--ink-2)}.small{font-size:13px}.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh;max-width:1440px;margin:0 auto}.sidebar{background:var(--canvas);border-inline-end:1px solid var(--border);padding:36px 26px 30px;display:flex;flex-direction:column;position:sticky;inset-block-start:0;height:100vh}.brandmark{display:flex;align-items:center;gap:10px;padding:2px 8px;font-family:var(--font-serif);font-weight:500;font-size:20px;letter-spacing:0;color:var(--ink)}.brandmark svg{color:var(--ink);flex:0 0 auto}.nav{display:flex;flex-direction:column;gap:2px;margin-block-start:44px}.navitem{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:none;border-radius:8px;color:var(--ink-2);font:inherit;font-weight:400;text-align:start;text-decoration:none;cursor:pointer;transition:background .15s}.navitem svg{color:var(--ink-3);flex:0 0 auto}.navitem:hover{background:var(--surface-2);color:var(--ink)}.navitem.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--border)}.navitem.active svg{color:var(--ink)}.sidebar-foot{margin-block-start:auto;padding-block-start:24px;border-block-start:1px solid var(--border)}.user{display:flex;align-items:center;gap:12px;padding:4px 8px}.avatar{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-family:var(--font-serif);font-size:16px;line-height:1;padding-top:2px;flex:0 0 auto}.uname{font-weight:500;font-size:14px;line-height:1.3}.urole{font-size:12.5px;color:var(--ink-3);line-height:1.3;margin-top:2px}.foot-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:0 8px}.lang{font-size:11.5px;font-weight:500;letter-spacing:.06em;padding:5px 12px;border:1px solid var(--border-strong);border-radius:999px;color:var(--ink-2);background:none;cursor:pointer;direction:ltr}.lang:hover{border-color:var(--ink-3)}.logout{font-size:13px;color:var(--ink-3);background:none;border:0;cursor:pointer}.logout:hover{color:var(--ink)}.iconbtn{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;border-radius:var(--r-ctrl);background:transparent;color:var(--ink-2);cursor:pointer;text-align:start}.iconbtn:hover{background:var(--surface-2);color:var(--ink)}.main{min-width:0;display:flex;flex-direction:column}.topbar,.bottomnav{display:none}.repselect{min-width:150px;flex:0 0 auto}.online{display:inline-flex;align-items:center;gap:5px;margin-inline-start:8px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--present);background:var(--present-bg);vertical-align:middle}.online .dot{width:6px;height:6px;border-radius:50%;background:var(--present);animation:onlinePulse 2s ease-in-out infinite}@keyframes onlinePulse{0%,to{opacity:1}50%{opacity:.35}}.content{padding:clamp(28px,5vw,56px) clamp(20px,6vw,72px) 80px;max-width:972px;width:100%;margin-inline:auto}.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-block-end:40px;flex-wrap:wrap}.pagehead h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.005em}.pagehead .sub{color:var(--ink-3);margin-block-start:10px;font-size:14px}.liveclock{display:flex;flex-direction:column;align-items:flex-start}.liveclock .t{font-family:var(--font-ar);font-size:clamp(34px,4vw,44px);font-weight:300;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)}.liveclock .z{display:flex;align-items:center;gap:7px;margin-block-start:8px;font-size:12.5px;color:var(--ink-3)}.liveclock .z:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--present);flex:0 0 auto}.clockcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--hero-shadow);padding:clamp(24px,3vw,36px) clamp(24px,3.5vw,40px);display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}.clock-top{display:block}.clock-label{font-size:12.5px;color:var(--ink-3);font-weight:500}.status-line{margin-block-start:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.clock-since{color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums}.bigbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:var(--r-ctrl);padding:16px 30px;font-size:15px;font-weight:500;letter-spacing:.005em;color:var(--on-accent);background:var(--accent);cursor:pointer;transition:background .15s,transform .15s}.bigbtn:hover:not(:disabled){background:var(--accent-strong)}.bigbtn:active:not(:disabled){transform:translateY(1px)}.bigbtn.done,.bigbtn.blocked{background:var(--surface-2);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--border);cursor:default}.bigbtn:disabled{cursor:default}.bigbtn .spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(246,243,237,.4);border-top-color:var(--on-accent);animation:spin .7s linear infinite}.reason{flex-basis:100%;display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13.5px;margin:0}.reason svg{color:var(--mild);flex:0 0 auto}.formerr{flex-basis:100%;display:flex;align-items:center;gap:8px;color:var(--late);background:var(--late-bg);border-radius:var(--r-ctrl);padding:9px 12px;font-size:13.5px;margin:0}.stats{margin-block:40px;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--border)}.stat{padding:26px 24px;background:none;border:0;border-radius:0}.stat+.stat{border-inline-start:1px solid var(--border)}.stat .top{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12.5px;font-weight:500}.stat .top svg{display:none}.stat .val{margin-block-start:12px;font-family:var(--font-ar);font-size:clamp(26px,3vw,32px);font-weight:300;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}.stat.warn .val{color:var(--mild)}.stat.bad .val{color:var(--late)}.stat.good .val,.stat.accent .val{color:var(--ink)}.content section{margin-block-end:34px}.content section:last-of-type{margin-block-end:0}.section-h{font-size:15px;font-weight:500;color:var(--ink);margin:0 0 14px}.panel{background:none;border:0;border-radius:0}.tablewrap{overflow-x:auto}table.grid{border-collapse:collapse;width:100%;font-size:14px;min-width:480px;font-variant-numeric:tabular-nums}.grid th,.grid td{text-align:start;padding:15px 0}.grid th+th,.grid td+td{padding-inline-start:20px}.grid thead th{font-size:12.5px;color:var(--ink-3);font-weight:500;padding-block:10px 12px;border-block-end:1px solid var(--border-strong)}.grid tbody td{border-block-end:1px solid var(--border);color:var(--ink);vertical-align:middle}.grid tbody tr:last-child td{border-block-end:0}.grid td.mono{color:var(--ink-2)}.grid td.center{text-align:center;color:var(--ink-3)}.badge{display:inline-flex;align-items:center;gap:9px;font-weight:500;line-height:1;white-space:nowrap}.badge:not(.plain){padding:8px 14px;border-radius:999px;font-size:15px}.badge.plain{font-size:14px}.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}.badge:not(.plain) .dot{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)}.badge.plain .dot{width:7px;height:7px}.badge.present{color:var(--present)}.badge.present:not(.plain){background:var(--present-bg)}.badge.mildly_late{color:var(--mild)}.badge.mildly_late:not(.plain){background:var(--mild-bg)}.badge.late,.badge.absent{color:var(--late)}.badge.late:not(.plain),.badge.absent:not(.plain){background:var(--late-bg)}.badge.early,.badge.leave,.badge.half_day{color:var(--leave)}.badge.early:not(.plain),.badge.leave:not(.plain),.badge.half_day:not(.plain){background:var(--leave-bg)}.badge .flag{color:var(--ink-3);font-weight:400}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#1b1a176b;display:grid;place-items:center;padding:20px;animation:modal-fade .15s ease}.modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--pop-shadow);max-width:430px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;padding:26px 26px 20px;animation:modal-pop .16s ease}.modal-card.modal-wide{max-width:520px}.modal-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-field{display:block;margin-bottom:14px}.modal-field>span{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}.modal-field .modal-input{margin-bottom:0}.modal-icon{display:inline-flex;color:var(--mild);margin-bottom:12px}.modal-msg{margin:0 0 24px;font-size:15.5px;line-height:1.75;color:var(--ink)}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-cancel,.modal-confirm{padding:10px 20px;border-radius:var(--r-ctrl);font-weight:600;cursor:pointer;border:1px solid transparent;transition:filter .15s,border-color .15s,background .15s}.modal-cancel{background:none;border-color:var(--border-strong);color:var(--ink-2)}.modal-cancel:hover{border-color:var(--ink-3);color:var(--ink)}.modal-confirm{background:var(--accent);color:var(--on-accent)}.modal-confirm:hover{background:var(--accent-strong)}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.modal-overlay,.modal-card{animation:none}}.modal-icon.danger{color:var(--late)}.modal-typehint{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}.modal-input{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--r-ctrl);background:var(--surface-2);color:var(--ink);margin-bottom:10px}.modal-hint{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);margin:0 0 20px}.modal-hint svg{flex:0 0 auto;color:var(--ink-4)}.modal-input:focus{outline:none;border-color:var(--ink)}.modal-confirm.danger{background:var(--late);color:#fff}.modal-confirm.danger:hover{filter:brightness(1.08)}.modal-confirm:disabled{opacity:.45;cursor:not-allowed;filter:none}.undo-btn{display:inline-flex;align-self:center;margin-top:4px;background:none;border:none;color:var(--ink-3);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.undo-btn:hover{color:var(--late)}.expand-btn{width:100%;padding:11px;background:var(--surface-2);border:none;border-top:1px solid var(--border);color:var(--ink-2);font-weight:600;font-size:13.5px;cursor:pointer}.expand-btn:hover{background:var(--canvas);color:var(--ink)}.rowbtn{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);padding:6px 13px;border-radius:999px;font-size:12.5px;cursor:pointer;white-space:nowrap}.rowbtn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}.rowbtn:disabled{opacity:.5;cursor:default}.linkbtn{border:0;background:none;color:var(--ink-3);padding:4px 2px;font-size:13px;cursor:pointer;text-decoration:none}.linkbtn:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.rowactions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.rowoff td{opacity:.62}.rowoff .rowbtn{opacity:1}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-head .section-h{margin:0}.addbtn{border:0;background:var(--accent);color:var(--on-accent);padding:8px 16px;border-radius:var(--r-ctrl);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}.addbtn:hover:not(:disabled){background:var(--accent-strong)}.addbtn:disabled{opacity:.5;cursor:default}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:20px 22px}.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.setrow-title{font-weight:500;color:var(--ink);margin-bottom:2px}.setrow-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:4px}.segmented{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:3px;gap:2px}.seg{border:0;background:none;color:var(--ink-2);padding:6px 18px;border-radius:999px;font-size:13px;cursor:pointer;transition:background .15s,color .15s}.seg.on{background:var(--accent);color:var(--on-accent)}.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;background:var(--canvas)}.login-lang{position:absolute;inset-block-start:24px;inset-inline-end:24px}.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--pop-shadow);padding:36px;display:grid;gap:22px}.login-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-weight:500;font-size:20px}.login-brand .mark{width:40px;height:40px;border-radius:11px;background:var(--ink);color:var(--canvas);display:grid;place-items:center;flex:0 0 auto}.login-card h1{font-family:var(--font-serif);font-weight:400;font-size:26px}.login-card .lead{color:var(--ink-3);margin:-10px 0 0;font-size:14px}.field{display:grid;gap:7px}.field label{font-size:13px;font-weight:500;color:var(--ink-2)}.field input{padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-ctrl);background:var(--surface);color:var(--ink)}.field input::placeholder{color:var(--ink-4)}.field input:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}.btn-primary{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:var(--r-ctrl);background:var(--accent);color:var(--on-accent);font-weight:500;padding:13px 16px;cursor:pointer;transition:background .15s}.btn-primary:hover:not(:disabled){background:var(--accent-strong)}.btn-primary:disabled{opacity:.7;cursor:default}.btn-primary .spin{width:17px;height:17px;border-radius:50%;border:2px solid rgba(246,243,237,.4);border-top-color:var(--on-accent);animation:spin .7s linear infinite}.pill-lang{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);padding:7px 14px;border-radius:999px;cursor:pointer;font-size:12.5px}.pill-lang:hover{color:var(--ink);border-color:var(--ink-3)}.devnote{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);border-block-end:1px solid var(--border);padding:8px 16px;font-size:12.5px;color:var(--ink-2)}.devnote .chip{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);padding:3px 12px;border-radius:999px;cursor:pointer}.devnote .chip.on{border-color:var(--ink);color:var(--ink)}:where(a,button,input):focus-visible{outline:2px solid var(--ink);outline-offset:2px}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}.enter>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}.enter>*:nth-child(2){animation-delay:.06s}.enter>*:nth-child(3){animation-delay:.12s}.enter>*:nth-child(4){animation-delay:.18s}@media (max-width: 860px){.shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-block-end:1px solid var(--border);position:sticky;inset-block-start:0;z-index:5}.topbar .brandmark{padding:0;font-size:17px}.topbar-actions{display:flex;gap:4px}.shell:has(.bottomnav) .content{padding-block-end:calc(72px + env(safe-area-inset-bottom,0px))}.bottomnav{display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:20;background:var(--surface);border-block-start:1px solid var(--border);padding-block:6px;padding-block-end:calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px -14px #0006}.bottomnavitem{flex:1 1 0;display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:11.5px;cursor:pointer}.bottomnavitem svg{color:currentColor;flex:0 0 auto}.bottomnavitem.active{color:var(--ink);font-weight:500}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3),.stat:nth-child(4){border-block-start:1px solid var(--border)}.stat:nth-child(3){border-inline-start:0}}@media (max-width: 520px){.bigbtn{width:100%}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}