@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;550;600;650;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");:root{--navy:#112747;--ink:#1d2b40;--muted:#708094;--line:#e4e9f0;--bg:#f6f7f9;--blue:#3765b5;font-family:DM Sans,Noto Sans Arabic,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}.button,button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:white;min-height:40px;padding:9px 13px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}.button:hover,button:hover{background:#eef2f8}button:disabled{opacity:.5;cursor:default}a:focus-visible,button:focus-visible{outline:3px solid #85ace7;outline-offset:3px}input,select,textarea{border:1px solid #dce3ed;padding:11px 12px;border-radius:8px;background:white;min-height:43px;font-size:14px;max-width:100%}input:focus,select:focus,textarea:focus{outline:2px solid #a8c1e5;border-color:#789aca}input[type=checkbox]{min-height:18px;width:18px;accent-color:var(--navy)}input[type=date],input[type=month],input[type=time]{direction:ltr}textarea{min-height:100px;resize:vertical}h1,h2,h3,p{margin:0}h1{font-size:30px;letter-spacing:-.8px;font-weight:550}h2{font-size:19px;font-weight:600;letter-spacing:-.35px}p{line-height:1.7;font-size:14px}small{font-size:12px;line-height:1.6;color:var(--muted)}a{color:var(--blue)}.primary{background:var(--navy);border-color:var(--navy);color:white}.primary:hover{background:#274568}.full{width:100%;margin:15px 0}.muted{color:var(--muted)}.grow{flex:1 1;min-width:0}.row{gap:12px}.between,.row{display:flex;align-items:center}.between{justify-content:space-between;gap:16px;flex-wrap:wrap}.button-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.mb{margin-bottom:22px}.stack{display:grid;gap:16px}.shell{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:100dvh}.sidebar{background:var(--navy);color:#b9c9de;position:sticky;top:0;height:100dvh;padding:30px 18px 22px;display:flex;flex-direction:column;z-index:20}.brand{padding:5px 15px 30px}.brand img{display:block;width:142px;height:40px;object-fit:contain}.brand span{font-size:10px;letter-spacing:4px;color:#8fa6c3;display:block;margin:10px 0 0 3px}.nav-label{font-size:10px;letter-spacing:1.4px;color:#7189a8;margin:15px}.sidebar nav{overflow:auto}.sidebar nav button{width:100%;justify-content:flex-start;background:transparent;border:0;color:#b6c7dd;font-weight:500;padding:12px 14px;margin:2px 0;font-size:13px;text-align:start}.sidebar nav button.active,.sidebar nav button:hover{background:#2b4363;color:white}.sidebar-bottom{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:9px;border-top:1px solid #304763}.sidebar-bottom strong{font-size:12px;color:white;display:block}.sidebar-bottom small{font-size:10px;color:#acbdd3}.sidebar-bottom button{background:transparent;border:0;color:white;margin-inline-start:auto;padding:5px}.avatar{border-radius:50%;background:#e8edf5;color:#476180;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;font-size:12px;font-weight:600}.avatar.large{width:64px;height:64px;font-size:20px;margin-bottom:18px}.sidebar .avatar{background:#314c71;color:white}.topbar{height:77px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}.breadcrumb{font-size:12px;color:#95a0af}.breadcrumb span{color:#55677e;margin-inline-start:8px}.topbar button{border:0;background:transparent}.bell{position:relative}.bell i{position:absolute;top:7px;right:7px;width:6px;height:6px;background:#ad8049;border-radius:50%}.content{padding:32px 34px 60px;max-width:1600px;margin:auto}.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}.page-heading p{font-size:12px;color:var(--muted);margin-top:6px}.month-field{display:grid;gap:4px;font-size:11px;color:var(--muted)}.month-field input{font-size:13px}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}.card h2{margin-bottom:15px}.card.flush{padding:0;overflow:hidden}.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0}.stat{border:1px solid var(--line);border-radius:14px;background:white;padding:20px 22px}.stat p{font-size:12px;color:var(--muted)}.stat strong{display:block;font-size:29px;font-weight:550;margin:12px 0 5px;letter-spacing:-1px}.stat small{font-size:11px}.balance-hero,.welcome-band{background:var(--navy);color:white;padding:26px 28px;border-radius:15px}.welcome-band{display:flex;align-items:center;justify-content:space-between;gap:20px}.balance-hero small,.welcome-band small{color:#b7c8df;letter-spacing:1.5px;font-size:10px}.welcome-band h2{font-size:23px;font-weight:500;margin:8px 0}.balance-hero p,.welcome-band p{color:#b7c8df;font-size:13px}.balance-hero button{margin-top:24px;background:transparent;color:white;border-color:#506581}.detail{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid #edf0f5;font-size:13px}.detail:last-child{border:0}.detail span{color:var(--muted)}.detail strong{text-align:end}.section-title{margin:28px 0 15px}.action-row{width:100%;justify-content:flex-start;text-align:start;font-weight:500;gap:15px;padding:18px}.action-row svg:last-child{margin-inline-start:auto}.action-row p{font-size:12px;color:var(--muted)}.filters{gap:10px;flex-wrap:wrap;margin-bottom:22px}.filters,.search{display:flex;align-items:center}.search{gap:8px;background:white;border:1px solid var(--line);padding:0 13px;border-radius:9px;margin-inline-end:auto}.search input{border:0;min-width:190px}.person-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tabs{display:flex;align-items:center;border-bottom:1px solid var(--line);margin:20px 0;gap:4px}.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:12px 18px}.tabs button.active{color:var(--navy);border-color:var(--navy)}.push{margin-inline-start:auto}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}table,th{text-align:start}th{font-size:11px;font-weight:500;color:var(--muted);background:#fbfcfd;border-bottom:1px solid var(--line);padding:14px}td{padding:17px 14px;border-bottom:1px solid #edf0f4;font-size:12px}td small{display:block;margin-top:4px;font-size:10px}td .button-row{margin:0;flex-wrap:nowrap}td button{font-size:11px;padding:7px 9px;min-height:32px}.summary-strip{padding:22px;display:flex;justify-content:space-between;align-items:center;background:#fafbfd;font-size:13px}.summary-strip strong{font-size:24px}.pill{display:inline-flex;padding:5px 9px;border-radius:6px;background:#eef1f5;color:#657286;font-size:11px;white-space:nowrap}.pill.approved,.pill.received{background:#e9f4ef;color:#237563}.pill.handed,.pill.pending{background:#fcf3e6;color:#926126}.pill.rejected{background:#fcecef;color:#ac4350}.notice{white-space:pre-line;padding:15px 17px;background:#edf2f9;border:1px solid #dfe8f5;border-radius:10px;color:#476384;font-size:13px;line-height:1.7;margin-bottom:20px}.notice .button-row{margin:0}.error,.success{padding:14px 17px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px;margin-bottom:20px;line-height:1.6}.error{background:#fceef0;color:#a53345}.success{background:#eaf4ed;color:#287055}.error button,.success button{background:transparent;border:0}.empty{padding:60px 24px;text-align:center;color:var(--muted)}.empty svg{margin-bottom:13px}.feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.post strong{font-size:13px}.post small{display:block;font-size:11px}.post-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:20px 0;color:#526178;font-size:14px}.feed-media{width:100%;max-height:380px;object-fit:contain;border-radius:10px;background:#eef1f5;margin-bottom:20px}.text-button{border:0;background:transparent;padding:5px;min-height:32px;color:var(--muted);font-size:12px}.acknowledge{width:100%;margin:12px 0;background:#f5f8fc;font-size:12px}.comments p{background:#f6f8fb;border-radius:8px;padding:10px;font-size:12px;margin:10px 0}.inline-form{display:flex;gap:6px;margin-top:15px}.inline-form input{flex:1 1;min-width:0;font-size:12px}.inline-form button{border:0}.pay-total{font-size:37px;font-weight:500;letter-spacing:-1.4px;margin:15px 0}.pay-total small{font-size:14px;letter-spacing:0}.payslip{max-width:640px;margin:auto}.payslip .detail{font-size:14px}.greeting{margin-bottom:24px}.greeting p{color:var(--muted);font-size:13px}.product-image{width:100%;height:180px;object-fit:contain;border-radius:10px;background:#edf1f5;margin-bottom:20px}.product-empty{display:grid;place-items:center;color:#8497af}.unread{border-inline-start:4px solid #567eb6}.modal-shade{position:fixed;inset:0;background:#0b1e3f66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:22px}.modal{background:white;border-radius:18px;width:650px;max-width:100%;max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #091a4033}.modal-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head button{border:0;background:transparent}.modal-body{padding:24px 26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}.field{display:grid;gap:8px;font-size:12px;color:#65778c;min-width:0}.field input,.field select,.field textarea{width:100%}.field.wide{grid-column:1/-1}.field.check{display:flex;align-items:center;gap:9px}.field.check input{width:18px;flex:none}.modal-footer{padding:20px 26px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}.loading{display:grid;place-items:center;min-height:45vh;color:var(--muted)}.mobile-menu{display:none!important}.auth-page{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}.auth-brand{background:var(--navy);color:white;padding:12vh 10%;display:flex;flex-direction:column;justify-content:center}.auth-brand img{width:210px}.auth-brand p{letter-spacing:5px;font-size:12px;color:#b4c5dc;margin:20px 0 80px}.auth-brand h1{font-size:43px;max-width:420px;line-height:1.2;margin-bottom:25px}.auth-brand span{color:#b7c6d9;font-size:14px}.auth-panel{padding:60px 10%;display:flex;align-items:center;justify-content:center;position:relative}.auth-form{width:100%;max-width:390px}.auth-form h1{margin:23px 0 12px}.auth-form p{color:var(--muted);margin-bottom:30px;font-size:13px}.auth-form .field{margin:18px 0}.auth-form small{display:block;margin-top:20px}.language{position:absolute;top:25px;inset-inline-end:30px}.employee-shell .content{max-width:1150px}[dir=rtl] .pay-total,[dir=rtl] h1,[dir=rtl] h2{letter-spacing:0}@media (min-width:1500px){.person-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1150px){.person-grid,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:26px}.feed-grid,.grid2{grid-template-columns:1fr}}@media (max-width:760px){.shell{display:block}.sidebar{position:fixed;inset-inline-start:-270px;width:250px;transition:inset-inline-start .2s}.sidebar.open{inset-inline-start:0}.mobile-menu{display:inline-flex!important}.topbar{height:65px;padding:0 15px;position:sticky;top:0;z-index:10}.breadcrumb{display:none}.content{padding:24px 16px 45px}h1{font-size:26px}.page-heading{align-items:flex-start;gap:10px}.month-field input{width:145px;padding:8px;font-size:12px}.stats{gap:10px}.stat{padding:17px 15px}.stat strong{font-size:25px}.stat p{font-size:11px}.person-grid{grid-template-columns:1fr}.welcome-band{padding:24px;display:block}.welcome-band button{margin-top:18px}.welcome-band h2{font-size:21px}.card{padding:20px}.form-grid{grid-template-columns:1fr}.modal-shade{padding:12px}.modal-body,.modal-footer,.modal-head{padding:20px}.tabs button{padding:10px 12px;font-size:12px}.tabs .push{padding:8px}.auth-page{display:block}.auth-brand{min-height:230px;padding:35px 30px}.auth-brand img{width:140px}.auth-brand p{margin:10px 0 25px;font-size:9px}.auth-brand h1{font-size:28px;margin-bottom:10px}.auth-brand span{font-size:12px}.auth-panel{padding:70px 25px 40px}.auth-form h1{font-size:27px}.auth-form svg{display:none}.field input,.field select,.field textarea{font-size:16px}.filters .search,.filters input{width:100%}.search{flex:1 1}.notice.between{align-items:flex-start}.pay-total{font-size:34px}}@media print{.error,.month-field,.page-heading,.sidebar,.success,.topbar,button{display:none!important}.shell{display:block}.content{padding:0}.payslip{border:0;max-width:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.install-app{display:flex;flex-wrap:wrap;gap:8px;padding:10px 24px;background:#f4f6fa;color:#0b1c35}.install-app button{font:inherit;border:1px solid #dce1e9;border-radius:8px;padding:8px 12px;background:white;color:#0b1c35;cursor:pointer}.install-app p{flex-basis:100%;margin:4px 0;font-size:13px;max-width:760px}.install-app button:disabled{opacity:.5}