/* ==========================================================================
   صانع السيرة الذاتية — تنسيق ورقة السيرة (A4) والقوالب الثلاثة
   ورقة الطباعة لها مقاساتها الخاصة بالنقطة (pt) لتطابق الطباعة الحقيقية.
   اللون الأساسي يأتي من المتغير --cv (يتغير من لوحة التصميم).
   ========================================================================== */

@page { size: A4; margin: 0; }

.cv {
  --cv: #1e3a5f;
  --cv-ink: var(--c-text, #1f2937);
  --cv-muted: #6b7280;
  --cv-line: #e5e7eb;
  --page-h: 297mm;
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: var(--cv-ink);
  font-family: var(--f-body, "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif);
  font-size: calc(9.6pt * var(--fs, 1));
  font-weight: var(--b-weight, 400);
  line-height: 1.6;
  position: relative;
  overflow-wrap: anywhere;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cv * { box-sizing: border-box; }
.cv p { margin: 0; }
.cv ul { margin: 0; padding: 0; list-style: none; }
.cv .ltr-text { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* مكونات مشتركة */
.cv-entry { break-inside: avoid; page-break-inside: avoid; }
.cv-entry + .cv-entry { margin-top: 3.2mm; }
.cv-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm; }
.cv-entry-title { font-weight: 700; font-size: calc(10.4pt * var(--fs, 1)); color: var(--c-text, #111827); }
.cv-entry-date { flex: none; font-size: calc(8.6pt * var(--fs, 1)); color: var(--cv-muted); white-space: nowrap; }
.cv-entry-sub { color: var(--cv); font-weight: 600; font-size: calc(9.4pt * var(--fs, 1)); }
.cv-entry-note { color: var(--cv-muted); font-size: calc(8.8pt * var(--fs, 1)); }
.cv-bullets { margin-top: 1.2mm !important; }
.cv-bullets li { position: relative; padding-inline-start: 4mm; margin-bottom: .6mm; }
.cv-bullets li::before {
  content: ""; position: absolute; inset-inline-start: .6mm; top: .62em;
  width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--cv);
}
.cv-section { break-inside: auto; }
.cv-section-title { break-after: avoid; page-break-after: avoid; }
.cv-summary { color: var(--c-text, #374151); text-align: justify; }
/* خط العناوين (اختياري من «الخطوط والألوان») */
.cv .cv-name { font-family: var(--n-font, inherit); }
.cv .cv-role { font-family: var(--t-font, inherit); }
.cv .main-title, .cv .classic-title, .cv .min-label { font-family: var(--h-font, inherit); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 1.6mm; }
.cv-tag { padding: .6mm 2.6mm; border-radius: 999px; font-size: calc(8.6pt * var(--fs, 1)); font-weight: 500; }
.cv-bar { height: 1.6mm; border-radius: 999px; overflow: hidden; margin-top: .8mm; }
.cv-bar > span { display: block; height: 100%; border-radius: inherit; }
.cv-lvl-dots { display: inline-flex; gap: 1mm; }
.cv-lvl-dots i { width: 2mm; height: 2mm; border-radius: 50%; display: block; }
.cv-photo { border-radius: 50%; object-fit: cover; display: block; }
.cv-placeholder { color: #9ca3af; font-style: italic; }
.cv-contact-list li { display: flex; align-items: flex-start; gap: 2.4mm; margin-bottom: 1.6mm; font-size: calc(8.8pt * var(--fs, 1)); }
.cv-contact-list .ci { width: 4mm; flex: none; text-align: center; padding-top: .3mm; }

/* شريط الطباعة الجانبي (يتكرر في كل صفحة للقالب العصري) */
.cv-print-stripe { display: none; }

/* ==========================================================================
   القالب 1: العصري — شريط جانبي ملون
   ========================================================================== */
.tpl-modern {
  display: grid;
  grid-template-columns: 34% 1fr;
  background: linear-gradient(to right, var(--cv) 0 34%, #fff 34% 100%);
}
.tpl-modern[dir="rtl"] { background: linear-gradient(to left, var(--cv) 0 34%, #fff 34% 100%); }
.tpl-modern .cv-side {
  /* الشريط الجانبي: خط/حجم/لون/سُمك مستقل (--s-*)، وإلا يتبع النصوص */
  --sc: var(--s-color, #fff);
  --ss: var(--s-scale, var(--fs, 1));
  color: var(--sc);
  font-family: var(--s-font, inherit);
  font-weight: var(--s-weight, 400);
  padding: 14mm 7mm 12mm;
  display: flex; flex-direction: column; gap: 6.5mm;
  position: relative; z-index: 1;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tpl-modern .cv-main {
  padding: 14mm 11mm 12mm;
  display: flex; flex-direction: column; gap: 6.5mm;
  position: relative; z-index: 1;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tpl-modern .cv-photo {
  width: 34mm; height: 34mm; margin: 0 auto;
  border: 1.2mm solid rgb(255 255 255 / .9);
}
.tpl-modern .side-title {
  font-size: calc(10.4pt * var(--ss)); font-weight: 700;
  padding-bottom: 1.4mm; margin-bottom: 2.6mm;
  border-bottom: .35mm solid color-mix(in srgb, var(--sc) 45%, transparent);
}
.tpl-modern .cv-contact-list li { color: var(--sc); font-size: calc(8.8pt * var(--ss)); }
.tpl-modern .cv-contact-list .ci { color: var(--sc); opacity: .85; }
.tpl-modern .side-skill + .side-skill { margin-top: 2mm; }
.tpl-modern .side-skill-name { font-size: calc(9pt * var(--ss)); }
.tpl-modern .cv-bar { background: color-mix(in srgb, var(--sc) 25%, transparent); }
.tpl-modern .cv-bar > span { background: var(--sc); }
.tpl-modern .cv-tag { background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); border: .25mm solid color-mix(in srgb, var(--sc) 35%, transparent); font-size: calc(8.6pt * var(--ss)); }
.tpl-modern .side-lang { display: flex; justify-content: space-between; align-items: center; gap: 2mm; font-size: calc(9pt * var(--ss)); }
.tpl-modern .side-lang + .side-lang { margin-top: 1.8mm; }
.tpl-modern .side-lang small { display: block; font-size: calc(8pt * var(--ss)); opacity: .8; }
.tpl-modern .cv-lvl-dots i { background: color-mix(in srgb, var(--sc) 30%, transparent); }
.tpl-modern .cv-lvl-dots i.on { background: var(--sc); }
.tpl-modern .cv-name { font-size: var(--n-size, 23pt); font-weight: var(--n-weight, 700); line-height: 1.2; color: var(--n-color, var(--cv)); margin: 0; }
.tpl-modern .cv-role { font-size: var(--t-size, 12pt); color: var(--t-color, var(--cv-muted)); font-weight: var(--t-weight, 500); margin-top: 1mm; }
.tpl-modern .head-block { padding-bottom: 4mm; border-bottom: .5mm solid var(--cv-line); }
.tpl-modern .main-title {
  display: flex; align-items: center; gap: 2.6mm;
  font-size: var(--h-size, 12.2pt); font-weight: var(--h-weight, 700); color: var(--h-color, var(--cv));
  margin: 0 0 3mm;
}
.tpl-modern .main-title .ti {
  width: 7mm; height: 7mm; border-radius: 1.8mm; flex: none;
  display: grid; place-items: center;
  background: var(--h-color, var(--cv)); color: #fff; font-size: calc(8.5pt * var(--fs, 1));
}
.tpl-modern .main-title::after { content: ""; flex: 1; height: .3mm; background: var(--cv-line); }
.tpl-modern .cv-main .cv-entry { padding-inline-start: 3.4mm; border-inline-start: .5mm solid var(--cv-line); }

/* ==========================================================================
   القالب 2: التقليدي الأنيق — عمود واحد بخط نسخ ورأس متوسط
   ========================================================================== */
.tpl-classic {
  padding: 15mm 17mm 13mm;
  font-family: var(--f-body, "Noto Naskh Arabic", "Noto Serif", Georgia, "Times New Roman", serif);
  font-size: calc(10pt * var(--fs, 1));
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tpl-classic[dir="ltr"] { font-family: var(--f-body, "Noto Serif", Georgia, "Times New Roman", serif); }
.tpl-classic .classic-head { text-align: center; padding-bottom: 4mm; }
.tpl-classic .cv-photo { width: 28mm; height: 28mm; margin: 0 auto 3mm; border: .6mm solid var(--cv); padding: .8mm; }
.tpl-classic .cv-name { font-size: var(--n-size, 24pt); font-weight: var(--n-weight, 700); color: var(--n-color, #111827); margin: 0; line-height: 1.25; }
.tpl-classic .cv-role { font-size: var(--t-size, 12pt); color: var(--t-color, var(--cv)); margin-top: 1mm; font-weight: var(--t-weight, 600); }
.tpl-classic .classic-contacts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1mm 5mm;
  margin-top: 2.6mm; font-size: calc(8.8pt * var(--fs, 1)); color: #4b5563;
}
.tpl-classic .classic-contacts span { display: inline-flex; align-items: center; gap: 1.6mm; }
.tpl-classic .classic-contacts i { color: var(--cv); }
.tpl-classic .classic-rule { height: 1.6mm; border-top: .6mm solid var(--cv); border-bottom: .25mm solid var(--cv); margin-bottom: 5mm; }
.tpl-classic .cv-section + .cv-section { margin-top: 5mm; }
.tpl-classic .classic-title {
  font-size: var(--h-size, 12.4pt); font-weight: var(--h-weight, 700); color: var(--h-color, var(--cv));
  margin: 0 0 2.6mm; padding-bottom: 1mm;
  border-bottom: .3mm solid #d1d5db;
}
.tpl-classic[dir="ltr"] .classic-title { text-transform: uppercase; letter-spacing: .08em; font-size: var(--h-size, 11.4pt); }
.tpl-classic .cv-entry-sub { font-style: italic; }
.tpl-classic[dir="rtl"] .cv-entry-sub { font-style: normal; }
.tpl-classic .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 10mm; }
.tpl-classic .classic-skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4mm 8mm; }
.tpl-classic .classic-skill { display: flex; justify-content: space-between; align-items: center; gap: 3mm; }
.tpl-classic .cv-lvl-dots i { background: #e5e7eb; }
.tpl-classic .cv-lvl-dots i.on { background: var(--cv); }
.tpl-classic .cv-tag { border: .3mm solid var(--cv); color: var(--cv); }

/* ==========================================================================
   القالب 3: البسيط النظيف — عناوين جانبية رفيعة ومساحات بيضاء
   ========================================================================== */
.tpl-minimal {
  padding: 16mm 16mm 13mm;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tpl-minimal .min-head { display: flex; align-items: center; gap: 6mm; padding-bottom: 6mm; }
.tpl-minimal .cv-photo { width: 26mm; height: 26mm; border-radius: 4mm; flex: none; }
.tpl-minimal .cv-name { font-size: var(--n-size, 26pt); font-weight: var(--n-weight, 300); line-height: 1.15; margin: 0; color: var(--n-color, #111827); }
.tpl-minimal .cv-name b { font-weight: var(--n-weight, 700); }
.tpl-minimal .cv-role { font-size: var(--t-size, 11.6pt); color: var(--t-color, var(--cv)); font-weight: var(--t-weight, 600); margin-top: 1.4mm; }
.tpl-minimal .min-contacts { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2.4mm; font-size: calc(8.6pt * var(--fs, 1)); color: var(--cv-muted); }
.tpl-minimal .min-contacts span { display: inline-flex; align-items: center; gap: 1.6mm; }
.tpl-minimal .min-row {
  display: grid; grid-template-columns: 34mm 1fr; gap: 6mm;
  padding: 4.4mm 0; border-top: .3mm solid var(--cv-line);
}
.tpl-minimal .min-label {
  font-size: var(--h-size, 9.4pt); font-weight: var(--h-weight, 700); color: var(--h-color, var(--cv));
  break-after: avoid;
}
.tpl-minimal[dir="ltr"] .min-label { text-transform: uppercase; letter-spacing: .1em; font-size: var(--h-size, 8.6pt); }
.tpl-minimal .cv-tag { background: color-mix(in srgb, var(--cv) 10%, #fff); color: var(--cv); }
.tpl-minimal .min-skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 8mm; }
.tpl-minimal .cv-bar { background: #eef0f3; }
.tpl-minimal .cv-bar > span { background: var(--cv); }
.tpl-minimal .min-langs { display: flex; flex-wrap: wrap; gap: 2mm 8mm; }
.tpl-minimal .min-langs span b { font-weight: 600; }
.tpl-minimal .min-langs span em { color: var(--cv-muted); font-style: normal; }

/* ==========================================================================
   الطباعة — PDF
   ========================================================================== */
@media print {
  .cv { min-height: 0; width: 210mm; }
  /* القالب البسيط: صفوف مرنة بدل الشبكة حتى تنقسم بين الصفحات بدل أن تنتقل كاملة */
  .tpl-minimal .min-row { display: flex; }
  .tpl-minimal .min-row > :first-child { flex: 0 0 34mm; }
  .tpl-minimal .min-row > :last-child { flex: 1; min-width: 0; }
  .tpl-minimal .min-label { break-after: auto; page-break-after: auto; }
  /* في الطباعة يُرسم الشريط الجانبي كعنصر ثابت ليتكرر بكامل ارتفاع كل صفحة */
  .tpl-modern { background: transparent !important; }
  .tpl-modern .cv-print-stripe {
    display: block; position: fixed; top: 0; bottom: 0;
    inset-inline-start: 0; width: 71.4mm;
    background: var(--cv); z-index: 0;
  }
}

/* ==========================================================================
   تحرير الأجزاء من المعاينة (للشاشة فقط — لا يظهر في الطباعة)
   ========================================================================== */
@media screen {
  .cv [data-part] { cursor: pointer; border-radius: 1mm; transition: outline-color .15s; outline: 1.5px dashed transparent; outline-offset: 1.2mm; }
  .cv [data-part]:hover { outline-color: rgb(240 138 36 / .55); }
  .cv.edit-name [data-part="name"], .cv.edit-title [data-part="title"],
  .cv.edit-head [data-part="head"], .cv.edit-body [data-part="body"], .cv.edit-side [data-part="side"] { outline: 1.5px dashed #f08a24; }
}

/* ==========================================================================
   حقوق المنصة: شعار منصة معلم علامة مائية في كل صفحة + سطر الحقوق
   (ثابتة في النسخة المجانية — تظهر في المعاينة وPDF وملف HTML وصفحة المشاركة)
   ========================================================================== */
.cv-brand { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.cv-wm { position: absolute; left: 0; right: 0; height: 297mm; display: flex; align-items: center; justify-content: center; }
.cv-wm img { width: 112mm; height: auto; opacity: .06; display: block; }
.cv-foot {
  position: absolute; bottom: 3mm; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 1.5mm; white-space: nowrap;
  padding: .7mm 3.2mm; border-radius: 999px; background: rgb(255 255 255 / .9);
  border: .2mm solid #e5e7eb; color: #6b7280; line-height: 1.4;
  font: 400 7pt "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
.cv-foot img { width: 3.6mm; height: 3.6mm; display: block; }
@media print {
  .cv-brand { position: static; overflow: visible; }
  .cv-wm { position: fixed; top: 0 !important; left: 0; right: auto; width: 210mm; height: 297mm; z-index: 6; }
  .cv-wm.rep { display: none; }
  .cv-foot { position: fixed; bottom: 3mm; z-index: 6; }
}