/* ============================================================
   أنماط القوالب — صفحات A4 + الطباعة
   كل قالب له هوية بصرية مستقلة عبر --acc وفئة tpl-*
   ============================================================ */

.cv-page {
  --acc: #1d3a5f;
  --ink: #1e293b;
  --muted: #64748b;
  --hair: #e2e8f0;
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: var(--ink);
  font-family: 'Tajawal', sans-serif;
  font-size: 10.2pt;
  line-height: 1.55;
  box-sizing: border-box;
  padding: 14mm 14mm 12mm;
  position: relative;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cv-page * { box-sizing: border-box; }
.cv-page p, .cv-page ul, .cv-page ol, .cv-page h1, .cv-page h2, .cv-page h3 { margin: 0; }

/* ---------- بلوكات مشتركة ---------- */
.cv-ic { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.12em; }
.cv-ic svg { width: 100%; height: 100%; fill: var(--acc); }

.cv-photo { width: 30mm; height: 30mm; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-photo.sz-md { width: 24mm; height: 24mm; }
.cv-photo-initials { background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16pt; font-weight: 700; }

.b-name { font-size: 23pt; font-weight: 800; line-height: 1.25; color: var(--ink); }
.b-title { font-size: 12pt; color: var(--acc); font-weight: 500; margin-top: 1mm; }
.b-name-en { font-size: 12pt; color: var(--muted); font-weight: 500; }

.b-header { margin-bottom: 5mm; }
.b-header-centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5mm; }
.b-header-split { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
.b-header-band { display: flex; align-items: center; gap: 6mm; background: var(--acc); color: #fff; margin: -14mm -14mm 6mm; padding: 9mm 14mm; }
.b-header-band .b-name, .b-header-band .b-title { color: #fff; }
.b-header-band .b-title { opacity: .85; }
.b-header-band .cv-ic svg { fill: #fff; }
.b-header-band .b-band-text { flex: 1; }
.b-header-band .b-band-contact { max-width: 60mm; font-size: 8.4pt; }

.b-contact { color: var(--muted); font-size: 9pt; }
.b-contact-row { display: flex; flex-wrap: wrap; gap: 2mm 5mm; justify-content: center; margin-top: 2mm; }
.b-contact-list { display: flex; flex-direction: column; gap: 1.6mm; }
.b-contact-item { display: inline-flex; align-items: center; gap: 1.6mm; white-space: nowrap; }
.b-contact.compact { font-size: 8.4pt; }
.b-header-band .b-contact { color: rgba(255,255,255,.92); }

.b-sec { margin-bottom: 5mm; break-inside: avoid-column; }
.b-sec-title {
  font-size: 11.5pt; font-weight: 800; color: var(--acc);
  margin-bottom: 2.5mm; padding-bottom: 1mm;
  border-bottom: 0.5mm solid var(--hair);
}
.b-summary-text { color: var(--ink); }

.b-entry { margin-bottom: 3.5mm; break-inside: avoid; }
.b-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; }
.b-item-title { font-weight: 700; font-size: 10.8pt; }
.b-item-date { color: var(--muted); font-size: 8.6pt; white-space: nowrap; }
.b-item-sub { color: var(--acc); font-size: 9.4pt; font-weight: 500; margin-bottom: 1mm; }
.b-desc { color: var(--ink); }
.b-desc-list { padding-inline-start: 4.5mm; display: flex; flex-direction: column; gap: 0.6mm; }
.b-desc-list li::marker { color: var(--acc); }

/* خط زمني */
.b-timeline { position: relative; padding-inline-start: 5mm; }
.b-timeline::before { content: ''; position: absolute; inset-inline-start: 1.05mm; top: 1.5mm; bottom: 1.5mm; width: 0.5mm; background: var(--hair); }
.b-tl-item { position: relative; margin-bottom: 4mm; break-inside: avoid; }
.b-tl-dot { position: absolute; inset-inline-start: -5mm; top: 1.4mm; width: 2.6mm; height: 2.6mm; border-radius: 50%; background: var(--acc); outline: 0.6mm solid #fff; }

/* ترقيم */
.b-numbered { padding-inline-start: 6mm; display: flex; flex-direction: column; gap: 3.5mm; }
.b-numbered > li { break-inside: avoid; }
.b-numbered > li::marker { color: var(--acc); font-weight: 800; }

/* بطاقات */
.b-cards { display: flex; flex-direction: column; gap: 2.6mm; }
.b-card { border: 0.3mm solid var(--hair); border-inline-start: 1mm solid var(--acc); border-radius: 1.6mm; padding: 2.6mm 3.4mm; break-inside: avoid; }

/* مهارات: أشرطة */
.b-skill-bar { margin-bottom: 2.2mm; break-inside: avoid; }
.b-skill-head { display: flex; justify-content: space-between; font-size: 9pt; margin-bottom: 0.8mm; }
.b-skill-lv { color: var(--muted); font-size: 8pt; }
.b-bar { height: 1.6mm; background: var(--hair); border-radius: 1mm; overflow: hidden; }
.b-bar i { display: block; height: 100%; background: var(--acc); border-radius: 1mm; }

/* مهارات: نقاط */
.b-skill-dots { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8mm; font-size: 9pt; break-inside: avoid; }
.b-dots { display: inline-flex; gap: 1mm; }
.b-dots i { width: 2.2mm; height: 2.2mm; border-radius: 50%; background: var(--hair); }
.b-dots i.on { background: var(--acc); }

/* مهارات: وسوم */
.b-tags { display: flex; flex-wrap: wrap; gap: 1.6mm; }
.b-tag { background: color-mix(in srgb, var(--acc) 10%, #fff); color: var(--acc); border: 0.3mm solid color-mix(in srgb, var(--acc) 30%, #fff); padding: 0.8mm 2.6mm; border-radius: 4mm; font-size: 8.8pt; font-weight: 500; }

/* مهارات: دوائر */
.b-circles { display: flex; flex-wrap: wrap; gap: 4mm; }
.b-circle { text-align: center; width: 20mm; }
.b-ring { width: 16mm; height: 16mm; margin: 0 auto 1.4mm; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--acc) calc(var(--pct) * 1%), var(--hair) 0); }
.b-ring span { width: 12mm; height: 12mm; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 7.6pt; font-weight: 700; color: var(--acc); }
.b-circle-name { font-size: 8.4pt; }

/* لغات */
.b-langs { display: flex; flex-direction: column; gap: 1.6mm; }
.b-lang { display: flex; justify-content: space-between; font-size: 9.4pt; }
.b-lang-lv { color: var(--muted); font-size: 8.6pt; }

/* دورات مضغوطة */
.b-courses-compact { padding-inline-start: 4.5mm; display: flex; flex-direction: column; gap: 1mm; }
.b-courses-compact li::marker { color: var(--acc); }

.b-summary.boxed { background: color-mix(in srgb, var(--acc) 6%, #fff); border-radius: 2mm; padding: 3.5mm 4mm; }
.b-summary.boxed .b-sec-title { border: none; padding: 0; margin-bottom: 1.6mm; }

.b-divider { border: none; border-top: 0.4mm solid var(--hair); margin: 3mm 0; }
.b-space { height: 5mm; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; align-items: start; }

/* تخطيط عمودين عام */
.tpl-cols { display: grid; grid-template-columns: 1fr 56mm; gap: 8mm; align-items: start; }

/* ============================================================
   هويات القوالب
   ============================================================ */

/* 1) نخبة */
.tpl-nokhba { --acc: #1d3a5f; }
.tpl-nokhba .b-name { letter-spacing: 0.3mm; }
.tpl-nokhba .b-header-centered { border-bottom: 0.8mm double var(--acc); padding-bottom: 4mm; margin-bottom: 6mm; }
.tpl-nokhba .b-sec-title { border-bottom: 0.4mm solid var(--acc); }

/* 2) واضح */
.tpl-wadih { --acc: #334155; --hair: #e5e7eb; padding: 16mm; }
.tpl-wadih .b-name { font-weight: 500; font-size: 25pt; }
.tpl-wadih .b-title { color: var(--muted); }
.tpl-wadih .b-sec-title { font-weight: 700; font-size: 10pt; letter-spacing: 0.5mm; text-transform: uppercase; color: var(--ink); border-bottom: 0.26mm solid #cbd5e1; }
.tpl-wadih .b-item-sub { color: var(--muted); }
.tpl-wadih .b-tag { background: #f1f5f9; border-color: #e2e8f0; color: var(--ink); }

/* 3) طيف */
.tpl-taif { --acc: #0d9488; padding-top: 0; }
.tpl-taif .b-sec-title { border: none; padding-inline-start: 3mm; border-inline-start: 1.4mm solid var(--acc); }

/* 4) أمواج — عمود جانبي داكن */
.tpl-amwaj { --acc: #1e3a8a; padding: 0; display: grid; grid-template-columns: 66mm 1fr; }
.tpl-amwaj .tpl-side { background: #14264f; color: #e2e8f0; padding: 12mm 8mm; min-height: 297mm; }
.tpl-amwaj .tpl-side .b-name { color: #fff; font-size: 17pt; margin-top: 4mm; }
.tpl-amwaj .tpl-side .b-title { color: #93c5fd; font-size: 10.5pt; }
.tpl-amwaj .tpl-side .cv-photo { margin: 0 auto; }
.tpl-amwaj .tpl-side .cv-photo-initials { background: #3b82f6; }
.tpl-amwaj .side-sec { margin-top: 6mm; }
.tpl-amwaj .side-sec h3, .tpl-amwaj .tpl-side .b-sec-title { color: #93c5fd; font-size: 10pt; font-weight: 700; border-bottom: 0.3mm solid rgba(255,255,255,.18); padding-bottom: 1mm; margin-bottom: 2.4mm; }
.tpl-amwaj .tpl-side .cv-ic svg { fill: #93c5fd; }
.tpl-amwaj .tpl-side .b-contact { color: #cbd5e1; }
.tpl-amwaj .tpl-side .b-bar { background: rgba(255,255,255,.15); }
.tpl-amwaj .tpl-side .b-bar i { background: #60a5fa; }
.tpl-amwaj .tpl-side .b-dots i { background: rgba(255,255,255,.2); }
.tpl-amwaj .tpl-side .b-dots i.on { background: #60a5fa; }
.tpl-amwaj .tpl-side .b-skill-lv, .tpl-amwaj .tpl-side .b-lang-lv { color: #94a3b8; }
.tpl-amwaj .tpl-side .b-skill-dots, .tpl-amwaj .tpl-side .b-langs { color: #e2e8f0; }
.tpl-amwaj .tpl-main { padding: 12mm 10mm; }

/* 5) سهم */
.tpl-sahm { --acc: #4f46e5; }
.tpl-sahm .b-header-split { border-bottom: 0.6mm solid var(--acc); padding-bottom: 4mm; margin-bottom: 6mm; }
.tpl-sahm .b-sec-title { border: none; display: flex; align-items: center; gap: 2.4mm; }
.tpl-sahm .b-sec-title::after { content: ''; flex: 1; height: 0.3mm; background: var(--hair); }

/* 6) فخامة */
.tpl-fakhamah { --acc: #b45309; padding-top: 0; }
.tpl-fakhamah .b-header-centered { background: #1c1917; color: #fff; margin: 0 -14mm 6mm; padding: 10mm 14mm 8mm; }
.tpl-fakhamah .b-header-centered .b-name { color: #fff; }
.tpl-fakhamah .b-header-centered .b-title { color: #fbbf24; letter-spacing: 0.4mm; }
.tpl-fakhamah .b-header-centered .b-contact { color: rgba(255,255,255,.85); }
.tpl-fakhamah .b-header-centered .cv-ic svg { fill: #fbbf24; }
.tpl-fakhamah .b-sec-title { color: #92400e; border-bottom: 0.3mm solid #fcd34d; }
.tpl-fakhamah .tpl-side { background: #fffbeb; border-radius: 2mm; padding: 4mm; }

/* 7) نسيم */
.tpl-nasim { --acc: #0284c7; padding-top: 0; }
.tpl-nasim .b-header-band { background: linear-gradient(120deg, #0369a1, #0ea5e9); border-radius: 0 0 6mm 6mm; }
.tpl-nasim .b-sec-title { border: none; }
.tpl-nasim .b-sec-title::before { content: '◆ '; font-size: 8pt; vertical-align: 0.3mm; }
.tpl-nasim .b-card { border-radius: 2.6mm; box-shadow: 0 0.4mm 1.2mm rgba(2,132,199,.08); }

/* 8) ركن */
.tpl-rukn { --acc: #059669; padding: 0; display: grid; grid-template-columns: 1fr 62mm; }
.tpl-rukn .tpl-main { padding: 13mm 11mm; }
.tpl-rukn .tpl-side { background: #f0fdf4; padding: 13mm 8mm; min-height: 297mm; border-inline-start: 0.4mm solid #d1fae5; }
.tpl-rukn .tpl-side .cv-photo { margin: 0 auto 5mm; }
.tpl-rukn .side-sec { margin-top: 5mm; }
.tpl-rukn .side-sec h3, .tpl-rukn .tpl-side .b-sec-title { color: #047857; font-size: 10pt; border-bottom: 0.3mm solid #a7f3d0; padding-bottom: 1mm; margin-bottom: 2.4mm; font-weight: 700; }
.tpl-rukn .b-header { border-bottom: 0.8mm solid var(--acc); padding-bottom: 3mm; }

/* 9) مداد */
.tpl-midad { --acc: #9f1239; }
.tpl-midad .b-name { font-size: 30pt; font-weight: 900; line-height: 1.15; }
.tpl-midad .midad-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; border-top: 1mm solid var(--acc); margin-top: 3mm; padding-top: 2.4mm; flex-wrap: wrap; }
.tpl-midad .b-sec-title { border: none; font-size: 10pt; letter-spacing: 0.6mm; }
.tpl-midad .tpl-side { border-inline-start: 0.3mm solid var(--hair); padding-inline-start: 6mm; }

/* 10) شبكة */
.tpl-shabakah { --acc: #475569; font-size: 9.6pt; padding: 12mm; }
.tpl-shabakah .b-name { font-size: 19pt; }
.tpl-shabakah .b-header-split { background: #f8fafc; margin: -12mm -12mm 5mm; padding: 9mm 12mm; border-bottom: 0.5mm solid #e2e8f0; }
.tpl-shabakah .b-sec-title { font-size: 10pt; background: #f1f5f9; padding: 1.4mm 2.6mm; border: none; border-radius: 1.2mm; }

/* 11) ذهب */
.tpl-dhahab { --acc: #a16207; --hair: #f3e8c8; }
.tpl-dhahab .b-header-centered { background: #171412; color: #fff; margin: -14mm -14mm 6mm; padding: 11mm 14mm 9mm; position: relative; }
.tpl-dhahab .b-header-centered::after { content: ''; position: absolute; inset-inline: 14mm; bottom: 4mm; height: 0.3mm; background: linear-gradient(90deg, transparent, #d4af37, transparent); }
.tpl-dhahab .b-header-centered .b-name { color: #f5e6b8; letter-spacing: 0.5mm; }
.tpl-dhahab .b-header-centered .b-title { color: #d4af37; }
.tpl-dhahab .b-header-centered .b-contact { color: rgba(255,255,255,.8); }
.tpl-dhahab .b-header-centered .cv-ic svg { fill: #d4af37; }
.tpl-dhahab .b-sec-title { text-align: center; border: none; display: flex; align-items: center; gap: 3mm; }
.tpl-dhahab .b-sec-title::before, .tpl-dhahab .b-sec-title::after { content: ''; flex: 1; height: 0.26mm; background: #d4af37; opacity: .5; }
.tpl-dhahab .b-circles { justify-content: center; }

/* 12) بنيان */
.tpl-bunyan { --acc: #d97706; padding-top: 0; }
.tpl-bunyan .b-header-band { background: #292524; }
.tpl-bunyan .b-header-band .b-title { color: #fbbf24; opacity: 1; }
.tpl-bunyan .b-sec-title { display: inline-block; background: var(--acc); color: #fff; border: none; padding: 1mm 3.5mm; border-radius: 1.2mm 1.2mm 1.2mm 0; font-size: 10.4pt; }
.tpl-bunyan .b-card { background: #fffbeb; border-color: #fde68a; }

/* ============================================================
   القوالب الهجينة
   ============================================================ */

/* 13) مرآة */
.tpl-mirat { --acc: #7c3aed; padding: 12mm; font-size: 9pt; }
.tpl-mirat .b-name { font-size: 17pt; }
.tpl-mirat .b-name-en { font-size: 13pt; color: var(--acc); font-weight: 700; }
.tpl-mirat .b-header-centered { margin-bottom: 4mm; border-bottom: 0.6mm solid var(--acc); padding-bottom: 3mm; }
.mirat-grid { display: grid; grid-template-columns: 1fr 0.4mm 1fr; gap: 0 5mm; align-items: start; }
.mirat-sep { background: var(--hair); height: 100%; min-height: 200mm; }
.mirat-lang-tag { display: inline-block; background: color-mix(in srgb, var(--acc) 12%, #fff); color: var(--acc); font-weight: 700; font-size: 8.6pt; padding: 0.8mm 3mm; border-radius: 3mm; margin-bottom: 3mm; }
.tpl-mirat .b-sec-title { font-size: 10pt; }
.tpl-mirat .b-item-title { font-size: 9.6pt; }

/* 14) جسر */
.tpl-jisr { --acc: #0f766e; }
.jisr-title { display: flex; justify-content: space-between; align-items: baseline; }
.jisr-en { font-size: 9pt; color: var(--muted); font-weight: 500; direction: ltr; }
.jisr-en-block { color: #64748b; font-size: 9pt; margin-top: 0.8mm; text-align: left; }
.jisr-entry { border-inline-start: 0.8mm solid color-mix(in srgb, var(--acc) 30%, #fff); padding-inline-start: 3mm; }
.tpl-jisr .b-name-en { color: var(--acc); }

/* 15) توأم */
.tpl-tawam { --acc: #6d28d9; padding-top: 0; }
.tpl-tawam .b-header-band { background: linear-gradient(120deg, #4c1d95, #7c3aed); }
.tawam-ribbon { position: absolute; top: 0; inset-inline-end: 14mm; background: #fbbf24; color: #451a03; font-size: 7.6pt; font-weight: 700; padding: 1mm 3mm; border-radius: 0 0 1.6mm 1.6mm; z-index: 2; }

/* ============================================================
   قالب الاستوديو (لوحتي)
   ============================================================ */
.tpl-canvas { padding: 12mm; }
.tpl-canvas.has-sidebar { display: grid; gap: 7mm; padding: 0; }
.tpl-canvas.has-sidebar .canvas-main { padding: 12mm 0 12mm; }
.tpl-canvas.has-sidebar[dir="rtl"] .canvas-main { padding-left: 12mm; }
.tpl-canvas.has-sidebar[dir="ltr"] .canvas-main { padding-right: 12mm; }
.tpl-canvas.has-sidebar .canvas-side { background: color-mix(in srgb, var(--acc) 7%, #fff); padding: 12mm 7mm; min-height: 297mm; }
.tpl-canvas .b-header-band { margin: 0 0 5mm; border-radius: 2mm; padding: 7mm 8mm; }
.tpl-canvas.has-sidebar .b-header-band { margin-top: 12mm; }

/* ============================================================
   الطباعة — A4 / PDF
   ============================================================ */
@page { size: A4; margin: 0; }

@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body * { visibility: visible; }
  .cv-page {
    width: 210mm;
    min-height: 296mm;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }
  .cv-page:last-child { page-break-after: auto; break-after: auto; }
  .no-print { display: none !important; }
}