.training { min-width: 0; }
.training-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 16px; margin: 16px 0; align-items: end; }
.training-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.training-tabs button { background: none; color: var(--muted); border: 0; border-bottom: 3px solid transparent; padding: 12px 8px; cursor: pointer; }
.training-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent, #4d9c8b); }
.training-editor-stage { border: 0; border-top: 1px solid var(--line); padding: 16px 0; margin: 16px 0; display: grid; gap: 12px; min-width: 0; }
.training-editor-stage legend { font-size: 17px; font-weight: 600; padding-right: 12px; }
.training-topics-picker { max-height: 460px; overflow: auto; }
.training-picker-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.training-picker-heading { display: grid; grid-template-columns: minmax(0,1fr) 110px; align-items: center; gap: 12px; }
.training-topic-order { font-size: 13px; color: var(--muted); }
.training-topic-order input { width: 100%; }
.training-picker-row details { margin: 8px 0 0 24px; font-size: 14px; }
.training details > summary { cursor: pointer; overflow-wrap: anywhere; }
.training-start, .training-extension { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px 0; }
.training-start label, .training-extension label { flex: 1 1 240px; }
.training-employee, .training-flow { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.training-employee > summary, .training-stage > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0; cursor: pointer; overflow-wrap: anywhere; }
.training-employee > summary span, .training-stage > summary span, .training-stage time { color: var(--muted); font-size: 14px; }
.training-stage { min-width: 0; border-top: 1px solid var(--line); padding: 0 0 8px; }
.training-stage > summary strong { font-size: 16px; flex: 1 1 220px; }
.training-overdue { border-left: 3px solid #c2515b; padding-left: 12px; }
.training-warning { color: #db9d4c; }
.training-success { color: #65b99a; }
.training-topic-list { list-style: none; padding: 0; margin: 8px 0; }
.training-topic-list li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.training-topic-list li span { overflow-wrap: anywhere; min-width: 0; }
.training-topic-list li .training-topic-number { flex: 0 0 28px; color: var(--muted); }
.training-topic-list li .training-topic-number + span { flex: 1 1 220px; }
.training-topic-list li span:last-child { color: var(--muted); font-size: 14px; }
.training-check { padding: 12px 0; }
.training-check form { display: grid; gap: 12px; }
.training-flow p { font-size: 14px; overflow-wrap: anywhere; }
.training-topic { border-bottom: 1px solid var(--line); padding: 12px 0; min-width: 0; }
.training-topic > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; overflow-wrap: anywhere; }
.training-topic > summary strong { flex: 1 1 200px; }
.training-topic-group { margin: 18px 0; min-width: 0; }
@media(max-width:600px) { .training .btn, .training-extension .btn { max-width: 100%; white-space: normal; } .training-stage time { flex-basis: 100%; } .training-picker-heading { grid-template-columns: minmax(0,1fr) 90px; } }