/* atheer-vireo-redesign.css — تحديث بنيويّ للمكوّنات على أساس القالب
 * ════════════════════════════════════════════════════════════════════════════
 * 🔴 **ملفّ منفصل عن `atheer-vireo-polish.css` بقصد.**
 *   polish   = إصلاح عيوب مقيسة (تباين · محاذاة · أعطاب).
 *   redesign = تغيير مظهر مقصود. قد تقبل أحدهما وترفض الآخر، والفصل يُتيح ذلك.
 *   التراجع: حذف سطر <link> واحد.
 *
 * الرافعة: ١٦٧ صفحة مبنيّة من ~٣٨ مكوّنًا `at-*`. تحديث المكوّنات يُحدّث كلّ
 * الصفحات **بلا لمس صفحة واحدة** — وهو ما يجعل إعادة التصميم ممكنة أصلًا.
 *
 * ⚠️ **لا يُخفي هذا الملفّ عنصرًا واحدًا.** لا `display:none` ولا `visibility`
 * ولا `width:0`. كلّ قاعدة فيه طباعةٌ أو مسافةٌ أو حدٌّ أو ظلّ. وحارس الجرد
 * يُشغَّل بعده ويجب أن يبقى: صفر حذف · صفر إخفاء.
 *
 * القيم منقولة من `vireo-D45lZWjH.css` حرفيًّا لا مقدَّرة بالعين:
 *   space 4·8·12·16·20·24   radius xs8 sm12 md14 lg18 xl24
 *   shadow-card: 0 18px 44px -22px #10162833, 0 2px 10px #1016280f
 *   text-2xs 11px · tracking .04em · mono "JetBrains Mono"
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ax-shadow-card: 0 18px 44px -22px #10162833, 0 2px 10px #1016280f;
  --ax-shadow-sm:   0 6px 18px -8px #1016282e, 0 2px 6px -2px #1016281a;
  --ax-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  /* الظلّ على الداكن يعتمد العتمة لا الرماديّ — الظلّ الفاتح يصير ضبابًا */
  --ax-shadow-card: 0 18px 44px -22px #00000066, 0 2px 10px #00000040;
  --ax-shadow-sm:   0 6px 18px -8px #00000059, 0 2px 6px -2px #00000038;
}


/* ── ١ · رأس الجدول: تسمية دقيقة بدل نصّ عاديّ ────────────────────────────
 * توقيع Vireo الأظهر في الجداول: الرأس **ليس نصًّا عاديًّا** بل تسمية صغيرة
 * بحروف كبيرة وتباعد حروف، على سطح خافت وحدّ سفليّ أقوى. الأثر: العين تفصل
 * الرأس عن البيانات فورًا بلا خطوط ثقيلة. */
.at-grid__head,
.at-grid thead {
  background: var(--at-surface-2, #f0f3f9);
}
.at-grid__th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--at-text-muted, #535e74);
  white-space: nowrap;
  border-block-end: 1px solid var(--at-border-strong, var(--at-border, #cfd7e6));
}
/* العربيّة لا تعرف الحروف الكبيرة — و`uppercase` عليها بلا أثر إلّا على
 * اللاتينيّ المخلوط. التباعد يبقى نافعًا للاثنين. */
[lang="ar"] .at-grid__th { text-transform: none; letter-spacing: .02em; }

/* رأس لاصق: الجدول الطويل يُقرأ بلا فقدان أسماء الأعمدة */
.at-grid__th { position: sticky; inset-block-start: 0; z-index: 2; }


/* ── ٢ · الأرقام تُقرأ كأرقام ──────────────────────────────────────────────
 * منصّة هاتفة تعرض امتدادات ومدّة ورسومًا وعدّادات. الخطّ المتناسب يجعل
 * `1111` أضيق من `8888` فتهتزّ الأعمدة. `tabular-nums` يثبّت عرض الخانة،
 * والمحاذاة إلى النهاية تجعل الآحاد تحت الآحاد.
 * ⚠️ يُطبَّق على الخلايا المعلَّمة رقميًّا أو المحاذاة للنهاية فقط — لا على
 * كلّ خليّة، وإلّا صار النصّ العربيّ بخطّ برمجيّ. */
.at-grid__td[data-align="end"],
.at-grid__th[data-align="end"],
.at-grid__td .text-mono,
.text-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.at-grid__td .text-mono, .text-mono { font-family: var(--ax-mono); }


/* ── ٣ · إيقاع الصفّ ووضوح التمرير ────────────────────────────────────────*/
.at-grid__td { border-block-end: 1px solid var(--at-border, #e2e8f0); }
.at-grid tbody tr { transition: background 120ms ease; }
.at-grid tbody tr:hover { background: var(--at-surface-2, #f0f3f9); }
/* الصفّ الأخير بلا حدّ — الحدّ السفليّ للبطاقة يكفيه */
.at-grid tbody tr:last-child .at-grid__td { border-block-end: 0; }


/* ── ٤ · ارتفاع البطاقة ────────────────────────────────────────────────────
 * البطاقة في القالب ترتفع عن السطح بظلّ ناعم واسع (لا خطّ رماديّ)، وتقصّ
 * ما يفيض عنها فتبقى حوافّها نظيفة مع الجداول والصور. */
.at-card, .card, .settings-card, .form-section,
.at-metric-card, .at-health-card, .dash-card {
  box-shadow: var(--ax-shadow-card);
}
/* بطاقة الأرقام زرٌّ فعليًّا — فترتفع عند المرور كبقيّة ما يُنقر */
.at-metric-card:not(:disabled):hover,
.at-health-card:not(:disabled):hover { box-shadow: var(--ax-shadow-sm); transform: translateY(-1px); }
.at-card, .card { overflow: hidden; }
/* البطاقة القابلة للنقر ترتفع أكثر عند المرور — إشارة تفاعل بلا لون */
.at-card--interactive:hover, .card--interactive:hover {
  box-shadow: var(--ax-shadow-sm);
  transform: translateY(-1px);
}


/* ── ٥ · الشريط الجانبيّ: العنصر النشط كبسولة ─────────────────────────────
 * الشريط في القالب يعلّم النشط بكبسولة ممتلئة لا بخطّ جانبيّ رفيع — تُقرأ
 * من طرف الشاشة. والمجموعات تُفصل بتسمية دقيقة كتسمية رأس الجدول. */
.at-sidebar__item {
  border-radius: var(--at-radius-sm, 12px);
  transition: background 120ms ease, color 120ms ease;
}
.at-sidebar__group-label,
.at-sidebar__group > .at-sidebar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--at-text-muted, #535e74);
  padding-block: 6px;
}
[lang="ar"] .at-sidebar__group-label,
[lang="ar"] .at-sidebar__group > .at-sidebar__label { text-transform: none; letter-spacing: .02em; }


/* ── ٦ · ترويسة الصفحة: تراتب أوضح ────────────────────────────────────────
 * العنوان يكبر ويثقل، والوصف يخفت ويضيق سطره — فتُقرأ الصفحة من أعلى بلمحة. */
.page-header__title, .page__title {
  letter-spacing: -.01em;
  line-height: 1.25;
}
.page-header__subtitle, .page__subtitle {
  max-inline-size: 68ch;      /* سطر أطول من ذلك يُتعب التتبّع */
  line-height: 1.6;
}


/* ── ٧ · الأزرار: حدّة أقلّ وارتفاع أوضح ──────────────────────────────────*/
.btn, button.btn {
  border-radius: var(--at-radius-xs, 8px);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.btn--primary, button.btn--primary { box-shadow: var(--ax-shadow-sm); }
.btn:focus-visible, button.btn:focus-visible {
  outline: 2px solid var(--at-accent, #2a5fcc);
  outline-offset: 2px;        /* إتاحة: التركيز يُرى بلا اعتماد على اللون وحده */
}


/* ── ٨ · مرشِّح القائمة الجانبيّة ─────────────────────────────────────────
 * الصنف `.at-sidebar__search` منسَّق في `atheer/shell.css` أصلًا ولم يستعمله
 * أحد. هذه القواعد للحالات التي يُنتجها المرشِّح فقط.
 *
 * 🔴 **لا `display:none` دائم:** الإخفاء مشروط بـ`data-filtered` الذي يُوضع
 * أثناء الكتابة ويُزال بالمسح. حقلٌ فارغ ⇒ كلّ شيء ظاهر. والحارس يقرأ
 * `routes.js` لا الـDOM، فالجرد لا يتأثّر أصلًا. */
.sidebar__nav[data-filtering="true"] .sidebar__item[data-filtered="true"] { display: none; }

/* مجموعة بلا مطابقات: عنوانها يبقى وعناصرها تُطوى — كي لا يُظنّ أنّ القسم حُذف */
.sidebar__group[data-empty="true"] .sidebar__items { display: none; }
.sidebar__group[data-empty="true"] { opacity: .45; }

.at-sidebar__search-input::placeholder { color: var(--at-text-muted, #535e74); }
.at-sidebar__search:focus-within {
  background: var(--at-surface-2, #f0f3f9);
}
.at-sidebar__search-input:focus { outline: none; }