@import "https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap";
:root{--bg:#f7f8fa;--surface:#fff;--surface-soft:#f6f6f6;--primary-soft:#fff5e5;--primary:#f90;--primary-hover:#ea9109;--primary-deep:#995c00;--text:#0f172a;--muted:#64748b;--subtle:#a9a9a9;--border:#0f172a1a;--shadow:0 8px 30px #0f172a12}:root[data-theme=dark]{--bg:#0f1419;--surface:#1a2332;--surface-soft:#212d3d;--primary-soft:#f59e0b21;--primary:#f59e0b;--primary-hover:#ffad22;--primary-deep:#ffc266;--text:#f1f5f9;--muted:#94a3b8;--subtle:#64748b;--border:#f1f5f91a;--shadow:0 10px 35px #0000002e}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:Alexandria,Tajawal,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.brand{color:var(--text);letter-spacing:-.35px;align-items:center;gap:11px;font-size:17px;font-weight:500;display:flex}.brand b{color:var(--primary);font-weight:700}.brand-logo{object-fit:cover;border-radius:12px;width:40px;height:40px;box-shadow:0 5px 16px #f59e0b2e}.login-shell{background:var(--surface);grid-template-columns:minmax(480px,1.05fr) minmax(440px,.95fr);min-height:100vh;display:grid}.login-story{background:radial-gradient(circle at 88% 22%,#f59e0b36,#0000 27%),radial-gradient(circle at 18% 88%,#ffc2663d,#0000 30%),linear-gradient(145deg,#fffaf2,#fff3dc);flex-direction:column;justify-content:space-between;padding:44px 60px;display:flex;position:relative;overflow:hidden}.login-story:before,.login-story:after{content:"";pointer-events:none;border:1px solid #f59e0b33;border-radius:50%;position:absolute}.login-story:before{width:520px;height:520px;top:13%;right:-170px;box-shadow:0 0 0 76px #f59e0b0b,0 0 0 152px #f59e0b06}.login-story:after{background:#ffffff40;width:90px;height:90px;bottom:19%;left:12%}.login-story .brand,.story-copy,.site-signal{z-index:1;position:relative}.login-story .brand{color:#0f172a}.story-copy{max-width:610px}.eyebrow,.kicker{color:var(--primary-deep);letter-spacing:1.6px;font-size:11px;font-weight:700}.story-copy h1{color:#0f172a;letter-spacing:-3.4px;max-width:620px;margin:22px 0 18px;font-size:clamp(45px,5vw,72px);font-weight:700;line-height:1.12}.story-copy p{color:#64748b;max-width:510px;margin:0;font-size:17px;font-weight:300;line-height:1.8}.site-signal{color:#0f172a;align-items:center;gap:13px;display:flex}.site-signal div{flex-direction:column;display:flex}.site-signal b{font-size:13px}.site-signal small{color:#64748b;margin-top:5px;font-size:11px}.signal-dot{background:var(--primary);border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 6px #f59e0b24}.login-panel{background:var(--surface);place-items:center;padding:60px;display:grid;position:relative}.login-actions{align-items:center;gap:9px;display:flex;position:absolute;top:32px;right:38px}.language,.icon-button{border:1px solid var(--border);background:var(--surface);min-height:38px;color:var(--text);border-radius:10px;font-size:12px;font-weight:600}.language{padding:8px 14px}.icon-button{place-items:center;width:38px;padding:0;font-size:17px;display:grid}.language:hover,.icon-button:hover{background:var(--primary-soft);border-color:#f59e0b73}.login-form{width:min(420px,100%)}.mobile-mark{display:none}.login-form h2{letter-spacing:-1.4px;margin:12px 0 9px;font-size:36px;font-weight:700}.muted{color:var(--muted);margin:0 0 34px;font-size:13px;font-weight:300;line-height:1.7}.login-form label{color:var(--text);margin:18px 0;font-size:12px;font-weight:600;display:block}.login-form input{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);border-radius:12px;outline:none;margin-top:9px;padding:14px 15px;transition:border-color .2s,box-shadow .2s;display:block}.login-form input::placeholder{color:var(--subtle)}.login-form input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #f59e0b1f}.primary{background:var(--primary);color:#fff;border:0;border-radius:12px;justify-content:space-between;align-items:center;width:100%;min-height:48px;margin-top:10px;padding:13px 17px;font-size:13px;font-weight:700;display:flex;box-shadow:0 8px 20px #f59e0b33}.primary:hover{background:var(--primary-hover)}.primary:disabled{opacity:.65}.security{color:var(--subtle);text-align:center;margin-top:20px;font-size:10px;display:block}.error,.notice{color:#b42318;background:#fee2e2b8;border:1px solid #dc26262b;border-radius:12px;padding:11px 13px;font-size:12px}.app-shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}aside{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;height:100vh;padding:27px 19px;display:flex;position:sticky;top:0}aside .brand{padding:0 8px 31px}nav{flex-direction:column;gap:5px;display:flex}nav button{color:var(--muted);text-align:start;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:12px 13px;font-size:13px;font-weight:500;display:flex}nav button>span{width:21px;color:var(--subtle);text-align:center;font-size:18px}nav button:hover{background:var(--surface-soft);color:var(--text)}nav button.active{background:var(--primary-soft);color:var(--primary-deep);font-weight:600}nav button.active>span{color:var(--primary)}nav button em{background:var(--primary);color:#fff;border-radius:99px;margin-inline-start:auto;padding:2px 7px;font-size:9px;font-style:normal}.aside-foot{border-top:1px solid var(--border);margin-top:auto;padding-top:18px}.mini-user{align-items:center;gap:10px;display:flex}.mini-user>span,.avatar{background:var(--primary-soft);width:38px;height:38px;color:var(--primary-deep);border-radius:12px;flex:none;place-items:center;font-size:11px;font-weight:700;display:grid}.mini-user div{flex-direction:column;min-width:0;display:flex}.mini-user b{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.mini-user small{color:var(--muted);text-transform:capitalize;margin-top:4px;font-size:9px}.logout{color:var(--muted);background:0 0;border:0;padding:14px 0 0;font-size:11px}.workspace{min-width:0}header{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);justify-content:space-between;align-items:center;height:78px;padding:0 36px;display:flex}header p{color:var(--muted);margin:0 0 4px;font-size:10px}header strong{font-size:14px}.header-actions{align-items:center;gap:9px;display:flex}.refresh{color:var(--muted);background:0 0;border:0;font-size:11px}.content{max-width:1500px;margin:auto;padding:36px}.notice{margin-bottom:20px}.welcome{justify-content:space-between;align-items:flex-end;margin-bottom:28px;display:flex}.welcome p{color:var(--primary-deep);margin:0 0 10px;font-size:12px;font-weight:700}.welcome h1{letter-spacing:-1px;max-width:650px;margin:0;font-size:27px;font-weight:600}.date-chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:11px;padding:10px 13px;font-size:10px}.metrics{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.metric{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;gap:13px;padding:18px;display:flex}.metric-icon,.row-icon{background:var(--primary-soft);width:38px;height:38px;color:var(--primary);border-radius:11px;flex:none;place-items:center;font-size:11px;display:grid}.metric.green .metric-icon{color:#1b8753;background:#e9f8ef}.metric.blue .metric-icon{color:#3578be;background:#eaf3ff}.metric.red .metric-icon{color:#c84d4d;background:#ffeded}:root[data-theme=dark] .metric.green .metric-icon,:root[data-theme=dark] .metric.blue .metric-icon,:root[data-theme=dark] .metric.red .metric-icon{background:var(--surface-soft)}.metric div{flex:1;grid-template-columns:1fr auto;display:grid}.metric p{color:var(--muted);grid-column:1/-1;margin:0 0 7px;font-size:10px}.metric strong{font-size:25px;font-weight:700}.metric small{color:var(--subtle);align-self:end;margin-bottom:4px;font-size:8px}.section-title{justify-content:space-between;align-items:center;margin:32px 0 16px;display:flex}.section-title h2{margin:0;font-size:16px}.section-title button{color:var(--primary-deep);background:0 0;border:0;font-size:11px;font-weight:600}.project-grid{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.project-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;padding:20px}.project-top{justify-content:space-between;align-items:center;display:flex}.project-top small{color:var(--subtle);letter-spacing:1px;font-size:8px}.status{background:var(--surface-soft);color:var(--muted);text-transform:capitalize;border-radius:99px;padding:4px 8px;font-size:8px;font-weight:700;display:inline-flex}.status.active,.status.approved,.status.recorded{color:#177248;background:#e9f8ef}.status.submitted,.status.pending,.status.review{background:var(--primary-soft);color:var(--primary-deep)}.status.rejected{color:#b43d3d;background:#ffeded}:root[data-theme=dark] .status.active,:root[data-theme=dark] .status.approved,:root[data-theme=dark] .status.recorded,:root[data-theme=dark] .status.rejected{background:var(--surface-soft)}.project-card h3{margin:18px 0 7px;font-size:15px;font-weight:600}.project-location{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:10px;overflow:hidden}.progress-head{justify-content:space-between;margin-top:21px;font-size:9px;display:flex}.progress-track{background:var(--surface-soft);border-radius:9px;height:6px;margin:8px 0 18px;overflow:hidden}.progress-track i{background:linear-gradient(90deg, var(--primary), #ffc266);border-radius:9px;height:100%;display:block}.project-dates{border-top:1px solid var(--border);gap:36px;padding-top:14px;display:flex}.project-dates span{color:var(--subtle);flex-direction:column;font-size:8px;display:flex}.project-dates b{color:var(--muted);margin-top:4px;font-size:9px}.page-title{margin-bottom:24px}.page-title p{color:var(--primary-deep);margin:0 0 8px;font-size:10px;font-weight:600}.page-title h1{letter-spacing:-1px;margin:0;font-size:28px;font-weight:600}.table-card,.approval-list{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.table-row{border-bottom:1px solid var(--border);align-items:center;gap:14px;padding:16px 19px;display:flex}.table-row:last-child{border:0}.row-icon.warn{background:var(--primary-soft);color:var(--primary)}.row-main{flex-direction:column;flex:1;min-width:0;display:flex}.row-main b{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.row-main small{color:var(--muted);margin-top:5px;font-size:9px}.approval-list{box-shadow:none;background:0 0;border:0;gap:12px;display:grid;overflow:visible}.approval-card{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;align-items:center;gap:16px;padding:18px;display:flex}.approval-card>div:nth-child(2){flex:1}.approval-card small{color:var(--primary-deep);letter-spacing:1px;text-transform:uppercase;font-size:8px;font-weight:700}.approval-card h3{margin:5px 0;font-size:13px}.approval-card p{color:var(--muted);margin:0;font-size:10px}.decision{gap:8px;display:flex}.decision button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 13px;font-size:10px;font-weight:600}.decision .approve{border-color:var(--primary);background:var(--primary);color:#fff}.empty{border:1px dashed var(--border);min-height:260px;color:var(--subtle);text-align:center;border-radius:16px;place-content:center;display:grid}.empty span{font-size:32px}.full-loader{min-height:100vh;color:var(--muted);place-content:center;justify-items:center;gap:10px;font-size:12px;display:grid}.loader-logo{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.72;transform:scale(.94)}}[dir=rtl] .login-actions{left:38px;right:auto}[dir=rtl] aside{border-right:0;border-left:1px solid var(--border)}[dir=rtl] .primary span{transform:rotate(180deg)}@media (max-width:1050px){.login-story{padding:40px}.story-copy h1{font-size:50px}.metrics,.project-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.login-shell{display:block}.login-story{display:none}.login-panel{min-height:100vh;padding:88px 24px 35px}.login-actions{top:24px;right:24px}[dir=rtl] .login-actions{left:24px}.mobile-mark{object-fit:cover;border-radius:16px;width:54px;height:54px;margin-bottom:31px;display:block;box-shadow:0 6px 20px #f59e0b38}.login-form h2{font-size:32px}.app-shell{padding-bottom:74px;display:block}aside{z-index:5;border:0;border-top:1px solid var(--border);width:100%;height:74px;padding:8px;position:fixed;top:auto;bottom:0}[dir=rtl] aside{border:0;border-top:1px solid var(--border)}aside .brand,.aside-foot{display:none}nav{flex-direction:row;justify-content:space-around;height:100%}nav button{flex-direction:column;flex:1;gap:2px;padding:5px;font-size:8px;position:relative}nav button>span{font-size:17px}nav button em{position:absolute;top:0;right:0}header{height:68px;padding:0 18px}.refresh{display:none}.content{padding:24px 16px}.welcome{align-items:flex-start}.date-chip{display:none}.welcome h1{font-size:22px}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.metric{gap:9px;padding:14px}.metric-icon{width:30px;height:30px}.metric strong{font-size:21px}.metric small{display:none}.project-grid{grid-template-columns:1fr}.approval-card{flex-wrap:wrap;align-items:flex-start}.decision{justify-content:flex-end;width:100%}}@media (max-width:410px){.metrics{grid-template-columns:1fr}.header-actions .language{padding:7px 9px}.avatar{display:none}}@media (prefers-reduced-motion:reduce){.loader-logo{animation:none}}