:root{--bg:#f3f6f9;--card:#fff;--nav:#00558c;--accent:#eb1f36;--text:#1d2a35;--muted:#6b7785;--danger:#e53935;--critical:#fb8c00;--medium:#fdd835;--low:#43a047;--ok:#2c8b68}
*{box-sizing:border-box}
body{margin:0;font-family:'Cairo',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
.hidden{display:none!important}
input,select,button,textarea{width:100%;padding:9px 12px;border:0;border-radius:10px;font-size:14px;margin:4px 0;font-family:inherit}
input,select,textarea{background:var(--bg)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(0,85,140,.18)}
textarea{resize:vertical}
button{background:var(--nav);color:#fff;border:0;cursor:pointer;font-weight:700}
button.mini{width:auto;padding:6px 14px;font-size:12.5px;margin:0;background:#eaf2f8;color:var(--nav);font-weight:600}
button.iconBtn{width:30px;height:30px;padding:0;margin:0 2px;border-radius:9px;background:#eef2f7;color:var(--nav);font-size:14px;display:inline-flex;align-items:center;justify-content:center;font-weight:400;line-height:1;transition:background .15s,transform .1s}
button.iconBtn:hover{background:#e4eaf1;transform:translateY(-1px)}
button.iconBtn.danger{background:#fdeaea;color:#c62828}
button.iconBtn.danger:hover{background:#fbd9d9}
button.approve{background:var(--ok)}

/* شاشة الدخول */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(145deg,#02568B 0%,#023d63 55%,#011f33 100%)}
.loginBox{background:var(--card);padding:36px;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:380px;width:100%}
.loginLogo{display:block;max-width:200px;width:100%;height:auto;margin:0 auto 18px}
.loginBox h1{text-align:center;color:var(--nav);font-size:20px;margin:0 0 4px}
.loginBox p{text-align:center;color:var(--muted);font-size:13px;margin:0 0 20px}
.loginBox button{margin-top:10px}
.error{color:var(--danger);font-size:13px;min-height:18px;text-align:center}

/* الهيكل العام */
header{background:var(--nav);color:#fff;padding:14px 28px;min-height:84px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}
.headerLogo{height:26px;width:auto;display:block;background:#fff;border-radius:7px;padding:5px 8px}
.headerRight{display:flex;align-items:center;gap:14px;font-size:13px}
.headerRight button{width:auto;background:#fff;color:var(--nav);padding:8px 14px;border-radius:8px}
.badge{display:inline-block;padding:4px 9px;border-radius:20px;background:#ffffff22;font-size:12px}

nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 28px;background:#fff;border-bottom:1px solid #e6eaef}
nav select{max-width:320px;width:auto;margin:0}
.navbtns{display:flex;gap:8px;flex-wrap:wrap}
.navbtn{width:auto;background:#eef2f7;color:var(--text);padding:9px 16px;border-radius:8px;font-weight:600;border:2px solid transparent;transition:background .15s,border-color .15s}
.navbtn:hover{background:#e4eaf1}
.navbtn.active{background:#eaf2f8;color:var(--nav);border-color:var(--nav);font-weight:800}
.navGroupToggle{display:flex;align-items:center;justify-content:space-between;gap:8px}
.navArrow{font-size:11px;opacity:.7}
.navSubgroup{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.navSubbtn{font-size:13px;padding:8px 14px}

/* قائمة جانبية بدل الشريط الأفقي على الشاشات الكبيرة فقط؛ الجوال/الأجهزة الصغيرة يبقى كما كان بلا أي تغيير. */
@media(min-width:951px){
  .appBody{display:flex;align-items:flex-start}
  nav{flex:0 0 240px;flex-direction:column;align-items:stretch;border-left:1px solid #e6eaef;border-bottom:0;padding:20px 16px;gap:16px;position:sticky;top:84px;max-height:calc(100vh - 84px);overflow-y:auto}
  nav select{max-width:none;width:100%}
  .navbtns{flex-direction:column;gap:6px}
  .navbtn{width:100%;text-align:right}
  .navSubgroup{flex-direction:column;gap:6px;padding-right:14px;border-right:2px solid #eef2f7}
  .navSubbtn{width:100%;text-align:right}
  main.wrap{flex:1;min-width:0}
}

main.wrap{max-width:1450px;margin:auto;padding:24px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--card);border-radius:18px;padding:20px;box-shadow:0 2px 10px rgba(2,86,139,.06);border:0;margin-bottom:16px}
.card h3{margin:0 0 12px;font-size:15px;color:var(--nav);border-bottom:2px solid var(--accent);padding-bottom:7px;display:flex;align-items:center;gap:6px}
.formSection{margin:18px 0 4px;font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.formSection:first-of-type{margin-top:4px}
.metric{padding:14px}
.metric .label{font-size:12px;color:var(--muted)}
.metric .value{font-size:22px;font-weight:800;margin-top:4px}
.span2{grid-column:span 2}
.span4{grid-column:span 4}

/* مقارنة الإنجاز الفعلي بالإنجاز المخطط (محسوب من التواريخ): أحمر = تأخير، أخضر = متقدّم، أصفر = مطابق. */
.plannedNote{font-size:11px;color:var(--muted);margin-top:6px}
.metric.progress-behind{border:2px solid var(--danger);background:#fdecea}
.metric.progress-behind .plannedNote{color:var(--danger);font-weight:700}
.metric.progress-ahead{border:2px solid var(--ok);background:#eaf7f1}
.metric.progress-ahead .plannedNote{color:var(--ok);font-weight:700}

.reportMetrics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.reportMetricItem{flex:1 1 130px;background:var(--bg);border-radius:10px;padding:8px 12px;text-align:center}
.reportMetricItem .label{font-size:11px;color:var(--muted)}
.reportMetricItem .value{font-size:17px;font-weight:800;color:var(--nav);margin-top:2px}
.reportMetricItem.progress-behind{background:#fdecea}
.reportMetricItem.progress-behind .value{color:var(--danger)}
.reportMetricItem.progress-ahead{background:#eaf7f1}
.reportMetricItem.progress-ahead .value{color:var(--ok)}
.reportFilterBar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.reportFilterBar input{max-width:260px;margin:0}
.reportFilterBar select{width:auto;min-width:150px;margin:0;font-size:13px;padding:9px 10px}
.metric.progress-match{border:2px solid #d9a400;background:#fff8e1}
.metric.progress-match .plannedNote{color:#8a6d00;font-weight:700}

/* بطاقات مضغوطة قابلة للطي */
.compactCard{padding:12px 16px}
.collapseHead{margin:0;padding-bottom:7px;border-bottom:2px solid var(--accent);display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;font-size:15px;color:var(--nav)}
.chev{color:var(--muted);font-size:12px;transition:transform .2s}
.collapseHead.open .chev{transform:rotate(180deg)}
.collapseBody{overflow:hidden;max-height:1200px;opacity:1;transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease;margin-top:8px}
.collapseBody.collapsed{max-height:0;opacity:0;margin-top:0}
.collapseHeadRight{display:flex;align-items:center;gap:10px;flex-shrink:0}

.highlightCard{border:2px solid var(--nav);background:#f3f9fd}
.highlightCard .collapseHead{border-bottom-color:var(--nav)}
.highlightCard .item{background:#fff}
.highlightCard .staffTotalItem{background:#eaf4fb;border-color:var(--nav)}

.staffSub{margin-bottom:14px}
.staffSub:last-child{margin-bottom:0}
.staffSubHead{font-weight:800;color:var(--nav);font-size:13px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px dashed #d9e6ef}
.staffTotalItem{background:#f3f9fd;border-radius:8px;padding:6px 8px;margin-top:2px}
.staffTotalItem b{color:var(--nav)}
.staffTotalItem .val{color:var(--nav);font-size:14px}
.staffEditTotal{display:flex;justify-content:space-between;align-items:center;background:#f3f9fd;border:1px solid #d9e6ef;border-radius:8px;padding:7px 12px;margin:6px 0 14px;font-weight:800;color:var(--nav);font-size:13px}
.staffEditGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.staffEditRow{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border:1px solid #d9e6ef;border-radius:10px}
.staffEditRow b{flex:1;font-size:12.5px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coManualInput{width:120px;flex-shrink:0;margin:0;padding:6px 8px;font-size:13px;text-align:center}
.stepper{display:flex;align-items:center;gap:7px;flex-shrink:0}
.stepVal{min-width:24px;text-align:center;font-weight:800;color:var(--nav);font-size:14px}
.stepArrows{display:flex;flex-direction:column;gap:1px}
.stepArrowBtn{width:20px;height:14px;padding:0;margin:0;background:#eef2f7;color:var(--nav);border:0;font-size:8px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.stepArrowBtn:first-child{border-radius:5px 5px 2px 2px}
.stepArrowBtn:last-child{border-radius:2px 2px 5px 5px}
.stepArrowBtn:hover{background:var(--nav);color:#fff}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ok);color:#fff;padding:12px 24px;border-radius:30px;font-weight:700;font-size:14px;box-shadow:0 10px 28px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.fieldTableGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fieldTable{width:100%;min-width:0;border-collapse:collapse;border:1px solid #e3e8ee;border-radius:10px;overflow:hidden}
.fieldTable tr:nth-child(even){background:#f7f9fc}
.fieldTable td{padding:7px 10px;font-size:12.5px;border:1px solid #e3e8ee}
.fieldTable .fLabel{color:var(--muted);font-weight:600;width:48%;text-align:right}
.fieldTable .fValue{color:var(--text);font-weight:700;text-align:right}
@media(max-width:700px){.fieldTableGrid{grid-template-columns:1fr}}

/* عناصر "شريحة" مدمجة (أيقونة + تسمية + قيمة ملاصقة لها) بدل شبكة تتمدد وتدفع القيمة بعيدًا عن تسميتها. */
.details{display:flex;flex-wrap:wrap;gap:12px 24px}
.item{flex:0 1 auto;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;font-size:13px}
.item .ic{flex-shrink:0;width:16px;text-align:center;font-size:13px;opacity:.9}
.item b{font-weight:600;color:var(--muted);font-size:11.5px;white-space:nowrap}
.item .val{margin-inline-start:2px;font-weight:700;color:var(--text);font-size:13px;white-space:nowrap}
.item.itemWarning .val{color:var(--danger);font-weight:800}

/* سجل التعديلات: صفوف مدمجة بدل جدول، مع تجميع التعديلات الناتجة عن نفس عملية الحفظ في سطر واحد قابل للطي. */
.logFilterBar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logFilterBar label{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.logFilterBar select{width:auto;min-width:220px;margin:0}
.logList{display:flex;flex-direction:column;gap:6px}
.logRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #eef1f5;border-radius:8px;background:#fbfcfd;font-size:12.5px;flex-wrap:wrap}
.logGroupHead{cursor:pointer;user-select:none}
.logGroupHead .chev{margin-inline-start:auto;transition:transform .2s}
.logGroupHead.open .chev{transform:rotate(180deg)}
.logIcon{flex-shrink:0}
.logSummary{flex:1;min-width:160px;color:var(--text)}
.logSummary b{color:var(--nav)}
.logBy{color:var(--muted);white-space:nowrap}
.logTime{color:var(--muted);white-space:nowrap;font-size:11.5px}
.logGroupDetails{overflow:hidden;max-height:1200px;opacity:1;transition:max-height .22s ease,opacity .2s ease,margin-top .2s ease;margin-top:6px;margin-inline-start:26px;display:flex;flex-direction:column;gap:5px}
.logGroupDetails.collapsed{max-height:0;opacity:0;margin-top:0}
.logDetailRow{display:flex;justify-content:space-between;gap:10px;padding:5px 9px;background:#fff;border:1px solid #eef1f5;border-radius:6px;font-size:12px}
.logDetailRow b{color:var(--muted);font-weight:600}

.progress{height:10px;background:#e8edf2;border-radius:10px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--ok)}
canvas{max-height:260px}

.demo{background:#fff7df;border:1px solid #f1d58d;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:14px}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 4px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;width:auto;margin:0;padding:0;border:0}
.chk input{width:auto;margin:0}

.typeList{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.typeTag{background:#eef2f7;border:1px solid #dde3ea;border-radius:20px;padding:6px 8px 6px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.typeRemove{width:auto;background:transparent;color:var(--danger);border:0;padding:0 3px;font-weight:800;margin:0;font-size:13px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;padding:16px;border-radius:12px;text-align:center;border:1px solid #e8edf2}
.stat b{font-size:26px;display:block;color:var(--nav)}

.filterBar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;align-items:center}
.filterBar select{width:auto;min-width:150px;margin:0;font-size:13px;padding:9px 10px}
.filterBar button{margin:0}

.descRow td{background:#f0f3f7;text-align:right;white-space:normal;font-size:13px;padding:16px;border-top:0;color:var(--text);line-height:1.7}
.descRow.hidden{display:none}

.descBox{background:#fff;border:1px solid #e3e8ee;border-radius:12px;padding:12px 14px;margin-bottom:14px;white-space:pre-wrap;line-height:1.7}

.commentsBox{white-space:normal}
.commentsHead{font-weight:800;color:var(--nav);font-size:13.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.commentCount{background:var(--nav);color:#fff;border-radius:20px;font-size:11px;padding:1px 8px;font-weight:700}
.commentEmpty,.commentLocked{background:#fff;border:1px dashed #d6dde5;border-radius:10px;padding:10px;text-align:center}

.commentsList{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.commentRow{display:flex;gap:8px;max-width:88%}
.commentRow.mgmt{margin-inline-start:auto;flex-direction:row-reverse}
.commentAvatar{width:32px;height:32px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;box-shadow:0 2px 5px rgba(0,0,0,.15)}
.commentRow.mgmt .commentAvatar{background:var(--nav)}
.commentBubble{background:#eaf7ef;border-radius:14px;padding:9px 13px;min-width:120px}
.commentRow.site .commentBubble{border-start-start-radius:3px}
.commentRow.mgmt .commentBubble{background:#e8f1fa;border-start-end-radius:3px}
.commentMeta{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.commentMeta b{font-size:12.5px;color:var(--text)}
.commentRole{font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.6);border-radius:8px;padding:1px 6px}
.commentText{font-size:13.5px;color:var(--text);line-height:1.6;word-wrap:break-word}
.commentTime{font-size:10px;color:var(--muted);margin-top:4px;text-align:left}

.replyRow{display:flex;gap:8px;margin-top:4px}
.replyRow input{margin:0;border-radius:20px}
.replyRow button.replySend{width:auto;border-radius:20px;padding:9px 16px}

.tablewrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:1050px}
th{background:#fff;color:#9aa5ad;position:sticky;top:0;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}
th,td{padding:12px 10px;border:0;border-bottom:1px solid #f1f3f5;text-align:right;font-size:13.5px}
tr:last-child td{border-bottom:0}
.badge{border-radius:20px;font-weight:700;border:0;padding:4px 12px}
.badge.sev-danger{background:#fdeaea;color:#c62828}
.badge.sev-critical{background:#fff2e2;color:#b5620a}
.badge.sev-medium{background:#fff9db;color:#8a6d00}
.badge.sev-low{background:#e8f6ec;color:#217a3b}
.status{font-weight:700}
.pill{display:inline-block;padding:4px 12px;border-radius:20px;font-weight:700;font-size:12.5px}
.pill-green{background:#e8f6ec;color:#217a3b}
.pill-red{background:#fdeaea;color:#c62828}
.pill-amber{background:#fff2e2;color:#b5620a}
.pill-blue{background:#eaf2f8;color:#00558c}
.pill-gray{background:#eef1f5;color:#6b7785}
.approved{font-weight:700;color:#24721d}
.waiting{font-weight:700;color:#9a6a00}
.na{color:#888}
.empty{padding:35px;text-align:center;color:#888}

/* الهيكل التنظيمي لكادر المشروع — شجرة بـCSS صرف (الحاوية الخارجية LTR لرسم الخطوط بشكل صحيح، وكل بطاقة RTL للنص). */
.orgFormCard{background:#fff;border:0;border-radius:18px;box-shadow:0 2px 10px rgba(2,86,139,.06);padding:20px;margin-bottom:16px}
.orgToolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.orgZoomControls{display:flex;align-items:center;gap:8px}
.orgZoomControls button{width:auto;padding:4px 10px}
.orgZoomReadout{min-width:44px;text-align:center;font-weight:700;color:var(--nav);font-size:13px}
.orgSurface{background:linear-gradient(#f7fafd 1px,transparent 1px),linear-gradient(90deg,#f7fafd 1px,transparent 1px),#fff;background-size:22px 22px;border:1px solid #eef1f5;border-radius:14px;overflow:auto;padding:20px 10px 35px}
.orgCanvas{width:max-content;min-width:100%;display:flex;justify-content:center;transform-origin:top center}
.orgTree{direction:ltr;text-align:center}
.orgTree ul{padding-top:30px;position:relative;display:flex;justify-content:center;margin:0;padding-left:0}
.orgTree li{list-style:none;position:relative;text-align:center;padding:30px 9px 0;display:flex;flex-direction:column;align-items:center}
.orgTree>ul>li{padding-top:0}
.orgTree li::before,.orgTree li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid #c3cfd9;width:50%;height:30px}
.orgTree li::after{right:auto;left:50%;border-left:2px solid #c3cfd9}
.orgTree li:only-child::after,.orgTree li:only-child::before{display:none}
.orgTree li:only-child{padding-top:0}
.orgTree li:first-child::before,.orgTree li:last-child::after{border:0 none}
.orgTree li:last-child::before{border-right:2px solid #c3cfd9;border-radius:0 7px 0 0}
.orgTree li:first-child::after{border-radius:7px 0 0 0}
.orgTree ul ul::before{content:'';position:absolute;top:0;left:50%;height:30px;border-left:2px solid #c3cfd9}
.orgCard{direction:rtl;text-align:right;position:relative;display:flex;gap:10px;align-items:center;width:210px;min-height:80px;background:#fff;border:1px solid #dde5ec;border-top:4px solid #6b7785;border-radius:10px;padding:11px;box-shadow:0 4px 14px rgba(2,86,139,.08)}
.orgCard.isManager{border-top-color:var(--nav);background:#eaf2f8}
.orgAvatar{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:#eaf2f8;color:var(--nav);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.orgDetails{display:flex;flex-direction:column;gap:3px;min-width:0}
.orgDetails strong{font-size:12px;color:var(--text);overflow-wrap:anywhere}
.orgDetails span{font-size:11px;color:var(--muted)}
.orgDetails small{font-size:10px;color:#8a97a3}
.orgCollapseBtn{position:absolute;bottom:-12px;left:calc(50% - 20px);z-index:2;border:1px solid #bfd1df;background:#fff;border-radius:20px;min-width:40px;height:22px;color:var(--nav);cursor:pointer;font-weight:700;font-size:11px}

@media print{
  header,nav,.no-print{display:none!important}
  body,.appBody{display:block}
  main.wrap{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #e3e8ee;break-inside:avoid}
  table{min-width:0}
}

@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}.span4{grid-column:span 2}.checks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .grid,.grid2{grid-template-columns:1fr}
  .span2,.span4{grid-column:span 1}
  main.wrap{padding:12px}
  .checks{grid-template-columns:1fr}
  header{padding:12px 16px}
  nav{padding:12px 16px}
  .brand{font-size:17px}
  .filterBar{flex-direction:column;align-items:stretch}
  .filterBar select,.filterBar button{width:100%}
  .replyRow{flex-direction:column;align-items:stretch}
  th,td{padding:7px;font-size:12px}
}