/* ALS — تبويبات وتايم لاين
 * ملف خاصّ بنا (لا من أصول AMS المنقولة) — قابل للتحرير.
 * المتغيّرات كلها من :root في _Layout فلا ألوان محلية هنا.
 */

/* ══════════════ التبويبات ══════════════
   ⚠️ **أقراص لا خطّ سفلي — والسبب بنيوي لا ذوقي.**
   نمط «الخطّ تحت التبويب النشط» يضع الخطّ على حافة الحاوية السفلى، والتبويب
   النشط يجلس عليه بهامش سالب. وهذا يعمل ما دامت التبويبات **في سطر واحد**.
   وملفّ القضية فيه عشرة أقسام، فعلى أي شاشة أضيق من ١٤٠٠ بكسل يلتفّ السطر —
   فيطفو السطر الأول بلا خطّ تحته ويبقى الخطّ تحت السطر الثاني وحده،
   فتُقرأ التبويبات عناصر سائبة لا شريطاً واحداً.
   القرص يحمل حالته في نفسه لا في خطٍّ مشترك، فيلتفّ بلا أن ينكسر شيء —
   وتصغيرُ الحشوة كان سيؤجّل العطل إلى شاشة أضيق لا يحلّه. */
.als-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    padding: 6px;
    background: var(--parchment);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.als-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.als-tab i { font-size: 12.5px; opacity: .8; }

.als-tab:hover {
    color: var(--ink-800);
    background: var(--white);
    border-color: var(--gray-200);
}

.als-tab:focus-visible {
    outline: 2px solid var(--brass-500);
    outline-offset: 1px;
}

/* النشط: كتلة كحلية مصمتة — تُقرأ من طرف الشاشة بلا بحثٍ عن خطٍّ رفيع */
.als-tab.active {
    color: var(--white);
    background: var(--ink-800);
    border-color: var(--ink-800);
    box-shadow: 0 1px 3px rgba(14, 32, 56, .25);
}

.als-tab.active i { opacity: 1; color: var(--brass-400); }

/* عدّاد داخل التبويب — «الأطراف ٣» يوفّر نقرةً لمعرفة الفراغ من الامتلاء. */
.als-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.als-tab.active .als-tab-count {
    background: var(--brass-500);
    color: var(--ink-900);
}

/* ⚠️ القسم الفارغ يبقى ظاهراً بعدّاد صفر لا يُخفى: تبويبٌ يختفي حين يفرغ
   يجعل شكل الشاشة يتغيّر من قضية لأخرى فيضيع موضع القسم في ذاكرة المستخدم.
   لكنه يُخفَّت — «٠ أحكام» ليست بوزن «٣ جلسات». */
.als-tab-count.is-zero {
    background: transparent;
    color: var(--gray-400);
    border: 1px solid var(--gray-200);
}

.als-tab.active .als-tab-count.is-zero {
    background: transparent;
    color: var(--brass-200);
    border-color: rgba(255, 255, 255, .35);
}

.als-tab-panel[hidden] { display: none; }

/* ══════════════ التايم لاين ══════════════ */
.als-timeline {
    position: relative;
    padding-inline-start: 6px;
    padding-inline-end: 28px;
}

/* الخيط الرأسي — على اليمين لأن القراءة من اليمين. */
.als-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    inset-inline-end: 13px;
    width: 2px;
    background: var(--gray-200);
}

.als-timeline-item {
    position: relative;
    padding-bottom: 18px;
}

.als-timeline-item:last-child { padding-bottom: 0; }

.als-timeline-dot {
    position: absolute;
    inset-inline-end: -28px;
    top: 2px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-200);
    color: var(--gray-500);
    font-size: 11px;
}

.als-timeline-item.is-system .als-timeline-dot {
    border-color: var(--ink-100);
    background: var(--ink-100);
    color: var(--ink-700);
}

.als-timeline-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px 14px;
}

/* قيد النظام يُميَّز بصرياً حتى لا يُنسب إلى المحامي ما لم يكتبه. */
.als-timeline-item.is-system .als-timeline-card {
    background: var(--parchment);
    border-style: dashed;
}

.als-timeline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.als-timeline-type {
    font-weight: 700;
    color: var(--ink-800);
    font-size: 13px;
}

.als-timeline-body {
    font-size: 13.5px;
    color: var(--gray-800);
    line-height: 1.75;
    white-space: pre-wrap;   /* السطور كما كتبها المحامي */
    word-break: break-word;
}

/* ══════════════ سلسلة النزاع ══════════════ */
.als-chain-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: 8px;
    background: var(--white);
    transition: border-color .15s ease;
}

.als-chain-item:hover { border-color: var(--brass-400); }

.als-chain-item.is-current {
    border-color: var(--brass-500);
    border-inline-start: 4px solid var(--brass-500);
    background: var(--brass-50);
}

.als-chain-info { flex: 1; min-width: 0; }

.als-chain-title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink-800);
}

.als-chain-sub {
    font-size: 12px;
    color: var(--gray-500);
}

@media (max-width: 575.98px) {
    .als-tab { padding: 9px 10px; font-size: 12.5px; }
    .als-tab span.als-tab-text { display: none; }
    .als-tab.active span.als-tab-text { display: inline; }
}