/* =========================================================================
   Planning, credits and contracts (trainer environment and member app). Tokens: app.css :root.
   ========================================================================= */

:root {
    --tbm-duo: #E73272;
    --tbm-solo: #0A8FB8;
    --tbm-duo-bg: rgba(231, 50, 114, 0.18);
    --tbm-solo-bg: rgba(10, 143, 184, 0.2);
    --tbm-intake: #9B7BFF;
    --tbm-intake-bg: rgba(155, 123, 255, 0.18);
    --tbm-conflict-bg: rgba(255, 92, 107, 0.16);
    --tbm-credit-free: #2A2A36;
}

/* ---- KPI extras -------------------------------------------------------- */

.tbm-kpi__suffix {
    margin-left: 4px;
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
    font-weight: 600;
}

.tbm-kpi__value--amber {
    color: var(--tbm-warning);
}

.tbm-kpi__value--red {
    color: var(--tbm-error);
}

/* ---- Status chips and prognosis ---------------------------------------- */

.tbm-pchip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 12px;
    border-radius: var(--tbm-radius-pill);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    white-space: nowrap;
}

.tbm-pchip--green {
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
}

.tbm-pchip--amber {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-pchip--red {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-pchip--blue {
    background: var(--tbm-blue-bg);
    color: var(--tbm-carbs);
}

.tbm-pchip--muted {
    background: var(--tbm-input-raised);
    color: var(--tbm-text-secondary);
}

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

.tbm-prognosis--exact {
    color: var(--tbm-success);
}

.tbm-prognosis--over {
    color: var(--tbm-warning);
}

.tbm-prognosis--short {
    color: var(--tbm-error);
}

.tbm-prognosis--muted {
    color: var(--tbm-text-secondary);
    font-weight: 500;
}

/* ---- Credit bar -------------------------------------------------------- */

.tbm-creditbar {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-credit-free);
}

.tbm-creditbar--large {
    height: 14px;
}

.tbm-creditbar__used {
    background: var(--tbm-text);
}

.tbm-creditbar__planned {
    background: var(--tbm-solo);
}

.tbm-creditbar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
}

.tbm-creditbar__legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tbm-creditbar__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.tbm-creditbar__dot--used {
    background: var(--tbm-text);
}

.tbm-creditbar__dot--planned {
    background: var(--tbm-solo);
}

.tbm-creditbar__dot--free {
    background: var(--tbm-credit-free);
    border: 1px solid var(--tbm-border-strong);
}

.tbm-minibar {
    display: block;
    width: 100%;
    max-width: 130px;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-credit-free);
}

.tbm-minibar span {
    display: block;
    height: 100%;
    background: var(--tbm-solo);
}

/* ---- Contracts page ---------------------------------------------------- */

.tbm-contracts__sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.05rem;
}

.tbm-contracts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
    gap: 20px;
    align-items: start;
}

.tbm-contracts__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tbm-contracts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tbm-contracts__head .tbm-panel__title {
    margin: 0;
}

.tbm-contracts__table td {
    vertical-align: middle;
}

.tbm-contracts__table tbody tr {
    cursor: pointer;
}

.tbm-contracts__row--selected td {
    background: rgba(231, 50, 114, 0.1);
}

.tbm-contracts__row--selected td:first-child {
    box-shadow: inset 4px 0 0 var(--tbm-pink);
}

.tbm-contracts__name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tbm-contracts__credits strong {
    font-size: 1.15rem;
}

.tbm-contracts__empty {
    padding: 24px 0;
}

.tbm-contracts__placeholder {
    min-height: 160px;
}

.tbm-contracts__hint {
    min-height: 200px;
}

@media (max-width: 1279.98px) {
    .tbm-contracts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Contract panel ---------------------------------------------------- */

.tbm-cpanel {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tbm-cpanel__kicker {
    margin: 0;
    color: var(--tbm-pink-accent);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tbm-cpanel__name {
    margin: 0;
    font-size: 2rem;
    transform: none;
}

.tbm-cpanel__line,
.tbm-cpanel__value {
    margin: 0;
}

.tbm-cpanel__member {
    padding: 14px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-cpanel__member-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.tbm-cpanel__explanation {
    margin: 10px 0 0;
    color: var(--tbm-text-secondary);
}

.tbm-cpanel__paid-by {
    margin: 4px 0 0;
    color: var(--tbm-text-secondary);
    font-weight: 600;
}

.tbm-cpanel__legend {
    margin: 0;
}

.tbm-cpanel__warning {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-cpanel__doc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-cpanel__doc .mud-icon-root {
    color: var(--tbm-pink-accent);
}

.tbm-cpanel__doc span {
    display: flex;
    flex-direction: column;
}

.tbm-cpanel__section {
    margin: 6px 0 0;
    font-size: 1.25rem;
    transform: none;
}

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

.tbm-cpanel__series li {
    display: flex;
    flex-direction: column;
}

.tbm-cpanel__transactions summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 0;
}

.tbm-cpanel__table td {
    padding: 6px 4px;
    font-size: 1rem;
}

.tbm-cpanel__reason {
    display: block;
}

.tbm-cpanel__amount {
    text-align: right;
    font-weight: 700;
    color: var(--tbm-success);
}

.tbm-cpanel__amount--minus {
    color: var(--tbm-text);
}

.tbm-cpanel__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}

.tbm-cpanel__actions .tbm-btn-primary {
    width: 100%;
}

/* ---- Dialogs: new contract, corrections -------------------------------- */

.tbm-steps {
    display: flex;
    gap: 16px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
}

.tbm-steps__item--active {
    color: var(--tbm-pink-accent);
    font-weight: 700;
}

.tbm-steps__item--done {
    color: var(--tbm-text);
}

.tbm-newcontract__results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    margin: 0 0 12px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.tbm-newcontract__member {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.1rem;
    text-align: left;
    cursor: pointer;
}

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

.tbm-newcontract__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px;
    text-align: center;
}

.tbm-newcontract__done .mud-icon-root {
    font-size: 2rem;
    color: var(--tbm-success);
}

.tbm-ccdialog__mode {
    margin-bottom: 14px;
}

.tbm-seriesfields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.tbm-seriesfields__line {
    margin: 0;
}

/* ---- Working hours and absences (Trainers & uren) ---------------------- */

.tbm-workhours,
.tbm-absences {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.tbm-workhours__total {
    font-size: 1.15rem;
}

.tbm-workhours__table th,
.tbm-workhours__table td {
    padding: 6px 8px 6px 0;
    vertical-align: middle;
}

.tbm-workhours__table th[scope="row"] {
    font-weight: 700;
    font-size: 1.15rem;
    text-align: left;
}

.tbm-workhours__table .tbm-select,
.tbm-workhours__table .tbm-input {
    min-height: 44px;
}

.tbm-select--free {
    border-style: dashed;
    color: var(--tbm-text-secondary);
}

.tbm-workhours__block td {
    padding-top: 0;
}

.tbm-workhours__blocks {
    white-space: nowrap;
}

.tbm-workhours__hours {
    font-weight: 700;
    white-space: nowrap;
}

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

.tbm-workhours__save {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---- Opening hours per location (Beheer › Vestigingen) ------------------- */

.tbm-openinghours__lead {
    margin: 0 0 16px;
    max-width: 760px;
}

.tbm-openinghours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 16px;
    align-items: start;
}

.tbm-openinghours__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

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

.tbm-openinghours__head h2 {
    margin: 0;
}

.tbm-openinghours__card table {
    width: 100%;
    table-layout: fixed;
}

.tbm-openinghours__card th:nth-child(1) {
    width: 48px;
}

.tbm-openinghours__card th:nth-child(2) {
    width: 56px;
}

.tbm-openinghours__card .tbm-input {
    width: 100%;
    min-width: 0;
}

.tbm-openinghours__card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--tbm-blue);
}

.tbm-openinghours__closed th[scope="row"] {
    color: var(--tbm-text-secondary);
}

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

.tbm-absences__hint {
    margin: 0;
    font-size: 0.95rem;
}

.tbm-absences__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-absences__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.tbm-absences__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-absences__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

/* ---- Planning: bar -------------------------------------------------------- */

.tbm-planning {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tbm-planning__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: -28px -32px 0;
    padding: 18px 32px;
    background: var(--tbm-panel);
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-planning__left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.tbm-planning__label {
    color: var(--tbm-text-secondary);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.tbm-planning__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tbm-planning__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    color: var(--tbm-text);
}

.tbm-planning__arrow:hover {
    border-color: var(--tbm-text);
}

.tbm-planning__title {
    min-width: 230px;
    margin: 0;
    font-size: 1.9rem;
    text-align: center;
    text-transform: uppercase;
    transform: none;
}

.tbm-planning--day .tbm-planning__title {
    min-width: 0;
    text-align: left;
}

.tbm-planning__locations .tbm-filter-pill {
    min-height: 44px;
    border: 1px solid var(--tbm-border-strong);
    background: transparent;
    text-decoration: none;
}

.tbm-planning__locations .tbm-filter-pill--active {
    border-color: var(--tbm-text);
    background: var(--tbm-text);
}

.tbm-planning__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr);
    margin-bottom: 0;
}

.tbm-planning__assistant-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    opacity: 0.6;
}

.tbm-planning__assistant-tile > span:last-child {
    display: flex;
    flex-direction: column;
    font-size: 1.15rem;
}

.tbm-planning__assistant-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input-raised);
    color: var(--tbm-text-secondary);
}

@media (max-width: 1279.98px) {
    .tbm-planning__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .tbm-planning__bar {
        margin: -20px -20px 0;
        padding: 14px 20px;
    }
}

/* ---- Week grid ------------------------------------------------------------ */

.tbm-week {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-week__row {
    display: grid;
    grid-template-columns: 230px repeat(var(--tbm-week-days, 6), minmax(150px, 1fr));
    min-width: 1100px;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-week__row--last {
    border-bottom: 2px solid var(--tbm-border-strong);
}

.tbm-week__row:last-child {
    border-bottom: 0;
}

.tbm-week__row--head {
    background: var(--tbm-input);
}

.tbm-week__corner,
.tbm-week__day,
.tbm-week__place {
    padding: 18px 18px;
    border-right: 1px solid var(--tbm-border);
}

.tbm-week__corner {
    color: var(--tbm-text-secondary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tbm-week__day {
    display: flex;
    flex-direction: column;
}

.tbm-week__day strong {
    font-size: 1.4rem;
    text-transform: uppercase;
}

.tbm-week__day span,
.tbm-week__place span {
    color: var(--tbm-text-secondary);
}

.tbm-week__place {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tbm-week__place strong {
    font-size: 1.4rem;
    text-transform: uppercase;
}

.tbm-week__cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 130px;
    padding: 14px 16px;
    border-right: 1px solid var(--tbm-border);
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-week__cell:last-child {
    border-right: 0;
}

.tbm-week__cell:hover {
    background: rgba(var(--tbm-overlay), 0.03);
}

.tbm-week__cell:focus-visible {
    outline: 2px solid var(--tbm-pink);
    outline-offset: -2px;
}

.tbm-week__cell--empty {
    background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--tbm-overlay), 0.035) 10px 20px);
}

.tbm-week__cell--conflict {
    background: rgba(140, 40, 52, 0.45);
}

.tbm-week__trainer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tbm-week__trainer strong {
    font-size: 1.2rem;
}

.tbm-week__trainer span {
    color: var(--tbm-text-secondary);
}

.tbm-week__bar {
    position: relative;
    height: 14px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-input-raised);
}

.tbm-week__shift {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(var(--tbm-overlay), 0.06);
}

.tbm-week__block {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid var(--tbm-card);
    border-radius: 2px;
}

.tbm-week__block--duo {
    background: var(--tbm-duo);
}

.tbm-week__block--solo {
    background: var(--tbm-solo);
}

.tbm-week__block--intake {
    background: var(--tbm-intake);
}

.tbm-week__block--conflict {
    box-shadow: 0 0 0 2px var(--tbm-error);
}

.tbm-week__summary {
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
}

.tbm-week__conflict {
    color: var(--tbm-error);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.tbm-week__legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tbm-week__legend ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.tbm-week__swatch {
    width: 18px;
    height: 14px;
    border-radius: 2px;
}

.tbm-week__swatch--duo {
    background: var(--tbm-duo);
}

.tbm-week__swatch--solo {
    background: var(--tbm-solo);
}

.tbm-week__swatch--intake {
    background: var(--tbm-intake);
}

.tbm-week__swatch--free {
    border: 1px solid var(--tbm-border-strong);
    background: var(--tbm-input-raised);
}

.tbm-week__swatch--none {
    border: 1px dashed var(--tbm-border-strong);
    background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(var(--tbm-overlay), 0.12) 3px 6px);
}

.tbm-week__swatch--conflict {
    background: rgba(140, 40, 52, 0.85);
}

/* ---- Day view ------------------------------------------------------------- */

.tbm-dayplan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 20px;
    align-items: start;
}

.tbm-day {
    padding: 18px 16px 14px;
    overflow-x: auto;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-day__head,
.tbm-day__body {
    display: grid;
    grid-template-columns: 52px repeat(var(--tbm-day-columns, 6), minmax(108px, 1fr));
    gap: 0 8px;
    min-width: calc(52px + var(--tbm-day-columns, 6) * 116px);
}

.tbm-day__head {
    margin-bottom: 12px;
}

.tbm-day__colhead {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

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

.tbm-day__colhead span {
    color: var(--tbm-text-secondary);
}

.tbm-day__colhead--none {
    background: rgba(140, 40, 52, 0.55);
}

.tbm-day__body {
    position: relative;
    height: calc(var(--tbm-day-hours, 14) * 40px + 1px);
}

.tbm-day__axis {
    position: relative;
}

.tbm-day__axis span {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
}

.tbm-day__col {
    position: relative;
    border-radius: var(--tbm-radius);
    background: repeating-linear-gradient(135deg, rgba(var(--tbm-overlay), 0.025) 0 9px, rgba(var(--tbm-overlay), 0.07) 9px 18px);
}

.tbm-day__shift {
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-panel);
}

/* The trainer is away (leave, sick, part of the day): hatched red, not plannable. */
.tbm-day__absent {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    padding: 4px 8px;
    border: 1px dashed rgba(255, 92, 107, 0.6);
    border-radius: var(--tbm-radius);
    background: repeating-linear-gradient(135deg, rgba(255, 92, 107, 0.10) 0 8px, rgba(255, 92, 107, 0.22) 8px 16px);
    color: var(--tbm-error);
    font-size: 0.85rem;
    font-weight: 700;
    overflow: hidden;
    pointer-events: none;
}

.tbm-week__swatch--absent {
    background: repeating-linear-gradient(135deg, rgba(255, 92, 107, 0.25) 0 3px, rgba(255, 92, 107, 0.55) 3px 6px);
}

.tbm-day__slot {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
}

.tbm-day__slot--open {
    cursor: pointer;
}

.tbm-day__slot--open:hover {
    background: rgba(var(--tbm-overlay), 0.05);
}

.tbm-dayplan--dragging .tbm-dblock:not(.tbm-dblock--dragged) {
    pointer-events: none;
}

.tbm-day__slot--checking {
    background: rgba(var(--tbm-overlay), 0.08);
}

.tbm-day__slot--valid {
    height: 40px;
    background: rgba(110, 231, 183, 0.22);
    outline: 1px dashed var(--tbm-success);
}

.tbm-day__slot--invalid {
    height: 40px;
    background: rgba(255, 92, 107, 0.35);
    outline: 1px dashed var(--tbm-error);
}

.tbm-dblock {
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 0 8px;
    border: 1px solid transparent;
    border-left: 4px solid;
    border-radius: var(--tbm-radius);
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 0.92rem;
    line-height: 1.05;
    text-align: left;
    cursor: grab;
}

.tbm-dblock strong {
    font-size: 0.98rem;
}

.tbm-dblock span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbm-dblock--duo {
    border-left-color: var(--tbm-duo);
    background: #3A1426;
}

.tbm-dblock--solo {
    border-left-color: var(--tbm-solo);
    background: #0F2F3C;
}

.tbm-dblock--intake {
    border-left-color: var(--tbm-intake);
    background: #251D3F;
}

.tbm-dblock--conflict {
    border-color: var(--tbm-error);
    border-left-color: var(--tbm-error);
    box-shadow: 0 0 0 1px var(--tbm-error);
}

.tbm-dblock__warn {
    color: var(--tbm-error);
}

.tbm-dblock--done {
    opacity: 0.6;
}

.tbm-dblock--selected {
    outline: 2px solid var(--tbm-text);
    outline-offset: 1px;
}

.tbm-dblock--dragged {
    opacity: 0.4;
}

.tbm-day__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    color: var(--tbm-text);
}

.tbm-day__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.tbm-assistant__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 1.6rem;
    transform: none;
}

.tbm-assistant__title .mud-icon-root {
    color: var(--tbm-carbs);
}

.tbm-requests__title {
    margin: 0 0 10px;
    font-size: 1.4rem;
    transform: none;
}

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

.tbm-requests__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-requests__head {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.tbm-requests__line,
.tbm-requests__note {
    margin: 0;
}

.tbm-requests__item .tbm-input {
    width: 100%;
}

.tbm-requests__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 1279.98px) {
    .tbm-dayplan {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Session panel and dialogs ------------------------------------------- */

.tbm-spanel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-color: var(--tbm-border-strong);
}

.tbm-spanel__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tbm-spanel__kicker {
    margin: 0;
    color: var(--tbm-pink-accent);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tbm-spanel__title {
    margin: 2px 0;
    font-size: 1.8rem;
    transform: none;
}

.tbm-spanel__line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.tbm-pchip--duo {
    background: var(--tbm-duo-bg);
    color: #FF7FAE;
}

.tbm-pchip--solo {
    background: var(--tbm-solo-bg);
    color: var(--tbm-carbs);
}

.tbm-plandialog__intake {
    margin: 0;
}

.tbm-pchip--intake,
.tbm-mbadge--intake {
    background: var(--tbm-intake-bg);
    color: var(--tbm-intake);
}

.tbm-spanel__conflict {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-conflict-bg);
    color: var(--tbm-error);
    font-weight: 600;
}

.tbm-spanel__participants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-spanel__participant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-spanel__participant > div {
    display: flex;
    flex-direction: column;
}

.tbm-spanel__participant--cancelled strong {
    text-decoration: line-through;
    color: var(--tbm-text-secondary);
}

.tbm-spanel__attendance {
    font-size: 0.98rem;
    color: var(--tbm-text-secondary);
}

.tbm-spanel__attendance--warn {
    color: var(--tbm-warning);
}

.tbm-spanel__training,
.tbm-spanel__series {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
}

.tbm-spanel__training span,
.tbm-spanel__series > span {
    display: flex;
    flex-direction: column;
}

.tbm-spanel__no-training {
    color: var(--tbm-error);
    font-weight: 700;
}

.tbm-spanel__series {
    flex-wrap: wrap;
}

.tbm-spanel__series-actions {
    display: flex;
    gap: 10px;
}

.tbm-text-button--danger {
    color: var(--tbm-error);
}

.tbm-spanel__moved {
    margin: 0;
}

.tbm-spanel__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tbm-plandialog__when {
    margin: 4px 0 0;
}

.tbm-plandialog__candidate {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.tbm-plandialog__candidate > span:first-child {
    display: flex;
    flex-direction: column;
}

.tbm-plandialog__free {
    color: var(--tbm-success);
    font-weight: 700;
    white-space: nowrap;
}

.tbm-plandialog__free--none {
    color: var(--tbm-error);
}

.tbm-plandialog__preview {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-plandialog__ok {
    margin: 0;
    color: var(--tbm-success);
    font-weight: 700;
}

.tbm-plandialog__warn {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
    font-weight: 600;
}

.tbm-plandialog__override {
    padding: 12px;
    border: 1px solid var(--tbm-warning);
    border-radius: var(--tbm-radius);
}

.tbm-movecheck {
    min-height: 40px;
}

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

.tbm-complete__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}

.tbm-attendance {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-attendance__option {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text-secondary);
    font-family: var(--tbm-font);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-attendance__option--on {
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
}

.tbm-attendance__option--noshow.tbm-attendance__option--on {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-attendance__option--late.tbm-attendance__option--on {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

/* ---- Trainer Vandaag ------------------------------------------------------ */

/* One strip with what asks for action, the spots at the end */
.tbm-today-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tbm-today-action {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

a.tbm-today-action:hover {
    border-color: var(--tbm-border-strong);
}

.tbm-today-action strong {
    font-size: 1.35rem;
}

.tbm-today-action__count--on {
    color: var(--tbm-pink-accent);
}

.tbm-today-spots {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: auto;
    color: var(--tbm-text-secondary);
}

.tbm-today-spots__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}

.tbm-today-spots__item i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tbm-input-raised);
}

.tbm-today-spots__item--me i {
    background: var(--tbm-carbs);
}

/* Trainer "Vandaag" (not .tbm-today: that is the member home). */
.tbm-ttoday {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px;
    align-items: start;
}

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

.tbm-ttoday__note {
    margin: 0;
}

.tbm-today-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-today-list li + li {
    border-top: 1px solid var(--tbm-border);
}

.tbm-today-sessions__title {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.tbm-today-list__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-left: 4px solid transparent;
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    text-align: left;
    cursor: pointer;
}

.tbm-today-list__item:hover {
    background: rgba(var(--tbm-overlay), 0.03);
}

.tbm-today-list__item--selected {
    border-left-color: var(--tbm-pink);
    background: rgba(231, 50, 114, 0.12);
}

.tbm-today-list__item--done {
    opacity: 0.75;
}

.tbm-today-list__time,
.tbm-today-list__text {
    display: flex;
    flex-direction: column;
}

.tbm-today-list__time strong {
    font-size: 1.7rem;
    line-height: 1;
}

.tbm-today-list__time small {
    color: var(--tbm-text-secondary);
}

.tbm-today-list__text strong {
    font-size: 1.25rem;
}

.tbm-today-list__sub {
    color: var(--tbm-text-secondary);
}

.tbm-today-list__intake {
    color: var(--tbm-protein);
    font-weight: 700;
}

/* A quiet label instead of a red line on every session */
.tbm-today-list__status {
    padding: 2px 10px;
    border-radius: var(--tbm-radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.tbm-today-list__status--missing {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-today-list__status--done {
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
}

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

.tbm-today-panel__head {
    display: flex;
    flex-direction: column;
}

.tbm-today-panel__kicker {
    margin: 0;
    color: var(--tbm-pink-accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tbm-today-panel__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 600;
}

.tbm-today-panel__done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
    font-weight: 700;
}

.tbm-today-panel__links {
    margin: 4px 0 0;
    color: var(--tbm-text-secondary);
}

.tbm-today-panel__links a {
    color: var(--tbm-text);
    font-weight: 700;
    text-underline-offset: 3px;
}

.tbm-today-panel__links a:hover {
    color: var(--tbm-pink);
}

/* The training: name with "Wijzigen", "3 blokken · 28 min", the exercises; or an empty box with "Training maken" */
.tbm-today-training-block__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.tbm-today-training-block__summary {
    margin: 0 0 6px;
}

.tbm-today-training-empty {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
}

.tbm-today-person__attendance {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.tbm-today-person__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.tbm-today-person__attended {
    padding: 2px 10px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
    font-weight: 700;
}

.tbm-today-person__attended--noshow {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-today-panel__title {
    margin: 4px 0;
    font-size: 2.2rem;
    text-transform: uppercase;
    transform: none;
}

.tbm-today-panel__sub {
    margin: 0;
}

.tbm-today-panel__people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.tbm-today-person {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-today-person--cancelled {
    opacity: 0.6;
}

.tbm-today-person__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tbm-today-person__head strong {
    font-size: 1.25rem;
}

.tbm-today-person__task {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px dashed var(--tbm-pink);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tbm-today-person__task .mud-icon-root,
.tbm-today-person__start {
    color: var(--tbm-pink-accent);
    font-weight: 700;
}

.tbm-today-person__task span {
    display: flex;
    flex-direction: column;
}

.tbm-today-person__note {
    min-height: 60px;
    resize: vertical;
}

.tbm-today-person__done {
    margin: 0;
    font-weight: 700;
}

.tbm-today-panel__workout {
    margin: 0;
    font-size: 1.4rem;
    text-transform: uppercase;
    transform: none;
}

/* Dossier links on the names (Vandaag and the side panel of the planning) */
.tbm-today-person__name,
.tbm-spanel__name {
    color: var(--tbm-text);
    font-weight: 700;
    text-decoration: none;
}

.tbm-today-person__name {
    font-size: 1.25rem;
}

.tbm-today-person__name:hover,
.tbm-spanel__name:hover {
    color: var(--tbm-pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Dossier ›": an explicit way to the member's dossier next to the name */
.tbm-dossier-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    color: var(--tbm-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tbm-dossier-link .mud-icon-root {
    font-size: 1rem;
}

.tbm-dossier-link:hover {
    border-color: var(--tbm-pink);
    color: var(--tbm-pink);
}

.tbm-today-person__head {
    flex-wrap: wrap;
    align-items: center;
}

.tbm-today-person__who {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tbm-spanel__participant-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* The training of a session: per exercise for whom it is (SessionWorkoutList) */
.tbm-swlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-swlist__block-title {
    margin: 0 0 4px;
    color: var(--tbm-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.tbm-swlist__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: center;
    padding: 6px 10px;
    border-left: 3px solid transparent;
}

/* Solo: the dose on the right of the exercise, one line per exercise */
.tbm-swlist__item:not(:has(.tbm-swlist__for)) .tbm-swlist__dose {
    grid-row: 1;
    grid-column: 2;
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}

.tbm-swlist__item + .tbm-swlist__item {
    border-top: 1px solid var(--tbm-border);
}

.tbm-swlist__name {
    font-size: 1.1rem;
}

.tbm-swlist__for {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    grid-row: span 2;
    grid-column: 2;
}

.tbm-swlist__dose,
.tbm-swlist__note {
    grid-column: 1;
    font-size: 0.9rem;
}

.tbm-today-panel__complete {
    width: 100%;
}

/* Te controleren: the first few with a tick each, "Alle … bekijken" and "Alles klopt" */
.tbm-today-review__count {
    color: var(--tbm-pink-accent);
}

.tbm-today-review__list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.tbm-today-review__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-top: 1px solid var(--tbm-border);
}

.tbm-today-review__list a {
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-today-review__list a:hover {
    color: var(--tbm-pink);
}

.tbm-today-review__check {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text-secondary);
    cursor: pointer;
}

.tbm-today-review__check:hover:not(:disabled) {
    border-color: var(--tbm-success);
    color: var(--tbm-success);
}

.tbm-today-review__actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.tbm-today-review__actions .tbm-outline-button {
    flex: 1;
}

.tbm-today-review__all {
    border-color: var(--tbm-pink);
    color: var(--tbm-pink-accent);
}

@media (max-width: 1279.98px) {
    .tbm-ttoday {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Member app: sessions, cancelling, wishes ----------------------------- */

.tbm-mbadge--moved {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-mbadge--done {
    background: var(--tbm-success-chip-bg);
    color: var(--tbm-success);
}

.tbm-mbadge--declined {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-msession {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 24px;
}

.tbm-msession__line {
    margin: 0;
    font-size: 1.2rem;
}

.tbm-msession__moved {
    margin: 0;
    color: var(--tbm-warning);
    font-weight: 700;
}

.tbm-msession__cancel {
    width: 100%;
}

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

.tbm-msession__confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-msession__cancelled {
    margin: 0;
    color: var(--tbm-text-secondary);
    font-weight: 700;
}

.tbm-cancel-notice {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    font-weight: 600;
}

.tbm-cancel-notice--free {
    background: var(--tbm-success-bg);
    color: var(--tbm-success);
}

.tbm-cancel-notice--late {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-cancel-notice__partner {
    margin: 0;
    color: var(--tbm-text-secondary);
}

.tbm-wish {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 22px 20px;
    border: 2px dashed var(--tbm-pink);
    border-radius: var(--tbm-radius);
    scroll-margin-top: 16px;
}

.tbm-wish__title {
    margin: 0;
    font-size: 1.7rem;
    transform: none;
}

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

.tbm-wish__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tbm-wish__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
}

.tbm-wish__field .tbm-select,
.tbm-wish__field .tbm-input {
    min-height: 52px;
    font-weight: 400;
}

.tbm-wish__days {
    flex-wrap: wrap;
}

.tbm-wish__send {
    margin-top: 4px;
}

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

.tbm-wish__mine {
    margin: 10px 0 0;
    font-size: 1.25rem;
    transform: none;
}

.tbm-wish__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-wish__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: center;
    padding: 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-wish__item > div {
    display: flex;
    flex-direction: column;
}

.tbm-wish__item .tbm-text-button {
    grid-column: 1 / -1;
    justify-self: start;
}

.tbm-wish__answer {
    margin-top: 4px;
    color: var(--tbm-text);
    font-style: italic;
}

/* An accepted proposal of the planning assistant: "Verzet naar di 13 okt 19:30 · Sanne". */
.tbm-wish__result {
    margin-top: 4px;
    color: var(--tbm-success);
    font-weight: 700;
}

/* ---- Member app: contract ------------------------------------------------- */

.tbm-mcontracts {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 16px 32px;
}

.tbm-mcontract {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-mcontract--compact {
    gap: 6px;
    padding: 16px 18px;
}

.tbm-mcontract__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tbm-mcontract__title {
    margin: 0;
    font-size: 1.7rem;
    text-transform: uppercase;
    transform: none;
}

.tbm-mcontract--compact .tbm-mcontract__title {
    font-size: 1.25rem;
}

.tbm-mcontract__period {
    margin: 2px 0 0;
    font-size: 1.15rem;
}

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

.tbm-mcontract__credits strong {
    margin-right: 6px;
    color: var(--tbm-text);
    font-size: 3.6rem;
    line-height: 1;
}

.tbm-mcontract__notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
    font-size: 1.15rem;
}

.tbm-mcontract__notice a {
    color: var(--tbm-warning);
    font-weight: 700;
    white-space: nowrap;
}

.tbm-mcontract__doc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    font-size: 1.15rem;
}

.tbm-mcontract__doc .mud-icon-root {
    color: var(--tbm-pink-accent);
}

.tbm-mcontracts__terms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tbm-mcontracts__terms:hover {
    color: var(--tbm-pink);
}

.tbm-mcontracts__invoices-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.tbm-mcontracts__invoices-head h2 {
    margin: 0;
    color: var(--tbm-text-secondary);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    transform: none;
}

.tbm-mcontracts__placeholder {
    padding: 22px 18px;
    border: 1px dashed var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text-secondary);
    text-align: center;
}

/* Profiel (member app): who is signed in, notifications, theme and signing out */
.tbm-mprofile__who,
.tbm-mprofile__theme {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.tbm-mprofile__theme {
    justify-content: space-between;
}

.tbm-mprofile__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
    font-size: 1.3rem;
    font-weight: 700;
}

.tbm-mprofile__name,
.tbm-mprofile__label {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.tbm-mprofile__who p,
.tbm-mprofile__theme p {
    margin: 0;
}

/* The push card is shared with Mijn account of the trainers: full width here */
/* Mijn profiel: rows to its own pages (Contract & facturen, Meldingen); those pages have a back button to Profiel */
.tbm-mprofile__menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tbm-mprofile__row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 16px;
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-mprofile__row + .tbm-mprofile__row {
    border-top: 1px solid var(--tbm-border);
}

.tbm-mprofile__row > .mud-icon-root:first-child {
    color: var(--tbm-pink);
}

.tbm-mprofile__row span {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.tbm-mprofile__row strong {
    font-size: 1.25rem;
}

.tbm-mprofile__row small {
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
}

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

.tbm-mprofile__page-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tbm-mprofile .mud-card {
    max-width: none !important;
    margin-top: 0 !important;
}

/* ---- Overview per participant (T22): member app, contract panel, dossier ---------------------------------------- */

.tbm-overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tbm-overview__schedule {
    align-self: flex-start;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
}

.tbm-overview__schedule--ok {
    background: var(--tbm-success-bg);
    color: var(--tbm-success);
}

.tbm-overview__schedule--extra,
.tbm-overview__schedule--grace {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-overview__counters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.tbm-overview__counters > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 10px 8px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
    text-align: center;
}

.tbm-overview__counters dt {
    color: var(--tbm-text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.tbm-overview__counters dd {
    margin: 0;
    color: var(--tbm-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.tbm-overview__line {
    margin: 0;
    font-size: 0.95rem;
}

.tbm-overview__heading {
    margin: 4px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tbm-overview__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.tbm-overview__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 12px;
}

.tbm-overview__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.95rem;
}

.tbm-overview__facts > div {
    display: contents;
}

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

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

.tbm-overview__warn {
    color: var(--tbm-warning);
}

.tbm-overview__history summary {
    cursor: pointer;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
}

.tbm-overview__history[open] summary {
    margin-bottom: 8px;
}

@media (max-width: 380px) {
    .tbm-overview__counters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Part 7 link: chips and the session choice in the editor -------------- */

.tbm-chip--amber {
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-wplan__field--session {
    flex: 1;
    min-width: 260px;
}

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

.tbm-spanel__link .tbm-select {
    flex: 1;
}

/* ---- Member app: planning messages in Berichten -------------------------- */

.tbm-notification {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-notification--unread::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tbm-pink);
}

.tbm-notification__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tbm-blue-bg);
    color: var(--tbm-carbs);
}

.tbm-notification__text p {
    margin: 2px 0 4px;
    color: var(--tbm-text-secondary);
}

.tbm-notification__link {
    align-self: center;
    color: var(--tbm-text-secondary);
}

/* ---- Member dossier: contract & credits, coming sessions, preferences ---- */

.tbm-dossier-contract {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.tbm-dossier-contract + .tbm-dossier-contract {
    border-top: 1px solid var(--tbm-border);
}

.tbm-dossier-contract--ended {
    opacity: 0.7;
}

.tbm-dossier-contract__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.tbm-dossier-contract__head > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbm-dossier-contract__credits,
.tbm-dossier-contract__explanation {
    margin: 0;
}

.tbm-dossier-contract__credits strong {
    font-size: 1.4rem;
}

.tbm-dossier-sessions th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.tbm-dossier-sessions th a:hover {
    color: var(--tbm-pink);
}

.tbm-dossier-prefs {
    margin: 0;
}

.tbm-dossier-prefs > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
}

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

.tbm-dossier-prefs dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    text-align: right;
}

.tbm-dossier-prefs__line {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tbm-dossier-prefs__warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-warning-bg);
    color: var(--tbm-warning);
}

.tbm-dossier-prefs__warning a {
    color: inherit;
    font-weight: 700;
}

/* "Inhaal plannen": the wish card the member lands on. */
.tbm-wish--catchup {
    border-style: solid;
}

.tbm-wish:focus {
    outline: none;
}

/* ---- Mijn uren & verlof (trainer) ---------------------------------------- */

.tbm-myhours {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.tbm-myhours__main,
.tbm-myhours__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tbm-myhours .tbm-tcard__title {
    margin: 0 0 14px;
}

.tbm-myhours .tbm-tcard__header .tbm-tcard__title {
    margin: 0;
}

.tbm-myhours .tbm-tcard__header > .tbm-muted {
    white-space: nowrap;
}

.tbm-myhours__over {
    color: var(--tbm-warning);
    font-weight: 700;
}

.tbm-myhours__times {
    margin-top: 12px;
}

.tbm-myhours__note {
    margin-top: 14px;
}

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

.tbm-myhours__hint {
    margin: 10px 0 0;
    font-size: 0.95rem;
}

.tbm-myhours .tbm-absences__buttons {
    margin-top: 16px;
}

.tbm-myhours .tbm-absences__buttons .tbm-btn-primary {
    width: auto;
    min-width: 180px;
}

.tbm-myhours__absences {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-myhours__absences li {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.6fr) auto auto;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-myhours__absences li:last-child {
    border-bottom: 0;
}

.tbm-myhours__detail {
    grid-column: 1 / -1;
    font-size: 0.95rem;
}

.tbm-myhours__shifts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-myhours__shifts li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
}

.tbm-myhours__shift--away {
    background: var(--tbm-conflict-bg);
}

.tbm-absences__decide {
    display: inline-flex;
    gap: 12px;
}

.tbm-absences__list li.tbm-absences__item--declined {
    opacity: 0.6;
}

.tbm-absences__list li {
    flex-wrap: wrap;
}

.tbm-absences__decline {
    display: flex;
    flex: 1 0 100%;
    gap: 8px;
    align-items: center;
}

@media (max-width: 1023.98px) {
    .tbm-myhours {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599.98px) {
    .tbm-myhours__absences li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tbm-myhours__shifts li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tbm-myhours__shifts li > :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ---- Week calendar (design 1b): a lane per location per day ----------------- */

.tbm-wcal {
    position: relative;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    background: var(--tbm-bg);
}

.tbm-wcal--collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.tbm-wcal--collapsed .tbm-wcal__side {
    display: none;
}

.tbm-wcal__corner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
}

.tbm-wcal__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px;
    border-right: 1px solid var(--tbm-border);
    background: var(--tbm-panel);
}

.tbm-wcal__create {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px 0 16px;
    border: 0;
    border-radius: 23px;
    background: var(--tbm-pink);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.tbm-wcal__month header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.tbm-wcal__month header strong {
    font-size: 1.05rem;
}

.tbm-wcal__icon {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--tbm-text-secondary);
    cursor: pointer;
}

.tbm-wcal__icon:hover {
    background: var(--tbm-input);
    color: var(--tbm-text);
}

.tbm-wcal__month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
    font-size: 0.85rem;
}

.tbm-wcal__month-head {
    padding: 2px 0;
    color: var(--tbm-text-secondary);
}

.tbm-wcal__month-day {
    padding: 4px 0;
    border-radius: 14px;
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-wcal__month-day:hover {
    background: var(--tbm-input-raised);
}

.tbm-wcal__month-day--other {
    color: var(--tbm-text-secondary);
}

.tbm-wcal__month-day--week {
    background: rgba(var(--tbm-overlay), 0.08);
    font-weight: 600;
}

.tbm-wcal__month-day--today {
    background: var(--tbm-pink);
    color: #FFFFFF;
    font-weight: 700;
}

.tbm-wcal__filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-wcal__label {
    margin: 6px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

.tbm-wcal__check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    font-size: 1rem;
    cursor: pointer;
}

.tbm-wcal__check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--tbm-pink);
}

.tbm-wcal__check strong {
    flex: 1;
}

.tbm-wcal__check--trainer {
    padding-left: 28px;
    font-size: 0.95rem;
}

.tbm-wcal__dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

.tbm-wcal__counters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding: 14px;
    border-radius: 8px;
    background: var(--tbm-card);
}

.tbm-wcal__counters > * {
    display: flex;
    justify-content: space-between;
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-wcal__count--red {
    color: var(--tbm-error);
}

.tbm-wcal__count--pink {
    color: var(--tbm-pink-accent);
}

.tbm-wcal__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tbm-wcal__scroll {
    overflow-x: auto;
}

.tbm-wcal__grid {
    min-width: calc(52px + var(--tbm-wcal-days) * var(--tbm-wcal-lanes) * 44px);
}

.tbm-wcal__head,
.tbm-wcal__body {
    display: grid;
    grid-template-columns: 52px repeat(var(--tbm-wcal-days), minmax(0, 1fr));
}

.tbm-wcal__head {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--tbm-border);
    background: var(--tbm-bg);
}

.tbm-wcal__dayhead {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 8px 0 6px;
    border-left: 1px solid rgba(var(--tbm-overlay), 0.12);
}

.tbm-wcal__date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-wcal__date span {
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.tbm-wcal__date strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    font-size: 1.3rem;
}

.tbm-wcal__date:hover strong {
    background: var(--tbm-input-raised);
}

.tbm-wcal__date--today span {
    color: var(--tbm-pink-accent);
}

.tbm-wcal__date--today strong,
.tbm-wcal__date--today:hover strong {
    background: var(--tbm-pink);
}

.tbm-wcal__lanes-head {
    display: flex;
}

.tbm-wcal__lanes-head span {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.tbm-wcal__body {
    height: var(--tbm-wcal-height);
}

.tbm-wcal__axis {
    position: relative;
}

.tbm-wcal__axis span {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    color: var(--tbm-text-secondary);
    font-size: 0.75rem;
}

.tbm-wcal__day {
    position: relative;
    min-width: 0;
    border-left: 1px solid rgba(var(--tbm-overlay), 0.12);
    background: repeating-linear-gradient(135deg, rgba(var(--tbm-overlay), 0.02) 0 8px, rgba(var(--tbm-overlay), 0.05) 8px 16px);
}

.tbm-wcal__day::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(var(--tbm-overlay), 0.07) 0 1px, transparent 1px 50px);
}

.tbm-wcal__lane {
    position: absolute;
    top: 0;
    bottom: 0;
}

.tbm-wcal__lane + .tbm-wcal__lane {
    border-left: 1px solid rgba(var(--tbm-overlay), 0.05);
}

.tbm-wcal__lane--closed {
    background: rgba(0, 0, 0, 0.45);
}

.tbm-wcal__shift {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 4px;
    background: var(--tbm-card);
}

.tbm-wcal__absent {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 2;
    box-sizing: border-box;
    border: 1px dashed rgba(255, 92, 107, 0.7);
    border-radius: 5px;
    background: repeating-linear-gradient(135deg, rgba(255, 92, 107, 0.12) 0 6px, rgba(255, 92, 107, 0.26) 6px 12px);
}

.tbm-wcal__slot {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 25px;
    cursor: pointer;
}

.tbm-wcal__slot:hover {
    background: rgba(var(--tbm-overlay), 0.07);
}

.tbm-wcal__event {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1px;
    box-sizing: border-box;
    min-width: 0;
    padding: 3px 6px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 6px;
    background-clip: padding-box;
    color: #FFFFFF;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.tbm-wcal__event strong,
.tbm-wcal__event span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbm-wcal__event strong {
    font-size: 0.85rem;
    line-height: 1.1;
}

.tbm-wcal__event span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    line-height: 1.15;
}

.tbm-wcal__event:hover {
    filter: brightness(1.15);
}

.tbm-wcal__event--conflict {
    outline: 2px solid var(--tbm-error);
    outline-offset: -2px;
}

.tbm-wcal__event--past {
    opacity: 0.55;
}

.tbm-wcal__event--selected {
    outline: 2px solid var(--tbm-text);
    outline-offset: -2px;
}

.tbm-wcal__now {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    height: 2px;
    background: var(--tbm-pink);
    pointer-events: none;
}

.tbm-wcal__now::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--tbm-pink);
}

.tbm-wcal__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 10px 16px;
    border-top: 1px solid var(--tbm-border);
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
}

.tbm-wcal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tbm-wcal__legend i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.tbm-wcal__legend-note {
    margin-left: auto;
}

i.tbm-wcal__swatch--off {
    background: repeating-linear-gradient(135deg, rgba(var(--tbm-overlay), 0.05) 0 3px, rgba(var(--tbm-overlay), 0.14) 3px 6px);
}

i.tbm-wcal__swatch--absent {
    background: repeating-linear-gradient(135deg, rgba(255, 92, 107, 0.25) 0 3px, rgba(255, 92, 107, 0.55) 3px 6px);
}

i.tbm-wcal__swatch--conflict {
    box-shadow: inset 0 0 0 2px var(--tbm-error);
}

.tbm-wcal__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    width: min(440px, 100vw);
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
    border-left: 1px solid var(--tbm-border);
    background: var(--tbm-panel);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1023.98px) {
    .tbm-wcal {
        grid-template-columns: minmax(0, 1fr);
    }

    .tbm-wcal__side {
        border-right: 0;
        border-bottom: 1px solid var(--tbm-border);
    }

    .tbm-wcal__counters {
        margin-top: 0;
    }
}

/* ---- Planning assistant (8b) ------------------------------------------------ */

.tbm-planning__pending {
    margin-left: auto;
    color: var(--tbm-text-secondary);
    font-size: 1.1rem;
}

.tbm-assistant__intro {
    margin: 0 0 6px;
    color: var(--tbm-text-secondary);
    font-size: 1.1rem;
    line-height: 1.35;
}

.tbm-assistant__recalc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
}

.tbm-assistant__recalc .mud-icon-root {
    width: 18px;
    height: 18px;
}

.tbm-assistant__subtitle {
    margin: 0 0 8px;
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
    transform: none;
}

.tbm-assistant__rules p {
    margin: 0;
    color: var(--tbm-text-secondary);
    line-height: 1.45;
}

.tbm-assistant__others ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbm-assistant__others li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.tbm-assistant__others a {
    color: var(--tbm-text);
    font-weight: 700;
}

.tbm-assistant__empty {
    margin: 0;
}

/* A proposal: tag, "96% match", title, before → after, reasons, buttons. */
.tbm-scard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid transparent;
    outline: none;
    transition: border-color 0.15s ease;
}

.tbm-scard--highlighted {
    border-color: var(--tbm-carbs);
}

.tbm-scard--accepted {
    border-color: var(--tbm-success);
}

.tbm-scard--exhausted {
    opacity: 0.75;
}

.tbm-scard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tbm-scard__match {
    color: var(--tbm-carbs);
    font-weight: 700;
    font-size: 1.1rem;
}

.tbm-scard__title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
    text-transform: none;
    transform: none;
}

.tbm-scard__change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    font-size: 1.15rem;
}

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

.tbm-scard__arrow {
    width: 18px;
    height: 18px;
}

.tbm-scard__reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.tbm-scard__reasons li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.1rem;
    line-height: 1.25;
}

.tbm-scard__tick {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--tbm-success);
}

.tbm-scard__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: stretch;
}

.tbm-scard__accept {
    min-height: 52px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tbm-scard__other {
    min-height: 52px;
}

.tbm-scard__done {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tbm-scard__planned {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tbm-success);
    font-weight: 700;
}

.tbm-scard__planned .mud-icon-root {
    width: 18px;
    height: 18px;
}

.tbm-scard__note {
    margin: 0;
    color: var(--tbm-warning);
    font-weight: 700;
}

/* Tags: Ledenwens blue, Nieuw lid pink, Conflict red, Inhalen violet. */
.tbm-stag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 12px;
    border-radius: var(--tbm-radius-pill);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.tbm-stag--request {
    background: var(--tbm-blue-bg);
    color: var(--tbm-carbs);
}

.tbm-stag--new {
    background: var(--tbm-duo-bg);
    color: var(--tbm-pink-accent);
}

.tbm-stag--conflict {
    background: var(--tbm-error-bg);
    color: var(--tbm-error);
}

.tbm-stag--catchup {
    background: rgba(155, 123, 255, 0.16);
    color: var(--tbm-intake);
}

/* In the planning: the proposed session dashed, the one it replaces transparent and struck through. */
.tbm-dblock--proposal {
    z-index: 2;
    border: 1px dashed rgba(var(--tbm-overlay), 0.7);
    border-left: 1px dashed rgba(var(--tbm-overlay), 0.7);
    background: rgba(10, 10, 15, 0.9);
    cursor: pointer;
}

.tbm-dblock--preview {
    border-color: rgba(var(--tbm-overlay), 0.4);
    color: var(--tbm-text-secondary);
}

.tbm-dblock--replaced {
    opacity: 0.45;
}

.tbm-dblock--replaced strong,
.tbm-dblock--replaced span {
    text-decoration: line-through;
}

.tbm-dblock--highlight {
    z-index: 3;
    opacity: 1;
    outline: 2px solid var(--tbm-carbs);
    outline-offset: 1px;
}

.tbm-week__swatch--proposal {
    border: 1px dashed rgba(var(--tbm-overlay), 0.7);
    background: transparent;
}

/* Week: "5 planningsvoorstellen klaar" and a star where a proposal lands. */
.tbm-wcal__assistant {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: var(--tbm-card);
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-wcal__assistant-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--tbm-input-raised);
    color: var(--tbm-carbs);
}

.tbm-wcal__assistant-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--tbm-text-secondary);
}

.tbm-wcal__assistant-text strong {
    color: var(--tbm-text);
}

.tbm-wcal__assistant-link {
    grid-column: 2;
    color: var(--tbm-carbs);
    font-weight: 700;
}

.tbm-wcal__star {
    position: absolute;
    right: 2px;
    z-index: 3;
    display: inline-flex;
    color: var(--tbm-carbs);
}

.tbm-wcal__star .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* Beheer › Vestigingen: per location the settings (name, colour, spots, travel times) and the opening hours. */
.tbm-locations__new {
    margin: 0 0 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
}

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

.tbm-locations__location--inactive {
    opacity: 0.7;
}

.tbm-locations__spots,
.tbm-locations__travel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tbm-locations__spots li,
.tbm-locations__travel li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.tbm-locations__travel .tbm-input {
    width: 88px;
}

.tbm-locations__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tbm-locations__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--tbm-blue);
}

.tbm-locations__subhead {
    margin: 4px 0 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tbm-text-secondary);
}

.tbm-colorpicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tbm-colorpicker__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.tbm-colorpicker__swatch--selected {
    border-color: var(--tbm-text);
    box-shadow: 0 0 0 2px var(--tbm-bg);
}

.tbm-locations__add {
    justify-content: flex-start;
    margin: 0 0 16px;
}

.tbm-locations__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* "Getekend contract · PDF" on the member's contract card */
.tbm-mcontract__pdf {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tbm-pink-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tbm-mcontract__pdf:focus-visible {
    outline: 2px solid var(--tbm-pink-accent);
    outline-offset: 2px;
}

/* ---- Facturen on Contract & facturen (WeFact) ------------------------------- */
.tbm-minvoices {
    margin: 0;
    padding: 4px 16px;
    list-style: none;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-minvoices__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--tbm-border);
}

.tbm-minvoices__item:last-child {
    border-bottom: 0;
}

.tbm-minvoices__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tbm-minvoices__text strong {
    font-size: 1.2rem;
}

.tbm-minvoices__side {
    display: grid;
    gap: 6px;
    justify-items: end;
}

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

.tbm-minvoices__pay {
    color: var(--tbm-pink-accent);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.tbm-minvoices__cta {
    display: block;
    margin-top: 14px;
    text-align: center;
    text-decoration: none;
}

.tbm-minvoices__foot {
    margin: 10px 0 0;
    font-size: 0.95rem;
}

/* Minuten te laat (Vandaag and Afronden): a small number next to its label; the group warning below. */
.tbm-minutes-late {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0.25rem 0 0.5rem;
}

.tbm-minutes-late .tbm-label {
    margin: 0;
}

.tbm-minutes-late__input {
    width: 5rem;
}

.tbm-minutes-late small {
    flex-basis: 100%;
}