/* ════════════════════════════════════════════════════════════════════════════
 * atheer-ax-timeline.css — نمط «الخطّ الزمنيّ» كاملًا من قالب Vireo
 * (src/html/pages/timeline.html) مصقولًا لأثير.
 *
 * لماذا طبقة مستقلّة؟ لأنّ `atheer-ax.css` نقل **أساس** المكوّن (١٦ قاعدة:
 * القائمة والعلامة والمحتوى والوقت والحالات الأربع) ولم ينقل ما يبني منه
 * صفحةَ نشاطٍ حقيقيّة: تجميع اليوم اللاصق · بطاقة المرفق · الاقتباس ·
 * الكثافة · نهاية التغذية · مفتاح الحالات.
 *
 * وقاعدة الأنماط السطريّة هنا مقلوبة عن القالب عمدًا: القالب يكتب كلّ ذلك
 * `style="…"` (٣٠+ إعلانًا سطريًّا في صفحة واحدة)، وفي أثير الأنماط السطريّة
 * تهزم كلّ ورقة أنماط فتخرج من الثيم. فكلّ ما كان سطريًّا صار **صنفًا**.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · ثغرتان قِستُهما قبل الكتابة ───────────────────────────────────────
 *
 * (أ) `--ax-viz-*` نُقلت **بقيَم الثيم الفاتح وحدها**. وVireo يُعرّف لها
 *     مجموعةً ثانية أفتح للثيم الداكن. فبقي البنفسجيّ #7c5cfc والكهرمانيّ
 *     #e0930b على سطحٍ داكن — وهما مقروءان بالكاد. وهذا **سابع** تكرار
 *     لنمط «عائلة رموز رُبطت وشقيقتها تُركت».
 *
 * (ب) `--ax-viz-pink` **غير معرَّف إطلاقًا** في أثير. والرمز المفقود
 *     يُسقط الخاصيّة **بصمت** — فالعلامة الورديّة كانت سترث لون النصّ
 *     ولا يظهر خطأ في أيّ مكان.
 * ------------------------------------------------------------------------ */
:root {
  --ax-viz-pink: #ec4899;               /* كانت مفقودة — أُضيفت للثيمين */
}
:root[data-theme="dark"] {
  --ax-viz-cyan:    #38bdf8;
  --ax-viz-violet:  #a78bfa;
  --ax-viz-pink:    #f472b6;
  --ax-viz-amber:   #fbbf24;
  --ax-viz-emerald: #34d399;
  --ax-viz-red:     #fb7185;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ax-viz-cyan:    #38bdf8;
    --ax-viz-violet:  #a78bfa;
    --ax-viz-pink:    #f472b6;
    --ax-viz-amber:   #fbbf24;
    --ax-viz-emerald: #34d399;
    --ax-viz-red:     #fb7185;
  }
}

/* (ج) `.ax-divider` يستعمله القالب في ثلاثة مواضع من الخطّ الزمنيّ
 *     (فاصل اليوم · طرفا نهاية التغذية) ولم يكن منقولًا. و`<hr>` بلا قاعدة
 *     يرسم حدّ المتصفّح الافتراضيّ — خطّان لا خطّ. */
.ax-divider            { inline-size: 100%; block-size: 1px; border: 0;
                         background: var(--ax-border); }
.ax-divider--vertical  { inline-size: 1px; block-size: auto; align-self: stretch; }
.ax-divider--strong    { background: var(--ax-border-strong); }

/* ── ٢ · فاصل اليوم اللاصق ────────────────────────────────────────────────
 * يلتصق أسفل الشريط العلويّ لا أعلى النافذة: `top:0` في القالب يصلح لصفحة
 * بلا شريط ثابت، وفي أثير ينزلق تحته فيختفي. */
.ax-tl-day {
  position: sticky;
  top: calc(var(--ax-tl-sticky-top, var(--at-topbar-height, 56px)) + 4px);
  z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding-block: 10px;
  background: var(--ax-surface, var(--surface-1, #fff));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ax-tl-day + .ax-timeline { margin: 0; }
.ax-timeline + .ax-tl-day { margin-block-start: 16px; }
.ax-tl-day__date {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-subtle);
  white-space: nowrap;
}
.ax-tl-day__rule { flex: 1 1 auto; }

/* ── ٣ · بطاقة المرفق / التسجيل داخل العقدة ──────────────────────────────── */
.ax-tl-attach {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  max-inline-size: 340px; min-inline-size: 0;
  margin-block-start: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md, 6px);
  background: var(--ax-surface-subtle);
}
.ax-tl-attach__body { min-inline-size: 0; }
.ax-tl-attach__name {
  font-weight: var(--ax-weight-medium, 500);
  color: var(--ax-text-strong);
  font-size: var(--ax-text-sm, 13px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ax-tl-attach__meta {
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-subtle);
}

/* ── ٤ · الاقتباس والسطر الثانويّ ────────────────────────────────────────
 * `border-inline-start` لا `border-left` — وإلّا وقف الشريط يسار النصّ
 * العربيّ، أي في نهايته لا في بدايته. */
.ax-tl-quote {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-inline-start: 2px solid var(--ax-border-strong);
  color: var(--ax-text-muted);
  font-size: var(--ax-text-sm, 13px);
}
.ax-tl-note {
  margin: 4px 0 0;
  font-size: var(--ax-text-sm, 13px);
  color: var(--ax-text-muted);
}
.ax-tl-progress { margin-block-start: 8px; max-inline-size: 280px; }

/* ── ٥ · نهاية التغذية ────────────────────────────────────────────────────
 * «وصلتَ إلى البداية» أصدق من قائمةٍ تنتهي فجأةً فيظنّها القارئ مقطوعة. */
.ax-tl-end {
  display: flex; align-items: center; gap: 12px;
  margin-block-start: 16px;
  color: var(--ax-text-subtle);
  font-size: var(--ax-text-xs, 12px);
}
.ax-tl-end .ax-divider { flex: 1 1 auto; }
.ax-tl-end__label { white-space: nowrap; }

/* ── ٦ · الكثافة ──────────────────────────────────────────────────────────
 * القالب يبدّل `font-size` سطريًّا. هنا صنفٌ يضغط **المسافات** أيضًا،
 * فالكثافة مسافةٌ قبل أن تكون حجم خطّ. */
.ax-timeline--compact .ax-timeline__item   { padding-block-end: 12px; gap: 12px; }
.ax-timeline--compact .ax-timeline__marker { inline-size: 22px; block-size: 22px; }
.ax-timeline--compact .ax-timeline__body,
.ax-timeline--compact .ax-tl-note          { font-size: var(--ax-text-xs, 12px); }
.ax-timeline--compact .ax-tl-quote,
.ax-timeline--compact .ax-tl-attach        { display: none; }

/* ── ٧ · متغيّر الشريط الجانبيّ: نقاط صغيرة بلا أيقونة ──────────────────── */
.ax-timeline--rail .ax-timeline__item   { padding-block-end: 14px; gap: 12px; }
.ax-timeline--rail .ax-timeline__marker { inline-size: 10px; block-size: 10px; margin-block-start: 5px; }
.ax-timeline--rail .ax-timeline__marker svg { display: none; }
.ax-timeline--rail .ax-timeline__item:not(:last-child) .ax-timeline__marker::before {
  height: 18px;
}

/* ── ٨ · مفتاح حالات العلامة ──────────────────────────────────────────────
 * ليس زينة: أربع حالات بأربعة ألوان تحتاج مرجعًا مرّةً واحدة، وإلّا صار
 * اللون لغزًا يُخمَّن في كلّ صفّ. */
.ax-tl-legend { display: flex; flex-direction: column; gap: 12px; }
.ax-tl-legend__row  { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.ax-tl-legend__name { font-weight: var(--ax-weight-medium, 500);
                      color: var(--ax-text-strong); font-size: var(--ax-text-sm, 13px); }
.ax-tl-legend__desc { font-size: var(--ax-text-xs, 12px); color: var(--ax-text-subtle); }
.ax-tl-legend__chip {
  flex: none; inline-size: 26px; block-size: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ax-radius-md, 6px);
}
.ax-tl-legend__chip .at-icon,
.ax-tl-legend__chip .material-symbols-rounded { font-size: 16px; }

/* ── ٩ · ألوان العلامة بحسب القناة ────────────────────────────────────────
 * صنفٌ بدل `style="color:…"` — فالقناة معنًى يتكرّر في ثلاث صفحات على
 * الأقلّ (سجلّ العميل · صندوق السوشال · لوحة السوشال). */
.ax-timeline__marker--cyan    { color: var(--ax-viz-cyan); }
.ax-timeline__marker--violet  { color: var(--ax-viz-violet); }
.ax-timeline__marker--pink    { color: var(--ax-viz-pink); }
.ax-timeline__marker--amber   { color: var(--ax-viz-amber); }
.ax-timeline__marker--emerald { color: var(--ax-viz-emerald); }
.ax-timeline__marker--red     { color: var(--ax-viz-red); }

/* ── ١٠ · تركيب بطاقة الخطّ الزمنيّ داخل نافذة بطاقة العميل ───────────────
 * البطاقة هنا `.form-card` لتُطابق شقيقتيها (الهويّة والمتابعات) في النافذة
 * نفسها، ورأسها من `ax-card__*` ليأخذ تركيب القالب. فالحدّ الفاصل بينهما
 * يُلغى هنا كي لا تُرسم البطاقة داخل بطاقة. */
.ax-tl-card { --ax-tl-sticky-top: 0px; }   /* الحاوية المارّة هنا جسم النافذة لا الصفحة */
.ax-tl-card > .ax-card__header,
.ax-tl-card > .ax-card__body { padding-inline: 0; border: 0; background: none; }
.ax-tl-card > .ax-card__header { padding-block-start: 0; }
.ax-tl-card > .ax-card__body   { padding-block-start: 0; }
.ax-tl-body  { display: flex; flex-direction: column; gap: 10px; }
.ax-tl-feed  { min-inline-size: 0; }

/* مرشِّح القناة: أزرارٌ شبحيّة، والمختار منها بحبرٍ لا بملء ثقيل. */
.ax-tl-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-tl-filter .ax-btn.is-active {
  color: var(--ax-accent);
  background: var(--ax-accent-wash);
  border-color: color-mix(in oklab, var(--ax-accent) 32%, transparent);
}

/* التسجيل داخل عقدة الخطّ الزمنيّ يرث عرض بطاقة المرفق في القالب،
 * فلا يمتدّ مشغّل الصوت عبر البطاقة كلّها ويكسر إيقاع العمود.
 * وقبل التشغيل يحتضن الزرّ وحده: صندوقٌ بعرض ٣٤٠px فيه زرٌّ صغير وفراغ
 * يبدو حقلًا فشل تحميله. وبعد التشغيل يتّسع للمشغّل. */
.ax-timeline .ax-rec        { inline-size: fit-content; max-inline-size: 340px; }
.ax-timeline .ax-rec audio  { min-inline-size: 240px; }

/* ══════════════════════════════════════════════════════════════════════════
 * ١١ · شبكة اللوحات (`ax-dash-grid` + `ax-col--*`) — من القالب حرفًا بحرف
 *
 * كانت ناقصة كلّها: كلّ صفحات أثير التي أرادت تركيب لوحة القالب اضطرّت إلى
 * `grid-template-columns` سطريًّا. اثنتا عشرة عمودًا، وكسران عند ٩٩٢ و٥٧٦.
 * ══════════════════════════════════════════════════════════════════════════ */
.ax-dash-grid {
  display: grid; align-items: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ax-space-6, 24px);
}
.ax-dash-grid > :where(*) { grid-column: 1 / -1; }
.ax-col--12 { grid-column: span 12; }  .ax-col--11 { grid-column: span 11; }
.ax-col--10 { grid-column: span 10; }  .ax-col--9  { grid-column: span 9; }
.ax-col--8  { grid-column: span 8; }   .ax-col--7  { grid-column: span 7; }
.ax-col--6  { grid-column: span 6; }   .ax-col--5  { grid-column: span 5; }
.ax-col--4  { grid-column: span 4; }   .ax-col--3  { grid-column: span 3; }
.ax-col--2  { grid-column: span 2; }
@media (max-width: 992px) {
  .ax-col--11, .ax-col--10, .ax-col--9,
  .ax-col--8,  .ax-col--7,  .ax-col--6 { grid-column: span 12; }
  .ax-col--5,  .ax-col--4,  .ax-col--3, .ax-col--2 { grid-column: span 6; }
}
@media (max-width: 576px) { [class*="ax-col--"] { grid-column: span 12; } }

/* عمودٌ يرصّ بطاقاتٍ فوق بعض بالفجوة نفسها — «الشريط» في القالب. */
.ax-stackcol { display: flex; flex-direction: column; gap: var(--ax-space-6, 24px); }

/* ── ١٢ · صفّ الحصّة (By Platform في `dashboards/social.html`) ─────────────
 * اسمٌ ونسبة وقضيب. القالب يكتبها ثلاث مرّات سطريًّا لكلّ صفّ؛ هنا صنف. */
.ax-share       { display: flex; flex-direction: column; gap: var(--ax-space-4, 16px); }
.ax-share__row  { display: flex; justify-content: space-between; align-items: baseline;
                  margin-block-end: 6px; gap: 12px; }
.ax-share__name { font-size: var(--ax-text-sm, 13px); color: var(--ax-text); }
.ax-share__val  { font-family: var(--ax-font-mono, ui-monospace, monospace);
                  font-weight: var(--ax-weight-medium, 500);
                  color: var(--ax-text-strong); font-size: var(--ax-text-sm, 13px); }
.ax-share__n    { color: var(--ax-text-subtle); font-weight: 400; }

/* ── ١٣ · طابور المجدول (Scheduled Posts) ─────────────────────────────────
 * عمودان: الموعد يسارًا ثابت العرض، والمحتوى يملأ الباقي. الموعد بخطّ
 * أحاديّ المسافة كي تصطفّ الأرقام رأسيًّا فتُقرأ عمودًا لا سطورًا. */
.ax-queue        { display: flex; flex-direction: column; gap: var(--ax-space-4, 16px); }
.ax-queue__item  { display: grid; grid-template-columns: 72px 1fr;
                   gap: 12px; align-items: start; }
.ax-queue__when  { font-family: var(--ax-font-mono, ui-monospace, monospace);
                   font-size: var(--ax-text-xs, 12px); color: var(--ax-text-subtle);
                   padding-block-start: 2px; }
.ax-queue__when--now { color: var(--ax-accent); }
.ax-queue__body  { min-inline-size: 0; border-inline-start: 1px solid var(--ax-border);
                   padding-inline-start: 12px; }
.ax-queue__title { font-weight: var(--ax-weight-medium, 500); color: var(--ax-text-strong);
                   font-size: var(--ax-text-sm, 13px);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-queue__meta  { font-size: var(--ax-text-xs, 12px); color: var(--ax-text-subtle);
                   margin-block-start: 2px; }