/* ╔═══════════════════════════════════════════════════════════════╗
   ║  36-card-collapse.css  v2.0                                    ║
   ║  بطاقة تبويبات للداشبورد — تستبدل الأكورديون                 ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ─── الحاوية الرئيسية ─── */
.dcc-tabs-card {
  border-radius: 14px;
  background: var(--bg-card, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* ─── شريط التبويبات ─── */
.dcc-tab-list {
  display: flex;
  direction: rtl;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dcc-tab-list::-webkit-scrollbar { display: none; }

/* ─── زر التبويب ─── */
.dcc-tab-btn {
  flex: 1;
  min-width: 80px;
  padding: 13px 8px 11px;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-secondary, #94a3b8);
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  direction: rtl;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s, border-color 0.2s, background 0.15s;
  user-select: none;
}

.dcc-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e2e8f0);
}

.dcc-tab-btn.dcc-active {
  color: var(--accent, #6c63ff);
  border-bottom-color: var(--accent, #6c63ff);
}

.dcc-tab-btn:focus-visible {
  outline: 2px solid var(--accent, #6c63ff);
  outline-offset: -2px;
}

/* ─── شارة العدد ─── */
.dcc-tab-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-secondary, #94a3b8);
  padding: 1px 7px;
  border-radius: 20px;
  margin-inline-start: 5px;
  vertical-align: middle;
  transition: background 0.18s, color 0.18s;
}

.dcc-tab-btn.dcc-active .dcc-tab-badge {
  background: rgba(108, 99, 255, 0.18);
  color: var(--accent, #6c63ff);
}

/* ─── منطقة المحتوى ─── */
.dcc-tab-panels {
  padding: var(--dash-gap, 14px);
}

/* ─── لوحة التبويب ─── */
.dcc-tab-panel {
  display: none;
  flex-direction: column;
  gap: var(--dash-gap, 14px);
  animation: dcc-fadein 0.22s ease;
}

.dcc-tab-panel.dcc-active {
  display: flex;
}

@keyframes dcc-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
  .dcc-tab-panel { animation: none; }
}

/* ─── إزالة هوامش البطاقات المتداخلة ─── */
.dcc-tab-panel > .dash-card,
.dcc-tab-panel > .v11-dash-card,
.dcc-tab-panel > .dash-two-col,
.dcc-tab-panel > .dc-wrap,
.dcc-tab-panel > .nf09-card,
.dcc-tab-panel > [id] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── إخفاء الكروت الهاربة خارج التبويبات ─────────────────────────
   أي كارت معروف يُحقن خارج dcc-tabs-card في welcome-screen مباشرة
   → مخفي (سيُنقل لاحقاً بـ fillSlots أو يُهمَل لو لم ينتقل)
   هذا يمنع ظهور كروت مكررة أو كروت خارج نطاقها.
─────────────────────────────────────────────────────────────────── */
#welcome-screen > #nf17-smart-row,
#welcome-screen > #nf25-builder-card,
#welcome-screen > #nf09-rec-card,
#welcome-screen > #sr30-daily-card,
#welcome-screen > #nf20-continue-card,
#welcome-screen > #nf20-rec-card,
#welcome-screen > #welcome-stats,
#welcome-screen > #nf17-weekly-card,
#welcome-screen > #dash-recent-col,
#welcome-screen > #recent-strip,
#welcome-screen > #leaderboard-card,
#welcome-screen > #badges-card,
#welcome-screen > #error-stats-card,
#welcome-screen > #night-review-card {
  display: none !important;
}

/* ─── موبايل ─── */
@media (max-width: 600px) {
  .dcc-tab-btn {
    font-size: 0.82rem;
    padding: 11px 6px 9px;
    min-width: 70px;
  }
  .dcc-tab-badge { font-size: 0.6rem; }
  .dcc-tab-panels { padding: 10px; }
}