/* ============================================================
   الاختصارات المثبتة: دبوس بجوار كل عنصر في القائمة الجانبية،
   وشريط في الهيدر تُغرس فيه الاختصارات وتُرتَّب بالسحب.
   الألوان من رموز الثيم فتعمل نهارًا وليلًا.
   ============================================================ */

/* ---------- الدبوس في القائمة ---------- */
.nav-item { position: relative; }
.nav-pin {
  position: absolute; inset-inline-end: 5px; top: 50%; margin-top: -13px; z-index: 1;
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-muted);
  cursor: pointer; opacity: 0; transition: opacity .18s, background .18s, color .18s, box-shadow .18s;
}
.nav-pin svg {
  width: 15px; height: 15px; fill: transparent; pointer-events: none;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), fill .2s;
}
.nav-item:hover .nav-pin, .nav-pin:focus-visible { opacity: 1; }
.nav-pin:hover { background: var(--surface-1); color: var(--chip, var(--accent)); box-shadow: var(--shadow-sm); }
.nav-pin:hover svg { transform: rotate(18deg) translateY(-2px); }
.nav-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* حين يُغرس: يستقيم الدبوس ويمتلئ بلون العنصر، وتحته ظل ثقبه في الورق */
.nav-item.is-pinned .nav-pin { opacity: 1; color: var(--chip, var(--accent)); }
.nav-item.is-pinned .nav-pin svg { transform: none; fill: currentColor; fill-opacity: .9; }
.nav-item.is-pinned .nav-pin::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 8px; height: 2px; margin-left: -4px;
  border-radius: 50%; background: currentColor; opacity: .35;
}
.nav-item.is-pinned .nav-pin:hover svg { transform: rotate(-12deg) translateY(-2px); }
:root[data-theme] .nav-item.is-pinned .nav-link { padding-inline-end: 36px; }
/* العنصر المثبت مألوف لصاحبه؛ لا حاجة لشارة «جديد» بجوار دبوسه */
.nav-item.is-pinned .nav-link > .nav-new { display: none; }
/* يفسح العنصر غير المثبت مكانًا للدبوس عند المرور بإخفاء شاراته مؤقتًا */
.nav-link > :is(.nav-new, .badge, .tier-badge, .admin-alert-count) { transition: opacity .15s; }
.nav-item:not(.is-pinned):is(:hover, :focus-within) .nav-link > :is(.nav-new, .badge, .tier-badge, .admin-alert-count) { opacity: 0; }

/* الغرس: يهبط الدبوس ويرتد، وتنطلق حلقة وشرارات بلون العنصر */
.nav-pin.pin-drive svg { animation: pin-drive .62s cubic-bezier(.3,1.4,.5,1); }
@keyframes pin-drive {
  0%   { transform: rotate(45deg) translate(0,-10px) scale(1.3); }
  45%  { transform: rotate(-10deg) translateY(2px) scale(.86); }
  70%  { transform: rotate(5deg) translateY(-1px) scale(1.07); }
  100% { transform: none; }
}
.nav-pin.pin-drive::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px solid var(--chip, var(--accent)); animation: pin-ring .6s ease-out forwards;
}
@keyframes pin-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.pin-spark {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%;
  background: var(--chip, var(--accent)); pointer-events: none;
  animation: pin-spark .62s cubic-bezier(.2,.7,.3,1) forwards;
}
.pin-spark:nth-child(even) { width: 3px; height: 3px; background: var(--accent-2); }
@keyframes pin-spark {
  from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  to   { opacity: 0; transform: rotate(var(--a)) translateY(-19px) scale(.3); }
}
/* النزع: يُسحب الدبوس للأعلى ثم يميل جانبًا */
.nav-pin.pin-pull svg { animation: pin-pull .5s cubic-bezier(.3,1.3,.5,1); }
@keyframes pin-pull {
  0%   { transform: none; }
  35%  { transform: rotate(-20deg) translateY(-9px) scale(1.18); }
  100% { transform: rotate(45deg) translateY(-1px); }
}
/* الشريط ممتلئ: الدبوس يهز رأسه رفضًا */
.nav-pin.pin-deny { color: var(--critical); opacity: 1; }
.nav-pin.pin-deny svg { animation: pin-deny .45s; }
@keyframes pin-deny {
  0%, 100% { transform: rotate(45deg); }
  20% { transform: rotate(22deg) translateX(-3px); }
  40% { transform: rotate(66deg) translateX(3px); }
  60% { transform: rotate(30deg) translateX(-2px); }
  80% { transform: rotate(56deg) translateX(2px); }
}
/* «ثبّت اختصاراتك»: تظهر الدبابيس كلها وتتمايل تباعًا */
.sidebar.pin-hunt .nav-pin { opacity: 1; color: var(--chip, var(--accent)); }
.sidebar.pin-hunt .nav-item:not(.is-pinned) .nav-link > :is(.nav-new, .badge, .tier-badge, .admin-alert-count) { opacity: 0; }
.sidebar.pin-hunt .nav-item:not(.is-pinned) .nav-pin svg { animation: pin-hunt .8s ease-in-out calc(var(--i, 0) * 45ms) 2; }
@keyframes pin-hunt {
  0%, 100% { transform: rotate(45deg) translateY(-1px); }
  30% { transform: rotate(10deg) translateY(-4px) scale(1.2); }
  60% { transform: rotate(60deg) translateY(0); }
}

/* ---------- الأيقونة الطائرة إلى الهيدر ---------- */
.pin-ghost {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none; transform-origin: center;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--surface-1); box-shadow: 0 16px 30px -12px var(--chip, var(--accent)), 0 0 0 6px var(--chip-bg, var(--accent-soft));
}
.pin-ghost svg { width: 17px; height: 17px; color: var(--chip, var(--accent)); }

/* ---------- شريط الاختصارات في الهيدر ---------- */
.pinbar { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.pinbar-track {
  display: flex; align-items: center; gap: 7px; list-style: none; margin: 0;
  padding: 9px 10px; min-width: 0; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; border-radius: 15px; transition: background .2s, box-shadow .2s;
}
.pinbar-track::-webkit-scrollbar { display: none; }
/* الشريط يحل محل مسار الصفحة ما دامت فيه اختصارات */
.topbar:has(.pinbar:not(.is-empty)) .breadcrumb { display: none; }
.pin-chip { position: relative; flex: 0 0 auto; }
.pin-chip-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding-inline: 6px 13px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); white-space: nowrap;
  font-weight: 700; font-size: calc(12px * var(--font-scale,1.1));
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s, background .2s;
}
.pin-chip-icon {
  width: 28px; height: 28px; border-radius: 9px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--chip-bg, var(--accent-soft)); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pin-chip-icon svg { width: 16px; height: 16px; color: var(--chip, var(--accent)); }
.pin-chip-link:hover {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--chip) 45%, transparent);
  box-shadow: 0 10px 20px -14px var(--chip); color: var(--text-primary);
}
.pin-chip-link:hover .pin-chip-icon { transform: rotate(-8deg) scale(1.08); }
.pin-chip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-chip-link.active { background: var(--chip-bg); border-color: color-mix(in srgb, var(--chip) 40%, transparent); }
.pin-chip-link.active::after {
  content: ""; position: absolute; bottom: -1px; left: 28%; right: 28%; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--chip);
}
/* رأس الدبوس على ركن كل اختصار؛ يكبر عند المرور ليصير زر النزع */
.pin-chip-off {
  position: absolute; top: -5px; inset-inline-end: -4px; z-index: 2;
  width: 11px; height: 11px; padding: 0; display: grid; place-items: center; overflow: hidden;
  border: 0; border-radius: 50%; cursor: pointer; color: transparent;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 1.6px, transparent 2.4px), var(--chip, var(--accent));
  box-shadow: 0 2px 3px -1px rgba(0,0,0,.35), inset 0 -2px 2px rgba(0,0,0,.18);
  transition: width .22s cubic-bezier(.34,1.56,.64,1), height .22s cubic-bezier(.34,1.56,.64,1), top .22s, inset-inline-end .22s, background .2s, color .2s;
}
.pin-chip-off svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4) rotate(-30deg); transition: opacity .15s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.pin-chip:is(:hover, :focus-within) .pin-chip-off, .pin-chip-off:focus-visible {
  width: 22px; height: 22px; top: -8px; inset-inline-end: -8px;
  background: var(--surface-1); color: var(--text-secondary); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}
.pin-chip:is(:hover, :focus-within) .pin-chip-off svg, .pin-chip-off:focus-visible svg { opacity: 1; transform: none; }
.pin-chip-off:hover { color: var(--fg-critical) !important; box-shadow: var(--shadow-sm), 0 0 0 1px var(--critical) !important; }
.pin-chip-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* عدد التنبيهات غير المقروءة (تذاكر جديدة، مستخدمون جدد…) في الركن المقابل لرأس الدبوس */
:root[data-theme] .pin-chip > .admin-alert-count {
  position: absolute; top: -7px; inset-inline-start: -6px; z-index: 2; pointer-events: none;
  min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--surface-1); border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f97316); color: #fff;
  font-size: calc(10px * var(--font-scale,1.1)); font-weight: 800; line-height: 1;
  box-shadow: 0 4px 10px -3px rgba(239,68,68,.6);
}
.pin-chip.is-mini > .admin-alert-count { inset-inline-start: -7px; }
/* مسافة تفصل رقم كل اختصار عن رأس دبوس جاره */
.pinbar-track:has(.admin-alert-count:not([hidden])) { gap: 14px; }
.pin-chip:is(:hover, :focus-within) { z-index: 3; }

/* الوصول والمغادرة */
.pin-chip.is-arriving { overflow: hidden; }
.pin-chip.is-arriving > * { opacity: 0; }
.pin-chip.is-landing .pin-chip-link { animation: chip-land .6s cubic-bezier(.3,1.5,.5,1); }
.pin-chip.is-landing .pin-chip-off { animation: head-drop .5s cubic-bezier(.3,1.6,.5,1) .08s backwards; }
@keyframes chip-land {
  0%   { transform: scale(.7) translateY(6px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip) 45%, transparent); }
  55%  { transform: scale(1.08) translateY(-2px); }
  100% { transform: none; box-shadow: 0 0 0 12px transparent; }
}
@keyframes head-drop { from { transform: translateY(-14px) scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pin-chip.is-leaving { overflow: hidden; pointer-events: none; }

/* السحب لإعادة الترتيب */
.pin-chip[draggable="true"] { cursor: grab; }
.pin-chip.is-dragging { opacity: .35; }
.pin-chip.is-dragging .pin-chip-link { border-style: dashed; }
.pinbar.is-sorting .pinbar-track { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--border-strong); }

/* لا تتسع الأسماء: أيقونات فقط، والاسم في التلميح */
.pin-chip.is-mini .pin-chip-label { display: none; }
.pin-chip.is-mini .pin-chip-link { padding-inline: 5px; }
/* حتى الأيقونات لا تتسع: يتلاشى الطرف ليدل على التمرير */
.pinbar.is-overflow .pinbar-track { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px); mask-image: linear-gradient(to right, transparent 0, #000 30px); }
[dir="ltr"] .pinbar.is-overflow .pinbar-track { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30px); mask-image: linear-gradient(to left, transparent 0, #000 30px); }

/* لا اختصارات بعد */
.pinbar-hint { display: none; }
.pinbar.is-empty .pinbar-track { display: none; }
.pinbar.is-empty .pinbar-hint {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; margin-inline-start: 4px;
  border: 1px dashed var(--border-strong); border-radius: 11px; background: transparent; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: calc(11.5px * var(--font-scale,1.1)); font-weight: 600; white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.pinbar-hint svg { width: 15px; height: 15px; transform: rotate(45deg); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.pinbar-hint:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.pinbar-hint:hover svg { transform: rotate(0) translateY(-1px); }

/* اللمس: لا مرور بالمؤشر، فتبقى الدبابيس ظاهرة بهدوء */
@media (hover: none) {
  .nav-pin { opacity: .5; }
  :root[data-theme] .nav-item .nav-link { padding-inline-end: 36px; }
  /* رأس الدبوس زينة على اللمس حتى لا يُنزع بلمسة عابرة؛ النزع من دبوس القائمة */
  .pin-chip-off { pointer-events: none; }
}
/* لا يتسع النص: يبقى الدبوس وحده والنص في التلميح */
.pinbar.hint-mini .pinbar-hint span { display: none; }
.pinbar.hint-mini .pinbar-hint { padding: 0 10px; }
/* الجوال: سطر مستقل كامل العرض تحت الهيدر، والقائمة تفتح أسفله (--topbar-h) */
@media (max-width: 760px) {
  :root[data-theme] .topbar:has(.pinbar:not(.is-empty)) { height: auto; min-height: 70px; flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
  .pinbar:not(.is-empty) { order: 10; flex: 1 0 100%; margin-top: 2px; }
  .pinbar-track { gap: 6px; padding-inline: 8px; padding-block: 9px 8px; }
  .pin-chip-link { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-pin svg, .nav-pin::before, .pin-spark, .pin-chip-link, .pin-chip-icon, .pin-chip-off, .pin-chip-off svg, .pinbar-hint svg { animation: none !important; transition: none !important; }
}
@media print { .pinbar { display: none !important; } }