/* ═══════════════════════════════════════════════════════
   KPI Dashboard — الهدف الأمثل لوحة المؤشرات الرئيسية
   ═══════════════════════════════════════════════════════ */

.kpi-dashboard-block {
  margin: 0 0 24px 0;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;
}

/* ── Section header ──────────────────────────────────── */
.kpi-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 2px;
}
.kpi-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--kpi-title, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi-section-title svg { color: #FF9800; }
.kpi-section-badge {
  font-size: 11px;
  background: rgba(255,152,0,0.12);
  color: #FF9800;
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 600;
}
.kpi-refresh-btn {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.kpi-refresh-btn:hover { color: #FF9800; }
.kpi-refresh-btn.spinning svg { animation: kpi-spin 0.8s linear infinite; }
@keyframes kpi-spin { to { transform: rotate(360deg); } }

/* ── Stat cards row ──────────────────────────────────── */
.kpi-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .kpi-cards-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kpi-cards-row { grid-template-columns: 1fr; } }

.kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: default;
}
.kpi-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, #FF9800);
  border-radius: 14px 14px 0 0;
}
.kpi-card.kpi-danger::before  { --kpi-accent: #e74c3c; }
.kpi-card.kpi-success::before { --kpi-accent: #27ae60; }
.kpi-card.kpi-info::before    { --kpi-accent: #3498db; }
.kpi-card.kpi-warning::before { --kpi-accent: #f39c12; }

.kpi-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,152,0,0.1);
  color: #FF9800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.kpi-card.kpi-danger  .kpi-card-icon { background: rgba(231,76,60,0.1);  color:#e74c3c; }
.kpi-card.kpi-success .kpi-card-icon { background: rgba(39,174,96,0.1);  color:#27ae60; }
.kpi-card.kpi-info    .kpi-card-icon { background: rgba(52,152,219,0.1); color:#3498db; }
.kpi-card.kpi-warning .kpi-card-icon { background: rgba(243,156,18,0.1); color:#f39c12; }

.kpi-card-value {
  font-size: 26px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.kpi-card-value.rtl-num { direction: ltr; text-align: right; }
.kpi-card-label {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}
.kpi-card-change {
  position: absolute;
  top: 18px; left: 18px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.kpi-change-up   { background: rgba(39,174,96,0.12); color: #27ae60; }
.kpi-change-down { background: rgba(231,76,60,0.12); color: #e74c3c; }
.kpi-change-neu  { background: rgba(0,0,0,0.06);     color: #888; }

/* ── Charts row ──────────────────────────────────────── */
.kpi-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .kpi-charts-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .kpi-charts-row { grid-template-columns: 1fr; } }

.kpi-chart-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
}
.kpi-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-chart-canvas-wrap {
  position: relative;
  height: 180px;
}

/* ── Tasks table ─────────────────────────────────────── */
.kpi-table-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;
}
.kpi-table-title {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 12px;
}
.kpi-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kpi-mini-table th {
  font-weight: 600;
  color: #888;
  padding: 6px 8px;
  text-align: right;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.kpi-mini-table td {
  padding: 8px 8px;
  color: #444;
  border-bottom: 1px solid #f7f7f7;
  vertical-align: middle;
}
.kpi-mini-table tr:last-child td { border-bottom: none; }
.kpi-mini-table .kpi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 11px;
  padding: 0 6px;
}
.kpi-badge-danger  { background: rgba(231,76,60,0.12); color: #e74c3c; }
.kpi-badge-warning { background: rgba(243,156,18,0.12); color: #f39c12; }
.kpi-badge-ok      { background: rgba(39,174,96,0.12);  color: #27ae60; }
.kpi-badge-info    { background: rgba(52,152,219,0.12); color: #3498db; }

/* ── Progress bar ────────────────────────────────────── */
.kpi-progress {
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.kpi-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: #FF9800;
  transition: width 0.8s ease;
}

/* ── Skeleton loader ─────────────────────────────────── */
.kpi-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: kpi-shimmer 1.4s infinite;
  border-radius: 6px;
  height: 28px;
}
@keyframes kpi-shimmer { to { background-position: -200% 0; } }

/* ── Dark mode ───────────────────────────────────────── */
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .kpi-chart-card,
[data-bs-theme="dark"] .kpi-table-card {
  background: #2a2d35;
  border-color: rgba(255,255,255,0.06);
}
[data-bs-theme="dark"] .kpi-card-value { color: #e8e8e8; }
[data-bs-theme="dark"] .kpi-mini-table th { background: #1e2128; color: #aaa; border-color: #333; }
[data-bs-theme="dark"] .kpi-mini-table td { color: #ccc; border-color: #333; }
[data-bs-theme="dark"] .kpi-chart-title,
[data-bs-theme="dark"] .kpi-table-title { color: #ccc; }