@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@500;600&family=Noto+Kufi+Arabic:wght@400;500;600&family=Tajawal:wght@700&display=swap');

:root{--bg:#F4F8F7;--surface:#fff;--elevated:#EDF4F3;--text:#111B1B;--muted:#667777;--subtle:#A6B4B2;--border:#D8E2E0;--nav:#3F7C7D;--nav-dark:#32696A;--gold:#C8A34B;--success:#26845A;--danger:#B63D32;--radius:16px;--sidebar:272px}
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;overflow-x:hidden;background:var(--bg)}
body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:'Noto Kufi Arabic',sans-serif;font-size:14px;line-height:1.75}
body.drawer-open{overflow:hidden}
h1,h2,h3{font-family:Tajawal,sans-serif;line-height:1.3}h2{font-size:1.35rem;margin:0 0 20px}h3{font-size:1.1rem}p{overflow-wrap:anywhere}a{color:inherit}
.skip{position:fixed;top:-80px;right:16px;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;text-decoration:none}.skip:focus{top:16px}
aside{position:fixed;inset:0 0 0 auto;width:var(--sidebar);height:100dvh;background:var(--nav);color:#fff;padding:24px 16px 16px;display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.brand{font:700 23px Tajawal;margin:4px 8px 24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.22)}
nav{display:grid;align-content:start;gap:6px;flex:1}
nav a,aside>a{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:var(--radius);text-decoration:none;font-weight:500;transition:background-color .12s,color .12s}
nav a:hover,nav a:focus-visible,nav a[aria-current="page"],aside>a:hover{background:rgba(255,255,255,.15)}
.shell{margin-right:var(--sidebar);min-width:0}.top{min-height:104px;background:var(--surface);border-bottom:1px solid var(--border);padding:22px clamp(24px,3vw,48px);display:flex;justify-content:space-between;gap:20px;align-items:center}.top h1{margin:0;font-size:clamp(22px,2.2vw,30px)}.top>span{color:var(--muted);overflow-wrap:anywhere}.rule{display:block;width:64px;border-bottom:4px solid var(--gold);margin-top:10px;border-radius:9999px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:24px clamp(24px,3vw,48px);padding:clamp(20px,2.5vw,32px);min-width:0}.panel> :first-child{margin-top:0}.panel> :last-child{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;min-width:0}.stat{min-width:0;border:1px solid var(--border);border-right:4px solid var(--gold);border-radius:var(--radius);padding:20px;background:var(--surface)}.stat strong{display:block;font:600 clamp(25px,3vw,32px) 'IBM Plex Sans Arabic';overflow-wrap:anywhere}.stat .money{font-size:clamp(20px,2.3vw,27px);color:var(--nav-dark)}
.currency-calculations{min-width:0}.currency-calculations__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}.currency-calculation{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.currency-calculation__header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--elevated)}.currency-calculation__header h3{min-width:0;margin:0;overflow-wrap:anywhere}.currency-calculation__code{flex:0 0 auto;color:var(--nav-dark);font:600 14px 'IBM Plex Sans Arabic';unicode-bidi:isolate}.currency-calculation__details{display:grid;gap:0;min-width:0;margin:0;padding:8px 20px}.currency-calculation__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px;min-width:0;padding:10px 0;border-bottom:1px solid var(--border)}.currency-calculation__row:last-child{border-bottom:0}.currency-calculation__row dt{min-width:0;color:var(--muted);overflow-wrap:anywhere}.currency-calculation__row dd{min-width:0;margin:0;text-align:left;font-weight:600;overflow-wrap:anywhere}.currency-calculation__net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;min-width:0;margin-top:auto;padding:16px 20px;border-top:1px solid var(--border);background:var(--elevated);color:var(--text);font-weight:600}.currency-calculation__net strong{min-width:0;color:var(--nav-dark);font:600 clamp(20px,2vw,26px) 'IBM Plex Sans Arabic';text-align:left;overflow-wrap:anywhere}.currency-calculations__empty{margin:0;padding:24px 16px;border:1px dashed var(--subtle);border-radius:var(--radius);background:var(--elevated);color:var(--muted);text-align:center}
.btn{appearance:none;display:inline-flex;min-height:48px;max-width:100%;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--radius);border:1px solid var(--nav);text-decoration:none;background:var(--surface);color:var(--nav-dark);font:600 14px 'Noto Kufi Arabic';line-height:1.4;cursor:pointer;white-space:normal;text-align:center;transition:background-color .12s,border-color .12s,transform .12s}.btn:hover{background:var(--elevated)}.btn:active{transform:translateY(1px)}.primary{background:var(--gold);border-color:var(--gold);color:var(--text)}.primary:hover{background:#d4b257}.danger{background:var(--danger);border-color:var(--danger);color:#fff}.danger:hover{background:#9f3128}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0}.actions form{margin:0}
label{display:grid;align-content:start;gap:7px;min-width:0;font-weight:600;color:var(--text)}
body input:is(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="search"],[type="tel"],[type="url"]),body select,body textarea{appearance:none;font:inherit;color:var(--text);min-width:0;width:100%;min-height:48px;border-width:1px;border-style:solid;border-color:var(--subtle);border-radius:var(--radius);padding:12px 16px;background-color:var(--surface);transition:border-color .12s,box-shadow .12s}
body input:is(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="search"],[type="tel"],[type="url"]):hover,body select:hover,body textarea:hover{border-color:var(--nav)}
body input:is(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="search"],[type="tel"],[type="url"]):focus,body select:focus,body textarea:focus{border-color:var(--nav);box-shadow:0 0 0 3px rgba(63,124,125,.18);outline:0}
body select{padding:12px 16px;padding-inline-end:44px}
body textarea{min-height:120px;line-height:1.75;resize:vertical;vertical-align:top}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.var{align-items:end;margin-bottom:14px;padding:16px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius)}
.table-wrap{width:100%;min-width:0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}table{width:100%;border-collapse:separate;border-spacing:0}th,td{text-align:right;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere}th{background:var(--elevated);font-weight:600;white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#f9fbfb}td .actions{margin:0}.table-wrap a:not(.btn){color:var(--nav-dark);font-weight:600;text-underline-offset:3px}
.flash{margin:16px clamp(24px,3vw,48px);padding:14px 18px;border:1px solid;border-right-width:4px;border-radius:var(--radius);overflow-wrap:anywhere}.panel .flash{margin:0 0 20px}.ok{background:#e9f7f0;border-color:var(--success)}.error{background:#fff0ee;border-color:var(--danger)}.money{direction:ltr;unicode-bidi:isolate;font-family:'IBM Plex Sans Arabic';overflow-wrap:anywhere}.menu,.drawer-backdrop{display:none}.menu{border-radius:var(--radius)}
input[type="checkbox"]{width:22px!important;min-height:22px;height:22px;accent-color:var(--nav);flex:0 0 auto}.grid>label:has(input[type="checkbox"]){display:flex!important;align-items:center;min-height:48px;padding:10px 12px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius)}small{color:var(--muted)}
*:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:1023px){aside{width:min(86vw,320px);transform:translateX(105%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:-16px 0 40px rgba(17,27,27,.18)}aside.open{transform:none}.shell{margin:0}.menu{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:16px;left:16px;z-index:60;width:48px;height:48px;background:var(--nav);color:#fff;border:0;font-size:23px}.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(17,27,27,.46);border:0}.drawer-backdrop.open{display:block}.top{padding:20px 80px 20px 24px;min-height:80px}.panel{margin:24px}.flash{margin:16px 24px}}
@media(max-width:767px){.form-grid{grid-template-columns:1fr}.top>span{display:none}.panel{margin:16px;padding:20px}.flash{margin:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table-wrap{overflow:visible;border:0;background:transparent}table,thead,tbody,tr,th,td{display:block;width:100%}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}tbody{display:grid;gap:14px}tbody tr{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:8px 14px}tbody tr:hover{background:var(--surface)}tbody td{display:grid;grid-template-columns:minmax(92px,38%) minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--border)}tbody td::before{content:attr(data-label);font-weight:600;color:var(--muted);overflow-wrap:anywhere}tbody tr td:last-child{border-bottom:0}td .actions{gap:8px}td .actions .btn{min-height:44px;padding:7px 12px}.var{padding:14px}.actions{align-items:stretch}}
@media(max-width:639px){.top{padding:18px 76px 18px 16px}.top h1{font-size:21px}.grid{grid-template-columns:1fr}.actions>.btn,.actions>form,.actions>form>.btn{width:100%}.panel{padding:18px 16px}tbody td{grid-template-columns:minmax(82px,36%) minmax(0,1fr)}.login-card{margin:28px 16px!important}.login-shell .top{justify-content:center;padding:20px 16px}.login-shell .rule{margin-inline:auto}}
@media(max-width:359px){body{font-size:13px}.panel{margin:12px;padding:16px 12px}.top{padding-right:68px}.menu{left:12px}.btn{padding-inline:12px}tbody tr{padding-inline:10px}tbody td{grid-template-columns:1fr;gap:3px}}
.currency-calculation__net strong{font-size:clamp(15px,1.35vw,19px)}
@media(min-width:640px){.currency-calculations__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.currency-calculations__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}}
@media(max-width:639px){.currency-calculation__header,.currency-calculation__details,.currency-calculation__net{padding-inline:16px}.currency-calculation__row,.currency-calculation__net{grid-template-columns:minmax(0,1fr);gap:3px}.currency-calculation__row dd,.currency-calculation__net strong{text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}