/* ============================================================================
 *  CT Tutor — الخطوة 9: لوحة الطالب
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-09-dashboard.css
 *
 *  هدف هذه الصفحة واحد: أن يعرف المتدرب في ثانية أين توقّف وماذا يفعل تالياً.
 *  فلا زخرفة تزاحم هذا الهدف.
 * ========================================================================== */

.tutor-dashboard-page,
.tutor-screen-frontend-dashboard {
  --d-ink:      #101828;
  --d-ink-2:    #344054;
  --d-ink-3:    #667085;
  --d-line:     #e4e7ec;
  --d-line-2:   #f2f4f7;
  --d-surface:  #ffffff;
  --d-canvas:   #f7f8fa;
  --d-accent:   #0e6e5e;
  --d-accent-7: #0a574a;
  --d-accent-1: #eef7f4;
  --d-gold:     #b4801a;
  --d-indigo:   #3b5bdb;
  --d-purple:   #7048e8;
}

/* ---------------------------------------------------------------------------
 *  1 · الخلفية والهيكل
 * ------------------------------------------------------------------------- */
.tutor-dashboard-page,
.tutor-dashboard-body { background: var(--d-canvas) !important; }

.tutor-dashboard-layout { gap: 26px !important; align-items: flex-start !important; }

.tutor-dashboard-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* ---------------------------------------------------------------------------
 *  2 · الشريط الجانبي
 * ------------------------------------------------------------------------- */
.tutor-dashboard-sidebar {
  background: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 2px 12px rgba(16,24,40,.05);
  position: sticky;
  top: 24px;
}

.tutor-dashboard-sidebar-nav a,
.tutor-dashboard-sidebar-nav > * > a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--d-ink-2) !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background .18s, color .18s, border-color .18s;
}

.tutor-dashboard-sidebar-nav a:hover { background: #f5f7f9 !important; color: var(--d-ink) !important; }

.tutor-dashboard-sidebar-nav .active > a,
.tutor-dashboard-sidebar-nav a.active,
.tutor-dashboard-sidebar-nav .tutor-active > a {
  background: var(--d-accent-1) !important;
  border-color: #cfe5df !important;
  color: var(--d-accent-7) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
 *  3 · إخفاء قائمة الجوال المكررة على سطح المكتب
 *
 *  رُصدت القائمة مكررة ثلاث مرات في الشريط الجانبي. السبب أن قائمة
 *  الجوال تُعرض على سطح المكتب أيضاً.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .tutor-dashboard-nav-mobile,
  .tutor-dashboard-nav-mobile-list,
  .tutor-mobile-logout-wrapper { display: none !important; }
}

/* ---------------------------------------------------------------------------
 *  4 · ترويسة اللوحة
 * ------------------------------------------------------------------------- */
.tutor-dashboard-header {
  background: var(--d-surface) !important;
  border-block-end: 1px solid var(--d-line) !important;
}

.tutor-profile-header-title,
.tutor-dashboard-header .tutor-text-h4 {
  font-size: 23px !important;
  font-weight: 700 !important;
  color: var(--d-ink) !important;
  letter-spacing: -.01em;
}

.tutor-user-profile-meta {
  font-size: 14px !important;
  color: var(--d-ink-3) !important;
}

.tutor-dashboard-header-user-avatar img,
.tutor-avatar img {
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--d-line);
}

/* ============================================================================
 *  5 · بطاقات الإحصاء الأربع
 * ========================================================================= */

.tutor-student-dashboard-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-block-end: 26px !important;
}

.tutor-stat-card {
  background: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}

.tutor-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16,24,40,.08);
}

/* شريط علوي ملوّن يميّز كل بطاقة */
.tutor-stat-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--d-accent);
}

.tutor-stat-card-enrolled::before   { background: var(--d-indigo); }
.tutor-stat-card-active::before     { background: var(--d-gold); }
.tutor-stat-card-completed::before  { background: var(--d-accent); }
.tutor-stat-card-time-spent::before { background: var(--d-purple); }

.tutor-stat-card-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 14px !important;
}

.tutor-stat-card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--d-ink-3) !important;
  line-height: 1.6 !important;
}

.tutor-stat-card-value {
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--d-ink) !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.tutor-stat-card-icon {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 11px !important;
  font-size: 19px !important;
  flex: 0 0 40px;
}

.tutor-stat-card-enrolled   .tutor-stat-card-icon { background: #e9edfb; color: var(--d-indigo); }
.tutor-stat-card-active     .tutor-stat-card-icon { background: #fdf4e3; color: var(--d-gold); }
.tutor-stat-card-completed  .tutor-stat-card-icon { background: var(--d-accent-1); color: var(--d-accent); }
.tutor-stat-card-time-spent .tutor-stat-card-icon { background: #f0ebfc; color: var(--d-purple); }

/* ============================================================================
 *  6 · شبكة الدورات وبطاقة التقدم
 * ========================================================================= */

/* الحاوية قسم كامل: ترويسته الابن الأول، والبطاقات في الابن الثاني.
 * فلا تُطبَّق عليها شبكة — وإلا تفرّق العنوان عن البطاقات في أعمدة. */
.tutor-student-dashboard-courses {
  display: block !important;
}

/* ترويسة القسم: العنوان يميناً ورابط «مشاهدة الكل» يساراً */
.tutor-student-dashboard-courses > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  margin-block-end: 16px !important;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--d-line-2);
}

.tutor-student-dashboard-courses > div:first-child > *:first-child {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--d-ink) !important;
  margin: 0 !important;
  letter-spacing: -.005em;
}

/* حاوية البطاقات: عمود واحد بمحاذاة كاملة لعرض المساحة */
.tutor-student-dashboard-courses > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* البطاقة الواحدة: صف أفقي — صورة يميناً والمحتوى يساراً */
.tutor-student-dashboard-courses .tutor-progress-card {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 768px) {
  .tutor-student-dashboard-courses .tutor-progress-card-inner {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .tutor-student-dashboard-courses .tutor-progress-card-thumbnail {
    flex: 0 0 260px !important;
    width: 260px !important;
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .tutor-student-dashboard-courses .tutor-progress-card-content {
    padding: 20px 22px !important;
  }

  .tutor-student-dashboard-courses .tutor-progress-card-title {
    min-height: 0 !important;
  }

  .tutor-student-dashboard-courses .tutor-progress-card-actions {
    border-block-start: 0 !important;
    border-inline-start: 1px solid var(--d-line-2) !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 210px !important;
    padding: 20px !important;
  }
}

.tutor-progress-card {
  background: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  height: 100%;
}

.tutor-progress-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(16,24,40,.09);
  border-color: #cfe5df !important;
}

.tutor-progress-card-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* ---- الصورة ---- */
.tutor-progress-card-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--d-line-2);
  position: relative;
}

.tutor-progress-card-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.tutor-progress-card:hover .tutor-progress-card-thumbnail img { transform: scale(1.04); }

/* ---- المحتوى ---- */
.tutor-progress-card-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 18px !important;
  gap: 8px;
}

.tutor-progress-card-category {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--d-accent) !important;
  letter-spacing: .015em;
}

.tutor-progress-card-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: var(--d-ink) !important;
  margin: 0 !important;
  min-height: calc(17px * 1.6 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tutor-progress-card-title a { color: inherit !important; text-decoration: none !important; }
.tutor-progress-card-title a:hover { color: var(--d-accent) !important; }

.tutor-progress-card-details {
  font-size: 13.5px !important;
  color: var(--d-ink-3) !important;
  line-height: 1.7 !important;
}

.tutor-progress-card-separator {
  color: #cbd2dc !important;
  margin-inline: 6px;
}

/* ---- شريط التقدم ---- */
.tutor-progress-card-progress {
  margin-block-start: auto !important;
  padding-block-start: 14px !important;
}

.tutor-progress-card-bar { margin-block-start: 7px !important; }

.tutor-progress-bar {
  height: 8px !important;
  border-radius: 99px !important;
  background: #e8ecf0 !important;
  overflow: hidden !important;
}

.tutor-progress-bar-fill {
  background: linear-gradient(90deg, var(--d-accent), #16a085) !important;
  border-radius: 99px !important;
  transition: width .6s cubic-bezier(.4,0,.2,1) !important;
}

.tutor-progress-card-progress .tutor-text-tiny,
.tutor-progress-card-progress .tutor-small {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--d-accent) !important;
  font-variant-numeric: tabular-nums;
}

/* ---- الإجراءات ---- */
.tutor-progress-card-actions {
  padding: 14px 18px !important;
  border-block-start: 1px solid var(--d-line-2) !important;
  background: #fcfdfd;
}

.tutor-progress-card-actions .tutor-btn-primary {
  background: var(--d-accent) !important;
  border-color: var(--d-accent) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  padding: 11px 20px !important;
  width: 100%;
  transition: all .2s;
}

.tutor-progress-card-actions .tutor-btn-primary:hover {
  background: var(--d-accent-7) !important;
  border-color: var(--d-accent-7) !important;
  box-shadow: 0 4px 12px rgba(14,110,94,.24) !important;
}

/* ---------------------------------------------------------------------------
 *  7 · رابط عرض كل الدورات
 * ------------------------------------------------------------------------- */
.tutor-see-all-courses {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--d-accent) !important;
  text-decoration: none !important;
}

.tutor-see-all-courses:hover { text-decoration: underline !important; }

/* ---------------------------------------------------------------------------
 *  8 · الأزرار العامة داخل اللوحة
 * ------------------------------------------------------------------------- */
.tutor-dashboard-page .tutor-btn-primary {
  background: var(--d-accent) !important;
  border-color: var(--d-accent) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.tutor-dashboard-page .tutor-btn-primary:hover {
  background: var(--d-accent-7) !important;
  border-color: var(--d-accent-7) !important;
}

.tutor-dashboard-page .tutor-btn-ghost {
  border-radius: 10px !important;
  color: var(--d-ink-2) !important;
}

.tutor-dashboard-page .tutor-btn-ghost:hover {
  background: var(--d-accent-1) !important;
  color: var(--d-accent) !important;
}

/* ---------------------------------------------------------------------------
 *  9 · حالة فارغة
 * ------------------------------------------------------------------------- */
.tutor-dashboard-main .tutor-text-center:only-child {
  padding: 60px 24px !important;
  border: 1px dashed var(--d-line) !important;
  border-radius: 16px;
  background: var(--d-surface);
  color: var(--d-ink-3) !important;
}

/* ---------------------------------------------------------------------------
 *  10 · الجوال
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .tutor-dashboard-layout { flex-direction: column !important; gap: 18px !important; }
  .tutor-dashboard-sidebar { position: static !important; width: 100% !important; }
  .tutor-student-dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .tutor-stat-card { padding: 16px !important; }
  .tutor-stat-card-value { font-size: 27px !important; }
}

@media (max-width: 560px) {
  .tutor-student-dashboard-stats { grid-template-columns: 1fr !important; }
  .tutor-student-dashboard-courses { grid-template-columns: 1fr !important; }
  .tutor-profile-header-title { font-size: 20px !important; }
}

/* ---------------------------------------------------------------------------
 *  11 · تقليل الحركة لمن يفضّلها
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tutor-stat-card,
  .tutor-progress-card,
  .tutor-progress-card-thumbnail img,
  .tutor-progress-bar-fill { transition: none !important; }
  .tutor-stat-card:hover,
  .tutor-progress-card:hover { transform: none !important; }
}