:root{--navy:#183453;--blue:#255c9b;--blue2:#315f93;--surface:#fff;--bg:#f3f6fb;--border:#e0e8f2;--ink:#243a52;--muted:#667b92;--gold:#be9a5d;--good:#206f54;--red:#ae4551}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;min-height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:14px "IBM Plex Sans Arabic",Cairo,Tahoma,Arial,sans-serif;line-height:1.8}
h1,h2,h3{font-family:Cairo,"IBM Plex Sans Arabic",sans-serif;line-height:1.4}
button,input,textarea,select{font:inherit;max-width:100%}
button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}
a{color:var(--blue)}.app-shell{min-height:100vh}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 85% 9%,#d8e6f8,transparent 40%),var(--bg)}
.auth-card{width:min(490px,100%);background:var(--surface);border-radius:23px;border:1px solid var(--border);padding:clamp(22px,4vw,35px);box-shadow:0 20px 60px #1a355515}
.brand-row{display:flex;align-items:center;gap:13px;color:var(--navy)}.brand-row b{font:800 23px Cairo}.brand-row small{display:block;font-size:11px;color:var(--muted)}.brand-icon{width:47px;height:47px;background:linear-gradient(150deg,#173c68,#2b649e);color:#fff;display:grid;place-items:center;border-radius:15px;font-size:26px}
.auth-card h1{margin:21px 0 6px;font-size:22px}.auth-card p{color:var(--muted);margin:0 0 18px}
.label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin:12px 0 6px}
.field{display:block;width:100%;background:white;min-height:44px;border:1px solid #d1dce9;border-radius:11px;padding:9px 12px;color:var(--ink);direction:rtl}
.field:focus{outline:2px solid #bfd3f0;border-color:#5e90c8}.field[type="email"]{direction:ltr;text-align:left}
textarea.field{min-height:95px;resize:vertical}
.btn{border:1px solid #cddcea;background:white;border-radius:11px;color:var(--navy);padding:9px 14px;min-height:43px;font-weight:700;transition:.15s}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.danger{color:#a23b44;border-color:#e8c7cb;background:#fff8f8}.btn:hover{filter:brightness(.97)}
.wide{width:100%}.muted{color:var(--muted)}.small{font-size:11px}
.alert{padding:13px;border-radius:12px;background:#fff5e4;border:1px solid #efdbb6;color:#735326;margin:13px 0}
.alert.error{background:#fff0f1;border-color:#f2c8ca;color:#8e2637}.alert.good{background:#edf7f1;border-color:#c6dfd0;color:#17613d}
.shell{min-height:100vh;display:grid;grid-template-columns:245px minmax(0,1fr)}
.side{background:#173454;color:#eef4fe;min-height:100vh;padding:20px 13px}
.side .brand-row{color:#fff;padding:5px 7px 20px}.side .brand-row small{color:#b7c9df}
.menu-section{padding:20px 13px 7px;color:#adc1d7;font-size:11px}
.navbtn{display:block;width:100%;border:0;text-align:right;background:transparent;color:#dae8f5;border-radius:11px;min-height:44px;padding:10px 12px;margin:3px 0}
.navbtn.active,.navbtn:hover{background:#2a5380;color:white}.sidefoot{border-top:1px solid #ffffff2a;margin-top:26px;padding:19px 10px;font-size:11px;color:#b9cce0}
.main{min-width:0;padding:0 23px 40px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:18px 0;border-bottom:1px solid var(--border)}
.topbar strong{font:800 17px Cairo}.topbar small{display:block;color:var(--muted);font-size:11px}.topactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-chip{font-size:11px;border:1px solid #d8e2ee;padding:7px 11px;border-radius:999px;background:white}
.content{max-width:1290px;margin:auto}.heading{margin:27px 0 17px}.heading h1{font-size:26px;margin:0 0 6px}.heading p{margin:0;color:var(--muted)}
.card{background:white;border:1px solid var(--border);border-radius:16px;padding:17px;box-shadow:0 4px 17px #18395708;margin-bottom:15px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{padding:17px;background:#fff;border:1px solid var(--border);border-radius:16px}.metric b{display:block;font-size:26px;color:var(--navy);font-family:Cairo}.metric span{font-size:11px;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;align-items:center}.toolbar .field{width:auto;min-width:155px}.toolbar .flex{flex:1}
table{border-collapse:collapse;width:100%;table-layout:fixed}th,td{border-bottom:1px solid #e4ebf2;padding:12px 10px;text-align:right;vertical-align:middle;overflow-wrap:anywhere}
th{font-size:12px;background:#f5f8fc;color:#415a72}td{font-size:12px}.table-wrap{overflow-x:auto}
.tag{border-radius:999px;padding:4px 10px;background:#eef3f9;color:#3d5977;font-size:10px;font-weight:700;white-space:nowrap}
.tag.submitted,.tag.urgent{background:#fff0dc;color:#925918}
.tag.approved,.tag.closed{background:#e9f7f0;color:#24704e}
.tag.changes_requested{background:#fff0ec;color:#9c4e2d}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .span2{grid-column:span 2}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.note{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px;background:#f7f9fc;border-radius:10px}
.reveal{display:none}.reveal.show{display:block}
.empty{padding:32px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #d1dbe8;border-radius:13px}
#mobileMenu{display:none}.overlay{display:none}
@media(max-width:960px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:0 14px 35px}}
@media(max-width:700px){.shell{display:block}.side{position:fixed;right:0;top:0;bottom:0;width:min(290px,86vw);z-index:30;transform:translateX(110%);transition:transform .2s;overflow:auto}.nav-open .side{transform:translateX(0)}.nav-open .overlay{display:block;position:fixed;inset:0;background:#0006;z-index:29}.topbar{padding:12px 0}.topbar strong{font-size:13px}.user-chip{display:none}#mobileMenu{display:inline-block}.heading h1{font-size:22px}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:span 1}.card{padding:12px}.metrics{gap:7px}.metric{padding:12px}.metric b{font-size:20px}.toolbar .field{width:100%;min-width:0}.table-wrap table{min-width:580px}}
@media print{.side,.topactions,.toolbar,.actions,.overlay{display:none!important}.shell{display:block}.main{padding:5px;background:white}.card,.metric{box-shadow:none;break-inside:avoid}}