/*
 * assets/css/theme.css
 * الهدف: بطاقات إحصائية ملونة وتدرجات حديثة
 */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stats { margin-bottom: 20px; }
.stat-card {
  border-radius: 16px;
  padding: 16px;
  color: #fff;
}
.stat-card .title { font-size: 14px; opacity: 0.9; }
.stat-card .value { font-size: 28px; font-weight: 700; margin-top: 8px; }
.stat-card .progress { height: 6px; background: rgba(255,255,255,0.3); border-radius: 999px; margin-top: 10px; }
.stat-card .progress > span { display: block; height: 100%; border-radius: 999px; }

.grad-blue { background: linear-gradient(120deg, #1f6feb, #4ea1ff); }
.grad-teal { background: linear-gradient(120deg, #0ea5e9, #2dd4bf); }
.grad-purple { background: linear-gradient(120deg, #7c3aed, #a78bfa); }
.grad-orange { background: linear-gradient(120deg, #f97316, #f59e0b); }

.cards {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.panel-title { font-weight: 700; margin-bottom: 10px; }

/* أزرار عامة لطيفة ومتجاوبة */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); color:#fff; background: rgba(255,255,255,0.06); font-weight:600; cursor:pointer; }
.btn:hover { background: rgba(255,255,255,0.12); }
.btn-sm { padding:6px 10px; font-size:13px; }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.24); }
.btn-outline:hover { background: rgba(255,255,255,0.08); }

/* بطاقات ملخص العنابر */
.barn-cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.barn-card { background: var(--card); border-radius:14px; padding:14px; border:1px solid rgba(255,255,255,0.10); box-shadow: 0 6px 14px rgba(0,0,0,0.25); position:relative; overflow:hidden; color:#fff; }
.barn-card > * { position:relative; z-index:1; }
.barn-card::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,0.18); z-index:0; pointer-events:none; }
.barn-card .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.barn-card .header .title { font-weight:700; color:#fff; }
.barn-card .header .link { color:#fff; font-size:13px; opacity:0.85; }
.barn-card .header .link:hover { opacity:1; text-decoration: underline; }
.barn-card .sub { color:#b7c0d9; margin-bottom:10px; }
.barn-card .metrics { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.barn-card .metric { background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; display:flex; justify-content:space-between; align-items:center; }
.barn-card .metric span { color:#cbd5e1; font-size:13px; }
.barn-card .metric strong { color:#fff; font-weight:700; }

/* تلوين رصين: شريط/حد يسار ملوّن مع الحفاظ على خلفية موحّدة ونص عالي التباين */
.barn-card { position: relative; }
.barn-card::before { content:""; position:absolute; inset:0 0 0 auto; width:4px; border-radius:14px; }
.barn-card.vc-blue   { background: linear-gradient(135deg, #0b1f52, #1f6feb); }
.barn-card.vc-teal   { background: linear-gradient(135deg, #073f49, #14b8a6); }
.barn-card.vc-purple { background: linear-gradient(135deg, #24104a, #8b5cf6); }
.barn-card.vc-orange { background: linear-gradient(135deg, #3a1f00, #fb923c); }
.barn-card.vc-pink   { background: linear-gradient(135deg, #3a0b22, #f43f5e); }

/* تجاوب البطاقات والإحصاءات */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
}