:root{--navy:#022162;--teal:#01A398;--amber:#F0A81B;--ink:#1B2333;--paper:#F2F5F9;--muted:#6B7280;--line:#E3E8F0;--navy-soft:#E7EBF4;--teal-soft:#E0F5F2;--coral:#E0533B;--amber-soft:#FFF4DC}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Cairo,system-ui,sans-serif;background:var(--paper);color:var(--ink);direction:rtl}button,input,select,textarea{font-family:inherit;font-size:14px}a{color:inherit;text-decoration:none}.ltr{direction:ltr;text-align:left;font-family:Poppins,sans-serif;display:inline-block}.btn{padding:10px 16px;border:none;border-radius:12px;font-weight:800;cursor:pointer;background:var(--navy);color:#fff;font-size:14px;white-space:nowrap;flex:0 0 auto}.btn.teal{background:var(--teal)}.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.danger{background:var(--coral)}.btn.amber{background:var(--amber);color:#1b2333}.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}.btn:disabled{opacity:.5;cursor:default}.input,select.input,textarea.input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none}.input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}.field{margin-bottom:10px}.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}.err{color:var(--coral);font-weight:700;font-size:13px;min-height:18px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800}.badge.PENDING{background:var(--amber-soft);color:#8a5a00}.badge.ACTIVE{background:var(--teal-soft);color:#046b63}.badge.SUSPENDED{background:#fde4e0;color:#9b2f1f}.badge.REJECTED{background:#eee;color:#555}.badge.dup{background:#fde4e0;color:#9b2f1f}.layout{min-height:100dvh;display:flex}.side{width:250px;background:var(--navy);color:#fff;padding:20px 14px;position:fixed;inset-block:0;inset-inline-start:0;display:flex;flex-direction:column;gap:4px;transition:transform .25s;z-index:30}.side .brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}.side .brand img{width:42px;height:42px;border-radius:10px;background:#fff}.side .brand b{font-size:15px}.side .brand small{display:block;color:#b9c6e8;font-size:11px}.side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;font-weight:700;color:#c9d3ee}.side a.on{background:#ffffff1f;color:#fff}.side a .ico{font-size:18px}.side .foot{margin-top:auto;font-size:12px;color:#b9c6e8}.main{flex:1;margin-inline-start:250px;min-width:0}.top{display:flex;align-items:center;gap:12px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.top h1{font-size:18px;color:var(--navy);flex:1}.top .burger{display:none;font-size:22px;background:none;border:none;cursor:pointer}.page{padding:22px 28px;width:100%;max-width:none}.grid{display:grid;gap:14px}.grid.k{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}.kpi .v{font-family:Poppins;font-size:26px;font-weight:800;color:var(--navy)}.kpi .l{font-size:12px;color:var(--muted);font-weight:700}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.toolbar .input,.toolbar select{width:auto;min-width:150px;flex:1}table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.tbl th,.tbl td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}.tbl th{background:var(--navy-soft);color:var(--navy);font-size:12px}.tbl tr:last-child td{border-bottom:none}.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#f7f9fc}.actions{display:flex;gap:6px;flex-wrap:wrap}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#02216273;display:flex;align-items:flex-end;justify-content:center;z-index:40;padding:0}.modal{background:#fff;border-radius:22px 22px 0 0;padding:20px;width:100%;max-height:92dvh;overflow:auto}.modal h3{color:var(--navy);margin-bottom:12px}.dup2{display:grid;grid-template-columns:1fr;gap:10px}.dup2 .card{border-color:var(--amber)}.pager{display:flex;gap:8px;justify-content:center;margin-top:14px;align-items:center;color:var(--muted)}.overlay{display:none}@media (min-width:1024px){.modal-bg{align-items:center;padding:20px}.modal{border-radius:22px;max-width:720px}.dup2{grid-template-columns:1fr 1fr}.tbl th:last-child,.tbl td:last-child{text-align:left}.tbl td:last-child .actions{justify-content:flex-end}}.bnav{display:none}@media (max-width:1023px){.bnav{display:flex;position:fixed;bottom:0;inset-inline:0;background:#fff;border-top:1px solid var(--line);justify-content:space-around;align-items:center;padding:6px 2px calc(6px + env(safe-area-inset-bottom));z-index:26;box-shadow:0 -2px 12px #02216212}.bnav a,.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:5px 6px;border:none;background:none;border-radius:12px;font-family:inherit;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer}.bnav .ico{font-size:20px;line-height:1}.bnav a.on{color:var(--navy);background:var(--navy-soft)}.bnav .dot{position:absolute;top:0;inset-inline-end:4px;background:var(--amber);color:#1b2333;font-size:10px;font-weight:800;border-radius:999px;padding:0 5px;line-height:16px}.side{transform:translate(100%)}.side.open{transform:none}.overlay.show{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:25}.main{margin-inline-start:0}.top .burger{display:block}.page{padding:14px 14px 86px}table.tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}.tbl thead{display:none}.tbl tr{border-bottom:8px solid var(--paper)}.tbl td{border:none;padding:6px 12px;display:flex;gap:8px;justify-content:space-between;align-items:center}.tbl td:before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:700}.tbl td.full{display:block}.tbl td.full:before{display:none}}.top .role{font-size:13px;color:var(--muted);white-space:nowrap}.bellwrap{position:relative;flex:0 0 auto}.bell{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center}.bell:hover{background:var(--navy-soft)}.bell .dot{position:absolute;top:-5px;inset-inline-start:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;font-family:Poppins;display:flex;align-items:center;justify-content:center}.npanel{position:absolute;top:50px;inset-inline-end:0;width:min(92vw,370px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px #0221622e;z-index:60;overflow:hidden}.npanel .nhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}.npanel .nhead b{font-size:14px;color:var(--navy)}.npanel .nhead button{background:none;border:none;color:var(--teal);font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap;padding:0}.npanel .nlist{max-height:min(60vh,420px);overflow:auto}.nitem{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;text-align:start}.nitem:last-child{border-bottom:none}.nitem:hover{background:#f7f9fc}.nitem.unread{background:#f4f8ff}.nitem .ic{width:34px;height:34px;border-radius:11px;background:var(--navy-soft);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}.nitem b{display:block;font-size:13.5px;color:var(--ink)}.nitem p{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:2px}.nitem time{font-size:11px;color:#9aa3b2;font-family:Poppins;display:block;margin-top:3px}.nback{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}.empty{text-align:center;color:var(--muted);padding:30px 16px;font-size:14px}@media (max-width:1023px){.top .role{display:none}}.actions.end{justify-content:flex-end}.field .hint{font-size:12px;color:var(--muted);margin-top:4px}.grid2{display:grid;grid-template-columns:1fr;gap:0 12px}@media (min-width:640px){.grid2{grid-template-columns:1fr 1fr}}.tabsrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tabbtn{padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}.tabbtn.on{background:var(--navy);color:#fff;border-color:transparent}.rule,.qrow{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;background:#fff}.rule .rhead,.qrow .rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}.rule .rhead b,.qrow .rhead b{font-size:14px;color:var(--navy);min-width:0}.rule .rhead .actions,.qrow .rhead .actions{flex-wrap:nowrap;flex:0 0 auto}.rule .rhead .actions .btn,.qrow .rhead .actions .btn{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:14px;line-height:1;border-radius:10px}.formula{margin-top:8px;background:var(--navy-soft);border-radius:10px;padding:8px 10px;font-family:Poppins;font-size:14px;color:var(--navy)}.modal textarea.input{min-height:70px;line-height:1.8}@media (min-width:1024px){.modal{max-width:820px}}.modal .mhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}.modal .mhead h3{flex:1;margin:0}.modal .mclose{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px;color:var(--muted);flex:0 0 auto}.modal .mclose:hover{background:var(--paper)}.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px;direction:rtl}.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:26px}.bars .bar i{display:block;width:100%;max-width:42px;background:var(--teal);border-radius:6px 6px 0 0;transition:height .3s}.bars .bar .lbl{font-size:10px;color:var(--muted);margin-top:5px;white-space:nowrap}.bars .bar .val{font-size:10px;color:var(--navy);font-weight:800;order:-1;margin-bottom:3px}.toolbar .tabsrow{flex:1}
