/* ============================================================
   بطاقة إحصائيات الصفحة الرئيسية — نمط Shadcn card-06
   بطاقة واحدة مقسّمة إلى ٤ خانات بفواصل عمودية رفيعة. كل خانة:
   عنوان + أيقونة دائرية محاطة بإطار، ثم قيمة كبيرة،
   ثم نص نطاق الفترة + شارة اتجاه ملوّنة (صعود/هبوط/محايدة).
   معزول بصرياً، يستهلك توكنات Meadows ويتكيّف مع الوضع الليلي.
   ============================================================ */
.kpi06 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.kpi06__tile {
    flex: 1 1 25%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-inline-end: 1px solid var(--border-main);
}
.kpi06__tile:last-child {
    border-inline-end: none;
}
.kpi06__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.kpi06__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.4;
}
/* أيقونة دائرية محاطة بإطار رفيع — بصمة card-06 (بلا خلفية ملوّنة). */
.kpi06__icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: transparent;
    color: var(--primary);
    display: grid;
    place-items: center;
    transition: border-color .18s ease, color .18s ease;
}
.kpi06__icon svg {
    width: 16px;
    height: 16px;
}
.kpi06__value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-title);
    font-variant-numeric: tabular-nums;
}
.kpi06__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kpi06__range {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
/* شارة الاتجاه — صعيد أخضر / هبوط أحمر / محايدة رمادية. */
.kpi06__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kpi06__trend svg {
    width: 14px;
    height: 14px;
}
.kpi06__trend.trend-up {
    background: color-mix(in srgb, var(--ready-text) 12%, var(--surface-solid));
    color: var(--ready-text);
}
.kpi06__trend.trend-down {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-solid));
    color: var(--danger);
}
.kpi06__trend.trend-neutral {
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    color: var(--text-secondary);
}

/* لون الأيقونة لكل خانة — ألوان دلالية واضحة في الوضعين الفاتح والداكن:
   الطلبات أزرق، المبيعات مرجاني، الجديدة فيروزي، المكتملة أخضر. */
.kpi06--orders .kpi06__icon { color: var(--primary); }
.kpi06--sales  .kpi06__icon { color: var(--danger); }
.kpi06--fresh  .kpi06__icon { color: var(--new-text); }
.kpi06--done   .kpi06__icon { color: var(--ready-text); }

.kpi06__tile:hover .kpi06__icon {
    border-color: color-mix(in srgb, currentColor 35%, var(--border-main));
}

/* تابلت: صفّان × عمودان — أسقط الفاصل من خانات الحافة اليمنى. */
@media (max-width: 1100px) and (min-width: 541px) {
    .kpi06__tile {
        flex: 1 1 50%;
    }
    .kpi06__tile:nth-child(2n) {
        border-inline-end: none;
    }
}
/* جوال: عمود واحد — فاصل سفعي بدل الجانبي. */
@media (max-width: 540px) {
    .kpi06__tile {
        flex: 1 1 100%;
        border-inline-end: none;
        border-bottom: 1px solid var(--border-main);
    }
    .kpi06__tile:last-child {
        border-bottom: none;
    }
}

/* === كثافة بطاقة KPI على الجوال (≤768px) ===
   الحشوة 12px على الديسكتوب لا تزال مرهقة حين تتكدّس 4 بطاقات عمودية على شاشة
   5" (الـheight الكلي يقفز ~80px). نُخفّفها على مرحلتين:
   - ≤768px (تابلت/جوال كبير): 12px → 10px + gap 8px → 6px
   - ≤540px (جوال مكدّس): 10px → 8px + gap 6px → 4px
   حجم الأيقونة (36px) والقيمة (20px) ثابت — هما توقيع card-06 ولا
   يُختصران مع تقليص الـpadding وحدها. */
@media (max-width: 768px) {
    .kpi06 { border-radius: 12px; }
    .kpi06__tile { padding: 10px; gap: 6px; }
}
@media (max-width: 540px) {
    .kpi06__tile { padding: 8px; gap: 4px; }
}