/* =====================================================================
   CreationGFX ERP — الهوية: أحمر #D61F26 + أسود #111214 + خط Cairo
   ===================================================================== */
:root{
  --red:#D61F26;--red-d:#a8141a;--red-l:#fdeced;--red-g:rgba(214,31,38,.14);
  --black:#111214;--ink:#1d1f23;--bg:#f3f4f6;--surface:#fff;--surface2:#f8f9fa;
  --g1:#f5f6f7;--g2:#e7e9ec;--g3:#cbd0d5;--g4:#8b929b;--g5:#4b5059;
  --green:#1e9e57;--green-l:#e6f6ed;--orange:#e8820c;--orange-l:#fff3e0;--blue:#2563eb;--blue-l:#e8effd;--purple:#6b5fd6;--purple-l:#efedfc;
  --c-design:#6b5fd6;--c-pending:#d98a00;--c-progress:#D61F26;--c-done:#1f9d55;
  --r:12px;--r-s:8px;--sh:0 1px 2px rgba(17,18,20,.05),0 8px 24px -12px rgba(17,18,20,.16);--sh-l:0 24px 60px -18px rgba(0,0,0,.45);
  --sbw:252px;--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0e0f11;--surface:#17181b;--surface2:#1d1f23;--ink:#eceef1;--g1:#1d1f23;--g2:#2a2d33;--g3:#3a3e45;--g4:#8b929b;--g5:#b5bac2;
  --red-l:#3a1416;--green-l:#11281b;--orange-l:#2e200b;--blue-l:#121d33;--purple-l:#1d1a35;--sh:0 1px 2px rgba(0,0,0,.4),0 10px 24px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.3}
.ic{width:18px;height:18px;flex-shrink:0;stroke-width:2}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.num small{font-size:.72em;color:var(--g4);font-weight:600}
.muted{color:var(--g4)}.small{font-size:12px}.bold{font-weight:700}.center{text-align:center}.grow{flex:1}
.pos{color:var(--green)}.neg{color:var(--red)}.warn{color:var(--orange)}
.hide,[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--g3);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* ---------- Wordmark ---------- */
.wordmark{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:26px;letter-spacing:.04em;line-height:1;direction:ltr;display:inline-flex;gap:6px;align-items:baseline}
.wordmark b{color:#fff;font-weight:700}.wordmark i{font-style:normal;color:var(--red);font-weight:700}
.wordmark.xl{font-size:64px}
.login-card .wordmark b,.lf .wordmark b{color:var(--ink)}

/* ---------- Layout ---------- */
#app{display:flex;min-height:100vh}
#sb{width:var(--sbw);background:var(--black);color:#fff;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0;z-index:60;transition:width .25s var(--ease),transform .25s var(--ease)}
.brand{padding:18px 16px 14px;border-bottom:1px solid #24262b;position:relative;overflow:hidden}
.brand::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--red),transparent)}
.brand .lg{background:#fff;border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:center;min-height:54px}
.brand .lg img{max-width:100%;max-height:50px;object-fit:contain}
.brand-sub{font-size:10.5px;color:var(--g4);margin-top:6px;letter-spacing:.06em;text-transform:uppercase;text-align:start}
#nav{flex:1;overflow:auto;padding:8px 10px 16px}
#nav::-webkit-scrollbar-thumb{background:#2a2d33}
.nav-sec{font-size:10.5px;color:#6f757e;padding:14px 10px 5px;font-weight:700;letter-spacing:.04em}
#nav a{display:flex;align-items:center;gap:11px;padding:8.5px 12px;border-radius:9px;color:#c9cdd3;font-weight:600;margin-bottom:2px;position:relative;transition:background .15s,color .15s,transform .15s}
#nav a:hover{background:#1c1e22;color:#fff;transform:translateX(-3px)}
#nav a.on{background:var(--red);color:#fff;box-shadow:0 6px 18px -6px rgba(214,31,38,.7)}
#nav a.on::before{content:"";position:absolute;inset-inline-start:-10px;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--red)}
#nav .nb,.bell .nb{background:var(--red);color:#fff;font-size:10.5px;border-radius:20px;padding:0 6px;margin-inline-start:auto;font-weight:800;min-width:18px;text-align:center}
#nav a.on .nb{background:#fff;color:var(--red)}
.sb-user{display:flex;align-items:center;gap:9px;padding:12px;border-top:1px solid #24262b;background:#0b0c0d}
.av{width:36px;height:36px;border-radius:10px;background:var(--c,#D61F26);display:grid;place-items:center;font-weight:800;color:#fff;flex-shrink:0}
.who{flex:1;min-width:0;line-height:1.25}.who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{color:var(--g4);font-size:11px}
.sb-user .ib{color:#9aa0a8}.sb-user .ib:hover{background:#1c1e22;color:#fff}
.sb-mini #sb{width:76px}.sb-mini #sb .nav-sec,.sb-mini #sb #nav a span,.sb-mini #sb .brand-sub,.sb-mini #sb .who,.sb-mini #sb .sb-user .ib{display:none}
.sb-mini #sb #nav a{justify-content:center;padding:10px}.sb-mini #sb .brand .wordmark{font-size:16px}.sb-mini #sb .sb-user{justify-content:center}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
#top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 22px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--g2)}
#view{padding:22px;max-width:1560px;width:100%;margin:0 auto;flex:1}
#foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;padding:12px 22px;font-size:11.5px;color:var(--g4);border-top:1px solid var(--g2)}
.ib{width:38px;height:38px;border:0;border-radius:10px;background:transparent;display:inline-grid;place-items:center;cursor:pointer;color:var(--g5);position:relative;transition:background .15s,color .15s}
.ib:hover{background:var(--g1);color:var(--ink)}
.bell .nb{position:absolute;top:2px;inset-inline-end:2px;font-size:9.5px;padding:0 4px;animation:pulse 2s infinite}
.search-trigger{display:flex;align-items:center;gap:10px;min-width:280px;max-width:420px;flex:1;height:40px;border:1px solid var(--g2);background:var(--g1);border-radius:12px;padding:0 12px;cursor:pointer;color:var(--g4);transition:border .15s,box-shadow .15s}
.search-trigger:hover{border-color:var(--red);box-shadow:0 0 0 4px var(--red-g)}
.search-trigger span{flex:1;text-align:start}
kbd{font-family:inherit;font-size:10.5px;border:1px solid var(--g3);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--surface);direction:ltr}
#sb-ov{display:none}

/* ---------- Page head ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ph-t{display:flex;align-items:center;gap:12px}
.ph-ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--red-d));display:grid;place-items:center;color:#fff;box-shadow:0 10px 22px -10px var(--red)}
.ph-ic .ic{width:22px;height:22px}
.ph h1{font-size:21px;font-weight:900}
.ph p{margin:2px 0 0;color:var(--g4);font-size:12.5px}
.ph-a{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border:1px solid var(--g3);background:var(--surface);color:var(--ink);border-radius:10px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease),box-shadow .15s,background .15s,border-color .15s}
.btn:hover{border-color:var(--g4);box-shadow:var(--sh);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ic{width:17px;height:17px}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 18px -10px var(--red)}.btn.pri:hover{background:var(--red-d)}
.btn.blk{background:var(--black);border-color:var(--black);color:#fff}
:root[data-theme=dark] .btn.blk{background:#2a2d33;border-color:#2a2d33}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.dng{color:var(--red);border-color:#f0b8bb;background:var(--surface)}.btn.dng:hover{background:var(--red-l)}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--g1);box-shadow:none}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.btn.lg{height:46px;font-size:15px;border-radius:12px}
.btn.block{width:100%}
.btn[disabled],.btn.loading{opacity:.6;pointer-events:none}
.btn.loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .6s linear;pointer-events:none}
.btn:not(.pri):not(.blk):not(.ok) .ripple{background:rgba(214,31,38,.18)}
/* أزرار الجداول: أيقونة + نص */
.row-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.tb{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:var(--g1);color:var(--g5);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s}
.tb .ic{width:14px;height:14px}
.tb:hover{background:var(--surface);border-color:var(--g3);color:var(--ink);transform:translateY(-1px)}
.tb.r{color:var(--red);background:var(--red-l)}.tb.r:hover{border-color:var(--red)}
.tb.g{color:var(--green);background:var(--green-l)}.tb.g:hover{border-color:var(--green)}
.tb.b{color:var(--blue);background:var(--blue-l)}.tb.o{color:var(--orange);background:var(--orange-l)}
.tb.k{color:#fff;background:var(--black)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--g2);border-radius:var(--r);box-shadow:var(--sh);min-width:0;animation:rise .35s var(--ease) both}
.card-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--g2);flex-wrap:wrap}
.card-h .ic{color:var(--red)}
.card-h h3{font-size:15px;font-weight:800}
.card-tools{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.card-b{padding:16px}
.card-b.p0{padding:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.mb16{margin-bottom:16px}.mt16{margin-top:16px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:18px}
.kpi{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--g2);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh);position:relative;overflow:hidden;color:inherit;animation:rise .4s var(--ease) both;transition:transform .2s var(--ease),box-shadow .2s}
.kpi:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.35)}
.kpi::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--kc,var(--g3))}
.kpi-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--kc,var(--g4)) 13%,transparent);color:var(--kc,var(--g5));flex-shrink:0}
.kpi-ic .ic{width:22px;height:22px}
.kpi-b{min-width:0}
.kpi-l{font-size:12px;color:var(--g5);font-weight:700}
.kpi-v{font-size:21px;font-weight:900;overflow-wrap:anywhere;line-height:1.35}
.kpi-v.neg{color:var(--red)}
.kpi-s{font-size:11px;color:var(--g4)}
.kpi.red{--kc:var(--red)}.kpi.green{--kc:var(--green)}.kpi.orange{--kc:var(--orange)}.kpi.black{--kc:var(--black)}.kpi.blue{--kc:var(--blue)}.kpi.purple{--kc:var(--purple)}
:root[data-theme=dark] .kpi.black{--kc:#c9cdd3}
.kpis>.kpi:nth-child(2){animation-delay:.04s}.kpis>.kpi:nth-child(3){animation-delay:.08s}.kpis>.kpi:nth-child(4){animation-delay:.12s}.kpis>.kpi:nth-child(5){animation-delay:.16s}.kpis>.kpi:nth-child(6){animation-delay:.2s}.kpis>.kpi:nth-child(7){animation-delay:.24s}.kpis>.kpi:nth-child(8){animation-delay:.28s}.kpis>.kpi:nth-child(9){animation-delay:.32s}

/* ---------- Toolbar & filters ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.sbox{position:relative;min-width:220px;max-width:300px;flex:1}
.sbox .ic{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:11px;color:var(--g4);width:16px}
.sbox .in{padding-inline-start:34px}
.rng{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--g3);border-radius:10px;padding:0 8px;height:38px}
.rng .in{border:0;min-height:34px;padding:0 4px;width:135px;background:transparent;box-shadow:none!important}
.rng .ic{color:var(--g4);width:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:30px;border:1px solid var(--g3);background:var(--surface);color:var(--g5);font-weight:700;font-size:12px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--g2);margin-bottom:16px;flex-wrap:wrap}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 14px;font-weight:700;color:var(--g5);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.tabs a:hover{color:var(--ink)}
.tabs a.on,.tabs button.on{color:var(--red);border-bottom-color:var(--red)}
.tabs .cnt{background:var(--g2);color:var(--g5);border-radius:20px;padding:0 7px;font-size:11px}
.tabs a.on .cnt{background:var(--red);color:#fff}

/* ---------- Forms ---------- */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fl{font-size:12px;font-weight:700;color:var(--g5)}
.fh{font-size:11px;color:var(--g4)}
.in{width:100%;min-height:38px;border:1px solid var(--g3);border-radius:10px;padding:7px 11px;background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:var(--red);box-shadow:0 0 0 4px var(--red-g)}
.in[readonly],.in:disabled{background:var(--g1);color:var(--g5)}
.in.err{border-color:var(--red);background:var(--red-l);animation:shake .35s}
textarea.in{min-height:70px;resize:vertical}
select.in{cursor:pointer}
.numin{direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.frm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px}
.frm .full{grid-column:1/-1}.frm .half{grid-column:span 2}
.chk{display:inline-flex;align-items:center;gap:9px;font-weight:700;cursor:pointer;user-select:none}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .sw{width:38px;height:22px;border-radius:30px;background:var(--g3);position:relative;transition:background .2s;flex-shrink:0}
.chk .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.chk input:checked+.sw{background:var(--green)}
.chk input:checked+.sw::after{transform:translateX(-16px)}
[dir=ltr] .chk input:checked+.sw::after{transform:translateX(16px)}
.iw{position:relative}.iw>.ic,.iw>i{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:12px;color:var(--g4);width:18px}
.iw .in{padding-inline-start:40px;min-height:46px}
.iw .eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--g4);padding:6px}
.form-err{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--red-l);color:var(--red);font-weight:700;font-size:13px;border:1px solid #f0b8bb}
.sect{font-size:12px;font-weight:800;color:var(--red);display:flex;align-items:center;gap:8px;margin:6px 0 2px;grid-column:1/-1}
.sect::after{content:"";flex:1;height:1px;background:var(--g2)}
.hint-box{grid-column:1/-1;background:var(--blue-l);color:var(--blue);border-radius:10px;padding:9px 12px;font-size:12px;display:flex;gap:8px;align-items:flex-start}
.hint-box .ic{width:16px;margin-top:2px}

/* ---------- Tables ---------- */
.tw{overflow:auto;border-radius:var(--r);border:1px solid var(--g2);background:var(--surface)}
.card .tw{border:0;border-radius:0 0 var(--r) var(--r)}
table.t{width:100%;border-collapse:collapse}
.t th{background:var(--black);color:#fff;font-size:12px;font-weight:700;text-align:start;padding:10px 12px;white-space:nowrap;position:sticky;top:0;z-index:1}
:root[data-theme=dark] .t th{background:#000}
.t td{padding:9px 12px;border-bottom:1px solid var(--g2);vertical-align:middle}
.t tbody tr{transition:background .12s}
.t tbody tr:hover td{background:color-mix(in srgb,var(--red) 4%,var(--surface))}
.t tbody tr{animation:fadeRow .3s var(--ease) both}
.t tfoot td{background:var(--g1);font-weight:800;border-top:2px solid var(--g3)}
.t .n{text-align:end}
.t tr.void td{color:var(--g4)}
.t tr.void td:not(.acts){text-decoration:line-through}
.t td.acts{width:1%;white-space:nowrap}
.t .sub{font-size:11.5px;color:var(--g4)}
.t a.lnk{font-weight:800;color:var(--ink)}.t a.lnk:hover{color:var(--red)}
.empty{padding:46px 20px;text-align:center;color:var(--g4)}
.empty .ic{width:46px;height:46px;stroke-width:1.4;color:var(--g3);margin-bottom:6px}
.empty p{margin:0 0 12px;font-weight:600}

/* ---------- Badges & misc ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:800;background:var(--g2);color:var(--g5);white-space:nowrap}
.badge.green{background:var(--green-l);color:var(--green)}.badge.red{background:var(--red-l);color:var(--red)}.badge.orange{background:var(--orange-l);color:var(--orange)}
.badge.black{background:var(--black);color:#fff}.badge.blue{background:var(--blue-l);color:var(--blue)}.badge.purple{background:var(--purple-l);color:var(--purple)}
.flag{display:inline-block;background:var(--orange-l);color:var(--orange);border-radius:5px;padding:0 6px;font-size:11px;font-weight:800}
.banner{border-radius:var(--r);padding:12px 16px;margin-bottom:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;animation:rise .35s var(--ease)}
.banner .ic{width:22px;height:22px;flex-shrink:0}
.banner.warn{background:var(--orange-l);border:1px solid #f5cf93;color:#8a4b00}.banner.err{background:var(--red-l);border:1px solid #f0b8bb;color:var(--red-d)}
.banner.ok{background:var(--green-l);border:1px solid #b6e3c9;color:#0f6b38}.banner.info{background:var(--blue-l);border:1px solid #c5d6fb;color:#1d4ed8}
:root[data-theme=dark] .banner.warn,:root[data-theme=dark] .banner.err,:root[data-theme=dark] .banner.ok,:root[data-theme=dark] .banner.info{border-color:transparent;color:var(--ink)}
.bar{height:9px;background:var(--g2);border-radius:20px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:20px;background:var(--green);width:0;transition:width 1s var(--ease)}
.bar.o>i{background:var(--orange)}.bar.r>i{background:var(--red)}
.pager{display:flex;align-items:center;gap:4px;padding:12px;flex-wrap:wrap}
.pager a{min-width:32px;height:32px;border-radius:8px;display:inline-grid;place-items:center;border:1px solid var(--g2);color:var(--g5);font-weight:700;padding:0 6px}
.pager a.on{background:var(--red);border-color:var(--red);color:#fff}
.pager .muted{margin-inline-start:auto}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}
.dl dt{color:var(--g4);font-weight:700}.dl dd{margin:0;font-weight:700}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--g2)}
.list-row:last-child{border-bottom:0}
.timeline{position:relative;padding-inline-start:22px}
.timeline::before{content:"";position:absolute;inset-inline-start:7px;top:4px;bottom:4px;width:2px;background:var(--g2)}
.tl{position:relative;padding:4px 0 12px}
.tl::before{content:"";position:absolute;inset-inline-start:-19px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--red-g)}
.tl small{color:var(--g4)}

/* ---------- Dropdowns ---------- */
.dd{position:relative}
.dd-m{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:240px;background:var(--surface);border:1px solid var(--g2);border-radius:14px;box-shadow:var(--sh-l);padding:6px;z-index:80;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:all .18s var(--ease)}
.dd.open .dd-m{opacity:1;visibility:visible;transform:none}
.dd-m.quick{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:380px}
.dd-m.quick a,.dd-m.quick button{display:flex;align-items:center;gap:9px;padding:10px;border-radius:10px;border:0;background:none;color:var(--ink);font-weight:700;cursor:pointer;text-align:start;font-size:13px}
.dd-m.quick a:hover,.dd-m.quick button:hover{background:var(--red-l);color:var(--red)}
.dd-m.quick .ic{color:var(--red)}
.dd-m.alerts{width:380px;max-height:70vh;overflow:auto}
.dd-h{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;border-bottom:1px solid var(--g2);margin-bottom:4px}
.dd-h a{margin-inline-start:auto;font-size:12px;font-weight:700}
.al{display:flex;gap:10px;padding:10px;border-radius:10px;color:var(--ink);align-items:flex-start}
.al:hover{background:var(--g1)}
.al .ic{margin-top:3px;flex-shrink:0}
.al b{display:block;font-size:13px}.al small{color:var(--g4);font-size:11.5px}
.al.danger .ic{color:var(--red)}.al.warning .ic{color:var(--orange)}.al.info .ic{color:var(--blue)}
.al-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;color:var(--g4)}

/* ---------- Modal ---------- */
.ov{position:fixed;inset:0;background:rgba(10,10,12,.55);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;overflow:auto;animation:fade .2s}
.ov.closing{animation:fadeOut .18s forwards}
.md{background:var(--surface);border-radius:18px;width:100%;max-width:640px;box-shadow:var(--sh-l);animation:pop .28s var(--ease);margin-bottom:5vh}
.ov.closing .md{animation:popOut .18s forwards}
.md.wide{max-width:1000px}.md.xwide{max-width:1240px}
.mh{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--g2)}
.mh-ic{width:38px;height:38px;border-radius:11px;background:var(--red-l);color:var(--red);display:grid;place-items:center}
.mh h3{font-size:16.5px;font-weight:900;flex:1}
.x{width:34px;height:34px;border:0;border-radius:9px;background:var(--g1);cursor:pointer;display:grid;place-items:center;color:var(--g5);transition:transform .2s}
.x:hover{background:var(--red-l);color:var(--red);transform:rotate(90deg)}
.mb{padding:18px}
.mf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--g2);background:var(--g1);border-radius:0 0 18px 18px}
.md-loading{display:grid;place-items:center;padding:60px;background:var(--surface);border-radius:18px;max-width:300px;width:100%;margin-top:20vh}
.spinner{width:40px;height:40px;border:4px solid var(--g2);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}

/* ---------- Toast ---------- */
#toastRoot{position:fixed;bottom:18px;inset-inline-start:18px;z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.toast{display:flex;align-items:center;gap:10px;background:var(--black);color:#fff;padding:11px 16px;border-radius:12px;box-shadow:var(--sh-l);max-width:420px;font-weight:600;animation:toastIn .35s var(--ease);border-inline-start:4px solid var(--green);position:relative;overflow:hidden}
.toast .ic{color:var(--green)}
.toast.err{border-color:var(--red)}.toast.err .ic{color:#ff6a70}.toast.warn{border-color:var(--orange)}.toast.warn .ic{color:var(--orange)}
.toast::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:3px;background:rgba(255,255,255,.3);animation:toastBar var(--d,3.5s) linear forwards}
.toast.out{animation:toastOut .3s forwards}

/* ---------- Confirm dialog ---------- */
.cfm{max-width:440px;text-align:center;padding:26px 24px 20px}
.cfm .big-ic{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--red-l);color:var(--red);animation:pop .35s var(--ease)}
.cfm .big-ic .ic{width:30px;height:30px}
.cfm.ok-t .big-ic{background:var(--blue-l);color:var(--blue)}
.cfm h3{font-size:18px;margin-bottom:6px}
.cfm p{color:var(--g5);margin:0 0 16px;white-space:pre-line}
.cfm .acts{display:flex;gap:8px;justify-content:center}
.cfm textarea{margin-bottom:14px;text-align:start}

/* ---------- Command palette ---------- */
.pal{max-width:620px;margin-top:8vh;overflow:hidden}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--g2)}
.pal-in input{flex:1;border:0;outline:none;background:none;font-size:16px}
.pal-l{max-height:55vh;overflow:auto;padding:6px}
.pal-l a,.pal-l button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink);text-align:start;cursor:pointer;font-weight:600}
.pal-l .sel{background:var(--red);color:#fff}
.pal-l small{margin-inline-start:auto;color:var(--g4);font-size:11px}
.pal-l .sel small{color:#ffd2d4}
.pal-h{font-size:11px;color:var(--g4);padding:8px 12px 2px;font-weight:800}

/* ---------- Kanban (لوحة التشغيل) ---------- */
.board{display:grid;grid-template-columns:repeat(4,minmax(260px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:6px}
.lane{background:var(--surface2);border:1px solid var(--g2);border-radius:14px;border-top:4px solid var(--lc);display:flex;flex-direction:column;max-height:calc(100vh - 250px);min-height:300px;transition:box-shadow .2s,background .2s}
.lane[data-s=design]{--lc:var(--c-design)}.lane[data-s=pending]{--lc:var(--c-pending)}.lane[data-s=progress]{--lc:var(--c-progress)}.lane[data-s=done]{--lc:var(--c-done)}
.lane-h{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
.lane-h h2{font-family:'Barlow Condensed','Cairo',sans-serif;font-size:19px;font-weight:700;letter-spacing:.02em;margin-inline-end:auto;display:flex;align-items:center;gap:7px}
.lane-h h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lc);box-shadow:0 0 0 4px color-mix(in srgb,var(--lc) 22%,transparent)}
.lane .cnt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;background:var(--surface);border:1px solid var(--g2);border-radius:30px;padding:0 10px}
.lane .qs{font-size:11.5px;color:var(--g4);font-weight:700}
.lane-add{width:30px;height:30px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--g4);display:grid;place-items:center}
.lane-add:hover{background:var(--lc);color:#fff}
.cards{flex:1;overflow-y:auto;padding:4px 10px 12px;display:flex;flex-direction:column;gap:9px;min-height:80px;border-radius:10px;transition:background .2s}
.lane.over{box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 45%,transparent)}
.lane.over .cards{background:color-mix(in srgb,var(--lc) 9%,transparent)}
.jc{background:var(--surface);border:1px solid var(--g2);border-radius:12px;padding:11px 12px 9px;cursor:grab;box-shadow:var(--sh);display:grid;gap:7px;position:relative;transition:transform .18s var(--ease),box-shadow .18s,border-color .18s;animation:rise .3s var(--ease) both}
.jc:hover{border-color:var(--lc,var(--g4));transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(0,0,0,.4)}
.jc.dragging{opacity:.35;transform:rotate(2deg) scale(.98)}
.jc.drop-before::before{content:"";position:absolute;top:-6px;inset-inline:6px;height:3px;border-radius:3px;background:var(--red)}
.jc.just-moved{animation:landed .6s var(--ease)}
.jc-top{display:flex;gap:8px;align-items:flex-start}
.jc-client{font-weight:800;font-size:14.5px;line-height:1.3;margin-inline-end:auto;overflow-wrap:anywhere}
.jc-qty{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;line-height:1;direction:ltr;white-space:nowrap}
.jc-qty small{font-family:'Cairo';font-size:10.5px;color:var(--g4);margin-inline-start:2px}
.jc-meta{display:flex;flex-wrap:wrap;gap:5px}
.jc .chip-s{font-size:11px;padding:1px 8px;border-radius:6px;background:var(--g1);border:1px solid var(--g2);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.jc .chip-s .ic{width:12px;height:12px}
.jc .loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lc,var(--red))}
.jc{grid-template-columns:minmax(0,1fr)}
.jc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11px;color:var(--g4);min-width:0}
.jc-date{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;direction:ltr}.jc-date .ic{width:12px;height:12px}.jc-date.late{color:var(--red);font-weight:800}
.jc .chip-s{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-foot .pr{font-weight:800}
.pr-urgent{color:var(--red)}.pr-high{color:var(--orange)}
.jc-note{font-size:12px;color:var(--g5);overflow-wrap:anywhere}
.jc-acts{display:flex;gap:4px;margin-inline-start:auto;opacity:0;transition:opacity .15s}
.jc:hover .jc-acts,.jc:focus-within .jc-acts{opacity:1}
@media (hover:none){.jc-acts{opacity:1}}
.jc-acts button{border:0;background:var(--g1);border-radius:6px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;color:var(--g5)}
.jc-acts button:hover{background:var(--lc,var(--red));color:#fff}
.jc-acts .ic{width:14px;height:14px}
.jc .prog{height:5px;background:var(--g2);border-radius:5px;overflow:hidden}.jc .prog i{display:block;height:100%;background:var(--lc)}
.jc .ov-tag{position:absolute;top:-7px;inset-inline-start:10px;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:0 7px;border-radius:5px}
.lane .empty-l{color:var(--g4);text-align:center;padding:26px 8px;font-size:12.5px;border:2px dashed var(--g2);border-radius:10px}

/* ---------- Invoice editor ---------- */
.ed-lines{width:100%;border-collapse:collapse;min-width:980px}
.ed-lines th{background:var(--g1);font-size:11.5px;color:var(--g5);padding:8px 6px;text-align:start;border-bottom:2px solid var(--g2);white-space:nowrap}
.ed-lines td{padding:6px 4px;border-bottom:1px solid var(--g2);vertical-align:top}
.ed-lines .in{min-height:34px;padding:5px 8px;font-size:13px}
.ed-lines .tot{font-weight:900;text-align:end;padding-top:8px;font-size:14px}
.ed-lines .sub{font-size:11px;color:var(--g4);margin-top:2px;line-height:1.5}
.ed-lines tr{animation:rise .25s var(--ease)}
.ed-lines tr.removing{animation:fadeOut .2s forwards}
.kind-tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;padding:0 7px;border-radius:5px}
.kind-piece{background:var(--blue-l);color:var(--blue)}.kind-meter{background:var(--purple-l);color:var(--purple)}.kind-service{background:var(--green-l);color:var(--green)}
.totals{max-width:440px;width:100%;margin-inline-start:auto}
.totals .tr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--g2)}
.totals .tr .in{max-width:160px}
.totals .tr.big{font-size:20px;font-weight:900;border-bottom:2px solid var(--ink);padding:10px 0}
.totals .tr.big .num{color:var(--red)}
.add-lines{display:flex;gap:6px;flex-wrap:wrap}
.sticky-bar{position:sticky;bottom:0;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--g2);padding:12px 16px;margin:16px -22px -22px;display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;z-index:5}
.sticky-bar .sum{margin-inline-end:auto;font-weight:800}
.sticky-bar .sum .num{font-size:20px;color:var(--red)}

/* ---------- Settings / logo ---------- */
.logo-box{border:2px dashed var(--g3);border-radius:14px;min-height:120px;display:flex;align-items:center;justify-content:center;padding:12px;background:repeating-conic-gradient(var(--g1) 0 25%,var(--surface) 0 50%) 50%/18px 18px;transition:border-color .2s}
.logo-box:hover{border-color:var(--red)}
.logo-box img{max-width:320px;max-height:100px;object-fit:contain}
.perm-t td,.perm-t th{text-align:center}
.perm-t td:first-child,.perm-t th:first-child{text-align:start}
.perm-t select{min-height:32px;padding:3px 8px;font-size:12.5px}

/* ---------- Login ---------- */
.login-body{background:var(--black);min-height:100vh}
.login-wrap{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.login-art{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;padding:60px;background:radial-gradient(1200px 600px at 110% -10%,rgba(214,31,38,.55),transparent 60%),var(--black)}
.stripes{position:absolute;inset:-50%;background:repeating-linear-gradient(-35deg,transparent 0 46px,rgba(214,31,38,.08) 46px 48px);animation:slide 18s linear infinite}
.art-in{position:relative;max-width:520px;animation:rise .6s var(--ease)}
.art-in h2{font-size:30px;font-weight:900;margin:18px 0 8px}
.art-in p{color:#b9bec5;font-size:15px}
.feat{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.feat li{display:flex;align-items:center;gap:12px;font-weight:700;color:#e3e5e8;animation:rise .5s var(--ease) both}
.feat li:nth-child(2){animation-delay:.1s}.feat li:nth-child(3){animation-delay:.2s}.feat li:nth-child(4){animation-delay:.3s}
.feat svg{width:36px;height:36px;padding:8px;border-radius:10px;background:rgba(214,31,38,.18);color:#ff6a70}
.login-card{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:40px}
.lf{width:100%;max-width:380px;display:grid;gap:14px;animation:rise .5s var(--ease) .1s both}
.lf h1{font-size:26px;font-weight:900;margin-top:10px}
.lf p{margin:0}
.login-logo{max-height:70px;max-width:260px;object-fit:contain}

/* ---------- Charts ---------- */
.chart-box{position:relative;height:280px}
.chart-box.sm{height:220px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px}

/* ---------- Animations ---------- */
.fade-in{animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeRow{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes popOut{to{opacity:0;transform:scale(.96) translateY(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,31,38,.6)}50%{box-shadow:0 0 0 6px rgba(214,31,38,0)}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.shake{animation:shake .4s}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(-30px)}}
@keyframes toastBar{from{width:100%}to{width:0}}
@keyframes landed{0%{transform:scale(1.05);box-shadow:0 0 0 4px var(--red-g)}100%{transform:none}}
@keyframes slide{to{transform:translate(96px,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:1200px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.board{grid-template-columns:repeat(2,minmax(260px,1fr))}.lane{max-height:none}}
@media (max-width:1000px){
  #sb{position:fixed;inset-block:0;inset-inline-start:0;transform:translateX(100%);width:270px!important}
  #sb.open{transform:none}
  #sb.open~#sb-ov{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  .sb-mini #sb .nav-sec,.sb-mini #sb #nav a span,.sb-mini #sb .who{display:revert}
  .g2,.g3,.g21,.g12{grid-template-columns:1fr}
  #view{padding:14px}.sticky-bar{margin:16px -14px -14px}
  .login-wrap{grid-template-columns:1fr}.login-art{display:none}
  .search-trigger{min-width:0}.search-trigger span,.search-trigger kbd{display:none}.search-trigger{flex:0;width:40px;padding:0;justify-content:center}
}
@media (max-width:640px){
  .g4,.board{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:11px;gap:8px}.kpi-ic{width:34px;height:34px}.kpi-v{font-size:16px}
  .ph h1{font-size:18px}.ph-ic{width:38px;height:38px}
  #top{padding:8px 12px}.dd-m.quick,.dd-m.alerts{width:calc(100vw - 24px);position:fixed;inset-inline:12px;top:60px}
  .tb span{display:none}.tb{padding:0 7px}
  #foot{flex-direction:column}
}

/* ---------- English / LTR adjustments ---------- */
[dir=ltr] body{font-family:'Cairo','Segoe UI',Roboto,Arial,sans-serif}
[dir=ltr] #nav a:hover{transform:translateX(3px)}
[dir=ltr] svg.lucide-arrow-right,[dir=ltr] svg.lucide-arrow-left,[dir=ltr] svg.lucide-chevron-right,[dir=ltr] svg.lucide-chevron-left{transform:scaleX(-1)}
[dir=ltr] .dd-m{transform-origin:top right}
.lang-btn b{font-size:13px;font-weight:900;color:var(--red)}
@media (max-width:1000px){[dir=ltr] #sb{transform:translateX(-100%)}[dir=ltr] #sb.open{transform:none}}

.credit-row{flex-basis:100%;text-align:center;padding-top:8px;border-top:1px dashed var(--g2)}
.dev-credit{font-size:11.5px;color:var(--g4);letter-spacing:.2px}.dev-credit b{color:var(--ink,inherit);font-weight:800}.dev-credit a{color:var(--red);font-weight:700;text-decoration:none}.dev-credit a:hover{text-decoration:underline}