/* =========================================================================
   Pre-intake: the wizard of the member (mobile first), the Vandaag card, the read-only answers and the status line in
   the trainer's profile header.
   ========================================================================= */

.tbm-preintake-page {
    max-width: var(--tbm-content-width);
    margin: 0 auto;
    padding: 16px var(--tbm-gutter) calc(var(--tbm-bottom-nav-height) + 24px);
}

.tbm-preintake-page--trainer {
    max-width: 720px;
    padding-bottom: 32px;
}

.tbm-preintake-page__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tbm-preintake {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tbm-preintake__progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tbm-preintake__count {
    color: var(--tbm-text-secondary);
    font-weight: 600;
}

.tbm-preintake__step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tbm-preintake__title {
    margin: 0;
    font-size: 1.75rem;
}

.tbm-preintake__question {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Voordat je start: short points instead of one long paragraph */
.tbm-preintake__points {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.45;
}

.tbm-preintake__points li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tbm-preintake__points .mud-icon-root {
    flex: none;
    margin-top: 3px;
    color: var(--tbm-pink);
}

/* Side note with a pink bar: the privacy consent, the doctor advice on the risk steps */
.tbm-preintake__note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-left: 3px solid var(--tbm-pink);
    background: rgba(var(--tbm-overlay), 0.05);
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.45;
}

.tbm-preintake__note .mud-icon-root {
    flex: none;
    margin-top: 2px;
}

.tbm-preintake__note p {
    margin: 0;
}

.tbm-preintake__textarea {
    min-height: 110px;
    padding: 12px 14px;
    line-height: 1.35;
    resize: vertical;
}

/* Doelstelling and Ja/Nee: large choice buttons */
.tbm-preintake__goals,
.tbm-preintake__yesno {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tbm-preintake__goal {
    min-height: 64px;
    padding: 10px 12px;
    border: 1.5px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.tbm-preintake__goal--on {
    border-color: var(--tbm-pink);
    background: rgba(231, 50, 114, 0.14);
    color: var(--tbm-text);
}

/* Multiple choice chips */
.tbm-preintake__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tbm-preintake__chips--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
}

.tbm-preintake__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.tbm-preintake__chip--on {
    border-color: var(--tbm-pink);
    background: rgba(231, 50, 114, 0.14);
}

.tbm-preintake__chip .mud-icon-root {
    flex: none;
    color: var(--tbm-pink);
}

/* Tick-box list of the wizard: always a box, so it reads as multiple choice; text left aligned */
.tbm-preintake__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-preintake__options--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbm-preintake__options .tbm-preintake__chip {
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 1.15rem;
}

.tbm-preintake__box {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--tbm-text-secondary);
    border-radius: 4px;
}

.tbm-preintake__box--round {
    border-radius: 50%;
}

.tbm-preintake__chip--on .tbm-preintake__box {
    border-color: var(--tbm-pink);
    background: var(--tbm-pink);
}

.tbm-preintake__options .tbm-preintake__box .mud-icon-root {
    width: 16px;
    height: 16px;
    color: var(--tbm-on-pink);
}

/* "of" above the exclusive "geen van bovenstaande" option */
.tbm-preintake__or {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    color: var(--tbm-text-secondary);
    font-weight: 600;
}

.tbm-preintake__or::before,
.tbm-preintake__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tbm-border-strong);
}

.tbm-preintake__options--grid .tbm-preintake__or + .tbm-preintake__chip {
    grid-column: 1 / -1;
}

.tbm-preintake__confidence {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tbm-preintake__confidence-value {
    align-self: center;
    font-size: 3rem;
    line-height: 1;
    color: var(--tbm-pink);
}

.tbm-preintake__scale {
    display: flex;
    justify-content: space-between;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
}

.tbm-preintake__statements {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.35;
}

.tbm-preintake__declined,
.tbm-preintake__advice {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
    line-height: 1.35;
}

.tbm-preintake__advice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.tbm-preintake__advice p {
    margin: 0;
}

.tbm-preintake__nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tbm-preintake__nav .tbm-btn-primary {
    flex: 1;
}

/* Vorige: a quiet text button, so Volgende is clearly the main action */
.tbm-preintake__back {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 8px 0 0;
    border: 0;
    background: none;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-preintake__back:disabled {
    opacity: 0.5;
    cursor: default;
}

/* An odd last goal ("Iets anders?") takes the whole row instead of standing alone */
.tbm-preintake__goals .tbm-preintake__goal:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.tbm-preintake__welcome h2 {
    margin: 0 0 6px;
    font-size: 2rem;
    color: var(--tbm-pink);
}

.tbm-preintake__welcome p {
    margin: 0 0 6px;
    font-size: 1.2rem;
}

.tbm-preintake__signature {
    white-space: pre-line;
    color: var(--tbm-text-secondary);
}

.tbm-preintake__locked {
    margin: 0;
}

/* Vandaag card */
.tbm-preintake-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px var(--tbm-gutter);
    padding: 14px;
    border: 1.5px solid var(--tbm-pink);
    border-radius: var(--tbm-radius);
    background: rgba(231, 50, 114, 0.1);
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-preintake-card > .mud-icon-root:first-child {
    flex: none;
    font-size: 1.75rem;
    color: var(--tbm-pink);
}

.tbm-preintake-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tbm-preintake-card__text strong {
    font-size: 1.3rem;
    text-transform: uppercase;
}

.tbm-preintake-card__text span {
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    line-height: 1.3;
}

/* Read-only answers */
.tbm-preintake-view__status {
    margin: 0 0 8px;
    color: var(--tbm-text-secondary);
    font-weight: 600;
}

.tbm-preintake-view__list {
    display: grid;
    gap: 4px 16px;
    margin: 0;
}

.tbm-preintake-view__list dt {
    margin-top: 10px;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tbm-preintake-view__list dd {
    margin: 0;
    font-size: 1.15rem;
}

.tbm-preintake-view__list ul {
    margin: 0;
    padding-left: 18px;
}

.tbm-preintake-view__text {
    margin: 2px 0 0;
    white-space: pre-line;
}

.tbm-preintake-view__risk {
    color: var(--tbm-error);
    font-weight: 700;
}

/* Trainer: status line in the profile header */
.tbm-profile__preintake {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.tbm-profile__preintake > .mud-icon-root {
    color: var(--tbm-success);
}

.tbm-outline-button--compact {
    min-height: 34px;
    padding: 0 12px;
    font-size: 1.05rem;
}

.tbm-chip--danger {
    gap: 4px;
    border: 0;
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
    font-family: var(--tbm-font);
    cursor: pointer;
}

@media (min-width: 600px) {
    .tbm-preintake__goals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tbm-preintake__goals .tbm-preintake__goal:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .tbm-preintake__goals .tbm-preintake__goal:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .tbm-preintake__options--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tbm-preintake-view__list {
        grid-template-columns: minmax(160px, 220px) 1fr;
    }

    .tbm-preintake-view__list dt {
        margin-top: 0;
        padding-top: 4px;
    }
}

/* Trainer: the extended intake (Pages/Trainer/IntakePage.razor), on the measurement screen layout */
.tbm-profile__intake-lines {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.tbm-intake-page__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tbm-intake-page__date .tbm-input {
    width: auto;
    min-height: 34px;
}

.tbm-intake-intro {
    line-height: 1.4;
}

.tbm-intake-intro summary {
    cursor: pointer;
}

.tbm-intake-intro p,
.tbm-intake-intro ul {
    margin: 10px 0 0;
}

.tbm-intake-section .tbm-tcard__header + * {
    margin-top: 0;
}

.tbm-intake-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tbm-intake-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tbm-intake-field--sub {
    margin-left: 12px;
}

.tbm-intake-field__question {
    font-weight: 700;
    line-height: 1.3;
}

.tbm-intake-field__textarea {
    min-height: 64px;
    padding: 10px 12px;
    line-height: 1.35;
    resize: vertical;
}

.tbm-intake-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tbm-intake-slider__value {
    flex: none;
    color: var(--tbm-pink-accent);
}

.tbm-intake-yesno {
    display: flex;
    gap: 8px;
}

.tbm-intake-yesno .tbm-preintake__chip {
    min-width: 72px;
    justify-content: center;
}

.tbm-intake-page__footer {
    display: flex;
    justify-content: flex-end;
}

.tbm-intake-page__toggle {
    display: none;
}

.tbm-intake-view__section {
    margin: 18px 0 4px;
    font-size: 1.3rem;
    text-transform: uppercase;
}

.tbm-intake-view__section:first-of-type {
    margin-top: 6px;
}

/* The side column is narrow: label above the answer, also on wide screens. */
.tbm-preintake-view__list.tbm-intake-preintake__list {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 8px;
}

.tbm-preintake-view__list.tbm-intake-preintake__list dt {
    margin-top: 10px;
    padding-top: 0;
}

/* Small screens: the pre-intake first, collapsed until "Tonen" */
@media (max-width: 1279.98px) {
    .tbm-intake-page__side {
        order: -1;
    }

    .tbm-intake-page__toggle {
        display: inline-flex;
    }

    .tbm-intake-page__preintake:not(.tbm-intake-page__preintake--open) .tbm-intake-page__preintake-body {
        display: none;
    }
}

/* =========================================================================
   Traject plan: the trainer page, the read-only view, the dossier panel (Intake & traject), the tab and Jouw plan.
   ========================================================================= */

.tbm-plan-page__hint {
    margin: 0;
    font-size: 1rem;
}

.tbm-plan-versions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-plan-versions__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.tbm-intake-summary__steps {
    align-items: center;
    margin-bottom: 10px;
}

.tbm-intake-summary__source {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.tbm-intake-summary__list {
    display: grid;
    grid-template-columns: minmax(96px, 130px) 1fr;
    gap: 6px 12px;
    margin: 0;
}

.tbm-intake-summary__list dt {
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tbm-intake-summary__list dd {
    margin: 0;
    min-width: 0;
}

.tbm-intake-summary__text {
    white-space: pre-line;
}

.tbm-intake-summary__clamp--2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbm-intake-summary__how {
    margin: 0;
    padding-left: 16px;
}

.tbm-traject-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tbm-traject-tab__section summary {
    cursor: pointer;
}

.tbm-traject-tab__section[open] summary {
    margin-bottom: 10px;
}

.tbm-goal-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-goal-history__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbm-myplan {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tbm-myplan__goal,
.tbm-myplan__section {
    padding: 14px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-myplan__goal {
    border-left: 4px solid var(--tbm-pink-accent);
}

.tbm-myplan__title {
    margin: 0 0 8px;
    font-size: 1.3rem;
    text-transform: uppercase;
}

.tbm-myplan__goal-type {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.tbm-myplan__agreements {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-myplan-card {
    margin-top: 12px;
}

.tbm-myplan-agreement {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-myplan-agreement p {
    margin: 4px 0 0;
}

/* =========================================================================
   Participant declaration and consents (T20, T21): the member pages, the Vandaag banner and the dossier card.
   ========================================================================= */

.tbm-declaration {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tbm-declaration__subtitle,
.tbm-declaration__version {
    margin: 0;
    color: var(--tbm-text-secondary);
    line-height: 1.35;
}

.tbm-declaration__data {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
}

.tbm-declaration__data dt {
    color: var(--tbm-text-secondary);
}

.tbm-declaration__data dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tbm-declaration__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.35;
}

.tbm-declaration__check input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--tbm-pink);
}

.tbm-declaration__signed {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: rgba(231, 50, 114, 0.1);
    line-height: 1.35;
}

.tbm-consent {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tbm-consent__heading {
    font-weight: 700;
}

.tbm-consent__question {
    line-height: 1.35;
}

.tbm-consent__current {
    margin: 0;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
}

.tbm-consent-history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
}

.tbm-dossier-participant p {
    margin: 0 0 8px;
}

.tbm-dossier-participant__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.tbm-signers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}