/* =====================================================================
   PORTFOLIO EDIT MAIN — صفحة تعديل البند الرئيسي (/portfolio/record/{id}/edit/main)
   أقسام زجاجية بهوية cmp النحاسية — نفس لغة portfolio-file.css.
   RTL. بلا تغيير منطق: كل الأسماء والـ IDs كما هي.
   ===================================================================== */
.pf-em {
  --pe-brand:      #D46E2A;
  --pe-brand-rgb:  212, 110, 42;
  --pe-brand-hover:#B85B21;
  --pe-ink:        #22303f;
  --pe-ink-2:      #5c6b7a;
  --pe-border:     rgba(34, 48, 63, .10);
  --pe-surface:    #ffffff;
  --pe-glass:      rgba(255, 255, 255, .88);
  --pe-glass-2:    rgba(255, 255, 255, .68);
  --pe-glass-border: rgba(255, 255, 255, .65);
  --pe-shadow:     rgba(34, 48, 63, .06);
  --pe-ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ---------- قسم زجاجي ---------- */
.pf-em .pf-em-section {
  border-radius: 16px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  background: linear-gradient(160deg, var(--pe-glass), var(--pe-glass-2));
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--pe-glass-border);
  box-shadow: 0 10px 28px var(--pe-shadow), inset 0 1px 0 var(--pe-glass-border);
}
.pf-em .pf-em-title {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; color: var(--pe-ink); font-size: 1rem;
  margin-bottom: .9rem; padding-bottom: .6rem;
  border-bottom: 1px dashed rgba(var(--pe-brand-rgb), .25);
}
.pf-em .pf-em-title i { color: var(--pe-brand); font-size: 1.2rem; }

/* ---------- الشريط العلوي اللاصق ---------- */
.pf-em .pf-em-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border-radius: 14px; padding: .55rem .8rem; margin-bottom: 1rem;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  box-shadow: 0 8px 22px var(--pe-shadow);
}
.pf-em .pf-em-back {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: .9rem; color: var(--pe-ink-2);
  border: 1px solid var(--pe-border); background: var(--pe-surface);
  transition: all .2s var(--pe-ease);
}
.pf-em .pf-em-back:hover {
  color: var(--pe-brand-hover);
  border-color: rgba(var(--pe-brand-rgb), .35);
  background: rgba(var(--pe-brand-rgb), .06);
}
.pf-em .pf-em-back i { font-size: 1.05rem; }

/* زر الحفظ بهوية نحاسية بدل الأخضر الافتراضي */
.pf-em .btnSubmitFeedback.btn-success {
  background: linear-gradient(135deg, #E8A05F, var(--pe-brand) 55%, var(--pe-brand-hover));
  border: 0; box-shadow: 0 5px 14px rgba(var(--pe-brand-rgb), .25);
  transition: transform .2s var(--pe-ease), box-shadow .2s ease;
}
.pf-em .btnSubmitFeedback.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(var(--pe-brand-rgb), .35);
}

/* ---------- اسم البند ---------- */
.pf-em #text-content { font-size: 1.05rem; color: var(--pe-ink); line-height: 1.7; }
.pf-em #textarea-edit { border-radius: 10px 0 0 10px; }

/* ---------- نسبة الاكتمال ---------- */
.pf-em .pf-em-progress {
  height: 12px; border-radius: 999px;
  background: rgba(var(--pe-brand-rgb), .09);
}
.pf-em .pf-em-progress .progress-bar { border-radius: 999px; transition: width .3s var(--pe-ease); }
.pf-em #completion_percentage { border-radius: 0 10px 10px 0; }
.pf-em .input-group-text { font-weight: 700; color: var(--pe-ink-2); }

/* ---------------------------------------------------------------------
   الوضع الداكن — قلب التوكنات فقط
   --------------------------------------------------------------------- */
html.dark-style .pf-em {
  --pe-ink:        #E6E8EC;
  --pe-ink-2:      #9AA0AB;
  --pe-border:     rgba(255, 255, 255, .10);
  --pe-surface:    #1C1F26;
  --pe-glass:      rgba(255, 255, 255, .05);
  --pe-glass-2:    rgba(255, 255, 255, .025);
  --pe-glass-border: rgba(255, 255, 255, .08);
  --pe-shadow:     rgba(0, 0, 0, .45);
}
html.dark-style .pf-em .pf-em-back:hover { color: #F0A874; }