.training-workspace,
.training-workspace * {
  box-sizing: border-box;
  min-width: 0;
}

.training-workspace {
  display: grid;
  gap: var(--space-4, 16px);
  max-width: 100%;
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
}

.training-workspace :is(input, select, textarea, button) {
  max-width: 100%;
  min-height: var(--control-height, 40px);
  font: inherit;
}

.training-workspace :is(input, select, textarea) {
  width: 100%;
  border: 1px solid var(--border-strong, var(--border, #d1d5db));
  border-radius: var(--radius-md, 10px);
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

.training-workspace :is(input, select, textarea, button):focus-visible {
  outline: 3px solid var(--primary, #e31937);
  outline-offset: 2px;
}

.training-workspace :is(input, select, textarea, button):disabled {
  cursor: not-allowed;
  opacity: .58;
}

.training-workspace .btn-primary:hover { transform: none; }

.training-workspace :is(p, li, label, dt, dd, .capability-banner) { font-size: 14px; }
.training-workspace__header h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.training-workspace :is(.training-workspace__calendar, .training-workspace__editor) h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

#trainingViewState,
#trainingCalendarEmpty {
  margin: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-color: currentColor;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  overflow-wrap: anywhere;
}

#trainingCalendarEvents {
  display: grid;
  gap: var(--space-2, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

#trainingCalendarEvents > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #d1d5db));
  border-radius: var(--radius-md, 10px);
  background: var(--bg-card, #fff);
}

#trainingCalendarEvents > li > strong {
  flex: 1 1 100%;
  font-size: 15px;
}

#trainingCalendarEvents > li > span {
  color: var(--text-secondary, #5f6878);
  overflow-wrap: anywhere;
}

#trainingCalendarEvents > li:focus {
  outline: 0;
  border-color: var(--primary, #e31937);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(200, 30, 58, .18));
}

#trainingViewState:is(
  [data-status="error"],
  [data-status="unauthorized"],
  [data-status="externally_blocked"]
) {
  background: #fff1f2;
  color: #9f1239;
}

#trainingViewState:is(
  [data-status="empty"],
  [data-status="not_configured"]
) {
  background: #fff7ed;
  color: #9a3412;
}

.training-workspace [data-status="cleared"] {
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  color: var(--text-secondary, #64748b);
}

.training-workspace__header,
.training-workspace__calendar,
.training-workspace__editor {
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border: 1px solid var(--border-strong, var(--color-border, #d1d5db));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, var(--bg-card, #fff));
}

.training-workspace__header {
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: end;
}

.training-workspace__header :is(h3, #trainingDescription) {
  grid-column: 1 / -1;
}

.training-workspace__header label,
#trainingScheduleForm > label {
  display: grid;
  gap: var(--space-2, 8px);
  color: var(--text-secondary, #64748b);
  font-weight: 650;
  line-height: 1.35;
}

#trainingScheduleForm {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3, 12px);
  align-items: end;
}

#trainingScheduleForm > label:nth-of-type(1) { grid-column: span 6; }
#trainingScheduleForm > label:nth-of-type(2),
#trainingScheduleForm > label:nth-of-type(3) { grid-column: span 3; }
#trainingScheduleForm > label:nth-of-type(4),
#trainingScheduleForm > label:nth-of-type(5),
#trainingScheduleForm > label:nth-of-type(6) { grid-column: span 4; }

#trainingTopicSuggestion {
  grid-column: span 4;
}

#trainingFormState,
#trainingConflicts {
  grid-column: 1 / -1;
}

#trainingFormState:empty,
#trainingConflicts:empty {
  display: none;
}

#trainingScheduleForm > :is(#trainingCancel, #trainingCreateSubmit) {
  width: 100%;
  justify-self: start;
  white-space: nowrap;
}

#trainingCancel { grid-column: 9 / 11; }
#trainingCreateSubmit { grid-column: 11 / -1; }

.training-workspace__conflicts {
  display: grid;
  gap: var(--space-2, 8px);
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 900px) {
  .training-workspace__header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .training-workspace__header label {
    grid-column: 1 / -1;
  }

  #trainingScheduleForm > label:nth-of-type(1) { grid-column: 1 / -1; }
  #trainingScheduleForm > label:nth-of-type(n + 2),
  #trainingTopicSuggestion { grid-column: span 6; }
  #trainingCancel,
  #trainingCreateSubmit { grid-column: span 3; }
}

@media (max-width: 480px) {
  .training-workspace__header,
  .training-workspace__calendar,
  .training-workspace__editor {
    padding: var(--space-3, 12px);
  }

  .training-workspace :is(input, select, textarea, button) { min-height: var(--control-height-touch, 44px); }

  .training-workspace__header,
  #trainingScheduleForm {
    grid-template-columns: minmax(0, 1fr);
  }

  .training-workspace__header > *,
  #trainingScheduleForm > *,
  #trainingScheduleForm > label:nth-of-type(n) {
    grid-column: 1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .training-workspace, .training-workspace * { transition-duration: 0s !important; animation-duration: 0s !important; }
}