/* ============ ملف الإنجاز: «الملف العلاقي» ============
   غلاف أخضر كملف الإنجاز الورقي، وفي أسفله فواصل المعايير: الممتلئ فيه شواهد والفارغ ينقصه شاهد.
   العناوين والأرقام بخط «ريم كوفي» كلصاقات الملفات الرسمية، والمتن بخط التطبيق. */
.pfx { --file: #172C6E; --file-deep: #0F1F52; --file-ink: #F4F6FF; --kufi: "Reem Kufi", "Almarai", system-ui, sans-serif; }
[data-theme="dark"] .pfx { --file: #1A2A57; --file-deep: #121E40; --file-ink: #EEF2FF; }
.pfx-cover { position: relative; background: var(--file); color: var(--file-ink); border-radius: 22px 22px 0 0; padding: 26px 28px 0; overflow: hidden; }
.pfx-cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); pointer-events: none; }
.pfx-cover-top { position: relative; display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; padding-bottom: 22px; }
.pfx-id { max-width: 62ch; }
.pfx-kind { margin: 0 0 4px; font-size: 13.5px; opacity: .8; }
.pfx-title { margin: 0; font-family: var(--kufi); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; letter-spacing: 0; }
.pfx-sub { grid-column: 1 / -1; max-width: 300px; margin: 10px 0 0; font-size: 15px; line-height: 1.9; color: var(--amber); font-weight: 800; }
.pfx-prt { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 2px; vertical-align: middle; font-size: 18px; border-radius: 10px; border: 1.5px solid var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent); cursor: pointer; }
.pfx-prt:hover { background: color-mix(in srgb, var(--amber) 32%, transparent); }
.pfx-prt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pfx-big { color: var(--amber); font-family: var(--kufi); font-weight: 700; font-size: clamp(56px, 7vw, 84px); line-height: .9; }
.pfx-of { font-family: var(--kufi); font-size: 22px; opacity: .85; }
.pfx-cap { grid-column: 1 / -1; font-size: 13.5px; opacity: .85; margin-top: 6px; }
.pfx-cover .pf-info:hover { background: rgba(255,255,255,.18); }
/* الفواصل: ألسنة تبرز من أسفل الغلاف */
.pfx-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px 4px; padding-top: 4px; align-items: flex-end; }
.pfx-tab { flex: 1 1 auto; max-width: 260px; min-width: 0; padding: 9px 14px 8px; border-radius: 10px 10px 0 0; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--file-ink); background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.4); border-bottom: 0; }
.pfx-tab.on { background: var(--surface); color: var(--file); border: 1px solid var(--surface); transform: none; font-weight: 700; }
[data-theme="dark"] .pfx-tab.on { color: var(--ink); }
.pfx-tab:not(.on):hover { background: rgba(255,255,255,.16); }
.pfx-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .pfx-tab.on { animation: pfx-file .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
  @keyframes pfx-file { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
}
/* شريط الأدوات: جسم الملف تحت الغلاف */
.pfx-bar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 18px 18px; padding: 16px 20px 18px; margin-bottom: 22px; }
.pfx-switch { margin: 0; align-self: center; }
.pfx-field { min-width: 210px; margin: 0; }
.pfx-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; flex: 1; min-width: 240px; font-size: 14px; color: var(--muted); }
.pfx-facts b { font-family: var(--kufi); font-size: 20px; color: var(--text); margin-inline-end: 4px; }
/* أوراق المعايير */
.pfx-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .pfx-sheets { grid-template-columns: 1fr; } }
.pfx-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 0 16px 10px; scroll-margin-top: 90px; }
.pfx-sheet.wide { grid-column: 1 / -1; }
.pfx-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 0 10px; margin-bottom: 4px; border-bottom: 2px solid var(--green-soft); }
.pfx-sheet.gap .pfx-head { border-bottom-color: var(--red-soft); }
.pfx-head h3 { margin: 0; font-family: var(--kufi); font-weight: 700; font-size: 18px; line-height: 1.45; }
.pfx-state { flex: none; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.pfx-sheet.gap .pfx-state { background: var(--red-soft); color: var(--red); }
.pfx-row .t1 { font-size: 15px; font-weight: 700; }
.pfx-n { font-family: var(--kufi); font-size: 22px; color: var(--ink); min-width: 2ch; text-align: center; }
[data-theme="dark"] .pfx-n { color: var(--ink); }
.pfx-up { background: color-mix(in srgb, var(--amber-soft) 45%, transparent); border-radius: 10px; }
.pfx-empty { margin: 10px 0 6px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 14px; }
.pfx-flash { animation: pfx-flash 1.6s ease-out; }
@keyframes pfx-flash { 0%, 30% { box-shadow: 0 0 0 4px var(--amber); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pfx .pf-env { margin-top: 18px !important; border-radius: 16px; }
.pfx .pf-env h3 { font-family: var(--kufi); font-size: 18px; }
@media (max-width: 640px) {
  .pfx-cover { padding: 20px 16px 0; border-radius: 18px 18px 0 0; }
  .pfx-cover-top { gap: 14px; }
  .pfx-bar { padding: 14px 14px 16px; }
  .pfx-field { min-width: 0; flex: 1 1 100%; }
  .pfx-sheet { padding: 0 12px 8px; }
}
.pfx-field .pf-info { margin-inline-start: 2px; }
.pfx-lbl { display: flex; align-items: center; gap: 2px; }
@media (max-width: 640px) { .pfx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .pfx-tabs::-webkit-scrollbar { display: none; } .pfx-tab { flex: 0 0 auto; max-width: 70vw; } }
/* الغلاف بطاقة كاملة (بلا حافة مقصوصة)، والألسنة داخله، والشريط بطاقة مستقلة تحته */
.pfx-cover { border-radius: 22px; padding-bottom: 22px; }
.pfx-tab { border-radius: 10px; border-bottom: 1px dashed rgba(255,255,255,.4); }
.pfx-tab.on { border: 1px solid var(--surface); }
.pfx-bar { border-top: 1px solid var(--border); border-radius: 18px; margin-top: 14px; }
@media (max-width: 640px) { .pfx-cover { border-radius: 18px; padding-bottom: 18px; } }

/* المرفقات في السجلات وملف الإنجاز */
.svc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .svc-file { display: inline-flex; gap: 2px; }
.pfx-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pfx-file { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfx-file:hover { background: var(--ink-soft); } .pfx-file:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.pfx-print { margin-inline-start: auto; align-self: center; }

/* اختيار تصميم طباعة ملف الإنجاز */
.prt-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.prt-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.prt-card.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.prt-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.prt-prev { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px; background: var(--s); border: 1px solid var(--border); height: 96px; }
.prt-prev i { display: block; border-radius: 3px; }
.prt-prev .b { height: 16px; background: var(--b); border-inline-end: 4px solid var(--a); } .prt-prev .b.o { background: #fff; border: 2px solid var(--b); }
.prt-prev .t { height: 7px; width: 60%; margin: 2px auto; background: var(--t); }
.prt-prev .l { height: 2px; background: var(--a); } .prt-prev .l.s { width: 70%; }
.prt-prev .g { flex: 1; border: 1.5px solid var(--a); background: #fff; }

/* المستندات الخارجية: شرح وزر «أضف شاهد» */
.ext-doc { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.ext-doc p { margin:0; flex:1; line-height:1.9; font-size:14px; }
.ext-doc .ext-ic { font-size:20px; line-height:1.4; }
.ext-doc .btn { flex:none; align-self:center; }
.pfx-ext { border-inline-start:3px solid var(--amber); }
/* التوقيع الإلكتروني */
.es-pad { display:block; width:100%; max-width:700px; height:auto; aspect-ratio:700/220; background:#fff; border:2px dashed var(--line, #ccc); border-radius:12px; touch-action:none; cursor:crosshair; }
.es-doc .letter { box-shadow:none; margin:0; }

/* ===== غلاف ملف الإنجاز: نقش إسلامي ذهبي، وإطار شهادة، وشريط المعايير ===== */
.pfx-cover { --gold: #F2C230; background: radial-gradient(120% 140% at 0% 0%, #2A4AA8 0%, transparent 55%), linear-gradient(160deg, #1B3486 0%, #14286A 55%, #0F1F55 100%); box-shadow: 0 18px 40px -22px rgba(15,31,85,.55); }
.pfx-cover::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E8B400' stroke-width='1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 36h15M57 36h15M36 0v15M36 57v15'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; opacity: .22;
  -webkit-mask-image: radial-gradient(75% 110% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(75% 110% at 0% 0%, #000 0%, transparent 70%); }
.pfx-cover::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242,194,48,.35); border-radius: 16px; pointer-events: none; }
.pfx-cover-top { padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid rgba(242,194,48,.25); align-items: center; }
.pfx-kind { color: var(--gold); opacity: 1; font-weight: 700; }
.pfx-title { font-size: clamp(30px, 4vw, 46px); text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.pfx-big { position: relative; color: var(--gold); font-size: clamp(64px, 8vw, 96px); text-shadow: 0 4px 24px rgba(242,194,48,.35); }
.pfx-of { position: relative; color: #fff; }
.pfx-segs { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 10px; width: 100%; max-width: 270px; }
.pfx-segs i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.pfx-segs i.on { background: var(--gold); box-shadow: 0 0 8px rgba(242,194,48,.55); }
.pfx-sub { color: var(--gold); max-width: 270px; margin-top: 12px; }
.pfx-prt { border-color: var(--gold); background: var(--gold); color: #14286A; }
.pfx-prt:hover { background: #FFD966; }
.pfx-tab { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.pfx-tab.on { background: #fff; color: #14286A; border-color: #fff; box-shadow: 0 2px 0 var(--gold) inset; }
@media (prefers-reduced-motion: no-preference) {
  .pfx-segs i.on { animation: pfx-seg .35s ease-out both; }
  .pfx-segs i:nth-child(2) { animation-delay: .06s } .pfx-segs i:nth-child(3) { animation-delay: .12s } .pfx-segs i:nth-child(4) { animation-delay: .18s } .pfx-segs i:nth-child(5) { animation-delay: .24s } .pfx-segs i:nth-child(6) { animation-delay: .3s } .pfx-segs i:nth-child(7) { animation-delay: .36s } .pfx-segs i:nth-child(8) { animation-delay: .42s } .pfx-segs i:nth-child(9) { animation-delay: .48s } .pfx-segs i:nth-child(10) { animation-delay: .54s }
  @keyframes pfx-seg { from { transform: scaleX(0); opacity: 0; } }
}
@media (max-width: 640px) { .pfx-cover::after { inset: 6px; border-radius: 13px; } }

/* الخطة التشغيلية: زر تعديل تحت كل بند */
.op-edit { margin: 10px 0 4px; display: flex; justify-content: flex-start; }

/* ملف إنجاز المدير: عناصر الخطة مجمّعة في جداول مرتبة (الحالة، العنصر وشرحه، المصدر) */
.pp { display: grid; gap: 16px; margin-top: 10px; }
.pp-grp h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.pp-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 36%); gap: 12px; align-items: center; padding: 10px 14px; }
.pp-row + .pp-row, .pp-subs { border-top: 1px solid var(--border); }
.pp-st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--green-soft); color: var(--green); }
.pp-row.no .pp-st { background: var(--amber-soft); color: var(--amber); }
.pp-name { font-size: 15px; font-weight: 700; line-height: 1.6; min-width: 0; }
.pp-name .pf-info { margin-inline-start: 4px; }
.pp-name .pf-hint { margin-top: 6px; font-size: 13.5px; font-weight: 400; }
.pp-name .pf-hint p { margin: 0 0 6px; }
.pp-src { font-size: 13px; line-height: 1.6; color: var(--muted); text-decoration: none; text-align: end; }
a.pp-src:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.pp-src:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
/* «📄 عرض الشاهد» بجانب اسم العنصر وشرحه */
.pp-view { font-size: 13px; white-space: nowrap; margin-inline-start: 4px; }
.pp-src.pp-none { color: var(--amber); font-weight: 700; }
.pp-subs { background: var(--surface-2); }
.pp-subs .pp-row { padding-inline-start: 34px; }
.pp-subs .pp-row + .pp-row { border-top-color: color-mix(in srgb, var(--border) 70%, transparent); }
.pp-subs .pp-name { font-size: 14px; }
.pp-subs .pp-st { width: 20px; height: 20px; font-size: 11px; }
@media (max-width: 640px) {
  .pp-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; }
  .pp-src { grid-column: 2; text-align: start; }
  .pp-subs .pp-row { padding-inline-start: 22px; }
}

/* عناصر الخطة في قائمتين متجاورتين */
.pp { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 20px; }
.pp-col { display: grid; gap: 16px; }
.pp .pp-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 0; padding: 9px 12px; }
.pp .pp-src { grid-column: 2; text-align: start; font-size: 12.5px; }
.pp .pp-subs .pp-row { padding-inline-start: 26px; }
@media (max-width: 900px) { .pp { grid-template-columns: 1fr; } }

/* كل قسم من عناصر الخطة قائمة تُفتح وتُغلق */
.pp-grp > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: 15px; }
.pp-grp > summary::-webkit-details-marker { display: none; }
.pp-grp > summary::before { content: "‹"; display: inline-block; width: 14px; text-align: center; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .2s; }
.pp-grp[open] > summary::before { transform: rotate(-90deg); }
.pp-grp > summary .pp-gt { flex: 1; }
.pp-grp > summary:hover { background: var(--surface-2); }
.pp-grp > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pp-grp[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.pp-grp[open] > .pp-list { border-top: 0; border-radius: 0 0 12px 12px; }
.pp-col { gap: 12px; }
@media (prefers-reduced-motion: reduce) { .pp-grp > summary::before { transition: none; } }

/* الجداول لا تتجاوز عرض الصفحة: أزرار الحالة فوق أيقونات الإجراء، والخلايا المزدحمة تتراص */
.rec-acts, .cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rec-acts > .btn, .rec-acts > .badge, .cell-stack > .btn, .cell-stack > .badge, .cell-stack > .st-pill { white-space: nowrap; }
.t td:has(.rec-acts, .cell-stack) { white-space: normal; max-width: none; overflow: visible; }
.rec-acts > .acts > .btn.sm { padding: 6px 10px; font-size: 14px; }
.t-proc th, .t-proc td { padding-inline: 9px; }
.t-proc td:first-child, .t-proc td:first-child .person { white-space: normal; }

/* زر تقرير المعيار والعنصر في ملف الإنجاز */

/* صفحة الشاهد فوق ملف الإنجاز */
.pf-view { max-height: 70vh; overflow: auto; background: #fff; color: #1b1b1b; border-radius: 10px; padding: 10px; }
.pf-view .pfp .pg { break-after: auto; }
/* جداول السجلات: العنوان الطويل يلتف ولا يتداخل مع العمود التالي */
#tbl td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 180px; max-width: 320px; overflow: hidden; }
#tbl td { overflow: hidden; }
#tbl td:has(.rec-acts) { overflow: visible; }

/* تقدّم البرنامج: شريط وعبارة «نُفّذ 6 من 7، باقٍ 1 · باقٍ 82 يومًا» */
.pg-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 0; }
.pg-prog.sm { font-size: 12px; font-weight: 500; color: var(--muted); }
.pg-bar { flex: 0 0 110px; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.pg-prog.sm .pg-bar { flex-basis: 80px; height: 6px; }
.pg-bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
/* شريط تقدّم البرنامج في عناصر الخطة: تحت المصدر في عمود الاسم */
.pp-row > .pg-prog { grid-column: 2; margin: 2px 0 0; }
.pp-row > .pg-prog span { white-space: normal; }
/* جداول السجلات كثيرة الأعمدة: العناوين تلتف والمسافات أضيق */
#tbl th { white-space: normal; line-height: 1.4; }
#tbl th, #tbl td { padding-inline: 8px; }

/* رقم المؤشر الرسمي بجانب عناصر الخطة */
.pf-code { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; margin-inline: 2px; vertical-align: middle; }

/* تاريخ تنفيذ السجل بجانب مرفقه في ملفات الإنجاز */
.pfx-fdate { font-size: 11px; color: var(--muted); font-weight: 400; margin-inline-start: 4px; }

/* جدول أعمال البرنامج: النص يلتف داخل خلاياه فلا يمتد الجدول خارج النافذة */
.rec-t td, .rec-t td * { white-space: normal; }
.rec-t td .pfx-file { max-width: 100%; text-align: start; overflow-wrap: anywhere; }

/* زر «+ شاهد» أسفل كل معيار وبجانب كل عنصر في ملف الإنجاز */
.pfx-addrow { margin-top: 10px; }
.pp-add { padding: 2px 10px; font-size: 12.5px; margin-inline-start: 4px; }

/* «عناصر الخطة» في ملف الإنجاز مفتوحة دائمًا ولا تُطوى */
.pf-plan-fixed > summary { cursor: default; list-style: none; }
.pf-plan-fixed > summary::-webkit-details-marker { display: none; }

/* أزرار رأس المعيار بخط النص العادي لا خط العنوان */
.pfx-head .pf-setup, .pfx-head .pp-view { font-family: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 13px; font-weight: 700; vertical-align: middle; }