/* Wasl identity — shared desktop and mobile application surfaces. */
:root{--ink:#1F2A27;--green:#13302A;--gold:#B8954A;--muted:#6B716E;--line:#E0D9C8;--surface:#F6F3EC;--shadow:0 5px 22px #173d3105}
body{background:var(--surface);color:var(--ink);font-family:LocalArabic,Tahoma,Arial,sans-serif;font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid #B8954A;outline-offset:3px}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}h1{font-size:30px;letter-spacing:-.7px;font-weight:700}h2{font-size:20px}.subtitle{font-size:13px;color:var(--muted)}small,.muted{color:var(--muted)}.eyebrow{color:#637d70;font-size:11px;letter-spacing:0}.mono{font-variant-numeric:tabular-nums}
.sidebar{width:258px;background:#13302A;border:0;padding:32px 16px 16px;color:#eaf2eb}.sidebar .brand{padding:0 14px 26px}.brand-mark{background:var(--green);box-shadow:0 4px 10px #16382c10}.sidebar .brand-mark{background:#D9BF7F;color:#13302A;border-radius:14px}.brand-name{font-size:32px;letter-spacing:-1px}.sidebar .brand small{color:#b1c8bc;font-size:12px;letter-spacing:0}.sidebar .workspace{border:1px solid #ffffff1a;background:#ffffff06;color:#e4eee7;margin-bottom:20px}.sidebar small{color:#afc5b8}.sidebar .nav-caption{color:#94b2a0;font-size:11px}.nav{scrollbar-width:thin;scrollbar-color:#416454 transparent}.nav button{font-size:13px;color:#bfd2c6;padding:11px 14px;min-height:44px;border-radius:10px;margin:4px 0}.nav button svg{width:19px;height:19px;color:#94b6a0}.nav button:hover{background:#ffffff0c;color:white}.nav button.active{background:#F6F3EC;color:#13302A;box-shadow:0 4px 12px #0826191a}.nav button.active svg{color:#345f40}.nav .badge{background:#d5ba88;color:#1b3f32;font-size:11px}.sidebar-bottom{border-color:#ffffff15}.sidebar .user-info b{font-size:13px;color:#f0f6ef}.sidebar .avatar{background:#ffffff16;color:#d6c08e}.sidebar .icon-btn{border-color:#ffffff22;color:#dceade}.main{margin-right:258px;width:calc(100% - 258px);min-width:0}.topbar{height:78px;background:#ffffffed;position:sticky;top:0;z-index:12;backdrop-filter:blur(12px);border-color:var(--line);padding:0 36px}.breadcrumb{font-size:13px;color:#728578}.breadcrumb strong{font-weight:600;color:#345347}.top-date{font-size:12px;color:#627a6c}.icon-btn{min-width:42px;width:42px;height:42px;border-radius:12px;background:#fff}.content{padding:30px 36px 36px;max-width:1700px}.page-heading{margin-bottom:26px}.page-heading>.row{flex-wrap:wrap}.row{min-width:0}.btn{min-height:42px;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:500;border-color:#d9e3db;transition:background .15s,box-shadow .15s}.btn.primary{background:#13302A;border-color:#13302A;box-shadow:0 4px 8px #13302A12}.btn.primary:hover{background:#173f34}.btn.small{min-height:36px;font-size:12px}.btn.danger{color:#973c36}.btn.soft{color:#375b3d}.btn:hover{filter:none;box-shadow:0 3px 12px #1F2A2710}
.dashboard-content>.page-heading{background:#f0eadb;border:1px solid #E0D9C8;padding:28px 30px;border-radius:20px;position:relative}.dashboard-content>.page-heading:before{content:'';width:4px;position:absolute;right:0;top:30px;bottom:30px;border-radius:4px;background:#B8954A}.dashboard-content>.page-heading .eyebrow{color:#647c62}.dashboard-content>.page-heading h1{font-size:29px}.filterbar{margin-bottom:22px}.tabs{background:#eee8db;padding:5px;border-radius:12px;gap:4px}.tabs button{min-height:39px;font-size:12px;color:#526b5b;padding:8px 18px;border-radius:8px}.tabs button.selected{color:#1c4736;box-shadow:0 2px 8px #2644320d}.demo-tag{color:#7e6840;font-size:11px}
.stats{gap:18px;margin-bottom:26px;grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:21px 23px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.stat-head{font-size:13px;color:#506a5b;gap:5px}.stat-icon{background:#f0f3e8;color:#738355;width:36px;height:36px;border-radius:11px}.stat-value{font-size:35px;color:#13302A;font-weight:600;letter-spacing:-1px;margin-top:12px;overflow-wrap:anywhere}.stat-value span{font-size:12px;color:#62796a;font-weight:400}.stat-foot{font-size:11px;color:#718575;margin-top:9px}.stat-foot b{color:#537943}.grid-main{gap:24px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}.grid-main>*{min-width:0}.panel{border-color:var(--line);border-radius:16px;box-shadow:var(--shadow);min-width:0}.panel-head{padding:22px 24px;gap:10px}.panel-head h2{font-size:16px;font-weight:600;color:#234739}.panel-head a,.link{font-size:12px;color:#577742}.panel-body{padding:0 24px 24px}.legend{font-size:11px;color:#667d6a;flex-wrap:wrap}.chart{height:195px}.bar{background:#62866b;border-radius:6px 6px 0 0}.bar.pale{background:#e4ebdd}.bar-label{font-size:11px;color:#627563}.chart-note{font-size:11px;color:#71806c}.quick{padding:19px 12px;min-height:99px;border-radius:13px;font-size:13px;color:#3f624f;background:#fcfdfb}.quick svg{width:23px;height:23px;color:#64835e}.quick:hover{background:#edf3e8;border-color:#b7c9ac}.activity-item{padding:15px 0}.activity-item p{font-size:13px;color:#405d4b}.activity-item small{font-size:11px;color:#758778}.activity-icon{width:34px;height:34px;background:#eef3e7;color:#65845e}.company-card{border-radius:14px;box-shadow:var(--shadow)}.company-card b{font-size:14px}.company-card small{font-size:12px}
.table-wrap{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b6c7b7 #f4f7f2}table{font-size:13px}th{background:#f5f8f3;color:#5e7664;font-size:12px;font-weight:500;padding:14px 20px}td{color:#425f4c;padding:17px 20px;border-bottom:1px solid #edf1eb}tbody tr:hover{background:#fafcf8}.employee-cell b{font-size:13px}.employee-cell small{font-size:11px;color:#778c7b}.avatar{width:39px;height:39px;border-radius:12px;font-size:13px}.pill{font-size:11px;font-weight:500;background:#eaf2e2;color:#486c36;border-radius:7px;padding:5px 10px}.pill.orange{color:#866121;background:#fff2dc}.pill.red{color:#a54742}.pill.gray{color:#657569}.pill.purple{color:#785493}.table-hint{display:none}
select,input,textarea{font-size:14px;border-radius:10px;min-height:44px;border-color:#d7e1d7;color:#294b37;padding:11px 13px;line-height:1.5}.field label{font-size:13px;color:#4b6650}.search{border-radius:11px;min-height:46px;min-width:280px}.search input{font-size:14px}.filters{gap:12px}.field input:read-only{color:#63785b;background:#f2f5ed}.note{color:#597047;background:#f3f6ed;border-color:#e3e9d8;font-size:12px;line-height:1.9;border-radius:12px;padding:15px 18px}.hint{font-size:12px;color:#667c5b}.empty{font-size:14px;color:#718567;padding:40px 22px}.detail{font-size:14px}.detail small{font-size:12px}.doc-card{border-radius:16px;padding:24px;box-shadow:var(--shadow)}.doc-card h3{font-size:16px}.doc-card p{font-size:13px;color:#6b7f62}.step{font-size:12px;color:#607454}.footer{font-size:11px;color:#71836b;line-height:1.7}.profile-head{border-radius:18px;background:linear-gradient(110deg,#e7efdf,#fff)}
.modal-backdrop{background:#092e2466;backdrop-filter:blur(5px)}.modal{border-radius:20px;max-height:calc(100dvh - 48px)}.modal-head{padding:22px 26px;border-color:#e5eae1}.modal-head h2{font-size:20px}.modal-body{padding:24px 26px}.modal-footer .btn{min-width:100px}.form-grid{gap:19px}.document-form{max-height:none}.checkfield{font-size:13px;min-height:44px}.checkfield input{min-height:18px}.inline-error,.form-error{color:#9c3f36;font-size:13px}.loading{height:200px}#app>.loading{min-height:100vh}#toast{font-size:14px;max-width:min(450px,calc(100vw - 32px))}body.modal-open,body.nav-open{overflow:hidden}
.login{grid-template-columns:1fr 1fr;min-height:100dvh}.login-hero{background:radial-gradient(ellipse at 0 100%,#355d43 0,transparent 65%),#13302A;padding:60px 10%;min-height:100dvh}.login-hero .brand-mark{background:#D9BF7F;color:#13302A}.login-hero .brand small{color:#c3d4c5;font-size:12px}.login-hero h1{font-size:clamp(32px,3.5vw,52px);font-weight:600;line-height:1.55;letter-spacing:-1px}.login-hero p{color:#c0d0c1;font-size:16px;max-width:430px}.login-brands{color:#d5c7a3;font-size:19px}.login-form{background:#fbfcf9}.login-inner{max-width:380px}.login-inner h2{font-size:28px}.login-inner .subtitle{font-size:14px}.login-inner .btn{min-height:48px;font-size:14px}.demo-accounts{color:#718168;font-size:12px}.demo-accounts button{color:#446638;min-height:38px}.login-mobile-brand{display:none}.sidebar-close,.nav-scrim,.mobile-dock{display:none}
@media(min-width:1600px){.content{padding:38px 48px}.topbar{padding:0 48px}}
@media(min-width:851px) and (max-width:1150px){.sidebar{width:226px;padding:28px 12px 16px}.main{width:calc(100% - 226px);margin-right:226px}.content{padding:25px}.topbar{padding:0 25px}.stat{padding:17px}.stat-head{font-size:12px}.grid-main{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
@media(max-width:850px){.sidebar{width:285px;max-width:85vw;transform:translateX(105%);visibility:hidden;pointer-events:none;z-index:42;padding:25px 16px 18px}.sidebar.open{visibility:visible;pointer-events:auto;transform:none}.sidebar .brand{padding-left:35px}.sidebar-close{display:grid;position:absolute;left:14px;top:29px;background:transparent;border-color:#ffffff33;color:#fff;width:34px;min-width:34px;height:34px}.nav-scrim{position:fixed;inset:0;z-index:40;background:#0a2c2466;backdrop-filter:blur(3px);border:0;border-radius:0}.nav-open .nav-scrim{display:block}.main{width:100%;margin-right:0}.topbar{height:68px;padding:0 18px;gap:10px}.breadcrumb{gap:10px;font-size:12px}.breadcrumb>span{display:none}.top-actions{gap:8px}.mobile-menu{display:inline-grid}.content{padding:22px 18px calc(95px + env(safe-area-inset-bottom));}.page-heading{gap:16px}.page-heading>.row{gap:8px}.dashboard-content>.page-heading{padding:22px;border-radius:16px;flex-direction:column;align-items:flex-start}.dashboard-content>.page-heading h1{font-size:25px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat{padding:17px}.stat-value{font-size:30px}.stat-head{font-size:12px}.stat-foot{font-size:11px}.grid-main{grid-template-columns:minmax(0,1fr);gap:20px}.grid-main>.panel+.panel{margin-top:0}.tabs{max-width:100%;overflow:auto;flex-wrap:nowrap;width:100%}.tabs button{white-space:nowrap;flex:1;padding:8px 13px}.filterbar{gap:10px}.mobile-dock{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#fffffff2;border-top:1px solid #dce5da;backdrop-filter:blur(16px);box-shadow:0 -4px 20px #173f3007}.mobile-dock button{display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;font-size:11px;color:#6b7f6b;min-height:48px;border-radius:10px}.mobile-dock button.active{color:#1c4e38;background:#eaf1e3;font-weight:bold}.mobile-dock svg{width:21px;height:21px}.nav-open .mobile-dock{pointer-events:none}.table-hint{display:block;padding:0 20px 10px;font-size:11px;color:#708267}.table-wrap:focus{outline-offset:-3px}th,td{padding:14px 16px}table{min-width:560px}.panel-head{padding:20px}.panel-body{padding:0 20px 20px}.login{display:block}.login-hero{display:none}.login-form{min-height:100dvh;padding:32px 24px}.login-mobile-brand{display:flex;margin-bottom:42px;padding:0}.login-mobile-brand small{font-size:12px;color:#6b806c}.login-inner h2{font-size:26px}.footer{flex-direction:column;gap:6px}.modal{max-height:calc(100dvh - 24px);border-radius:18px}.modal-backdrop{padding:12px}.modal-body{padding:20px}.modal-head{padding:18px 20px}.modal-head h2{font-size:18px}input,select,textarea,.search input{font-size:16px}.form-grid{gap:17px}#toast{bottom:calc(88px + env(safe-area-inset-bottom));left:16px;right:16px;width:fit-content;margin:auto}.profile-head .row{flex-wrap:wrap}.payroll-banner{padding:20px;gap:12px}.payroll-banner h2{font-size:20px}}
@media(max-width:500px){h1{font-size:26px}.page-heading{flex-direction:column;align-items:flex-start}.page-heading>.row{width:100%;justify-content:flex-start}.page-heading>.row .btn{flex:1}.stat-value{font-size:29px}.stat-head{font-size:12px}.stat-icon{width:29px;height:29px}.stat-icon svg{width:17px;height:17px}.stat-foot{line-height:1.7;min-height:18px}.document-grid,.form-grid,.detail-grid,.report-grid{grid-template-columns:minmax(0,1fr)}.filters{align-items:stretch}.filters select{flex:1;max-width:100%}.search{min-width:0;width:100%}.modal-backdrop{padding:8px}.modal{max-height:calc(100dvh - 16px)}.modal-body{padding:18px}.modal-footer{position:sticky;bottom:-18px;background:white;padding:16px 0 12px;z-index:1}.modal-footer .btn{flex:1;min-width:0;white-space:normal}.payroll-banner{align-items:flex-start;flex-direction:column}.payroll-toolbar .btn{flex:1;white-space:normal}.company-card{min-width:0;width:100%;flex-basis:100%}.top-actions .icon-btn{width:38px;min-width:38px;height:38px}.profile-head{gap:14px}.doc-card{padding:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media print{.mobile-dock,.nav-scrim,.table-hint{display:none!important}.main{width:100%;margin:0}.content{padding:0}.sidebar{display:none!important}.modal{max-height:none}.table-wrap{overflow:visible}.modal-footer{display:none!important}}
.sidebar .icon-btn{background:transparent}.mobile-wordmark{display:none}
@media(max-width:850px){.mobile-wordmark{display:inline!important;font-size:23px;font-weight:700;color:#214d3a;letter-spacing:-1px}.breadcrumb{min-width:0}.breadcrumb strong{max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{flex-shrink:0}.top-actions .icon-btn{width:34px;min-width:34px;height:38px}}
@media(max-width:850px){.btn.small,.tabs button{min-height:44px}}
/* Supplied company identities, kept in their original colors and proportions. */
.login-hero>div{position:relative;z-index:1}.login-hero{gap:36px}.login-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:550px;align-items:stretch}.partner-logo{background:#fff;border:1px solid #e5e9e5;border-radius:12px;padding:14px 12px;display:flex;align-items:center;justify-content:center;min-width:0;height:90px}.partner-logo img{display:block;width:100%;height:100%;object-fit:contain}.mobile-partners{display:none}
@media(max-width:850px){.mobile-partners{display:block;margin-top:28px}.mobile-partners .login-brands{gap:8px}.mobile-partners .partner-logo{height:70px;padding:10px 8px;border-radius:10px}.login-mobile-brand{margin-bottom:30px}.login-form{padding-top:28px;padding-bottom:28px}}
.login-mobile-tagline{display:none}@media(max-width:850px){.login-mobile-tagline{display:block;font-size:18px;line-height:1.8;font-weight:600;color:#254b38;margin-bottom:24px}.login-mobile-brand{margin-bottom:18px}}