@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');

:root{--green:#12362d;--green-2:#1d6552;--mint:#dff1e9;--sand:#f3eee4;--gold:#bd8d47;--ink:#17211e;--muted:#71807b;--line:#e2e7e4;--danger:#bd4a48;--bg:#f6f8f6;--white:#fff;--shadow:0 10px 35px rgba(20,53,44,.09)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Tajawal',system-ui,sans-serif;-webkit-font-smoothing:antialiased}.app-shell{min-height:100vh}.topbar{height:76px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1160px)/2));position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand,.top-actions,.site-card-top,.site-meta,.welcome-row,.page-heading,.task-footer,.modal-head{display:flex;align-items:center}.brand{gap:11px}.brand-mark{width:42px;height:42px;background:var(--green);color:white;border-radius:12px;display:grid;place-items:center;font-weight:800;letter-spacing:.5px}.brand strong{display:block;font-size:16px}.brand span{font-size:11px;color:var(--muted)}.top-actions{gap:9px}.icon-btn,.avatar{border:1px solid var(--line);background:#fff;height:39px;min-width:39px;border-radius:11px;font:700 12px inherit;cursor:pointer}.avatar{background:var(--sand);color:var(--green);border:0}.notice{position:relative}.notice b{position:absolute;top:-5px;left:-5px;background:var(--danger);color:#fff;border-radius:9px;font-size:9px;padding:2px 5px}main{max-width:1160px;margin:auto;padding:32px 22px 110px}.view{display:none}.view.active{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:.3;transform:translateY(4px)}}h1,h2,h3,p{margin-top:0}h1{font-size:28px;margin-bottom:0}h2{font-size:20px}.eyebrow{font-size:13px;color:var(--green-2);font-weight:700;margin-bottom:5px}.welcome-row,.page-heading{justify-content:space-between;margin-bottom:24px}.date-chip{background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:10px;color:var(--muted);font-size:13px}.site-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}.hero-card{background:linear-gradient(135deg,#fff 60%,#edf4f0)}.site-card-top{justify-content:space-between}.site-card h2{font-size:24px;margin:9px 0 4px}.site-card p{color:var(--muted);font-size:14px}.status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:15px;font-size:11px;font-weight:700}.status.live{background:var(--mint);color:var(--green-2)}.status.waiting{background:#fff0d8;color:#9b681b}.status.approved{background:#e1f2e9;color:#287057}.progress-ring{--value:50;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green-2) calc(var(--value)*1%),#dfe8e3 0);position:relative}.progress-ring:after{content:"";position:absolute;width:58px;height:58px;background:white;border-radius:50%}.progress-ring span{z-index:1;font-weight:800}.progress-track,.mini-progress,.stock{height:7px;background:#e7ece9;border-radius:10px;overflow:hidden;margin:19px 0}.progress-track span,.mini-progress span,.stock span{display:block;height:100%;background:var(--green-2);border-radius:10px}.site-meta{gap:28px;font-size:13px;color:var(--muted);margin-bottom:17px}.site-meta b{color:var(--ink)}button{font-family:inherit}.primary{background:var(--green);color:#fff;border:0;border-radius:11px;padding:12px 18px;font-weight:700;cursor:pointer}.primary:hover{background:#1a4d40}.wide{width:100%}.compact{padding:10px 14px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 14px}.section-title h2{margin:0}.text-btn{background:transparent;border:0;color:var(--green-2);font-weight:700;cursor:pointer}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{background:white;border:1px solid var(--line);border-radius:16px;padding:17px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.metric-icon{grid-row:span 2;width:35px;height:35px;border-radius:10px;display:grid;place-items:center;font-weight:800}.metric-icon.green{background:var(--mint);color:var(--green-2)}.metric-icon.amber{background:#fff0d8;color:#a87222}.metric-icon.blue{background:#e1eef7;color:#326e99}.metric-icon.red{background:#fae5e4;color:var(--danger)}.metric b{font-size:23px}.metric small{color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-action{background:white;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:right}.quick-action:hover{border-color:var(--green-2);transform:translateY(-2px)}.quick-action span{font-size:22px}.activity-list,.people-list,.ledger{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.activity-list article,.people-list article,.ledger article{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}.activity-list article:last-child,.people-list article:last-child,.ledger article:last-child{border:0}.activity-list article>div,.people-list article>div,.ledger article>div{flex:1}.activity-list p{margin:3px 0;color:#4d5b57;font-size:13px}.activity-list small,.people-list small,.ledger small{color:var(--muted)}.user-dot,.avatar-person{width:40px;height:40px;border-radius:12px;background:#dce9e3;color:var(--green);display:grid;place-items:center;font-weight:800}.teal{background:#d8eeee}.gold{background:#f2e7d4}.amount{color:var(--green-2)}.bottom-nav{display:none}.segmented,.finance-tabs{display:flex;gap:6px;background:#e9eeeb;border-radius:12px;padding:5px;margin-bottom:20px;overflow:auto}.segmented button,.finance-tabs button{flex:1;white-space:nowrap;border:0;background:transparent;padding:10px 14px;border-radius:9px;color:var(--muted);font-weight:700;cursor:pointer}.segmented button.active,.finance-tabs button.active{background:#fff;color:var(--green);box-shadow:0 3px 10px #1f3c3212}.task-list{display:grid;gap:14px}.task-card{display:grid;grid-template-columns:190px 1fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.task-photo{min-height:170px;display:flex;align-items:flex-end;padding:13px;background-size:cover;background-position:center}.task-photo span{background:#17211ecc;color:white;border-radius:8px;padding:5px 8px;font-size:11px}.plaster{background:linear-gradient(35deg,#bdb8ae,#eee8da)}.rebar{background:repeating-linear-gradient(45deg,#6f7774,#6f7774 5px,#9da3a0 5px,#9da3a0 11px)}.waterproof{background:linear-gradient(145deg,#697f78,#c7d1c8)}.task-content{padding:17px}.task-content>div:first-child{display:flex;justify-content:space-between}.task-content small,.task-content p{color:var(--muted);font-size:12px}.task-content h3{margin:14px 0 4px}.task-footer{justify-content:space-between;font-size:12px;color:var(--muted)}.outline{border:1px solid var(--green-2);color:var(--green-2);background:white;border-radius:9px;padding:8px 12px;font-weight:700;cursor:pointer}.map-card{height:290px;border-radius:20px;position:relative;overflow:hidden;background:#dfe9e2;border:1px solid var(--line)}.map-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff80 2px,transparent 2px),linear-gradient(90deg,#ffffff80 2px,transparent 2px);background-size:54px 54px;transform:rotate(-8deg) scale(1.2)}.zone{position:absolute;width:230px;height:180px;border:2px dashed var(--green-2);background:#56a38925;border-radius:50%;top:46px;left:calc(50% - 115px)}.map-pin{position:absolute;width:34px;height:34px;background:var(--green);color:#fff;border:3px solid #fff;border-radius:50% 50% 50% 5px;display:grid;place-items:center;font-weight:700;box-shadow:0 4px 12px #0003}.p1{top:90px;left:48%}.p2{top:152px;left:42%}.p3{top:120px;left:57%}.p4{top:210px;left:28%;background:var(--danger)}.map-label{position:absolute;right:18px;bottom:17px;background:#ffffffed;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow)}.map-label b,.map-label small{display:block}.map-label small{color:var(--muted)}.attendance-metrics{margin:16px 0}.attendance-metrics .metric{display:block}.attendance-metrics .metric b,.attendance-metrics .metric small{display:block}.time{text-align:left}.time b,.time small{display:block}.danger-text{color:var(--danger)!important}.finance-total{background:linear-gradient(135deg,var(--green),#205f4e);color:#fff;border-radius:20px;padding:24px;margin-bottom:16px}.finance-total span{opacity:.8}.finance-total h2{font-size:34px;margin:8px 0}.finance-total h2 small{font-size:14px}.finance-total p span:first-child{color:#a7e1ca}.finance-panel{display:none}.finance-panel.active{display:block}.summary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.summary-row article{background:#fff;border:1px solid var(--line);padding:16px;border-radius:15px;display:flex;gap:12px}.summary-row article>span{font-size:22px}.summary-row small,.summary-row b{display:block}.ledger-icon{font-size:22px}.ledger strong{font-size:13px}.empty-card{background:#fff;border:1px dashed #b9c7c0;border-radius:18px;padding:50px;text-align:center}.empty-card span{font-size:32px}.search{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;gap:10px;margin-bottom:16px}.search input{width:100%;border:0;outline:0;font:inherit}.material-list{display:grid;gap:12px}.material-list article{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px}.material-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:25px}.cement{background:#e8e4dc}.steel{background:#dfe5e5}.blocks{background:#efe5d7}.material-info{flex:1}.material-info>div:first-child{display:flex;justify-content:space-between}.material-info h3{margin:0}.material-info p{margin:8px 0 0;color:var(--muted)}.material-info small{color:var(--muted)}.stock{margin:9px 0}.stock.warning span{background:#c28a35}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.report-grid article{background:white;border:1px solid var(--line);border-radius:18px;padding:24px}.report-grid article>span{font-size:28px}.report-grid h3{margin:12px 0 5px}.report-grid p{color:var(--muted)}.modal{position:fixed;inset:0;background:#0d1d18a8;z-index:50;display:none;align-items:flex-end;justify-content:center}.modal.open{display:flex}.modal-sheet{width:min(600px,100%);background:#fff;border-radius:24px 24px 0 0;padding:23px;max-height:92vh;overflow:auto;animation:slide .3s ease}@keyframes slide{from{transform:translateY(100%)}}.modal-head{justify-content:space-between}.close-modal{border:0;background:#eef1ef;width:36px;height:36px;border-radius:10px;font-size:22px;cursor:pointer}.photo-drop{border:2px dashed #b9c7c0;border-radius:15px;padding:25px;display:flex;flex-direction:column;align-items:center;margin:10px 0 17px;cursor:pointer}.photo-drop span{font-size:30px}.photo-drop small{color:var(--muted)}.photo-drop.has-photo{border-style:solid;background:#eaf3ef}.modal label{display:block;margin:13px 0;font-weight:700;font-size:13px}.modal label>span{display:block;margin-bottom:6px}.modal input,.modal select,.modal textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;background:#fff}.modal textarea{height:74px;resize:none}.location-proof{display:flex;gap:10px;align-items:center;background:var(--mint);padding:12px;border-radius:11px;margin-bottom:15px}.location-proof div{display:flex;flex-direction:column}.location-proof small{color:var(--green-2)}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--green);color:white;padding:12px 18px;border-radius:12px;z-index:60;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){.topbar{height:66px;padding:0 14px}.brand span{display:none}.brand-mark{width:37px;height:37px}.top-actions{gap:5px}.icon-btn,.avatar{height:36px;min-width:36px}main{padding:22px 14px 100px}h1{font-size:23px}.welcome-row{align-items:flex-start}.date-chip{font-size:11px;padding:7px 9px}.site-card{padding:18px}.site-card h2{font-size:20px}.progress-ring{width:64px;height:64px}.progress-ring:after{width:50px;height:50px}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:13px}.metric b{font-size:20px}.quick-grid{grid-template-columns:1fr 1fr}.quick-action{padding:14px}.activity-list article{padding:13px}.activity-list .amount{font-size:11px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:7px 6px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}.bottom-nav button{flex:1;border:0;background:transparent;color:#87938f;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}.bottom-nav button span{font-size:21px}.bottom-nav button small{font-size:10px}.bottom-nav button.active{color:var(--green);font-weight:800}.task-card{grid-template-columns:95px 1fr}.task-photo{min-height:185px}.task-content{padding:14px}.task-content>div:first-child{display:block}.task-content h3{font-size:15px}.task-footer{align-items:flex-end;gap:8px}.map-card{height:240px}.attendance-metrics .metric{padding:12px}.people-list article{padding:13px}.time{font-size:12px}.finance-tabs{margin-left:-14px;margin-right:-14px;border-radius:0}.summary-row{grid-template-columns:1fr}.material-list article{padding:14px}.material-icon{width:44px;height:44px}.material-info h3{font-size:15px}.report-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;gap:10px}.page-heading .compact{font-size:11px;padding:9px}.hero-card .wide{display:none}}
html[dir="ltr"] .quick-action{text-align:left}html[dir="ltr"] .time{text-align:right}

.locked{display:none}.login-screen{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#eef3f0}.login-screen.hidden{display:none}.login-visual{background:linear-gradient(145deg,#102f28,#1d5b4b);color:white;padding:clamp(35px,6vw,90px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-visual:after{content:"";position:absolute;width:470px;height:470px;border:1px solid #ffffff26;border-radius:50%;left:-150px;bottom:-240px;box-shadow:0 0 0 80px #ffffff08,0 0 0 160px #ffffff05}.login-brand{display:flex;align-items:center;gap:14px;z-index:1}.brand-mark.large{width:54px;height:54px;border-radius:16px;background:#fff;color:var(--green);font-size:16px}.login-brand h1{font-size:22px}.login-brand p{opacity:.65;margin:3px 0}.login-copy{max-width:560px;z-index:1}.login-copy .eyebrow{color:#9bd3bd}.login-copy h2{font-size:clamp(34px,4vw,54px);line-height:1.2;margin:15px 0}.login-copy p{opacity:.7;font-size:17px}.login-badges{display:flex;flex-wrap:wrap;gap:10px;z-index:1}.login-badges span{background:#ffffff12;border:1px solid #ffffff1f;border-radius:12px;padding:10px 13px}.login-card{width:min(420px,calc(100% - 36px));margin:auto;background:white;padding:34px;border-radius:22px;box-shadow:var(--shadow)}.login-card>p{color:var(--muted)}.login-card label,.compact-sheet label{display:block;margin:15px 0;font-weight:700;font-size:13px}.login-card label span,.compact-sheet label span{display:block;margin-bottom:6px}.login-card input,.login-card select,.compact-sheet input,.compact-sheet select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:white;font:inherit;outline:none}.login-card input:focus,.login-card select:focus{border-color:var(--green-2);box-shadow:0 0 0 3px #1d65521a}.demo-hint{display:block;text-align:center;color:var(--muted);margin-top:14px}.login-error{min-height:20px;color:var(--danger)!important;font-size:12px}.mobile-login-brand{display:none}.profile-menu{position:absolute;top:62px;inset-inline-end:max(22px,calc((100vw - 1160px)/2));background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:13px;padding:13px;width:190px;display:none}.profile-menu.open{display:flex;flex-direction:column}.profile-menu small{color:var(--muted);margin-bottom:10px}.profile-menu button{border:0;border-top:1px solid var(--line);background:transparent;text-align:start;padding:10px 0 0;color:var(--danger);cursor:pointer}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compact-sheet{max-width:520px}.role-hidden{display:none!important}.attendance-active{background:#dff1e9!important;color:var(--green)!important}
@media(max-width:720px){.login-screen{display:block;padding:24px 0;background:linear-gradient(160deg,#e5f0eb,#f7f8f6)}.login-visual{display:none}.login-card{padding:26px 22px}.mobile-login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.mobile-login-brand h2{margin:0}.profile-menu{top:57px;inset-inline-end:14px}.field-row{grid-template-columns:1fr}}