/* Mandatory Training (see training_courses/index/_index_table).

   Not one table but a stack of them: a course is a header saying whether it is
   in order, with the team's own rows underneath. The header is what the page is
   read for, so it carries the weight — the rows below it are an ordinary table. */
.mandatory-training {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mandatory-training__course {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  background-color: var(--color-surface, #ffffff);
  overflow: hidden;
}

.mandatory-training__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

/* The name and what the course covers take the room that is going; the status
   and the row actions keep to their own width on the right. */
.mandatory-training__toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.mandatory-training__chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.mandatory-training__course.is-open .mandatory-training__chevron {
  transform: rotate(180deg);
}

.mandatory-training__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mandatory-training__title {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: 600;
  color: var(--color-text);
}

.mandatory-training__description {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* The header keeps its bottom rule only while there is something under it. */
.mandatory-training__header {
  border-bottom: none;
}

.mandatory-training__course.is-open .mandatory-training__header {
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.mandatory-training__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* "3 of 11 in date", so the pill beside it can be checked against the thing it
   was worked out from. */
.mandatory-training__summary {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.mandatory-training__renewal-period {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.mandatory-training__certificate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
}

.mandatory-training__certificate:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .mandatory-training__header {
    flex-direction: column;
    align-items: stretch;
  }
}