/* ============================================================
   نَبْرَاسِي — إضافات CSS فوق variables.css و components.css الأصليين
   أضيفي هذا الملف كـ css/nibraasi.css واستوريه في index.html
   بعد <link rel="stylesheet" href="css/assistant.css" />
   ============================================================ */

/* ---- بطاقة القسم (card-section) ---- */
.card-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 14px);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card-section h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin: 0 0 10px;
}

/* ---- العداد التنازلي ---- */
.countdown-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #1B4B43 0%, #2E7D54 100%);
  color: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 18px rgba(27,75,67,.22);
}
.countdown-wrap.urgent { background: linear-gradient(135deg,#C62828,#E53935); }
.countdown-wrap.soon   { background: linear-gradient(135deg,#E65100,#F57C00); }
.countdown-icon { font-size: 2.2rem; flex-shrink: 0; }
.countdown-info { flex: 1; }
.countdown-days { font-size: 2.8rem; font-weight: 900; font-family: var(--font-display); display: block; line-height: 1; }
.countdown-label { font-size: 0.8rem; opacity: .88; margin-top: 2px; display: block; }
.countdown-motivation { font-size: 0.75rem; opacity: .75; margin-top: 6px; font-style: italic; }
.countdown-badge.exam-today {
  display: block; text-align: center; padding: 20px;
  background: #FFF9C4; color: #5D4037;
  border-radius: 14px; font-size: 1.1rem; font-weight: 700;
  border: 2px solid #FFC107;
}

/* ---- المخطط الأسبوعي ---- */
#weekly-chart { width: 100%; height: 200px; display: block; border-radius: 8px; }
.empty-chart-msg {
  text-align: center; padding: 28px 12px;
  color: var(--color-text-muted); font-size: 0.88rem;
}

/* ---- مهام يومية ---- */
#daily-tasks-list { padding: 4px 0; }
.daily-task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-utility); font-size: 0.88rem;
}
.daily-task-item:last-child { border-bottom: none; }
.task-dot { font-size: 1.1rem; color: #1B4B43; font-weight: 700; min-width: 20px; text-align: center; }
.task-dot.done { color: #2E7D54; }
.task-text { flex: 1; color: var(--color-text); }

/* ---- الإنجازات ---- */
#achievements-strip {
  display: flex; gap: 10px;
  overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.achievement-badge {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 74px; flex-shrink: 0;
  background: linear-gradient(135deg, #f0faf6, #e8f5e9);
  border: 1.5px solid #b2dfdb; border-radius: 12px; padding: 10px 8px;
  transition: transform .15s;
}
.achievement-badge:hover { transform: translateY(-2px); }
.badge-icon { font-size: 1.6rem; }
.badge-name { font-size: 0.67rem; color: #1B4B43; text-align: center; font-weight: 700; line-height: 1.3; }
.empty-state-sm { color: var(--color-text-muted); font-size: 0.85rem; padding: 8px 0; text-align: center; }

/* ---- العلامات المرجعية ---- */
.bookmark-wrapper { position: relative; padding-inline-end: 38px; }
.bookmark-btn {
  position: absolute; inset-inline-end: 0; top: 2px;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; opacity: .35; padding: 5px 6px;
  border-radius: 6px; transition: opacity .2s, background .15s;
  line-height: 1;
}
.bookmark-btn:hover { opacity: .85; background: #f0faf6; }
.bookmark-btn.marked { opacity: 1; }
.bookmark-btn:focus-visible { outline: 2px solid var(--color-primary); }

/* ---- زر التلخيص ---- */
.btn-summarize {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, #7B5EA7, #8B3A62);
  color: #fff; border: none; border-radius: 22px;
  padding: 9px 22px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; margin-bottom: 16px;
  font-family: var(--font-utility);
  box-shadow: 0 3px 10px rgba(123,94,167,.3);
  transition: opacity .2s, transform .15s;
}
.btn-summarize:hover { opacity: .92; transform: translateY(-1px); }
.btn-summarize:active { transform: translateY(0); }

/* ---- بطاقات المحاضرات ---- */
.lesson-card { position: relative; }
.lesson-card.favorite { border-inline-start: 3px solid #FFC107; }
.lesson-card.completed { opacity: .75; }
.fav-mark { position: absolute; top: 8px; inset-inline-start: 8px; font-size: .85rem; }
.lecture-num { display: block; font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; }

/* ---- وضع الاختبار في المساعد ---- */
.ai-quiz-block {
  background: #F3F8FF; border: 1.5px solid #BBDEFB;
  border-radius: 12px; padding: 16px; margin-top: 12px;
}
.quiz-q { font-weight: 700; color: #1565C0; margin: 0 0 10px; font-size: .95rem; }
.ai-quiz-block textarea {
  width: 100%; padding: 10px; border: 1.5px solid #ccc;
  border-radius: 8px; font-family: var(--font-utility); font-size: .9rem;
  resize: vertical; margin-top: 4px;
}
.ai-quiz-correction {
  padding: 12px 16px; border-radius: 10px;
  margin-top: 10px; font-weight: 600; font-size: .9rem; line-height: 1.6;
}
.ai-quiz-correction.correct { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.ai-quiz-correction.wrong   { background: #FFEBEE; color: #B71C1C; border: 1px solid #FFCDD2; }

/* ---- يوميات — بطاقة ---- */
.journal-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.journal-card-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}

/* ---- بطاقات قائمة الحفظ ---- */
.checklist-item-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .92rem;
}

/* ---- هيدر المادة الحالية ---- */
#header-stage {
  font-size: .72rem;
  color: #A7D7C5;
  font-family: var(--font-utility);
}

/* ---- نبراسي (اسم التطبيق في الشريط الجانبي) ---- */
.sidebar-nav strong {
  background: linear-gradient(90deg, #1B4B43, #2E7D54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- وضع داكن (dark mode) — أساسي ---- */
@media (prefers-color-scheme: dark) {
  .card-section { background: #1a2f2b; border-color: #2a4a44; }
  .achievement-badge { background: linear-gradient(135deg,#1a3a2f,#1e2e2a); border-color: #2a5a4a; }
  .ai-quiz-block { background: #1a2535; border-color: #2a4a6a; }
  .bookmark-btn:hover { background: #1e3530; }
  .journal-card { background: #1a2f2b; border-color: #2a4a44; }
}