/* ════════════════════════════════════════════════════════════════════════════
 * atheer-ax-shell.css — كسوة Vireo للشريط الجانبيّ والعلويّ
 *
 * ## المبدأ: كسوة لا إعادة هيكلة
 *
 * بنية الشريط في أثير تحمل ٢٢٥ عنصر قائمة وصلاحيّاتها وطيّها وتصفيتها
 * وتبديل المستأجر. إعادة بنائها تعني احتمال سقوط عنصر — وهو الشرط الذي
 * لا يُخالَف. فهذه الطبقة **تُغيّر المظهر وحده**: الألوان والمسافات وأنصاف
 * الأقطار والخطّ وعلامة النشاط.
 *
 * ولا تلمس: العرض · التموضع · الطيّ · الانتقالات البنيويّة · إظهار وإخفاء
 * المجموعات. تلك منطق `shell.js` ويبقى كما هو.
 *
 * ## ما يُنقل من القالب
 *
 *   `.ax-nav__item`          → `.sidebar__item`
 *   `.ax-nav__item.is-active`→ `.sidebar__item.is-active`  (تدرّج + حلقة داخليّة)
 *   `.ax-nav__item:before`   → `.sidebar__indicator`       (قضيب 3px بتوهّج)
 *   `.ax-sidebar__section`   → `.sidebar__group-header`
 *   `.ax-nav__children`      → `.sidebar__subitems`        (خطّ جانبيّ وإزاحة)
 *
 * التراجع: حذف سطر <link> واحد.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── عنصر القائمة ────────────────────────────────────────────────────────
 * القالب: 9px عموديًّا · نصف قطر md · وزن متوسّط · لون هادئ يقوى عند التحويم.
 * أثير كان 8px ونصف قطر sm — الفرق يُرى في كثافة قائمة من ٢٢٥ عنصرًا. */
.sidebar__item {
  padding-block: 9px;
  padding-inline: var(--at-space-3, 12px);
  gap: var(--at-space-3, 12px);
  border-radius: var(--at-radius-md, 14px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background .14s cubic-bezier(.2,0,0,1),
              color      .14s cubic-bezier(.2,0,0,1);
}

/* 🔴 الأيقونة تهدأ ولا تصرخ: القالب يخفضها إلى .85 ويرفعها عند التحويم
 * والنشاط. الأيقونة بكامل قوّتها في كلّ سطر تجعل القائمة تشويشًا بصريًّا —
 * وهو ما يميّز شريط Vireo عن شريط أثير الحاليّ. */
.sidebar__item .icon { opacity: .85; }
.sidebar__item:hover .icon { opacity: 1; }

/* ── النشط: تدرّج خفيف + حلقة داخليّة، لا كتلة لون مصمتة ─────────────── */
.sidebar__item.is-active {
  color: var(--text-primary);
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--at-accent) 16%, transparent),
              color-mix(in srgb, var(--at-accent)  4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--at-accent) 18%, transparent);
  font-weight: 600;
}
.sidebar__item.is-active .icon { color: var(--at-accent); opacity: 1; }

/* القضيب الجانبيّ — عنصر حقيقيّ في أثير (وهو في القالب `:before`).
 * خصائص منطقيّة فقط ليعمل في الاتّجاهين. */
.sidebar__item.is-active .sidebar__indicator {
  inline-size: 3px;
  block-size: 20px;
  background: var(--at-accent);
  box-shadow: 0 0 12px var(--at-accent);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  opacity: 1;
}

/* ── عنوان القسم ─────────────────────────────────────────────────────────
 * 🔴 بلا `text-transform: uppercase`: القالب إنجليزيّ، والعربيّة بلا حالة
 * أحرف — والتحويل يُفسد بعض المحارف ولا يضيف شيئًا. التمييز بالحجم
 * والتباعد واللون بدلًا منه. */
.sidebar__group-header {
  padding-block: var(--at-space-2, 8px);
  padding-inline: var(--at-space-3, 12px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--at-text-muted, #6b7280);
  /* قاعدة أقدم في shell.css تفرض uppercase — تُعطَّل هنا صراحةً.
   * العربيّة بلا حالة أحرف، والتحويل لا يفعل شيئًا للعربيّ ويشوّه
   * المختلط (أسماء المنتجات واللواحق اللاتينيّة) بلا مقابل. */
  text-transform: none;
}

/* ── القوائم الفرعيّة: خطّ جانبيّ وإزاحة كما في القالب ────────────────── */
.sidebar__subitems {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-block: 2px;
  margin-inline-start: calc(var(--at-space-3, 12px) + 10px);
  padding-inline-start: var(--at-space-3, 12px);
  border-inline-start: 1px solid var(--divider, #e3e8ef);
}
.sidebar__subitems .sidebar__item {
  padding-block: 7px;
  font-size: 13px;
}

/* ── الشريط العلويّ ──────────────────────────────────────────────────────
 * الظلّ يظهر عند التمرير وحده — إطارٌ دائم يقطع الصفحة بلا سبب. */
.app-shell__header.is-scrolled { box-shadow: var(--at-shadow-sm); }