/* ════════════════════════════════════════════════════════════════════════════
   CLONE STUDIO — أنماط استوديو الاستنساخ  (2026-06-21)
   ────────────────────────────────────────────────────────────────────────────
   🟣 [استوديو الاستنساخ 2026-06-21]
   طبقة معزولة بالكامل (كل القواعد تحت #cloneStudioModal) — لا تلمس أي متغيّر
   أساسي ولا أي مكوّن آخر. تُحمَّل أخيراً ضمن وسوم <link> فتعلو دون !important.
   تعيد استخدام متغيّرات الثيم فقط (تتكيّف غامق/فاتح تلقائياً). RTL، أهداف لمس
   ≥44px، صفر اعتماد hover. احذف الملف + <link> = إزالة نظيفة.
   ════════════════════════════════════════════════════════════════════════════ */

#cloneStudioModal { padding: 16px; }

#cloneStudioModal .cln-box {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 760px; max-height: 90vh; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: translateY(16px) scale(.97); transition: transform .2s ease;
}
#cloneStudioModal.active .cln-box { transform: translateY(0) scale(1); }

/* ── الرأس ── */
#cloneStudioModal .cln-head {
  position: sticky; top: 0; z-index: 2; background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px; display: flex; align-items: flex-start; gap: 10px;
}
#cloneStudioModal .cln-head-main { flex: 1 1 auto; min-width: 0; }
#cloneStudioModal .cln-head h4 { margin: 0; color: var(--primary); font-size: 1.05rem; }
#cloneStudioModal .cln-sub { font-size: .76rem; color: var(--muted); margin-top: 3px; }
#cloneStudioModal .cln-close {
  margin-inline-start: auto; background: var(--card2); border: none; color: var(--text);
  width: 40px; height: 40px; min-width: 40px; border-radius: 10px; cursor: pointer;
  font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
}

/* ── الجسم ── */
#cloneStudioModal .cln-body { padding: 14px 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#cloneStudioModal .cln-dim { color: var(--muted); font-size: .8rem; }

/* ── شارة «نفس الملف» + رأس المصدر ── */
#cloneStudioModal .cln-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700;
  color: var(--primary); background: rgba(0,180,216,.10); border: 1px solid var(--primary);
  border-radius: 10px; padding: 7px 12px; margin-bottom: 12px;
}
#cloneStudioModal .cln-src { margin-bottom: 16px; }
#cloneStudioModal .cln-src-one { display: flex; gap: 12px; align-items: center; }
#cloneStudioModal .cln-src-thumb {
  width: 112px; height: 63px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: var(--card2); border: 1px solid var(--border);
}
#cloneStudioModal .cln-src-thumb img { width: 100%; height: 100%; object-fit: cover; }
#cloneStudioModal .cln-src-meta { min-width: 0; }
#cloneStudioModal .cln-src-title { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 3px; word-break: break-word; }
#cloneStudioModal .cln-src-count { font-size: .92rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
#cloneStudioModal .cln-src-strip { display: flex; flex-wrap: wrap; gap: 6px; }
#cloneStudioModal .cln-src-mini {
  width: 64px; height: 40px; border-radius: 7px; overflow: hidden;
  background: var(--card2); border: 1px solid var(--border);
}
#cloneStudioModal .cln-src-mini img { width: 100%; height: 100%; object-fit: cover; }
#cloneStudioModal .cln-fixed {
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: .88rem; color: var(--text);
}
#cloneStudioModal .cln-fixed b { color: var(--primary); }

/* ── الأقسام ── */
#cloneStudioModal .cln-section { margin-bottom: 18px; }
#cloneStudioModal .cln-section > h5 { font-size: .9rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
#cloneStudioModal .cln-selcount { margin-top: 8px; }

/* ── منتقي القوائم (الوجهات) ── */
#cloneStudioModal .cln-search { margin-bottom: 8px; min-height: 44px; }
#cloneStudioModal .cln-targets {
  max-height: 230px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; background: var(--card2);
}
#cloneStudioModal .cln-target {
  display: flex; align-items: center; gap: 9px; padding: 9px 8px; min-height: 44px;
  font-size: .87rem; color: var(--text); cursor: pointer; border-radius: 8px;
}
#cloneStudioModal .cln-target:not(:last-child) { border-bottom: 1px solid var(--border); }
#cloneStudioModal .cln-target input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
#cloneStudioModal .cln-target-name { flex: 1 1 auto; min-width: 0; }
#cloneStudioModal .cln-target-hint {
  font-size: .7rem; color: var(--warning); background: rgba(245,158,11,.10);
  border: 1px solid var(--warning); border-radius: 7px; padding: 2px 7px; flex-shrink: 0;
}

/* ── مفتاح سريع/متقدّم ── */
#cloneStudioModal .cln-modes { display: flex; gap: 8px; margin-bottom: 10px; }
#cloneStudioModal .cln-mode-btn {
  flex: 1 1 0; min-height: 44px; border: 1px solid var(--border); background: var(--card2);
  color: var(--text2); border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
#cloneStudioModal .cln-mode-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(0,180,216,.08); }
#cloneStudioModal .cln-quick-note { line-height: 1.6; }

/* ── الوضع المتقدّم ── */
#cloneStudioModal .cln-adv { display: flex; flex-direction: column; gap: 10px; }
#cloneStudioModal .cln-adv-row { border: 1px solid var(--border); border-radius: 12px; padding: 11px; background: var(--card2); }
#cloneStudioModal .cln-adv-name { font-weight: 700; font-size: .88rem; color: var(--text); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
#cloneStudioModal .cln-adv-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
#cloneStudioModal .cln-adv-grid .a-input { min-height: 44px; }
#cloneStudioModal .cln-lock {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .85rem;
  color: var(--text); cursor: pointer; padding: 0 4px;
}
#cloneStudioModal .cln-lock input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
#cloneStudioModal .cln-adv-thumb { display: flex; align-items: center; gap: 10px; }
#cloneStudioModal .cln-adv-thumbbtn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 1px dashed var(--border); border-radius: 10px; cursor: pointer; font-size: .82rem;
  color: var(--text2); background: var(--card);
}
#cloneStudioModal .cln-adv-thumbprev {
  width: 72px; height: 41px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
#cloneStudioModal .cln-adv-thumbprev img { width: 100%; height: 100%; object-fit: cover; }

/* ── صف عام (الاستيراد: موضوع + قفل) ── */
#cloneStudioModal .cln-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
#cloneStudioModal .cln-fld { flex: 1 1 200px; min-width: 160px; }
#cloneStudioModal .cln-fld label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
#cloneStudioModal .cln-fld .a-input { min-height: 44px; width: 100%; }

/* ── قائمة الاستيراد (مقاطع القائمة المصدر) ── */
#cloneStudioModal .cln-imp-list {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; background: var(--card2); margin-top: 4px;
}
#cloneStudioModal .cln-imp-item {
  display: flex; align-items: center; gap: 9px; padding: 8px; min-height: 56px;
  border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
#cloneStudioModal .cln-imp-item:not(:last-child) { margin-bottom: 4px; }
#cloneStudioModal .cln-imp-item.sel { border-color: var(--primary); background: rgba(0,180,216,.08); }
#cloneStudioModal .cln-imp-item.added { opacity: .45; cursor: default; }
#cloneStudioModal .cln-imp-cb { width: 22px; text-align: center; flex-shrink: 0; }
#cloneStudioModal .cln-imp-item .cln-imp-cb i.fa-check-square { color: var(--primary); }
#cloneStudioModal .cln-imp-item.added .cln-imp-cb i { color: var(--success); }
#cloneStudioModal .cln-imp-item .cln-imp-cb i.fa-square { color: var(--muted); }
#cloneStudioModal .cln-imp-thumb {
  width: 80px; height: 45px; flex-shrink: 0; border-radius: 7px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
}
#cloneStudioModal .cln-imp-thumb img { width: 100%; height: 100%; object-fit: cover; }
#cloneStudioModal .cln-imp-info { min-width: 0; flex: 1 1 auto; }
#cloneStudioModal .cln-imp-title { font-weight: 600; font-size: .86rem; color: var(--text); word-break: break-word; }
#cloneStudioModal .cln-added { color: var(--success); }

/* ── التذييل + التنفيذ ── */
#cloneStudioModal .cln-foot {
  position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--border);
  padding: 12px 18px; display: flex; align-items: center; gap: 12px;
}
#cloneStudioModal .cln-prog { flex: 1 1 auto; font-size: .82rem; color: var(--muted); min-width: 0; }
#cloneStudioModal .cln-exec { min-height: 46px; min-width: 180px; }
#cloneStudioModal .cln-exec:disabled { opacity: .5; cursor: not-allowed; }

/* ── شاشات واسعة: شبكة المتقدّم صفّان ── */
@media (min-width: 720px) {
  #cloneStudioModal .cln-adv-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title topic" "lock thumb";
    align-items: center;
  }
  #cloneStudioModal .cln-adv-title { grid-area: title; }
  #cloneStudioModal .cln-adv-topic { grid-area: topic; }
  #cloneStudioModal .cln-adv-lock { grid-area: lock; }
  #cloneStudioModal .cln-adv-thumb { grid-area: thumb; }
}

/* ── جوال: ملء الشاشة ── */
@media (max-width: 640px) {
  #cloneStudioModal { padding: 0; }
  #cloneStudioModal .cln-box {
    max-width: 100%; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: none;
  }
  #cloneStudioModal .cln-exec { min-width: 140px; }
  #cloneStudioModal .cln-src-thumb { width: 96px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  #cloneStudioModal .cln-box { transition: none; }
}

/* ── تحسين سطح المكتب فقط (لا يطال اللمس، فلا حالة hover عالقة) ── */
@media (hover: hover) {
  #cloneStudioModal .cln-close:hover { color: var(--primary); }
  #cloneStudioModal .cln-mode-btn:not(.active):hover { color: var(--text); }
  #cloneStudioModal .cln-target:hover { background: rgba(0,180,216,.05); }
  #cloneStudioModal .cln-imp-item:not(.added):hover { background: rgba(0,180,216,.05); }
}