/* ═══════════════════════════════════════════════════════════════════
   bars-pro.css — الأشرطة بمعيار إليستريتور

   الفلسفة: الشريط ليس صفّ أزرار، بل «سطح» له إيقاع واحد.
     • ارتفاع موحّد لكل عناصر الشريط (28px) فلا تتراقص الخطوط الأفقية.
     • الزرّ صامت في السكون، يتكشّف عند المرور، يغوص عند الضغط.
     • الحدود تُرسم مرّة على حافّة الشريط لا حول كل زرّ.
     • كل انتقال يمرّ عبر رموز motion-pro.css — سرعة واحدة للتطبيق كلّه.

   يُحمَّل بعد motion-pro.css، فهو الطبقة الأخيرة على الأشرطة.
   لا يغيّر أي id أو class يستعمله JS — تنسيق بحت.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bar-h: 28px;          /* ارتفاع عنصر الشريط الموحّد */
  --bar-r: 6px;           /* نصف قطر زرّ الشريط */
  --bar-gap: 3px;
  --bar-sep: color-mix(in srgb, var(--border) 85%, transparent);
}

/* ═══ ١) نواة زرّ الشريط: صامت → متكشّف → غائص ═══
   كانت الأزرار تحمل خلفية وحدّاً دائمين فتزاحم الكانفس بصرياً.
   الآن الحدّ يظهر عند المرور فقط، والحالة الفعّالة وحدها ملوّنة. */
:where(.st-btn, .canvas-tools .icon-btn, .clr-toolbtn, .clr-swap, .clr-none, .otab-fs, .ver-btn, .tbf-fold, .qbtn) {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bar-r);
  color: var(--text2);
  transition:
    background var(--m-fast) ease,
    border-color var(--m-fast) ease,
    color var(--m-fast) ease,
    transform var(--m-fast) var(--m-out),
    box-shadow var(--m-fast) ease;
}
:where(.st-btn, .canvas-tools .icon-btn, .clr-toolbtn, .clr-swap, .clr-none, .otab-fs, .ver-btn, .tbf-fold, .qbtn):hover {
  background: var(--bg3);
  border-color: var(--border2, #3d444d);
  color: var(--text);
}
:where(.st-btn, .canvas-tools .icon-btn, .clr-toolbtn, .clr-swap, .clr-none, .otab-fs, .ver-btn, .tbf-fold, .qbtn):active {
  transform: translateY(1px) scale(.96);
  background: var(--bg4, var(--bg3));
}
/* الفعّال يبقى ملوّناً بعد رفع الإصبع — لا يعتمد على :hover */
:where(.st-btn, .clr-toolbtn).active,
:where(.st-btn, .clr-toolbtn)[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent-h, var(--accent));
}

/* ═══ ٢) شريط التحويل (shape-toolbar) — الأيقونات بدل الرموز ═══
   بعد ترقية الإيموجي إلى SVG صار المقاس يُضبط من مكان واحد. */
.shape-toolbar {
  gap: var(--bar-gap);
  padding: 4px 10px;
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border-bottom: 1px solid var(--bar-sep);
  align-items: center;
  animation: barSlideIn var(--m-slow) var(--m-out);
}
@keyframes barSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.shape-toolbar .st-btn {
  width: var(--bar-h);
  height: var(--bar-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;                       /* يكتم أي نصّ متبقٍّ خلف الأيقونة */
  padding: 0;
}
.shape-toolbar .st-btn .ti { width: 15px; height: 15px; }
.shape-toolbar .st-btn.st-danger:hover {
  background: color-mix(in srgb, var(--red, #f85149) 18%, transparent);
  border-color: var(--red, #f85149);
  color: var(--red, #f85149);
}
.shape-toolbar .st-label {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .04em;
  margin-inline-end: 4px;
}
/* فاصل شعرة واحدة بارتفاع الزرّ — لا مسافة فارغة مبهمة */
.shape-toolbar .st-sep {
  width: 1px;
  height: 18px;
  background: var(--bar-sep);
  margin: 0 4px;
  flex: 0 0 auto;
}

/* ═══ ٣) شريط خيارات الكانفس ═══ */
.canvas-tools {
  gap: 8px;
  align-items: center;
}
.canvas-tools .icon-btn {
  width: var(--bar-h);
  height: var(--bar-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.canvas-tools .icon-btn .ti { width: 15px; height: 15px; }
/* زرّ «دقيق» يحمل أيقونة + نصّاً: مقاس تلقائي وإيقاع داخلي */
.canvas-tools #btn-precise {
  width: auto;
  gap: 5px;
  padding: 0 9px;
  font-size: 11px;
  color: var(--text2);
}
.canvas-tools label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text2);
  height: var(--bar-h);
  transition: color var(--m-fast) ease;
}
.canvas-tools label:hover { color: var(--text); }

/* ═══ ٤) شريط الألوان — يتنفّس عند المرور ═══ */
.clr-bar {
  transition: padding var(--m-base) var(--m-out);
}
.clr-bar .clr-sw {
  transition: transform var(--m-fast) var(--m-spring), border-color var(--m-fast) ease,
              box-shadow var(--m-fast) ease;
}
.clr-bar .clr-sw:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  z-index: 2;
}
.clr-bar .clr-sw:active { transform: scale(1.15); }
.clr-toolbtn, #clr-swap, #clr-none {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* الحقن داخل color-system.js يأتي بعد هذا الملف في الترتيب، وانتقاؤه
   بصنف واحد يتغلّب على :where عديم الوزن — فنرفع الوزن هنا بصنف الحاوية. */
.clr-bar .clr-swap:hover, .clr-bar .clr-none:hover {
  background: var(--bg3);
  border-radius: var(--bar-r);
}
.clr-bar .clr-swap:active, .clr-bar .clr-none:active { transform: scale(.9); }

/* مؤشّر التعبئة/الحدّ: الظلّ يوحي بالطبقة، والمرور يرفعه */
.clr-ind { transition: transform var(--m-fast) var(--m-out); }
.clr-ind:hover { transform: translateY(-1px); }

/* ═══ ٥) تبويبات الإخراج — الخطّ ينزلق لا يقفز ═══ */
.out-tabs, .dqw-tabs {
  background: linear-gradient(180deg, var(--bg2), var(--bg1));
  border-bottom: 1px solid var(--bar-sep);
}
.otab-fs {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
}
.otab-fs .ti { width: 14px; height: 14px; }

/* ═══ ٦) سهم المجموعة في شريط الأدوات ═══
   كان بلا انتقال ولا اسم: يظهر أوضح عند المرور، ويدور عند الفتح. */
.tr-slot .tr-arrow {
  transition: opacity var(--m-fast) ease, transform var(--m-fast) var(--m-out);
  opacity: .55;
}
.tr-slot:hover .tr-arrow { opacity: 1; }
.tr-slot .tr-arrow[aria-expanded="true"] {
  opacity: 1;
  transform: scale(1.25);
}
.tr-slot .tr-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 3px;
  opacity: 1;
}

/* ═══ ٧) الشريط المتنقّل: مقبض ينبض حين يمكن السحب ═══ */
.tbf-fold {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tbf-grip { cursor: grab; }
.tbf.dragging .tbf-grip, body.mp-dragging .tbf-grip { cursor: grabbing; }
.tbf { transition: box-shadow var(--m-base) ease, opacity var(--m-fast) ease; }
.tbf:hover { box-shadow: var(--m-lift); }

/* ═══ ٨) أزرار سجلّ النسخ ═══ */
.ver-btn { transition-property: background, border-color, color, transform; }
.ver-item { transition: background var(--m-fast) ease; }
.ver-item:hover { background: var(--bg3); }

/* ═══ ٩) الإجراءات السريعة في لوحة الخصائص ═══ */
.props-quick .qbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--bar-h);
}
.props-quick .qbtn .ti { width: 14px; height: 14px; }
.props-quick .qbtn-danger:hover {
  background: color-mix(in srgb, var(--red, #f85149) 16%, transparent);
  border-color: var(--red, #f85149);
  color: var(--red, #f85149);
}

/* ═══ ١٠) الشريط العلوي: ثبات بصريّ عند التمرير ═══ */
header.toolbar {
  box-shadow: 0 1px 0 var(--bar-sep), 0 2px 8px rgba(0, 0, 0, .18);
}

/* ═══ ١١) احترام تفضيل تقليل الحركة ═══ */
@media (prefers-reduced-motion: reduce) {
  .shape-toolbar { animation: none; }
  :where(.st-btn, .canvas-tools .icon-btn, .clr-toolbtn, .otab-fs, .ver-btn, .qbtn):active {
    transform: none;
  }
}