/* ============================================================
   sm.css — Study Material pages only
   All accordion / table / badge / box styles live in main.css.
   This file adds only the compact progress-tracker card.
   ============================================================ */

/* ── Progress Tracker Card ── */
#mtm-progress-card {
  background: var(--bg);
  border-left: 3px solid var(--clr-success);
  border-radius: var(--radius-md);
  padding: 10px 14px 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  font-family: 'Poppins', sans-serif;
}
[data-theme="dark"] #mtm-progress-card {
  border-left-color: #66bb6a;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.mtm-row { display: flex; align-items: center; gap: 8px; }
.mtm-icon { font-size: 0.9rem; flex-shrink: 0; }
.mtm-subject {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);  /* 0.8rem */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px; flex-shrink: 0;
}
.mtm-bar-wrap { flex: 1; min-width: 60px; }
.mtm-progress-bar {
  width: 100%; height: 7px;
  background: #e4e4e4; border-radius: 4px; overflow: hidden;
}
[data-theme="dark"] .mtm-progress-bar { background: #3a3a3a; }
#mtm-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-success), #66bb6a);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.mtm-pct {
  font-size: var(--fs-xs); font-weight: 700; color: var(--clr-success);  /* 0.7rem */
  min-width: 34px; text-align: right; flex-shrink: 0;
}
.mtm-btns { display: flex; gap: 2px; flex-shrink: 0; }
.mtm-progress-btn {
  background: none; border: none; padding: 2px 5px; cursor: pointer;
  font-size: 0.8rem; border-radius: 4px; opacity: 0.6;
  transition: opacity var(--dur-fast), background var(--dur-fast);
  line-height: 1;
}
.mtm-progress-btn:hover { opacity: 1; background: var(--bg-secondary); }
.mtm-meta {
  margin-top: 5px; font-size: 0.65rem;
  color: #999; padding-left: 23px;
}
[data-theme="dark"] .mtm-meta { color: #555; }

@media (max-width: 600px) {
  .mtm-subject { max-width: 110px; }
  .mtm-meta { padding-left: 0; }
}