/* ---- V1.63 the training facility, phase A (tf-): My company > Training (Client\Apps\Company\CompanyTraining*.razor), My training
   (Apps\Training\MyTrainingPage.razor), the trainer console (TrainingConsole*.razor) and their parts (TrainingFacility*.razor,
   TrainingTranscriptView.razor). Design system tokens only (--os-*), full page width; a new app file: every design guard at zero
   (DesignGuardTests.ZeroTolerance). ---- */

.tf-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.tf-page > * { min-width: 0; max-width: 100%; }
/* The tabs under the header scroll sideways; they never widen the header (its description stays in the page on a phone) */
.tf-page .os-pagehead > * { min-width: 0; }
.tf-kpis { margin: 0; }
.tf-grid { align-items: start; }
.tf-notice { margin: 0; }
.tf-filters .os-select { flex: 0 1 220px; width: auto; min-width: 160px; }
.tf-block { display: block; }
.tf-note { margin: var(--os-space-2) 0 0; }
.tf-sub { margin: var(--os-space-4) 0 var(--os-space-2); }
.tf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.tf-more { margin-top: var(--os-space-2); }
.tf-meta { display: inline-flex; flex-wrap: wrap; gap: var(--os-space-1) var(--os-space-3); color: var(--os-text-2); font: var(--os-type-small); }

/* Tables: numbers on the right, a table that is too wide scrolls inside its panel */
.tf-table td { white-space: normal; }
.tf-table td a { color: var(--os-accent-text); text-decoration: none; }
.tf-table td a:hover { text-decoration: underline; }
.tf-scroll { max-height: 420px; }
.tf-table td .os-select { min-width: 120px; }

/* People per level: the three totals under the table */
.tf-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--os-space-2); margin-top: var(--os-space-3); }
.tf-split > div { display: flex; flex-direction: column; gap: var(--os-space-1); padding: var(--os-space-2) var(--os-space-3);
    border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.tf-split b { font: var(--os-type-h3); color: var(--os-text); }

/* Bars of a share (the last activity, the hours by format) */
.tf-bars { display: flex; flex-direction: column; gap: var(--os-space-3); }
.tf-bar { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--os-space-3); }
.tf-bar__label { color: var(--os-text-2); font: var(--os-type-small); }
.tf-bar__n { min-width: 48px; text-align: right; color: var(--os-text); font: var(--os-type-small); font-variant-numeric: tabular-nums; }

/* Sessions: one panel each, the attendance per half-day */
.tf-sessions { display: flex; flex-direction: column; gap: var(--os-space-4); }
.tf-session__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--os-space-3);
    padding: var(--os-space-4) var(--os-space-4) var(--os-space-2); }
.tf-session__title { display: flex; align-items: flex-start; gap: var(--os-space-3); min-width: 0; }
.tf-session__title h3 { margin: 0; }
.tf-session__title p { margin: var(--os-space-1) 0 0; }
.tf-cellh { white-space: nowrap; }
.tf-cell { min-width: 120px; }
.tf-cellpick { min-width: 110px; }
.tf-minutes { width: 72px; margin-top: var(--os-space-1); }
.tf-score { width: 88px; text-align: right; }

/* The activity log */
.tf-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tf-activity__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--os-space-3);
    padding: var(--os-space-2) 0; border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
.tf-activity__item:last-child { border-bottom: 0; }
.tf-activity__icon { color: var(--os-accent-text); background: var(--os-accent-soft); }
.tf-activity__text { color: var(--os-text-2); font: var(--os-type-small); }
.tf-activity__text b { color: var(--os-text); font-weight: 600; margin-right: var(--os-space-1); }
.tf-activity__at { white-space: nowrap; }

/* Skills: the level of a cell (0 to 3), a cell under its target */
.tf-legend { display: flex; flex-wrap: wrap; gap: var(--os-space-2) var(--os-space-4); padding: var(--os-space-3) var(--os-space-4); }
.tf-legend__i { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.tf-table th.tf-matrix__c { min-width: 96px; max-width: 132px; height: auto; padding-top: var(--os-space-2); padding-bottom: var(--os-space-2); white-space: normal; line-height: 1.2; vertical-align: bottom; }
.tf-matrix__v { text-align: center; }
.tf-skill { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--os-radius-sm);
    border: var(--os-border-w) solid var(--os-border-subtle); background: var(--os-surface-sunken); color: var(--os-text-3);
    font: var(--os-type-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.tf-skill--1 { background: var(--os-info-soft); color: var(--os-info-text); border-color: transparent; }
.tf-skill--2 { background: var(--os-accent-soft); color: var(--os-accent-text); border-color: transparent; }
.tf-skill--3 { background: var(--os-good-soft); color: var(--os-good-text); border-color: transparent; }
.tf-skill--gap { border: 2px solid var(--os-warn); }
.tf-target { margin-left: var(--os-space-1); color: var(--os-text-3); font: var(--os-type-caption); }
.tf-skills { display: flex; flex-direction: column; gap: var(--os-space-2); }
.tf-skillrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--os-space-3); }
.tf-skillrow__name { color: var(--os-text); font: var(--os-type-small); }
.tf-targets { margin-top: var(--os-space-4); }
.tf-levelpick { min-width: 64px; }
.tf-roleinput { min-width: 180px; }

/* The transcript: readiness and next steps */
.tf-reasons, .tf-steps { margin: var(--os-space-2) 0 0; padding-left: var(--os-space-5); color: var(--os-text-2); font: var(--os-type-small); }
.tf-reasons li, .tf-steps li { margin: 0 0 var(--os-space-2); }
.tf-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1) var(--os-space-2); }
.tf-upcoming .tf-steps { list-style: none; padding-left: 0; }

/* Profiles: a changed row */
.tf-profiles .os-input, .tf-profiles .os-select { min-width: 150px; }
.tf-changed td { background: var(--os-surface-selected); }

/* The console's forms */
.tf-formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--os-space-3); }
.tf-formgrid .os-field { display: flex; flex-direction: column; gap: var(--os-space-1); color: var(--os-text-2); font: var(--os-type-small); }
.tf-dates { margin-top: var(--os-space-3); }
.tf-pick { display: flex; flex-direction: column; gap: var(--os-space-2); max-height: 360px; overflow: auto; margin-top: var(--os-space-3); }
.tf-pick__i { display: flex; align-items: flex-start; gap: var(--os-space-2); color: var(--os-text); font: var(--os-type-small); }

/* A phone: one column, the long descriptions of the tables hidden */
@media (max-width: 599.98px) {
    .tf-hide-xs { display: none; }
    .tf-page .os-pagehead { grid-template-columns: minmax(0, 1fr); }
    .tf-filters .os-select { flex: 1 1 100%; min-width: 0; width: 100%; }
    .tf-bar { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; }
    .tf-split { grid-template-columns: 1fr; }
}

/* Next steps: one person per item, their steps and the reminder */
.tf-nextlist { list-style: none; margin: 0; padding: 0; }
.tf-nextlist__item { display: grid; grid-template-columns: minmax(180px, 26%) minmax(0, 1fr) auto; align-items: start; gap: var(--os-space-2) var(--os-space-4);
    padding: var(--os-space-3) var(--os-space-4); border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
.tf-nextlist__item:last-child { border-bottom: 0; }
.tf-nextlist__who { display: flex; flex-direction: column; align-items: flex-start; gap: var(--os-space-1); }
.tf-nextlist__who a { color: var(--os-accent-text); font-weight: 600; text-decoration: none; }
.tf-nextlist__who a:hover { text-decoration: underline; }
.tf-nextlist .tf-steps { margin: 0; }

/* The profiles' CSV import */
.tf-import { display: flex; flex-direction: column; gap: var(--os-space-3); margin: 0 var(--os-space-4) var(--os-space-4); padding: var(--os-space-4);
    border: var(--os-border-w) dashed var(--os-border-strong); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.tf-import p { margin: 0; }
.tf-file { position: relative; align-self: flex-start; cursor: pointer; }
.tf-file__input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; clip-path: inset(50%); }
.tf-file:focus-within { outline: 2px solid var(--os-focus); outline-offset: 2px; }

/* The console: a company's dashboard; on a phone the "All present" buttons above the attendance */
.tf-companypick .os-select { flex: 0 1 320px; width: auto; }
.tf-disabled { pointer-events: none; color: var(--os-text-disabled); }
.tf-allpresent { display: none; }

@media (max-width: 599.98px) {
    .tf-nextlist__item { grid-template-columns: minmax(0, 1fr); }
    .tf-companypick .os-select { flex: 1 1 100%; }
    .tf-allpresent { display: flex; flex-wrap: wrap; gap: var(--os-space-2); padding: 0 var(--os-space-4) var(--os-space-3); }
    /* A table of cards: one card per participant, each value under its label */
    .tf-table.tf-cards, .tf-table.tf-cards tbody { display: block; }
    .tf-table.tf-cards thead { display: none; }
    .tf-table.tf-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-space-2) var(--os-space-3);
        padding: var(--os-space-3) var(--os-space-4); border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
    .tf-table.tf-cards td, .tf-table.tf-cards td:first-child, .tf-table.tf-cards td:last-child { display: flex; flex-direction: column; gap: var(--os-space-1);
        height: auto; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; }
    .tf-table.tf-cards td[data-label]::before { content: attr(data-label); color: var(--os-text-3); font: var(--os-type-caption); }
    .tf-table.tf-cards .tf-cards__who { grid-column: 1 / -1; color: var(--os-text); }
    .tf-table.tf-cards .os-select, .tf-table.tf-cards .os-input { width: 100%; min-width: 0; }
}