/* ══════════════════════════════════════════════════════════════════
   لوحة التحكم · التقارير · شريط أدوات الجداول — المرحلة 9
   يرث كل ألوانه من :root في _Layout. لا لون محلّي هنا إلا نبرات الإنذار.
   ══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── بطاقات المؤشِّرات ───────────────────────── */

.als-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}

.als-kpi {
    display: flex;
    align-items: center;
    gap: .7rem;
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: .8rem .9rem;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.als-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--brass-200);
    color: inherit;
    text-decoration: none;
}

/* الشريط الجانبي هو ناقل النبرة — لا لون الخلفية.
   خلفيةٌ حمراء خلف رقمٍ كبير تُقرأ إنذاراً حتى حين تكون قيمته صفراً. */
.als-kpi::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0; bottom: 0;
    width: 3px;
    background: var(--gray-300);
}

.als-kpi.is-neutral::before  { background: var(--ink-500); }
.als-kpi.is-notice::before   { background: var(--info); }
.als-kpi.is-warning::before  { background: var(--warning); }
.als-kpi.is-critical::before { background: var(--danger); }

.als-kpi-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--brass-50);
    color: var(--brass-600);
    font-size: 15px;
}

.als-kpi.is-warning  .als-kpi-icon { background: #FEF3C7; color: #92400E; }
.als-kpi.is-critical .als-kpi-icon { background: #FEE2E2; color: #991B1B; }
.als-kpi.is-notice   .als-kpi-icon { background: #E0F2FE; color: #075985; }

.als-kpi-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.als-kpi-value {
    font-family: 'Amiri', serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ink-800);
}

.als-kpi.is-critical .als-kpi-value { color: var(--danger); }
.als-kpi.is-warning  .als-kpi-value { color: var(--brass-700); }

/*
   ⚠️ البطاقة المالية تعرض **مبلغاً** لا عدداً، و«1,234,567.89» بخطّ 1.7rem
   يفيض عن البطاقة فيلتفّ إلى سطرين ويدفع التسمية خارجها. التصغير هنا لا في
   الـView: البطاقات تُبنى في الخدمة ولا تعرف عرضها على الشاشة.
   وأرقام مصفوفة (tabular-nums) فلا ترقص المنازل بين بطاقة وأخرى.
*/
.als-kpi-value.is-money {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/*
   ⚠️ نبرة الأمانات — بنفسجية **تخالف كل النبرات الأخرى عمداً**.
   الأخضر/الأحمر/الكهرماني كلها تقول «حال المكتب»، والأمانة ليست حال المكتب:
   هي مال الموكّل في يده. وتشابهُ اللون كان يجعل الرقم يُقرأ ضمن أرقام المكتب.
*/
.als-kpi.is-trust::before { background: #7C3AED; }
.als-kpi.is-trust .als-kpi-icon { background: #EDE9FE; color: #5B21B6; }
.als-kpi.is-trust .als-kpi-value { color: #5B21B6; }

.als-kpi-label { font-size: .78rem; font-weight: 600; color: var(--gray-600); }
.als-kpi-hint  { font-size: .7rem; color: var(--gray-400); margin-top: .1rem; }

/* ───────────────────────── ألواح اللوحة ───────────────────────── */

/* 420px لا 320: بعرض الشاشة المعتاد يعطي **عمودين** فتصطفّ الألواح الأربعة 2×2.
   بـ320 تدخل ثلاثةٌ في الصفّ ويهبط الرابع وحده بجوار فراغ. */
.als-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: .8rem;
    align-items: start;
}

.als-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.als-panel-wide { margin-top: .8rem; }

.als-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.als-panel-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Amiri', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
}

.als-panel-title i { color: var(--brass-600); font-size: .85rem; }

.als-panel-link {
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.als-panel-link:hover { color: var(--brass-700); }
.als-panel-link i { font-size: .6rem; }

.als-panel-count { font-size: .72rem; color: var(--gray-500); }

.als-panel-body { padding: .25rem 0; max-height: 340px; overflow-y: auto; }
.als-panel-body::-webkit-scrollbar { width: 6px; }
.als-panel-body::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 999px; }

/* ───────────────────────── صفوف اللوحة ───────────────────────── */

.als-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border-bottom: 1px solid var(--gray-100);
    text-decoration: none;
    color: inherit;
}

.als-row:last-child { border-bottom: none; }
.als-row:hover { background: var(--brass-50); color: inherit; text-decoration: none; }

.als-row.is-critical { background: #FEF2F2; }
.als-row.is-critical:hover { background: #FEE2E2; }
.als-row.is-warning { background: #FFFBEB; }
.als-row.is-warning:hover { background: #FEF3C7; }

.als-row-mark {
    flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--ink-100);
    color: var(--ink-700);
    font-size: .72rem;
    font-weight: 600;
}

.als-row.is-critical .als-row-mark { background: #FEE2E2; color: #991B1B; }
.als-row.is-warning  .als-row-mark { background: #FEF3C7; color: #92400E; }

.als-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }

.als-row-title {
    font-weight: 600;
    color: var(--ink-800);
    font-size: .82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.als-row-sub {
    font-size: .72rem;
    color: var(--gray-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.als-row-side {
    flex: 0 0 auto;
    text-align: end;
    font-size: .72rem;
    color: var(--gray-600);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
}

.als-row-side-sub { color: var(--gray-400); font-size: .68rem; }

/* ───────────────────────── شريط التوزيع ───────────────────────── */

.als-distribution { padding: .8rem .9rem; }

.als-dist-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--gray-100);
    margin-bottom: .65rem;
}

.als-dist-seg { height: 100%; }

.als-dist-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    font-size: .76rem;
    color: var(--gray-600);
}

.als-dist-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.als-dist-legend strong { color: var(--ink-800); }

.als-dist-dot {
    width: .55rem; height: .55rem;
    border-radius: 999px;
    display: inline-block;
}

/* ألوان الشرائح — مشتقّة من ألوان شارات الحالة نفسها
   حتى لا يقول الشريط لوناً ويقول جدول القضايا لوناً آخر للحالة عينها. */
.seg-active   { background: var(--success); }
.seg-reserved { background: var(--info); }
.seg-judged   { background: var(--ink-600); }
.seg-appealed { background: var(--warning); }
.seg-struck   { background: var(--danger); }
.seg-other    { background: var(--gray-400); }

/* ───────────────────────── الفراغ الصادق ───────────────────────── */

/* ⚠️ رسالة الفراغ تقول «لا شيء **داخل نطاقك**» لا «لا شيء».
   الثانية تُطمئن محامياً حُجب عنه ما لم يُسنَد إليه. */
.als-quiet {
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--gray-400);
    font-size: .8rem;
}

.als-quiet i {
    display: block;
    font-size: 1.3rem;
    color: var(--brass-400);
    margin-bottom: .4rem;
}

/* ══════════════════════════════════════════════════════════════════
   التقارير
   ══════════════════════════════════════════════════════════════════ */

.als-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}

.als-report-card {
    display: block;
    padding: .85rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.als-report-card:hover {
    border-color: var(--brass-400);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

.als-report-card.is-active {
    border-color: var(--brass-500);
    background: var(--brass-50);
    box-shadow: inset 0 0 0 1px var(--brass-500);
}

.als-report-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--ink-800);
    margin-bottom: .25rem;
}

.als-report-card-title i { color: var(--brass-600); }

.als-report-card-desc { font-size: .76rem; color: var(--gray-500); line-height: 1.5; }

.als-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .6rem .9rem;
    background: var(--brass-50);
    border: 1px solid var(--brass-200);
    border-radius: var(--radius);
    font-size: .78rem;
    color: var(--ink-700);
    margin-bottom: .85rem;
}

.als-report-meta strong { color: var(--ink-800); }

.als-report-table tbody tr.is-critical { background: #FEF2F2; }
.als-report-table tbody tr.is-warning  { background: #FFFBEB; }

.als-report-table tfoot td {
    font-weight: 700;
    background: var(--ink-100);
    color: var(--ink-800);
}

.als-report-table td.is-numeric,
.als-report-table th.is-numeric { text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   شريط أدوات الجدول — ترقيم + تصدير + طباعة (als-table.js)
   ══════════════════════════════════════════════════════════════════ */

/* ⚠️ `.crud-table-wrapper` في crud-unified.css له `margin: -1.25rem` مصمَّم
   ليقابل حشوة `.crud-card-body`. هامشه **السفلي** السالب يسحب هذا الشريط
   لأعلى فيركب على آخر صفّ في الجدول. الهامش هنا يُلغي ذلك السحب ويترك فاصلاً. */
.als-tablebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .7rem 0 0;
    margin-top: 1.6rem;
    border-top: 1px solid var(--gray-200);
}

.als-tablebar-tools { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.als-tablebar-info { font-size: .78rem; color: var(--gray-500); }

.als-pagesize {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--gray-500);
    margin-inline-start: .3rem;
}

.als-pagesize-select {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: .25rem .5rem;
    font-family: inherit;
    font-size: .78rem;
    color: var(--gray-700);
    background: var(--white);
}

.als-pager { display: flex; align-items: center; gap: .2rem; }

.als-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border: 1px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.als-page-btn:hover:not(:disabled) { background: var(--brass-50); border-color: var(--brass-200); color: var(--ink-800); }
.als-page-btn:disabled { opacity: .4; cursor: default; }

.als-page-btn.is-active {
    background: var(--ink-800);
    border-color: var(--ink-800);
    color: var(--white);
}

/* ───────────────────────── الطباعة ───────────────────────── */

.als-print-sheet { background: var(--white); padding: 1.5rem; }

.als-print-head {
    border-bottom: 2px solid var(--ink-800);
    padding-bottom: .8rem;
    margin-bottom: 1rem;
}

.als-print-title {
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-800);
}

.als-print-office { font-size: .85rem; color: var(--brass-700); font-weight: 600; }

.als-print-meta { font-size: .78rem; color: var(--gray-600); margin-top: .4rem; line-height: 1.9; }

.als-print-disclaimer {
    margin-top: 1.2rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--gray-300);
    font-size: .72rem;
    color: var(--gray-500);
}

/* ───────────────────── الملخّص المالي (11.6) ───────────────────── */

.als-fin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: .55rem;
    padding: .9rem 1rem 1rem;
}

.als-fin-cell {
    padding: .6rem .75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.als-fin-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--gray-500);
}

.als-fin-value {
    font-family: 'Amiri', serif;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-800);
    /* المبلغ الطويل يُقصّ بنقاط لا يفيض على الخليّة المجاورة */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.als-fin-cell.is-bad { border-color: #FCA5A5; background: #FEF2F2; }

/* الأمانة تخالف لونَ كل ما حولها — انظر تعليق `.als-kpi.is-trust` */
.als-fin-cell.is-trust { border-color: #C4B5FD; background: #F5F3FF; }
.als-fin-cell.is-trust .als-fin-value { color: #5B21B6; }

@media print {
    /* لا قائمة جانبية ولا ترويسة ولا أزرار على الورق */
    .als-sidebar,
    .als-header,
    .als-no-print,
    .als-tablebar,
    .crud-btn,
    .als-panel-link { display: none !important; }

    body, html { background: #fff !important; }

    .als-body { margin-right: 0 !important; }

    .als-print-sheet { padding: 0; }

    .als-report-table { font-size: .72rem; }

    /* الطباعة تُخرج الكشف كاملاً لا الصفحة المعروضة — als-table.js يخفي
       بقية الصفحات بـ display:none، وورقةٌ فيها 25 صفّاً من 300 تُقرأ كشفاً تامّاً */
    .crud-table tbody tr { display: table-row !important; }

    /* الصفّ لا يُقصّ بين صفحتين — نصفُ صفٍّ على ورقة يُقرأ بياناً ناقصاً */
    .crud-table tr,
    .als-report-table tr { page-break-inside: avoid; }

    /* الترويسة تتكرّر في أعلى كل صفحة: ورقةٌ منزوعة من الكشف
       بلا عنوان ولا تاريخ لا يُعرف مصدرها ولا نطاقها */
    .crud-table thead,
    .als-report-table thead { display: table-header-group; }

    /* الألوان تُطبع فعلاً — الصفّ الأحمر هنا معلومةٌ لا زينة */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* لوحة التحكم: الألواح لا تُقصّ بين ورقتين */
    .als-panel { page-break-inside: avoid; }
    .als-panel-body { max-height: none !important; overflow: visible !important; }
}
