.training-execution-view { display: grid; gap: 18px; }
.training-execution-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.training-execution-heading h2 { margin: 3px 0 7px; color: #1e383e; font-size: 25px; }
.training-execution-heading p { max-width: 790px; margin: 0; color: #637b82; line-height: 1.45; }
.prototype-chip { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid #c5dbdc; border-radius: 999px; color: #537279; background: #fff; font-size: 10px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }

.execution-foundation-card { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #bdded9; border-left: 4px solid #0c827a; border-radius: 11px; background: #f4fbf9; }
.execution-foundation-card > span { display: grid; flex: 0 0 33px; place-items: center; width: 33px; height: 33px; border-radius: 8px; color: #fff; background: #0a7f77; }
.execution-foundation-card div { display: grid; gap: 3px; }
.execution-foundation-card small { color: #0d7d75; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.execution-foundation-card strong { color: #24454a; font-size: 14px; }
.execution-foundation-card p { margin: 0; color: #617a80; font-size: 12px; line-height: 1.4; }
.execution-foundation-card .btn { margin-left: auto; white-space: nowrap; }

.execution-mode-selector { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: center; padding: 20px; border: 1px solid #d8e5e6; border-radius: 12px; background: #fff; }
.execution-mode-selector > div:first-child { display: grid; gap: 4px; }
.execution-mode-selector h3 { margin: 0; color: #243e45; font-size: 18px; }
.execution-mode-selector p { margin: 0; color: #70868b; font-size: 13px; line-height: 1.4; }
.execution-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.execution-mode-options button { display: flex; gap: 10px; align-items: center; padding: 13px; border: 1px solid #cddde0; border-radius: 10px; color: #36535a; background: #fbfdfd; text-align: left; cursor: pointer; }
.execution-mode-options button:hover { border-color: #82bcb7; background: #f3fbfa; }
.execution-mode-options button.active { border-color: #13837b; box-shadow: inset 0 0 0 1px #13837b; background: #e9f7f4; }
.execution-mode-options button > span { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #0d7c75; background: #e2f1ef; font-weight: 800; }
.execution-mode-options button.active > span { color: #fff; background: #0b8079; }
.execution-mode-options button div { display: grid; gap: 2px; }
.execution-mode-options strong { font-size: 13px; }
.execution-mode-options small { color: #71878c; font-size: 11px; }

.execution-lifecycle { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; padding: 15px 18px; border: 1px solid #d5e3e4; border-radius: 11px; background: #f9fcfc; }
.execution-lifecycle > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.execution-lifecycle span { display: grid; grid-row: span 2; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #0d7c75; background: #dfefed; font-size: 12px; font-weight: 800; }
.execution-lifecycle strong { color: #375259; font-size: 12px; }
.execution-lifecycle small { color: #74898e; font-size: 10px; line-height: 1.3; }
.execution-lifecycle > i { padding: 0 8px; color: #9cb8b9; font-size: 24px; font-style: normal; }

.execution-flow-card { padding: 20px; border: 1px solid #d6e5e6; border-radius: 13px; background: #fff; }
.execution-flow-card > header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; }
.execution-flow-card > header div { display: grid; gap: 4px; }
.execution-flow-card h3 { margin: 0; color: #203c43; font-size: 20px; }
.execution-flow-card > header p { max-width: 800px; margin: 0; color: #657e84; font-size: 13px; line-height: 1.45; }
.execution-status { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.execution-status.blue { color: #39719a; background: #eaf4ff; }
.execution-status.teal { color: #08766f; background: #e0f2ef; }

.execution-lanes { display: grid; gap: 9px; }
.execution-lane { display: grid; grid-template-columns: minmax(205px, .58fr) minmax(0, 1.42fr); border: 1px solid #dae7e8; border-radius: 10px; overflow: hidden; }
.execution-lane-label { display: flex; gap: 10px; align-items: center; padding: 14px; border-right: 1px solid #dae7e8; background: #f7fbfb; }
.execution-lane-label > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #0b8079; background: #e1f2ef; font-size: 12px; font-weight: 800; }
.execution-lane-label div { display: grid; gap: 2px; }
.execution-lane-label small { color: #648087; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.execution-lane-label strong { color: #38535a; font-size: 13px; }
.execution-lane-action { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 13px 15px; }
.execution-lane-action > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: #2e83a3; font-size: 13px; font-weight: 800; }
.execution-lane.organizer .execution-lane-action > span { background: #0a8279; }
.execution-lane.employee .execution-lane-action > span { background: #4d79a5; }
.execution-lane.system .execution-lane-action > span { background: #447c8e; }
.execution-lane.exception .execution-lane-action > span { color: #81540c; background: #f2c56a; }
.execution-lane-action div { display: grid; gap: 3px; }
.execution-lane-action strong { color: #2e4b52; font-size: 13px; }
.execution-lane-action p { margin: 0; color: #667f85; font-size: 12px; line-height: 1.4; }
.execution-lane-action small { color: #16796f; font-size: 11px; font-weight: 700; }

.execution-task-preview { margin-top: 16px; overflow: hidden; border: 1px solid #cbdde7; border-radius: 10px; background: #f6fbff; }
.execution-task-preview header { display: flex; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #dce9f1; }
.execution-task-preview header span { color: #5080a0; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.execution-task-preview header strong { color: #4f6977; font-size: 11px; }
.execution-task-preview > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 13px; }
.task-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #397ba2; font-weight: 800; }
.execution-task-preview section { display: grid; gap: 3px; }
.execution-task-preview section small { color: #5982a1; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.execution-task-preview section strong { color: #294852; font-size: 13px; }
.execution-task-preview p { margin: 0; color: #678087; font-size: 12px; }
.execution-task-preview em { color: #305b70; font-style: normal; font-weight: 800; }
.task-deadline { padding: 5px 8px; border-radius: 999px; color: #9b6322; background: #fff1d7; font-size: 11px; font-weight: 800; white-space: nowrap; }

.classroom-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.classroom-role { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid #d7e5e6; border-radius: 10px; overflow: hidden; background: #fcfefe; }
.classroom-role > header { display: flex; gap: 9px; align-items: center; padding: 13px; border-bottom: 1px solid #e3ecec; background: #f5faf9; }
.classroom-role > header > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: #0b8179; font-size: 12px; font-weight: 800; }
.classroom-role.trainer > header > span { background: #447995; }
.classroom-role.participant > header > span { background: #7562a3; }
.classroom-role header div { display: grid; gap: 2px; }
.classroom-role header small { color: #668087; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.classroom-role h4 { margin: 0; color: #2a474d; font-size: 14px; }
.classroom-role ul { display: grid; gap: 8px; margin: 0; padding: 14px 14px 14px 31px; color: #627b80; font-size: 12px; line-height: 1.35; }
.classroom-role li::marker { color: #0c8077; }
.classroom-role footer { display: grid; gap: 3px; padding: 12px 13px; border-top: 1px solid #e3ecec; background: #f8fbfb; }
.classroom-role footer span { color: #0d7a72; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.classroom-role footer strong { color: #38555c; font-size: 12px; }
.classroom-role footer small { color: #73888d; font-size: 11px; line-height: 1.35; }
.attendance-proof-callout { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 14px; border: 1px solid #bddece; border-radius: 10px; background: #f3fbf7; }
.attendance-proof-callout > span { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #21836b; font-weight: 800; }
.attendance-proof-callout div { display: grid; gap: 3px; }
.attendance-proof-callout small { color: #187761; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.attendance-proof-callout strong { color: #2c4c47; font-size: 13px; }
.attendance-proof-callout p { margin: 0; color: #617c78; font-size: 12px; line-height: 1.4; }
.attendance-table { margin-top: 15px; overflow: hidden; border: 1px solid #d9e6e7; border-radius: 10px; }
.attendance-table > header { display: flex; justify-content: space-between; padding: 10px 13px; color: #648087; background: #f6fafa; }
.attendance-table > header span { font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.attendance-table > header small { font-size: 11px; }
.attendance-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.15fr; gap: 8px; align-items: center; padding: 10px 13px; border-top: 1px solid #e3ecec; color: #597278; font-size: 12px; }
.attendance-row strong { color: #355158; }
.attendance-row.table-head { color: #6b848a; background: #fcfefe; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.attendance-row small { color: #687f85; font-size: 11px; }
.attendance-chip { display: inline-flex; justify-self: start; padding: 4px 7px; border-radius: 999px; color: #697f85; background: #edf2f3; font-size: 10px; font-weight: 800; white-space: nowrap; }
.attendance-chip.accepted { color: #2b7969; background: #e1f3ec; }
.attendance-chip.present { color: #287563; background: #d9f0e5; }
.attendance-chip.absent { color: #a26625; background: #fff0d7; }
.attendance-chip.failed { color: #a44d47; background: #fff0ee; }

.training-record-model { padding: 20px; border: 1px solid #cfdfeb; border-radius: 13px; background: #f7fbfe; }
.training-record-model > header { display: grid; gap: 4px; }
.training-record-model h3 { margin: 0; color: #2a4752; font-size: 19px; }
.training-record-model > header p { max-width: 750px; margin: 0; color: #6b8288; font-size: 13px; line-height: 1.4; }
.training-record-model > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.training-record-model article { display: grid; gap: 5px; padding: 13px; border: 1px solid #d5e4ed; border-radius: 9px; background: rgba(255,255,255,.8); }
.training-record-model article > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #3d7d9e; background: #e3f0f8; font-size: 11px; font-weight: 800; }
.training-record-model article strong { color: #36525d; font-size: 13px; }
.training-record-model article p { margin: 0; color: #70858b; font-size: 12px; line-height: 1.4; }
.training-record-model > footer { display: flex; gap: 9px; align-items: start; margin-top: 14px; padding-top: 13px; border-top: 1px solid #d7e5ed; }
.training-record-model > footer > span { color: #3e82a2; font-size: 17px; font-weight: 800; }
.training-record-model > footer p { margin: 0; color: #637c83; font-size: 12px; line-height: 1.45; }
.training-record-model > footer strong { color: #355159; }
.training-record-model > footer em { color: #287c74; font-style: normal; font-weight: 800; }

@media (max-width: 950px) {
    .execution-mode-selector { grid-template-columns: 1fr; }
    .execution-lifecycle { grid-template-columns: 1fr auto 1fr; gap: 10px; }
    .execution-lifecycle > div:nth-of-type(3) { grid-column: 1; }
    .execution-lifecycle > i:nth-of-type(2) { display: none; }
    .classroom-role-grid,.training-record-model > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .training-execution-heading,.execution-flow-card > header { display: grid; }
    .prototype-chip { justify-self: start; }
    .execution-foundation-card { align-items: flex-start; flex-wrap: wrap; }
    .execution-foundation-card .btn { margin-left: 46px; }
    .execution-lifecycle { grid-template-columns: 1fr; }
    .execution-lifecycle > i { display: none; }
    .execution-lifecycle > div:nth-of-type(3) { grid-column: auto; }
    .execution-lane { grid-template-columns: 1fr; }
    .execution-lane-label { border-right: 0; border-bottom: 1px solid #dae7e8; }
    .execution-task-preview > div { grid-template-columns: auto 1fr; }
    .execution-task-preview .task-deadline,.execution-task-preview .btn { grid-column: 2; justify-self: start; }
    .attendance-row { grid-template-columns: 1fr 1fr; }
    .attendance-row.table-head { display: none; }
}
@media (max-width: 460px) {
    .execution-mode-options,.classroom-role-grid,.training-record-model > div { grid-template-columns: 1fr; }
    .execution-flow-card,.training-record-model,.execution-mode-selector { padding: 15px; }
    .attendance-row { grid-template-columns: 1fr; gap: 5px; }
    .attendance-row > strong::before { content: "Deelnemer: "; color: #7a8d91; font-size: 10px; text-transform: uppercase; }
}