:root{--pmp-font: Arial, Helvetica, sans-serif}
.pmpd-wrap{background:var(--pmp-bg-canvas); padding:14px; border:1px solid var(--pmp-primary); font-family:var(--pmp-font); color:var(--pmp-text)}
.pmpd-top{display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:12px; margin-bottom:10px}
.pmpd-chooser select{padding:6px; min-width:320px}
.pmpd-actions .button{margin-left:6px}
.pmpd-brand{display:flex; align-items:center; gap:10px; justify-self:center}
.pmpd-brand .pmpd-logo{max-height:46px}
.pmpd-name{font-size:28px; font-weight:800; text-transform:capitalize}

/* GRID */
.pmpd-grid{display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap:14px}
.pmpd-tile{background:var(--pmp-bg-panel); border:2px solid var(--pmp-primary); padding:12px; position:relative; overflow:hidden; border-radius:2px}
.pmpd-heading{position:absolute; left:14px; top:10px; font-weight:600; color:#222; opacity:0.95; font-size:14px; letter-spacing:0.2px}

.tile-milestone{grid-column: span 2}
.tile-remaining{grid-column: span 1}
.tile-phases{grid-column: span 2; grid-row: span 2}
.tile-kpi{grid-column: span 1; grid-row: span 2}
.tile-critical{grid-column: span 2}
.tile-identity{background:#9f9f9f}

/* Gauge (الإصدار الجديد) */
.gauge-wrap.g2{
    display:grid;
    grid-template-rows:auto 1fr auto auto;
    height:100%;
    align-items:center; /* أُضيفت الفاصلة المنقوطة في آخر السطر */
}
.gauge-wrap.g2 .bigpct{font-size:35px; font-weight:600; text-align:center; line-height:1}
.gauge-wrap.g2 .gauge-area{display:flex; margin-top:2px} /* كان مكتوب position:flex */
.gauge-wrap.g2 .gauge-scale{display:flex; justify-content:space-between; font-weight:600; margin-top:2px}
.gauge-wrap.g2 .gauge-caption{color:#111; font-weight:600; margin-top:2px; text-align:center}


/* Completed vs Remaining (كتلة قديمة أُبقيت للمرجع فقط)
.comprem-wrap{display:grid; grid-template-rows:auto 1fr; height:100%}
.comprem-wrap .pct{font-size:35px; font-weight:600; text-align:center; line-height:1}
.comprem-wrap .cols{display:flex; gap:0px; align-items:flex-start; justify-content:center; margin-top:2px}
.comprem-wrap .col .v{font-weight:800; text-align:center; margin-top:2px}
.comprem-wrap .lbl{color:#555; text-align:center; font-weight:700}
.comprem-wrap .arrow{font-size:28px; color:var(--pmp-accent); line-height:1}
.comprem-wrap .arrow.gray{color:#9a9a9a}
*/

/* Identity (ملاءمة الارتفاع) */
.id-wrap{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#8f8f8f}
.id-name{font-weight:700; color:#fff; letter-spacing:1px; text-align:center; line-height:1.05; padding:0 10px}
.id-logo{max-height:76px; margin:10px auto; background:#fff; padding:6px; border-radius:2px}
.id-sub{font-weight:600; color:#111}

/* Area */
.tile-area svg{width:100%; height:100%}

/* Critical tasks */
.crit-tags{position:absolute; left:12px; bottom:10px; display:flex; gap:10px}
.crit-tags .tag{background:var(--pmp-accent); color:#fff; padding:2px 8px; font-size:12px; border-radius:2px}

/* Pie */
#pmpd-milestone .tile-area svg { width:100%; height:100%; }

/* Remaining days */
.remain-box{background:var(--pmp-accent); color:#fff; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:2px}
.remain-num{font-size:54px; font-weight:800; line-height:1}
.remain-lbl{font-weight:600}
.remain-dates{font-size:14px; text-align:left}

/* Phases */
.phases-head{font-size:14px; font-weight:600; margin-bottom:10px}
.phases-body .phase-row{display:flex; align-items:center; gap:12px; margin:10px 0}
.phases-body .phase-row .name{width:120px; font-weight:800}
.phases-body .phase-row .bars{flex:1; display:flex; gap:10px}
.b1{background:var(--pmp-accent); height:16px; border-radius:2px}
.b2{background:#ca6a76; height:16px; border-radius:2px}
.b3{background:#cccccc; height:16px; border-radius:2px}

/* Bottlenecks */
.bn-title{font-weight:600; font-size:14px; text-align:center; margin-bottom:4px}
.bn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:start; padding:6px}
.bn-svg{display:block; width:42px; height:42px; margin:6px auto 0}
.bn-task{font-weight:800; text-align:center; margin-top:6px}
.bn-what{color:#444; text-align:center; font-size:13px}

/* KPI */
.kpi-head{font-size:14px; font-weight:600; text-align:center; position:relative; padding-top:4px}
.kpi-pct{position:absolute; right:14px; top:0; font-size:20px; font-weight:900}
.kpi-sub{position:absolute; right:14px; top:22px; font-size:12px; color:#777}
.kpi-body{display:grid; grid-template-columns:2fr 1fr; height:calc(100% - 40px); margin-top:8px}
.kpi-legend{font-size:14px; padding:10px}
.kpi-legend ul{margin:6px 0 0 16px}

@media (max-width:1200px){
  .pmpd-grid{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px}
}

/* أخفِ اسم المشروع في الهيدر فقط */
.pmpd-brand .pmpd-name { display: none !important; }

/* إذا لم يكن هناك شعار، أخفِ الحاوية بالكامل (اختياري) */
.pmpd-brand:empty { display:none; }

/* على الشاشات الواسعة: كبّر العمود الرابع وصغّر الثاني */
@media (min-width: 1200px){
  .pmpd-grid{
    /* الترتيب: [1] Gauge  [2] Completed/Remaining  [3] Identity  [4] Area */
    grid-template-columns: 1fr 0.75fr 1fr 1.25fr;
  }
}

/* ==== ضبط تخطيط بلاطة Completed / Remaining ==== */
/* نطاق خاص بالبلاطة الثانية فقط */
#pmpd-comprem .comprem-wrap{
  display:grid;
  grid-template-rows: auto 1fr;
  height:100%;
  padding: 0 6px;
}

#pmpd-comprem .pct{
  font-size: clamp(22px, 3vw, 38px);
  font-weight:600;
  text-align:center;
  line-height:1;
  margin: 0;
}

#pmpd-comprem .cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  justify-items:center;
  gap: 4px;
  margin-top: 2px;
}

#pmpd-comprem .col{
  display:grid;
  grid-template-rows: auto auto auto;
  row-gap: 1px;
  align-items:center;
  justify-items:center;
  min-width: 0;
}

#pmpd-comprem .arrow{
  font-size: 24px;
  line-height:1;
  color: var(--pmp-accent);
}
#pmpd-comprem .arrow.gray{ color:#9a9a9a; }

#pmpd-comprem .v{ font-weight:600; }
#pmpd-comprem .lbl{ color:#444; }

/* عند ضيق العمود، صغّر السهم والنصوص قليلاً */
@media (max-width: 1200px){
  #pmpd-comprem .arrow{ font-size:14px; }
  #pmpd-comprem .v{ font-size: 14px; }
  #pmpd-comprem .lbl{ font-size: 13px; }
}

/* الأسهم (SVG) */
#pmpd-comprem .arrow{ width:50px; height:100px; display:block; }
#pmpd-comprem .arrow-up  { fill: var(--pmp-accent); }  /* أحمر */
#pmpd-comprem .arrow-down{ fill: #9a9a9a; }           /* رمادي */

/* تحجيم طفيف في الشاشات الأضيق */
@media (max-width:1200px){
  #pmpd-comprem .arrow{ width:32px; height:32px; }
  #pmpd-comprem .v{ font-size:14px; }
  #pmpd-comprem .lbl{ font-size:13px; }
}

/* إخفاء الشعار بجانب زر Refresh */
.pmpd-brand { display: none !important; }

/* بما أننا أخفينا العمود الأوسط، اجعل الهيدر عمودين فقط */
.pmpd-top { grid-template-columns: 1fr auto !important; }

/***********************************************************/
/* ===== Identity tile controls ===== */
#pmpd-identity.pmpd-tile{
  /* يمكنك تعديل الألوان أدناه عند الحاجة */
  --id-bg:    #8e8e8e;  /* خلفية البلاطة */
  --id-inner: #8e8e8e;  /* طبقة داخلية (اختياري) */
  --id-title: #ffffff;  /* لون اسم المشروع */
  --id-sub:   #111111;  /* لون النص السفلي */

  background: var(--id-bg);
  border-color: var(--pmp-primary);
  position: relative;
}

/* السطر السفلي */
#pmpd-identity .id-sub{
  color: var(--id-sub);
  font-weight:900;
  font-size:14px;
  line-height:1.25;
}

/* First chart ****************/
/* عنوان البلاطة أعلى الوسط */
#pmpd-phasearea .pmpd-heading{ width:100%; text-align:center; }

/* دقة عرض الـSVG داخل البلاطة */
.tile-area svg{ width:100%; height:100%; }

/* لو أردت ألوانًا أخف للأرقام والخطوط */
#pmpd-phasearea text{ font-family: var(--pmp-font); }

/* Desktop placement for row 2 ONLY — لا يغيّر عرض صف 1 */
@media (min-width: 1200px){
  /* Critical Task Dates تمتد عبر الأعمدة 1–2 في الصف 2 */
  #pmpd-critical{
    grid-column: 1 / 2 !important;
    grid-row:    2 / 3 !important;
  }

  /* Milestone (pie) في العمود الثالث، الصف 2 */
  #pmpd-milestone{
    grid-column: 2 / 4 !important;
    grid-row:    2 / 3 !important;
  }

  /* Remaining Days إلى أقصى اليمين: العمود 4، الصف 2 */
  #pmpd-remaining{
    grid-column: 4 / 5 !important;
    grid-row:    2 / 3 !important;
  }
}

/* Desktop: محاكاة عدد أعمدة مختلف لكل صف باستخدام 12 مسار Grid */
@media (min-width:1200px){
  .pmpd-grid{
    grid-template-columns: repeat(12, 1fr) !important;  /* 12 مسارًا متساويًا */
    grid-auto-rows: 220px;
 }
  /* ---------- الصف 1: أربعة أعمدة متساوية (كل واحد = 3 مسارات) ---------- */
  #pmpd-overall   { grid-column:  1 / span 3 !important; grid-row: 1 / 2 !important; }
  #pmpd-comprem   { grid-column:  4 / span 3 !important; grid-row: 1 / 2 !important; }
  #pmpd-identity  { grid-column:  7 / span 3 !important; grid-row: 1 / 2 !important; }
  #pmpd-phasearea { grid-column: 10 / span 3 !important; grid-row: 1 / 2 !important; }

  /* ---------- الصف 2: ستة أعمدة متساوية (كل واحد = مساران) ---------- */
  #pmpd-critical  { grid-column:  1 / span 4 !important; grid-row: 2 / 3 !important; }
  #pmpd-milestone { grid-column:  5 / span 6 !important; grid-row: 2 / 3 !important; }
  #pmpd-remaining { grid-column: 11 / span 2 !important; grid-row: 2 / 3 !important; }

  /* ---------- الصف 3: كما في المخطط ---------- */
  #pmpd-phases      { grid-column:  1 / span 6 !important; grid-row: 3 / 4 !important; }
  #pmpd-bottlenecks { grid-column:  7 / span 3 !important; grid-row: 3 / 4 !important; }
  #pmpd-kpi         { grid-column: 10 / span 3 !important; grid-row: 3 / 4 !important; }
}

/* منع تعارض قواعد span العامة مع التوزيعات المخصّصة أعلاه */
.tile-milestone,
.tile-remaining,
.tile-phases,
.tile-kpi,
.tile-critical{
  grid-column: auto;
  grid-row: auto;
}

/* عنوان مخطط المراحل في الوسط */
#pmpd-phasearea .pmpd-heading{
  position: absolute;
  left: 0; right: 0;
  top: 8px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* لون عناوين المحاور داخل مخطط المراحل */
#pmpd-phasearea svg text { fill:#333; }

/* تثبيت العنوان بحيث لا يستهلك من ارتفاع الرسم */
#pmpd-phasearea { position: relative; }
#pmpd-phasearea .pmpd-heading{
  position:absolute; left:0; right:0; top:8px;
  text-align:center; font-weight:600; font-size:14px;
}

/* السماح للـSVG بملء الغلاف */
.tile-area svg{ width:100%; height:100%; }

/* توضيح خطوط الشبكة ونصوص المحاور */
#pmpd-phasearea svg text { fill:#333; }

/* Remaining tile تلوين الخلفية */
#pmpd-remaining.pmpd-tile { background: var(--pmp-accent); }
#pmpd-remaining .remain-box { background: transparent; }

/* ===== Milestone (pie) — النص يسار، الدونَت كبيرة يمين ===== */
/* Typography الخاصة ببلاطة الـMilestones */
/* Milestones tile typography & legend */

/* Pie tooltip: اسمح بتجاوز التولتيب لحدود الحاوية بدون قصّ */
#pmpd-milestone,
#pmpd-milestone .tile-area{
  position: relative;
  overflow: visible;
}

/* مظهر التولتيب */
#pmpd-milestone .ms-tip{
  position:absolute;
  pointer-events:none;
  background:rgba(0,0,0,.85);
  color:#fff;
  font: 12px/1.2 var(--pmp-font);
  padding:6px 8px;
  border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transform: translate(-50%, -120%);
  white-space:nowrap;
  opacity:0;
  transition: opacity .12s ease;
  z-index: 5;
}

#pmpd-milestone .ms-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:8px;
}

#pmpd-milestone .ms-title{
  font-family: var(--pmp-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

#pmpd-milestone .ms-big{
  font-family: var(--pmp-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--pmp-accent); /* النسبة الكبيرة باللون الأحمر */
  line-height: 3;
}

#pmpd-milestone .ms-legend{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

#pmpd-milestone .ms-legend li{
  display: grid;
  grid-template-columns: 14px 1fr auto; /* عيّنة اللون | التسمية | النسبة */
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-family: var(--pmp-font);
  font-size: 18px;
  font-weight: 700;
}

#pmpd-milestone .ms-legend .pct{
  font-size: 18px;
  font-weight: 800;
}

#pmpd-milestone .ms-legend .swatch{
  width: 14px;
  height: 14px;
  border-radius: 2px;
  display: block;
}


/* Critical tile visuals (optional tweaks) */
/* اجعل مساحة الرسم تملأ البلاطة بين العنوان والحافة السفلية */
#pmpd-critical { position: relative; }
#pmpd-critical .tile-area{
  position: absolute;
  left: 12px; right: 12px;
  top: 34px;       /* تحت العنوان */
  bottom: 10px;    /* مسافة بسيطة للأسفل */
}

/* أزرار الزووم */
#pmpd-critical .zoom-btns{
  position:absolute; top:8px; right:8px; z-index:5;
  display:flex; gap:6px;
}
#pmpd-critical .zoom-btns button{
  background:#fff; border:1px solid #bbb; border-radius:3px;
  padding:2px 8px; font-weight:700; cursor:pointer;
}
#pmpd-critical .zoom-btns button:hover{ background:#f5f5f5; }

/* غيّر لون/سُمك/نمط خطوط الشبكة في بلاطة الـCritical */
#pmpd-critical .tile-area line{
  stroke: #ffffff;         /* اللون */
  stroke-width: 1.5;         /* السُمك */
  stroke-dasharray: 0;     /* اجعلها متصلة. للحبْر المتقطّع جرّب: 4 3 */
  stroke-linecap: butt;    /* شكل أطراف الخط: butt | round | square */
  opacity: .7;             /* شفافية أخف */
}

/* لو بدك تخفي الشبكة تمامًا */
/* #pmpd-critical .tile-area line{ display:none; } */

/*كود التولتب*/
#pmpd-critical .crit-tip{
  position:absolute;
  pointer-events:none;
  background:rgba(0,0,0,.86);
  color:#fff;
  font: 12px/1.25 var(--pmp-font);
  padding:6px 8px;
  border-radius:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transform: translate(-50%, -100%);
  opacity:0;
  transition: opacity .12s ease;
  z-index: 6;
}
#pmpd-critical .crit-tip .tt-name{ font-weight:800; margin-bottom:2px; }
#pmpd-critical .crit-tip .tt-row b{ font-weight:700; margin-right:4px; }


/* % label at the end of the completed bar phases chart */
#pmpd-phases .bars{ position: relative; }
#pmpd-phases .bar-pct{
  position:absolute;
  /*top:50%; transform:translate(-50%, -50%);*/
  font-weight:800; font-size:16px; color:#000;
  white-space:nowrap; pointer-events:none;
}

/**************************************/
/* ----- Bottlenecks: نسخة مدمجة (compacted) ----- */
/* === Bottlenecks: نسخة ملوّنة ومدمجة === */

/* تصغير عام */
#pmpd-bottlenecks .bn-grid.compact{ gap:8px; padding:6px 8px; }
#pmpd-bottlenecks .bn-grid.compact .bn-card{
  padding:10px 8px; border-radius:8px;
}

#pmpd-bottlenecks .bn-arrow{ width:26px; height:26px; margin:0 auto 4px; }
#pmpd-bottlenecks .bn-task{ font-size:12px; }
#pmpd-bottlenecks .bn-what{ font-size:13px; line-height:1.15; }
#pmpd-bottlenecks .bn-badge{ transform:scale(.8); }
#pmpd-bottlenecks .bn-grid{ gap:6px; padding:4px 6px; }

#pmpd-bottlenecks .bn-grid.compact .bn-why{
  font-size:11.5px; -webkit-line-clamp:2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;
}

/* اجعل السهم يأخذ اللون من color */
#pmpd-bottlenecks .bn-arrow{ color:#9aa8a0; display:block; }
#pmpd-bottlenecks .bn-arrow polygon{ fill:currentColor; }

/* ألوان الشدّة (تظل أعلى أولوية) */
#pmpd-bottlenecks .bn-card.sev-red   .bn-arrow{ color: var(--pmp-accent) !important; }
#pmpd-bottlenecks .bn-card.sev-amber .bn-arrow{ color:#d99f2b !important; }

/* لوحة ألوان ناعمة افتراضيًا (لو ما في sev-red/amber) */
#pmpd-bottlenecks .bn-card:not(.sev-red):not(.sev-amber):nth-child(1) .bn-arrow{ color:#5aa6b5; } /* teal */
#pmpd-bottlenecks .bn-card:not(.sev-red):not(.sev-amber):nth-child(2) .bn-arrow{ color:#9c7bd1; } /* purple */
#pmpd-bottlenecks .bn-card:not(.sev-red):not(.sev-amber):nth-child(3) .bn-arrow{ color:#e68a6d; } /* coral */

/* اجعل البلاطة نفسها شبكة: سطر عنوان + سطر يمتلئ بالسكّرول */
#pmpd-bottlenecks.pmpd-tile{
  display: grid;
  grid-template-rows: auto 1fr;
}

/* الحاوية القابلة للتمرير */
#pmpd-bottlenecks .bn-scroll{
  overflow-y: auto;
  overflow-x: auto;
  /* مساحة صغيرة أسفل حتى ما يتقصّ آخر كرت */
  padding-bottom: 6px;
}

/* الشبكة داخل السكّرول تبقى كما هي (مع نسخة compact إن أردت) */
#pmpd-bottlenecks .bn-grid{ min-height: 0; } /* مهمّة مع grid لتسمح بالسكّرول */

/* خلي البلاطة صفّين: عنوان + مساحة قابلة للتمرير */
#pmpd-bottlenecks.pmpd-tile{
  display:grid;
  grid-template-rows:auto 1fr;
}

/* الحاوية اللي بداخلها الكروت وفيها سكرول */
#pmpd-bottlenecks .bn-scroll{
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;        /* مهم مع الـgrid عشان يسمح بالتمرير */
  padding-bottom:6px;  /* علشان آخر كرت ما يتقصّ */
}

/* (اختياري) لو حسّيت النص ينقص: فكّ الاختصار */
#pmpd-bottlenecks .bn-why{
  -webkit-line-clamp: unset;
  display:block;
  overflow:visible;
  white-space:normal;
}

/* ===== Bottlenecks: list layout (vertical) ===== */
#pmpd-bottlenecks.pmpd-tile{
  display:grid; grid-template-rows:auto 1fr;  /* عنوان + محتوى قابل للتمرير */
}

#pmpd-bottlenecks .bn-scroll{
  overflow-y:auto; overflow-x:hidden; min-height:0; padding-bottom:6px;
}

/* قائمة العناصر */
#pmpd-bottlenecks .bn-list{ display:flex; flex-direction:column; gap:8px; padding:6px 8px; }

/* صف واحد لكل عنق زجاجة */
#pmpd-bottlenecks .bn-item{
  display:grid;
  grid-template-columns: 26px 1fr 36px;   /* سهم | نص | سكّور */
  align-items:center; gap:10px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--pmp-primary);
  border-radius:8px; padding:8px 10px;
}

/* شريط شدّة ملوّن على اليسار */
#pmpd-bottlenecks .bn-item.sev-red   { border-left:4px solid var(--pmp-accent); }
#pmpd-bottlenecks .bn-item.sev-amber{ border-left:4px solid #d99f2b; }
#pmpd-bottlenecks .bn-item.sev-green{ border-left:4px solid #9aa8a0; }

/* السهم */
#pmpd-bottlenecks .bn-arrow{ width:22px; height:22px; display:block; color:#9aa8a0; }
#pmpd-bottlenecks .bn-arrow polygon{ fill:currentColor; }
#pmpd-bottlenecks .sev-amber .bn-arrow{ color:#d99f2b; }
#pmpd-bottlenecks .sev-red   .bn-arrow{ color:var(--pmp-accent); }

/* النصوص (محاذاة يسار وواضحة) */
#pmpd-bottlenecks .bn-text{ text-align:left; }
#pmpd-bottlenecks .bn-phase{ font-weight:900; font-size:13px; line-height:1.15; }
#pmpd-bottlenecks .bn-action{ font-weight:800; font-size:14px; line-height:1.2; }
#pmpd-bottlenecks .bn-why{
  color:#555; font-size:12px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* سطر واحد مقطوع أنيق */
}

/* سكّور على اليمين كبادج */
#pmpd-bottlenecks .bn-score{
  justify-self:end;
  font-size:12px; font-weight:800;
  background:#fff; color:#111; border:1px solid #ddd; border-radius:12px;
  padding:2px 6px; line-height:1; min-width:26px; text-align:center;
}

/* ===== Bottlenecks: تصغير العناوين وتلوينها بالـ primary ===== */

/* عنوان البلاطة */
#pmpd-bottlenecks .bn-title{
  color: #00000f;
  /*var(--pmp-primary);*/
  font-size: 14px;          /* كان أكبر – صغّرناه */
  font-weight: 600;
  text-align: center;
  margin: 2px 0 6px;
}

/* عنوان المرحلة داخل كل صف */
#pmpd-bottlenecks .bn-phase{
  color: var(--pmp-primary); /* يميّز المرحلة بلون البراند */
  font-size: 12.5px;         /* أصغر من قبل */
  line-height: 1.15;
}

/* سطر الإجراء (أصغر شوية عشان التوازن) */
#pmpd-bottlenecks .bn-action{
  font-size: 13px;
  line-height: 1.2;
}

/* سطر الأسباب (تناسق مع الحجم الجديد) */
#pmpd-bottlenecks .bn-why{
  font-size: 11.5px;
  color: var(--pmp-muted);   /* أهدى شوي من الأسود */
}
/* اجعل طبقة الهايلايت خلف المحتوى */
#pmpd-bottlenecks .bn-item{
  position: relative;
  align-items: flex-start;     /* نصوص من أعلى */
  overflow: visible;           /* لا تقص المحتوى داخليًا */
}

#pmpd-bottlenecks .bn-item::after{
  content:"";
  position:absolute; inset:-2px;            /* يغطي الصف كله */
  background: rgba(255,255,255,.12);
  border:1px solid var(--pmp-primary);
  border-radius:8px;
  opacity:0; transition:.15s ease;
  z-index: 0;                                /* ← خلف النص */
}

/* فعّل الهايلايت عند hover أو عند الفتح */
#pmpd-bottlenecks .bn-item:hover::after,
#pmpd-bottlenecks .bn-item.is-open::after{ opacity:1; }

/* كل عناصر الصف فوق طبقة الهايلايت */
#pmpd-bottlenecks .bn-item > *{ position:relative; z-index:1; }

/* اسمح للنص ياخذ عرضه داخل الـ grid */
#pmpd-bottlenecks .bn-text{ min-width:0; }

/* الإجراء يظهر كامل (يلف سطر) */
#pmpd-bottlenecks .bn-action{ white-space:normal; overflow:visible; }

/* الأسباب مختصرة بسطر واحد بشكل افتراضي */
#pmpd-bottlenecks .bn-why{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* عند فتح الصف (بالضغط) اعرض كل التفاصيل */
#pmpd-bottlenecks .bn-item.is-open .bn-why{
  white-space:normal; overflow:visible; text-overflow:unset;
  -webkit-line-clamp:unset; display:block;
}

/* أسباب أوضح */
#pmpd-bottlenecks .bn-why{
  color: var(--pmp-dark);   /* كان muted؛ خلّيه أغمق */
  opacity: .98;
}

/* عند hover أو الفتح خلّيه أوضح أكثر */
#pmpd-bottlenecks .bn-item:hover .bn-why,
#pmpd-bottlenecks .bn-item.is-open .bn-why{
  color:#1a1a1a;
  opacity:1;
}

/* قلّل تأثير تظليل الصف حتى ما يغطي النص */
#pmpd-bottlenecks .bn-item::after{
  background: rgba(255,255,255,.06); /* كانت .12 */
}
#pmpd-bottlenecks .bn-why .bn-metric{
  font-weight:800;
  color: var(--pmp-primary);   /* نفس لون البراند */
}


/* KPI tile layout */
/* ===== KPI tile (clean layout) ===== */
#pmpd-kpi .kpi-head2{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  margin-bottom:4px;
}
#pmpd-kpi .kpi-title{ font-size:14px; font-weight:600;  line-height: 2;}
#pmpd-kpi .kpi-ach{ text-align:right; }
#pmpd-kpi .kpi-ach .big{ font-size:28px; font-weight:900; line-height:1; }
#pmpd-kpi .kpi-ach .sub{ font-size:12px; color:#777; margin-top:2px; }

#pmpd-kpi .kpi-spark2{
  height:44px; border:1px solid var(--pmp-primary);
  border-radius:6px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}

/* body: list on left, chips on right */
#pmpd-kpi .kpi-body2{
  display:grid; grid-template-columns:1.2fr 1fr; gap:10px;
  height:calc(100% - 96px);  /* fits the tile height */
}

#pmpd-kpi .kpi-list dl{ margin:0; }
#pmpd-kpi .kpi-list .row{
  display:grid; grid-template-columns:auto 1fr;
  align-items:baseline; gap:8px; padding:2px 0;
}
#pmpd-kpi .kpi-list dt{
  font-weight:800; font-size:13px;
}
#pmpd-kpi .kpi-list dd{
  margin:0; text-align:right; font-weight:900; font-size:14px;
}

/* chips (2×2) */
#pmpd-kpi .kpi-chips{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
#pmpd-kpi .kpi-chips .chip{
  border:1px solid var(--pmp-primary);
  background:rgba(255,255,255,.06);
  border-radius:8px; padding:6px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
#pmpd-kpi .kpi-chips .k{ font-size:11.5px; color:#555; font-weight:700; text-align:center; }
#pmpd-kpi .kpi-chips .v{ font-size:18px; font-weight:900; line-height:1.1; }


/* Sparkline frame tweaks */
#pmpd-kpi .kpi-spark2{
  height: 50px;
  border:1px solid var(--pmp-primary);
  border-radius:6px;
  background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

/* Compact text + prevent clipping */
#pmpd-kpi .kpi-body2{ 
  grid-template-columns:1.1fr 1fr;
  gap:8px;
  max-height: calc(100% - 96px);
  overflow:auto;           /* show everything if it overflows */
}
#pmpd-kpi .kpi-list dt{ font-size:12.5px; }
#pmpd-kpi .kpi-list dd{ font-size:14px; }

/* Chips tighter a bit */
#pmpd-kpi .kpi-chips .k{ font-size:11px; }
#pmpd-kpi .kpi-chips .v{ font-size:17px; }



/* === tiny help dot + popover === */
.help-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px; border-radius:50%;
  background:var(--pmp-primary); color:#fff; font-size:12px; font-weight:800;
  cursor:pointer; line-height:1; user-select:none;
}
.help-pop{
  position:absolute; z-index:50; max-width:320px;
  background:#111; color:#fff; border-radius:8px; padding:10px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transform:translateY(8px); font-size:12.5px;
}
.help-pop h4{ margin:0 0 6px; font-size:13.5px; }
.help-pop ul{ margin:6px 0 0 18px; }
.help-pop .muted{ color:#ccc; font-size:12px; }
.help-pop .link{ color:#8ec5ff; text-decoration:underline; cursor:pointer; }
.help-pop::after{
  content:""; position:absolute; top:-6px; left:16px; border:6px solid transparent;
  border-bottom-color:#111;
}
.help-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:none; }
.help-modal{ position:fixed; top:8%; left:50%; transform:translateX(-50%);
  width:min(820px, 92vw); max-height:84vh; overflow:auto;
  background:var(--pmp-bg-panel); color:var(--pmp-text);
  border:2px solid var(--pmp-primary); border-radius:8px; padding:14px; z-index:70; display:none;
}
.help-modal h3{ margin-top:0; }
.help-close{ float:right; cursor:pointer; font-weight:900; }
.help-show{ display:block; }

.help-modal details{ border:1px solid var(--pmp-primary); border-radius:8px; padding:8px 10px; background:rgba(255,255,255,.06); margin:8px 0; }
.help-modal summary{ cursor:pointer; outline:none; }
.help-modal code{ background:rgba(0,0,0,.08); padding:0 4px; border-radius:3px; }

.help-pop .link{ display:none !important; }


/* ===== PDF mode tidy-up ===== */
/* PDF-only tuning */
/* ===== Print / PDF mode ===== */
.pmpd-wrap.pdf-mode .pmpd-actions,
.pmpd-wrap.pdf-mode .help-dot,
.pmpd-wrap.pdf-mode .zoom-bar,
.pmpd-wrap.pdf-mode .ms-tip { display:none !important; }

.pmpd-wrap.pdf-mode .pmpd-tile,
.pmpd-wrap.pdf-mode .tile-area,
.pmpd-wrap.pdf-mode .bn-scroll,
.pmpd-wrap.pdf-mode #pmpd-critical .crit-scroll,
.pmpd-wrap.pdf-mode #pmpd-milestone .tile-area,
.pmpd-wrap.pdf-mode #pmpd-phasearea .tile-area {
  overflow: visible !important;
  max-height: none !important;
}

/* while exporting */
.pmpd-wrap.pdf-mode .pmpd-actions,
.pmpd-wrap.pdf-mode .help-dot,
.pmpd-wrap.pdf-mode .ms-tip,
.pmpd-wrap.pdf-mode .crit-tip,
.pmpd-wrap.pdf-mode .zoom-controls,
.pmpd-wrap.pdf-mode .kpi-sparkline .cursor,
.pmpd-wrap.pdf-mode .bn-item .bn-score-badge { display:none !important; }

/* avoid clipping rounded borders/shadows during snapshot */
.pmpd-wrap.pdf-mode .pmpd-tile { overflow: visible !important; }

/* Off-screen snapshot container */
.pdf-snap {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  background: #fff;
}

/* Turn the grid into a free-flow stack inside the clone */
.pdf-snap .pmpd-grid { display: block !important; }
.pdf-snap .pmpd-tile {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin-bottom: 12px;
  break-inside: avoid;
}

/* No scroll caps inside the clone */
.pdf-snap .bn-scroll,
.pdf-snap .tile-area,
.pdf-snap .crit-scroll,
.pdf-snap .kpi-scroll {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Disable sticky + text clamps in the clone */
.pdf-snap .sticky, .pdf-snap .is-sticky, .pdf-snap [style*="position: sticky"] { position: static !important; top: auto !important; }
.pdf-snap .clamp, .pdf-snap .line-clamp, .pdf-snap [style*="-webkit-line-clamp"] { -webkit-line-clamp: unset !important; overflow: visible !important; }

/* === Off-screen clone for PDF (يحافظ على الجريد) === */
.pdf-snap{
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  background: #fff;
}

    /* خليه يضل GRID، لكن خلّي الصفوف تأخذ ارتفاع المحتوى */
    .pdf-snap .pmpd-grid{
    display: grid !important;
    grid-auto-rows: auto !important;     /* أهم سطر */
    align-items: end !important;
    }

/* البلاطات تتمدّد بارتفاع محتواها */
.pdf-snap .pmpd-tile{
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;         /* لا تقص الظلال/المحتوى */
}

/* فكّ أي قص داخل البلاطة (خاصة محتوياتها) */
.pdf-snap .tile-area,
.pdf-snap .bn-scroll,
.pdf-snap .crit-scroll,
.pdf-snap .kpi-scroll{
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* عطّل sticky و line-clamp داخل نسخة اللقطة فقط */
.pdf-snap .sticky,
.pdf-snap .is-sticky,
.pdf-snap [style*="position: sticky"]{ position: static !important; top: auto !important; }

.pdf-snap .clamp,
.pdf-snap .line-clamp,
.pdf-snap [style*="-webkit-line-clamp"]{
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* لو عندك بلاطات متعمدة على ارتفاعات ثابتة بكلاسات (مثال) */
.pdf-snap .h180, .pdf-snap .h220, .pdf-snap .h240{
  height: auto !important;
  min-height: 0 !important;
}
.pdf-snap .pmpd-tile { margin-bottom: 32px !important; }

/* في نسخة التصدير فقط */
.pdf-snap .pmpd-tile,
.pdf-snap .pmpd-tile .tile-area{
  box-sizing: border-box !important;
}
.pdf-snap .pmpd-tile{
  margin-bottom: 12px !important;   /* فراغ ثابت اختياري */
}