/* ============ Reading Materials page (.pg-materials) ============ */

.pg-materials .mat-chips { margin-bottom: 16px; }
.pg-materials .chip { display: inline-flex; align-items: center; gap: 7px; }
.pg-materials .chip .dot,
.pg-materials .mat-course .dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
}
.pg-materials .chip .cnt {
  font-size: 10.5px; font-weight: 800; background: var(--accent-tint); color: var(--indigo-3);
  border-radius: 99px; padding: 1px 7px; line-height: 1.5;
}
.pg-materials .chip.active .cnt { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- material rows ---------- */
.pg-materials .mat-row {
  display: flex; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.pg-materials .mat-row:last-child { border-bottom: 0; }
.pg-materials .mat-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  flex: none; margin-top: 2px;
}
.pg-materials .mat-ico svg { width: 20px; height: 20px; }
.pg-materials .mat-main { flex: 1; min-width: 0; }
.pg-materials .mat-title { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pg-materials .mat-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.pg-materials .mat-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11.5px; color: var(--muted); font-weight: 600;
}
.pg-materials .mat-course {
  display: inline-flex; align-items: center; gap: 6px; background: var(--fill);
  border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px;
  color: var(--indigo-3); font-weight: 700; white-space: nowrap;
}
.pg-materials .mat-sep { opacity: .6; }
.pg-materials .mat-fname {
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-materials .mat-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.pg-materials .mat-actions .btn-danger { padding-left: 9px; padding-right: 9px; }

/* ---------- add-material modal (form carries .pg-materials) ---------- */
.pg-materials .mat-kind { display: flex; gap: 8px; }
.pg-materials .mat-kind button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--muted);
}
.pg-materials .mat-kind button svg { width: 16px; height: 16px; }
.pg-materials .mat-kind button.active {
  border-color: var(--indigo); color: var(--indigo); background: var(--accent-tint);
}
.pg-materials input[type="file"] { padding: 9px 10px; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .pg-materials .mat-row { flex-wrap: wrap; }
  .pg-materials .mat-actions { width: 100%; justify-content: flex-end; margin-top: 2px; }
  .pg-materials .mat-fname { max-width: 150px; }
}