/* ─── Dashboard Feature Styles ───────────────────────────────────────────── */
/* Chỉ scope trong feature/dashboard — không leak ra ngoài                    */

/* Guide box */
.guide-container {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
}
.guide-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: var(--spacing-md);
}
.guide-content { font-size: 14px; color: var(--color-text-muted); font-weight: 500; }
.guide-list { display: flex; flex-direction: column; gap: 8px; }
.guide-list li { position: relative; padding-left: 14px; line-height: 1.6; }
.guide-list li::before { content: '•'; position: absolute; left: 0; color: var(--color-text-faint); }
.guide-highlight-red   { color: #D14444; font-weight: 600; }
.guide-highlight-green { color: #2E7D32; }
.guide-highlight-orange { color: #FF8C00; }

/* Streak year */
.streak-year-card {
  width: 100%;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}
.streak-year-header { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.streak-year-icon {
  border: 0.5px solid var(--color-primary-border);
  width: 40px; height: 40px;
  background-color: var(--color-primary-bg);
  border-radius: 10px;
  display: flex; justify-content: center; align-items: center;
  font-size: 22px; flex-shrink: 0;
}
.streak-year-title { font-size: 14px; font-weight: 600; color: var(--color-text-main); }
.streak-year-subtitle { color: var(--color-streak-hot); font-size: 12px; margin-top: 2px; }
.streak-year-stats { display: flex; gap: var(--spacing-2xl); margin: 13px 0; }
.streak-year-stat-item { display: flex; align-items: center; gap: var(--spacing-sm); }
.streak-stat-icon {
  width: 18px; height: 18px;
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
  display: flex; justify-content: center; align-items: center;
  color: white; font-size: 10px; flex-shrink: 0;
}
.streak-stat-icon.remain { background-color: var(--color-bg-disabled); }
.streak-stat-text { font-size: 12px; color: var(--color-streak-hot); }
.streak-stat-text.remain { color: var(--color-streak-remain); }

/* Heatmap grid */
.heatmap-wrap { overflow-x: auto; }
.heatmap-months-row {
  display: flex;
  margin-bottom: 8px;
  margin-left: 30px;
  white-space: nowrap;
}
.heatmap-month-label {
  min-width: 109px;
  text-align: left;
  color: var(--color-text-faint);
  font-size: 12px;
}
.heatmap-body { display: grid; grid-template-rows: repeat(7, 1fr); gap: 5px; }
.heatmap-weekday-row { display: flex; gap: 6px; }
.heatmap-weekday-label { width: 24px; text-align: center; color: var(--color-text-faint); font-size: 12px; }
.heatmap-days-row { display: flex; gap: 5px; }
.heatmap-cell { width: 20px; height: 20px; border-radius: var(--radius-sm); flex-shrink: 0; }

/* Circular progress rings */
.rings-card {
  width: 100%;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}
.ring-item { display: flex; flex-direction: column; align-items: center; width: 22%; min-width: 120px; margin: 10px; }
.ring-circle-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 12px; }
.ring-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring-bg  { fill: none; stroke: #f0f0f0; stroke-width: 14; }
.ring-val { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.ring-center-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-align: center;
}
.ring-label { font-size: 12px; font-weight: 600; color: var(--color-text-faint); text-align: center; }

/* Streak month/week row */
.streak-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
.streak-mini-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--spacing-xl);
}
.streak-mini-header { display: flex; align-items: center; gap: var(--spacing-lg); margin-bottom: 6px; }
.streak-mini-icon {
  width: 48px; height: 48px;
  background-color: #fff2ef;
  border: 0.5px solid var(--color-primary-border);
  border-radius: 10px;
  display: flex; justify-content: center; align-items: center;
  font-size: 24px; flex-shrink: 0;
}
.streak-mini-title { font-size: 14px; font-weight: 600; color: var(--color-text-main); margin-bottom: 2px; }
.streak-mini-sub   { font-size: 12px; color: var(--color-text-faint); }
.streak-mini-stats { display: flex; gap: var(--spacing-2xl); margin: var(--spacing-lg) 0; }
.streak-mini-stat  { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.streak-mini-stat.hot    { color: var(--color-streak-hot); }
.streak-mini-stat.remain { color: var(--color-streak-remain); }

/* Cal grid shared */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.cal-weekday-label { text-align: center; font-size: 13px; font-weight: 600; color: #888; }
.cal-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  display: flex; justify-content: center; align-items: center;
  font-size: 14px; font-weight: 600;
}
.cal-cell.done { background: linear-gradient(135deg, #FF6B6B, #e63946); color: white; }
.cal-cell.incomplete { background-color: var(--color-bg-disabled); color: var(--color-text-faint); }
.cal-cell.empty {}

/* Month cal gap bigger */
.cal-month-grid { gap: 20px; }
/* Week cal gap smaller */
.cal-week-grid  { gap: 8px; }

/* Assignment cards */
.assignment-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
}
.assignment-card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
}
.assignment-inner { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.assignment-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; background: var(--color-bg-disabled); display:flex;align-items:center;justify-content:center;font-size:24px; }
.assignment-body { display: flex; flex-direction: column; gap: 8px; }
.assignment-type { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-text-faint); font-weight: 500; }
.assignment-topic { font-size: 14px; color: var(--color-text-main); font-weight: 500; }
.assignment-topic a { text-decoration: underline; color: inherit; }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 13px;
  width: fit-content;
}
.status--done    { background-color: var(--color-success-bg); color: var(--color-success-text); }
.status--pending { background-color: #FFEBEE; color: var(--color-primary); }
.status--grading { background-color: #FFF3E0; color: #E65100; }
.status--graded  { background-color: #E3F2FD; color: #1565C0; }

@media (max-width: 640px) {
  .streak-mini-row { grid-template-columns: 1fr; }
  .assignment-list { grid-template-columns: 1fr; }
}