/* 1. تعريف الخطوط المحلية (تأكد أن ملفات الخطوط في مجلد public/fonts) */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* 2. إجبار المتغيرات والجسم وكافة العناصر على استخدام الخط */
:root {
    --font-sans: 'Tajawal', sans-serif !important;
    --font-family-sans: 'Tajawal', sans-serif !important;
}

html, 
body, 
.fi-body, 
.font-sans, 
.fi-header-heading, 
.fi-sidebar-item-label,
.fi-ta-header-heading, 
.fi-ta-col-heading, 
.fi-ta-text-item,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea, span, div, p, a, li {
    font-family: 'Tajawal', sans-serif !important;
}

/* تعديل تباعد القائمة الجانبية */
.fi-sidebar-nav-groups.flex-col.gap-y-7 { row-gap: 0.40rem !important; }
.gap-y-7 { row-gap: 0.40rem; }
.fi-sidebar .fi-sidebar-group .fi-sidebar-item { padding-block: 0.1rem !important; }


/* 3. باقي التنسيقات الخاصة بك (Timeline & KPI) */

/* Custom Timeline Styles */
.timeline-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-track-container {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 0;
}

.timeline-track-grid {
    display: grid;
    height: 100%;
    width: 100%;
    padding: 0 2rem;
}

.timeline-track {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #cbd5e1 50%, transparent 50%);
    background-size: 8px 2px;
}
.dark .timeline-track {
    background-image: linear-gradient(to left, #4b5563 50%, transparent 50%);
}

.timeline-track.is-completed {
    background-image: none;
    background-color: #22c55e;
}

.timeline-track.is-animated {
    background-image: linear-gradient(to left, #3b82f6 50%, transparent 50%);
    background-size: 16px 2px;
    animation: move-dots-rtl 0.5s linear infinite;
}
.dark .timeline-track.is-animated {
    background-image: linear-gradient(to left, #60a5fa 50%, transparent 50%);
}

@keyframes move-dots-rtl {
    from { background-position-x: 0px; }
    to { background-position-x: -16px; }
}

.timeline-station {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.timeline-node {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 4px;
    background-color: #ffffff;
}
.dark .timeline-node {
    background-color: #1f2937;
}

.timeline-node.is-pending {
    border-color: #d1d5db;
}
.dark .timeline-node.is-pending {
    border-color: #4b5563;
}

.timeline-node.is-completed {
    border-color: #22c55e;
    background-color: #22c55e;
    color: #ffffff;
}

.timeline-node.is-current {
    border-color: #3b82f6;
    animation: pulse-glow 2s infinite;
}
.timeline-node.is-current .timeline-node-inner-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: #3b82f6;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}

/* شبكة KPIs */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.kpi-card{
  height:8.5rem;
  border-radius:1rem;
  padding:1.25rem 1.25rem;
  background:#111827;
  border:1px solid rgba(255,255,255,.06);
}
.kpi-title{color:#cbd5e1;font-size:.9rem}
.kpi-value{font-weight:700;font-size:2.25rem;line-height:1}
.kpi-delta{font-size:.8rem;color:#10b981}
.kpi-icon{width:3rem;height:3rem;border-radius:.75rem;
  display:flex;align-items:center;justify-content:center;
  outline:1px solid rgba(59,130,246,.35);background:rgba(59,130,246,.1)}