/* ===== SRS (Spaced Repetition) UI styles ===== */

/* Filter checkbox in the top controls bar */
.srs-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink);
  font-size: 14px;
  padding: 8px 10px;
  background: #10131a;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  user-select: none;
  transition: background 0.15s;
}
.srs-filter-label:hover {
  background: #1a1f2a;
}
.srs-filter-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* SRS statistics bar (below header) */
.srs-stats-bar {
  background: #0e1118;
  border-bottom: 1px solid #1e2430;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.srs-stats-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.srs-stats-text strong {
  color: var(--ink);
}
.srs-mastery {
  color: var(--ok);
}
.srs-mastery strong {
  color: var(--ok);
}

/* Progress bar */
.srs-progress-track {
  flex: 0 0 180px;
  height: 8px;
  background: #1a1f2a;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #2a2f3a;
}
.srs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 4px;
}

/* SRS badge on each card */
.srs-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 4px auto 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.srs-new {
  background: #1a2030;
  color: #889;
  border: 1px solid #2a3040;
}
.srs-due {
  background: #2a1810;
  color: var(--warn);
  border: 1px solid #4a3020;
}
.srs-ok {
  background: #102018;
  color: var(--ok);
  border: 1px solid #204030;
}

@media (max-width: 600px) {
  .srs-stats-bar {
    gap: 10px;
    padding: 6px 12px;
  }
  .srs-progress-track {
    flex: 0 0 100%;
  }
}