/* =====================================================================
   TOPSUPPLIES_CV_EDITOR_FORM_ENHANCE_V1
   طبقة تحسين بصرية غير تدخلية لصفحة "بيانات السيرة" (نموذج الإدخال) فقط.

   النطاق: #editor #form , #editor #wizardNav , #editor #stepper
   لا يمس: #cvPreview, .a4, #export, #styleControlsPanel, #templates
   لا يغيّر أي منطق JS أو أسماء أصناف تعتمد عليها دوال التصدير/الحفظ.
   التراجع الكامل = حذف سطر <link> الواحد الذي يحمّل هذا الملف من index.html.
   ===================================================================== */

/* ---------- 1) تجميع الحقول: كل قسم بصندوق واضح مع تباعد ---------- */
#editor #form > section,
#editor #form > div > section {
  background:#f8fafc !important;
  border:1px solid #e7ecf3 !important;
  border-top:1px solid #e7ecf3 !important;
  border-radius:16px !important;
  padding:16px 16px 18px !important;
  margin-bottom:16px !important;
  box-shadow:0 4px 14px rgba(15,23,42,.035) !important;
}
#editor #form > section:last-child,
#editor #form > div > section:last-child {
  margin-bottom:0 !important;
}

/* عناوين الأقسام: شريط لوني جانبي لتمييز التسلسل الهرمي بصريًا */
#editor #form > section > h3,
#editor #form > section > h4,
#editor #form > div > section > h3,
#editor #form > div > section > h4 {
  position:relative;
  padding-inline-start:14px !important;
  margin-bottom:14px !important;
  color:#0f172a !important;
}
#editor #form > section > h3::before,
#editor #form > section > h4::before,
#editor #form > div > section > h3::before,
#editor #form > div > section > h4::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:2px;
  bottom:2px;
  width:4px;
  border-radius:4px;
  background:#d97706;
}

/* الأقسام الفرعية المتداخلة (خبرات/تعليم داخل قسم رئيسي) تتباعد بوضوح دون صندوق مكرر */
#editor #form section section {
  margin-top:14px !important;
  padding-top:14px !important;
}

/* ---------- 2) الحقول والتسميات ---------- */
#editor #form .label,
#editor #form label {
  color:#334155 !important;
  font-weight:800 !important;
  font-size:13px !important;
  margin-bottom:6px !important;
}
#editor #form .input,
#editor #form input,
#editor #form textarea,
#editor #form select {
  border:1.5px solid #dbe3ee !important;
  border-radius:12px !important;
  min-height:46px !important;
  font-size:14px !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
#editor #form .input:hover,
#editor #form input:hover,
#editor #form textarea:hover,
#editor #form select:hover {
  border-color:#c3cede !important;
}
#editor #form .input:focus,
#editor #form input:focus,
#editor #form textarea:focus,
#editor #form select:focus {
  border-color:#d97706 !important;
  box-shadow:0 0 0 3px rgba(217,119,6,.15) !important;
}

/* قائمة select بمظهر موحد مع سهم مخصص خفيف */
#editor #form select {
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
  padding-inline-end:32px !important;
}

/* تباعد رأسي بين الحقول المتتالية داخل نفس القسم */
#editor #form > section > div + div,
#editor #form > div > section > div + div {
  margin-top:12px;
}

/* ---------- 3) بطاقات العناصر المكررة (خبرة / تعليم / صفوف اللغات والمهارات) ---------- */
#editor #form .dark-panel {
  border-radius:14px !important;
  padding:14px !important;
  margin-bottom:10px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.15) !important;
}
#editor #form .dark-panel:last-child {
  margin-bottom:0 !important;
}
#editor #form .dark-panel .label,
#editor #form .dark-panel label {
  color:#e2e8f0 !important;
}
#editor #form .dark-panel .input,
#editor #form .dark-panel input,
#editor #form .dark-panel textarea {
  background:#ffffff !important;
}

/* صفوف بسيطة متكررة (مهارات/لغات/شهادات) */
#editor #form .flex.gap-2 + .flex.gap-2 {
  margin-top:8px;
}
#editor #form .grid.grid-cols-\[1fr_90px_auto\] + .grid.grid-cols-\[1fr_90px_auto\] {
  margin-top:8px;
}

/* ---------- 4) الأزرار ---------- */
#editor #form .btn {
  min-height:46px !important;
  border-radius:12px !important;
  font-size:14px !important;
}
#editor #form .btn:hover {
  transform:translateY(-1px);
}
#editor #form .btn:active {
  transform:translateY(0);
}

/* أزرار الإضافة (btn-primary تُستخدم حصرًا لعمليات "إضافة" بهذا النموذج) */
#editor #form .btn-primary::before {
  content:"+ ";
  font-weight:900;
}

/* أزرار الحذف داخل النموذج (btn-light هنا تُستخدم فقط للحذف، لا تشمل زر السابق) */
#editor #form .btn-light {
  border:1px solid #e2e8f0 !important;
}
#editor #form .btn-light::before {
  content:"🗑 ";
}

/* أزرار التنقل (السابق/التالي) خارج #form لكن داخل نفس اللوحة */
#editor #wizardNav .btn {
  min-height:50px !important;
  font-size:15px !important;
  font-weight:800 !important;
}
#editor #wizardNav .btn:hover {
  transform:translateY(-1px);
}
#editor #wizardNav .btn-light::before {
  content:"→ ";
}
#editor #wizardNav .btn-amber::after {
  content:" ←";
}

/* المؤشرات (الخطوات أعلى النموذج) تباعد أوضح قليلاً */
#editor #stepper {
  gap:8px !important;
  margin-bottom:18px !important;
}

/* ---------- 5) التجاوب مع الجوال ---------- */
@media (max-width:640px) {
  #editor #form > section,
  #editor #form > div > section {
    padding:14px 12px 16px !important;
    border-radius:14px !important;
    margin-bottom:14px !important;
  }
  #editor #form .label,
  #editor #form label {
    font-size:12.5px !important;
  }
  #editor #form .input,
  #editor #form input,
  #editor #form textarea,
  #editor #form select {
    min-height:48px !important;
    font-size:15px !important;
  }
  #editor #wizardNav .btn {
    min-height:52px !important;
    font-size:15px !important;
  }
  #editor #stepper {
    gap:6px !important;
  }
}