@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{
  --bg:#f5f1e8; --card:#fffdf8; --ink:#1d2621; --muted:#6b7068; --line:#e4ddcc; --line2:#efe9db;
  --green:#1c3326; --green2:#2b4a38; --gold:#c9a75b; --gold2:#eadbb5; --red:#c0392b; --redbg:#fbe9e6;
  --r:12px; --day:46px; --label:330px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'IBM Plex Sans Arabic',Tahoma,system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green2)}
.hidden{display:none!important}

/* ── شريط علوي ── */
.top{position:sticky;top:0;z-index:30;background:var(--green);color:var(--gold2);display:flex;align-items:center;gap:12px;padding:10px 18px;flex-wrap:wrap}
.top h1{font-size:17px;margin:0;font-weight:600;color:#fff}
.top .sub{font-size:12.5px;opacity:.8}
.top .sp{flex:1}
.top .btn{border-color:#ffffff33;color:#fff;background:#ffffff12}
.top .btn:hover{background:#ffffff24}
.top .btn.gold{background:var(--gold);color:var(--green);border-color:var(--gold)}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 13px;cursor:pointer;font-size:14px;white-space:nowrap}
.btn:hover{background:#f3eee2}
.btn.pri{background:var(--green);color:#fff;border-color:var(--green)}
.btn.pri:hover{background:var(--green2)}
.btn.danger{color:var(--red);border-color:#e8c1bb}
.btn.sm{padding:4px 9px;font-size:13px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:default}

.tabs{display:flex;gap:4px;padding:10px 18px 0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:52px;z-index:25;overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 14px;border-radius:9px 9px 0 0;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap}
.tabs button.on{background:var(--card);color:var(--green);box-shadow:0 -2px 0 var(--gold) inset;border:1px solid var(--line);border-bottom-color:var(--card);margin-bottom:-1px}
.wrap{padding:16px 18px 60px;max-width:1700px;margin:0 auto}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{padding:14px 16px}
.kpi .n{font-size:28px;font-weight:700;line-height:1.1}
.kpi .l{color:var(--muted);font-size:13px}
.kpi.warn .n{color:var(--red)}
h2{font-size:16px;margin:0 0 12px;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* ── شريط تقدّم مكدّس حسب الحالة ── */
.stack{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line2)}
.stack i{display:block;height:100%}
.prow{display:grid;grid-template-columns:minmax(160px,260px) 1fr 70px;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2)}
.prow:last-child{border:0}
.prow .nm{font-size:14px}
.prow .pc{text-align:left;font-variant-numeric:tabular-nums;font-weight:600}

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:right;font-weight:600;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line);padding:8px}
table.t td{border-bottom:1px solid var(--line2);padding:8px;vertical-align:middle}
table.t tr:hover td{background:#faf6ec}

/* ── أدوات الفلترة ── */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input,.filters select,.f input,.f select,.f textarea{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 10px;min-width:0}
.filters input[type=search]{width:220px}
.filters label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:1px 9px;font-size:12px;font-weight:500;white-space:nowrap;line-height:20px}
.chip.co{background:#e9efe9;color:var(--green2)}
.chip.none{background:#f3e7d1;color:#8a6420}
.chip.late{background:var(--redbg);color:var(--red)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}

.bulk{position:sticky;top:100px;z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--green);color:#fff;padding:9px 12px;border-radius:var(--r);margin-bottom:10px;box-shadow:0 6px 20px #1c332633}
.bulk select,.bulk input{border:0;border-radius:7px;padding:5px 8px;color:var(--ink)}
.bulk .btn{border-color:#ffffff44;background:#ffffff18;color:#fff}
.bulk .btn.gold{background:var(--gold);color:var(--green);border:0}

/* ── الجدول الزمني (Gantt) ── */
.gantt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:calc(100vh - 230px);position:relative}
.g-head,.g-row,.g-grp{display:flex;min-width:max-content}
.g-head{position:sticky;top:0;z-index:6;background:var(--card);border-bottom:1px solid var(--line)}
.g-lab{position:sticky;right:0;z-index:4;width:var(--label);flex:none;background:inherit;border-left:1px solid var(--line);padding:6px 10px;display:flex;gap:8px;align-items:flex-start}
.g-head .g-lab{z-index:7;align-items:center;font-size:13px;color:var(--muted)}
.g-days{display:flex;position:relative}
.g-day{width:var(--day);flex:none;text-align:center;font-size:11.5px;padding:5px 0;border-left:1px solid var(--line2);color:var(--muted);line-height:1.25}
.g-day b{display:block;font-size:14px;color:var(--ink)}
.g-day.we{background:#f7f2e6}
.g-day.today{background:var(--gold2)}
.g-day.today b{color:var(--green)}
.g-day.dead{background:var(--redbg)}
.g-day.dead b{color:var(--red)}
.g-grp{background:#f1ece0;position:sticky;top:44px;z-index:5;cursor:pointer;border-bottom:1px solid var(--line)}
.g-grp .g-lab{font-weight:600;font-size:14px;align-items:center;background:#f1ece0}
.g-grp .g-days{flex:1}
.g-grp .gsum{display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12.5px;color:var(--muted)}
.g-grp .gsum .stack{width:160px}
.g-row{background:var(--card);border-bottom:1px solid var(--line2);min-height:44px}
.g-row:hover,.g-row:hover .g-lab{background:#faf6ec}
.g-row.sel,.g-row.sel .g-lab{background:#eef3ec}
.g-row .g-lab{font-size:13.5px;cursor:pointer}
.g-row .g-lab input{margin-top:4px;flex:none;cursor:pointer}
.g-row .nm{flex:1;min-width:0}
.g-row .nm .it{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-row .nm .meta{display:flex;gap:6px;align-items:center;margin-top:2px;font-size:11.5px;color:var(--muted);overflow:hidden;white-space:nowrap}
.g-tl{position:relative;flex:none;background-image:linear-gradient(to left,var(--line2) 1px,transparent 1px);background-size:var(--day) 100%;background-position:right top}
.g-bar{position:absolute;top:9px;height:26px;border-radius:7px;font-size:11.5px;display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px #0002}
.g-bar.late{outline:2px solid var(--red);outline-offset:1px}
.g-now{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);opacity:.9;pointer-events:none}
.g-dl{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.6;pointer-events:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:10px 2px}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* ── نافذة التعديل ── */
.modal{position:fixed;inset:0;background:#1c332655;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto}
.modal .box{background:var(--card);border-radius:16px;width:min(760px,100%);padding:20px;box-shadow:0 20px 60px #0004}
.modal h3{margin:0 0 14px;font-size:17px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.f.full{grid-column:1/-1}
.f input,.f select,.f textarea{color:var(--ink);font-size:14.5px;width:100%}
.f textarea{min-height:64px;resize:vertical}
.acts{display:flex;gap:8px;justify-content:flex-start;margin-top:16px;flex-wrap:wrap}
.acts .sp{flex:1}

/* ── الإعدادات ── */
.lst{display:flex;flex-direction:column;gap:6px}
.lst .li{display:flex;gap:6px;align-items:center}
.lst .li>*{flex:none}
.lst .li input[type=text]{flex:1;min-width:110px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#fff}
.lst .li input[type=color]{width:38px;height:34px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.lst .li label{font-size:12.5px;display:flex;align-items:center;gap:4px;white-space:nowrap;color:var(--muted)}
.cols2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.wide{grid-column:1/-1}
.set2{grid-template-columns:1fr 1fr}
.form.p3{grid-template-columns:2fr 1fr 1fr}

/* ── الدخول ── */
.login{max-width:380px;margin:12vh auto;text-align:center}
.login input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin:14px 0;text-align:center;font-size:16px}
.emblem{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--gold);display:grid;place-items:center;margin:0 auto 10px;font-size:28px}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--green);color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.bad{background:var(--red)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:60px;text-align:center;color:var(--muted)}

/* ── صفحة الشركة ── */
.co-head{background:var(--green);color:#fff;padding:22px 18px 18px}
.co-head .in{max-width:900px;margin:0 auto}
.co-head h1{margin:0;font-size:20px}
.co-head .ttl{color:var(--gold2);font-size:13px;margin-bottom:4px}
.co-head .row{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;align-items:flex-end}
.co-head .big{font-size:26px;font-weight:700;color:#fff;line-height:1}
.co-head .lbl{font-size:12px;color:var(--gold2)}
.co-head .stack{background:#ffffff22;height:8px;margin-top:12px}
.co-wrap{max-width:900px;margin:0 auto;padding:14px 12px 60px}
.co-st{margin:20px 2px 8px;font-weight:600;font-size:15px;color:var(--green);display:flex;align-items:center;gap:8px}
.co-st::after{content:'';flex:1;height:1px;background:var(--line)}
.task{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px;border-right:5px solid var(--c,#94a3b8)}
.task.late{border-color:#e8c1bb;border-right-color:var(--red)}
.task .it{font-weight:600;font-size:15.5px}
.task .meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.task .spec{font-size:13.5px;margin-top:8px;background:#f8f4ea;border-radius:8px;padding:7px 10px}
.task .dates{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;margin-top:10px;align-items:center}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.seg button.on{border-color:var(--c);background:var(--c);color:var(--ci)}
.task .note{display:flex;gap:6px;margin-top:10px}
.task .note input{flex:1;border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;min-width:0}

@media (max-width:760px){
  :root{--label:200px;--day:40px}
  .form{grid-template-columns:1fr}
  .set2,.form.p3{grid-template-columns:1fr}
  .top{padding:8px 12px}
  .wrap{padding:12px 10px 60px}
  .filters input[type=search]{width:100%}
  .prow{grid-template-columns:1fr 60px}
  .prow .stack{grid-column:1/-1;order:3}
  .g-row .nm .meta .chip.co{display:none}
}

/* ── الملاحظات ── */
.thread{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.msg{background:#eef3ec;border-radius:10px;padding:7px 11px;font-size:14px;max-width:92%;align-self:flex-start;white-space:pre-wrap}
.msg.adm{background:#f3e7d1;align-self:flex-end}
.msg .by{font-size:11.5px;color:var(--muted);margin-bottom:2px}
.badge{background:var(--red);color:#fff;border-radius:99px;font-size:11px;padding:0 7px;margin-inline-start:5px;line-height:18px;display:inline-block}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.ncard.unread{border-right:4px solid var(--red);background:#fffaf3}
.ncard .hd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.ncard .stp{background:var(--green);color:var(--gold2);border-radius:99px;padding:1px 10px;font-size:12px}
.ncard .it{font-weight:600;cursor:pointer;grid-column:1}
.ncard .it:hover{text-decoration:underline}
.ncard .tx{grid-column:1/-1;white-space:pre-wrap;background:#f8f4ea;border-radius:8px;padding:8px 11px}
.ncard .tx.adm{background:#f3e7d1}
.ncard .side{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:6px;align-items:flex-end}