/* =========================================================================
   TBM house style (dark). Tokens mirror Theme/TbmTheme.cs; keep both in sync.
   ========================================================================= */

@font-face {
    font-family: 'Khand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/khand-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Khand';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/khand-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Khand';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/khand-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Khand';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/khand-700.woff2') format('woff2');
}

:root {
    /* Surfaces */
    --tbm-bg: #040405;
    --tbm-panel: #0A0A0F;
    --tbm-card: #111118;
    --tbm-input: #16161F;
    --tbm-input-raised: #1C1C26;
    --tbm-border: rgba(255, 255, 255, 0.08);
    --tbm-border-strong: rgba(255, 255, 255, 0.16);
    /* RGB of tints and hairlines on surfaces: rgba(var(--tbm-overlay), 0.05). Dark in the light content theme (light.css). */
    --tbm-overlay: 255, 255, 255;

    /* Text */
    --tbm-text: #FFFFFF;
    --tbm-text-secondary: #A3A3B4;
    /* Text on macro fills (cyan and yellow chips): dark in both content themes. */
    --tbm-on-accent: #040405;
    /* Text and icons on a pink fill (buttons, the Eten button, selected days, badges): white reads better than black. */
    --tbm-on-pink: #FFFFFF;

    /* Brand and macros: always the same colour per macro */
    --tbm-pink: #E73272;
    --tbm-kcal: var(--tbm-pink);
    --tbm-carbs: #22D3FF;
    --tbm-protein: #8B3DFF;
    --tbm-fat: #FCD34D;

    /* Status */
    --tbm-success: #6EE7B7;
    --tbm-success-bg: rgba(110, 231, 183, 0.08);
    --tbm-error: #FF7A85;

    /* Trainer environment (desktop): accent pink of page titles, chart and macro colours of the nutrition overview */
    --tbm-pink-accent: #FF5C97;
    --tbm-sidebar: #0A0A0F;
    --tbm-sidebar-width: 232px;
    --tbm-chart-blue: #0A8FB8;
    --tbm-chart-muted: #2A5566;
    --tbm-trainer-protein: var(--tbm-pink);
    --tbm-trainer-carbs: var(--tbm-chart-blue);
    --tbm-trainer-fat: var(--tbm-fat);
    --tbm-warning: #FCD34D;
    --tbm-warning-bg: rgba(252, 211, 77, 0.1);
    --tbm-error-bg: rgba(255, 122, 133, 0.12);
    --tbm-success-chip-bg: rgba(110, 231, 183, 0.12);
    --tbm-blue-bg: rgba(34, 211, 255, 0.12);

    /* Shape */
    --tbm-radius: 6px;
    --tbm-radius-pill: 999px;
    --tbm-skew: skewX(-9.35deg);
    --tbm-parallelogram: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);

    /* Type */
    --tbm-font: 'Khand', 'Arial Narrow', sans-serif;

    /* Layout */
    --tbm-gutter: 16px;
    --tbm-content-width: 480px;
    --tbm-bottom-nav-height: 76px;
}

html, body {
    font-family: var(--tbm-font);
    background-color: var(--tbm-bg);
    color: var(--tbm-text);
    color-scheme: dark;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
    font-family: inherit;
}

h1:focus {
    outline: none;
}

/* Headings: uppercase and slanted everywhere */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.tbm-heading {
    font-family: var(--tbm-font);
    font-weight: 700;
    text-transform: uppercase;
    transform: var(--tbm-skew);
    transform-origin: left bottom;
}

.tbm-heading {
    margin: 0;
    line-height: 1;
}

/* Section kicker: "/// IN ÉÉN TIK" */
.tbm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tbm-text-secondary);
}

.tbm-kicker::before {
    content: '///';
    color: var(--tbm-pink);
    letter-spacing: 0.08em;
    font-size: 1.25rem;
    transform: var(--tbm-skew);
}

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

/* Primary button: pink parallelogram with dark text */
.tbm-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
    clip-path: var(--tbm-parallelogram);
    font-family: var(--tbm-font);
    font-size: 1.35rem;
    font-weight: 700;
    /* Little tracking: the condensed uppercase letters blur together when spaced out */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s;
}

.tbm-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
}

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

/* Destructive outline button */
.tbm-btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border: 1.5px solid rgba(255, 122, 133, 0.55);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-error);
    font-family: var(--tbm-font);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-btn-danger:disabled {
    opacity: 0.5;
}

/* Round icon buttons */
.tbm-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    background: transparent;
    color: var(--tbm-text);
    cursor: pointer;
}

.tbm-round-btn--ghost {
    border-color: transparent;
    background: rgba(var(--tbm-overlay), 0.04);
}

.tbm-round-btn--pink {
    border-color: var(--tbm-pink);
    color: var(--tbm-pink);
}

.tbm-round-btn--filled {
    border-color: var(--tbm-pink);
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
}

.tbm-round-btn .mud-icon-root {
    font-size: 1.5rem;
}

/* Cards: almost square */
.tbm-card {
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
}

/* Form fields */
.tbm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tbm-label {
    font-weight: 700;
    font-size: 1.125rem;
}

.tbm-input,
.tbm-select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background-color: var(--tbm-input);
    color: var(--tbm-text);
    font-size: 1.25rem;
    font-weight: 500;
    outline: none;
}

.tbm-input:focus,
.tbm-select:focus {
    border-color: var(--tbm-pink);
}

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

.tbm-input--strong {
    font-weight: 700;
    font-size: 1.5rem;
}

.tbm-select {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

.tbm-select option {
    background: var(--tbm-input-raised);
    color: var(--tbm-text);
}

.tbm-field-error {
    color: var(--tbm-error);
    font-size: 0.95rem;
}

/* MudBlazor overrides for the dark style */
.mud-paper {
    border: 1px solid var(--tbm-border);
}

.mud-appbar {
    border-bottom: 1px solid var(--tbm-border);
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--tbm-on-pink);
}

.mud-snackbar {
    font-family: var(--tbm-font);
    font-size: 1.05rem;
}

/* =========================================================================
   Layouts
   ========================================================================= */

.tbm-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tbm-brand__logo {
    height: 2rem;
    width: auto;
}

/* Member screens: mobile-first column, centred on larger screens */
.tbm-member {
    min-height: 100dvh;
    background: var(--tbm-bg);
}

.tbm-member__content {
    max-width: var(--tbm-content-width);
    margin: 0 auto;
    padding-top: env(safe-area-inset-top);
}

.tbm-member--with-nav .tbm-member__content {
    padding-bottom: calc(var(--tbm-bottom-nav-height) + env(safe-area-inset-bottom) + 24px);
}

@media (max-width: 959.98px) {
    .tbm-main {
        padding-bottom: calc(var(--tbm-bottom-nav-height) + env(safe-area-inset-bottom));
    }
}

/* Bottom navigation: Vandaag · Trainingen · [Eten] · Progressie · Profiel */
.tbm-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1100;
    height: calc(var(--tbm-bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--tbm-panel);
    border-top: 1px solid var(--tbm-border);
}

.tbm-bottom-nav__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: 100%;
    max-width: var(--tbm-content-width);
    margin: 0 auto;
}

.tbm-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--tbm-bottom-nav-height);
    color: var(--tbm-text-secondary);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
}

.tbm-bottom-nav__item .mud-icon-root {
    font-size: 1.75rem;
}

.tbm-bottom-nav__item.active {
    color: var(--tbm-pink);
}

.tbm-bottom-nav__eat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: var(--tbm-bottom-nav-height);
    padding: 0 0 8px;
    border: 0;
    background: none;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.tbm-bottom-nav__eat-circle {
    position: absolute;
    top: -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
    box-shadow: 0 0 0 6px var(--tbm-bg), 0 8px 28px rgba(231, 50, 114, 0.45);
}

.tbm-bottom-nav__eat-circle .mud-icon-root {
    font-size: 1.9rem;
}

/* Placeholder screens (Trainingen, Progressie, Contract) */
.tbm-placeholder {
    padding: 32px var(--tbm-gutter);
}

.tbm-placeholder__title {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

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

/* =========================================================================
   Food: shared pieces
   ========================================================================= */

/* Product photo or letter tile */
.tbm-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input-raised);
    color: var(--tbm-on-accent);
    font-size: 1.3rem;
    font-weight: 700;
}

.tbm-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #FFFFFF;
}

.tbm-avatar img[hidden] {
    display: none;
}

.tbm-avatar--small {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
}

.tbm-avatar--large {
    width: 92px;
    height: 92px;
    border-radius: 8px;
    font-size: 2.6rem;
}

.tbm-avatar--c0 { background: #A259FF; }
.tbm-avatar--c1 { background: #13A4D6; }
.tbm-avatar--c2 { background: #2E9E66; }
.tbm-avatar--c3 { background: #D69A1E; }
.tbm-avatar--c4 { background: #E5487F; }
.tbm-avatar--c5 { background: #E36A3B; }

/* Source label: OFF / NEVO / lid */
.tbm-source {
    flex: none;
    padding: 1px 7px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    color: var(--tbm-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tbm-source--nevo { border-color: rgba(34, 211, 255, 0.4); color: var(--tbm-carbs); }
.tbm-source--member { border-color: rgba(252, 211, 77, 0.4); color: var(--tbm-fat); }

/* Barcode scanner: camera with a blue frame and a pink scan line */
.tbm-scanner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tbm-scanner__viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #1A1A24 0%, var(--tbm-bg) 70%);
}

.tbm-scanner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s;
}

.tbm-scanner__video.is-active {
    opacity: 1;
}

.tbm-scanner__frame {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 66%;
    max-width: 300px;
    aspect-ratio: 1.76;
    transform: translate(-50%, -50%);
    border: 3px solid var(--tbm-carbs);
    border-radius: 10px;
    box-shadow: 0 0 0 100vmax rgba(4, 4, 5, 0.55);
}

.tbm-scanner__line {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 2px;
    background: var(--tbm-pink);
    box-shadow: 0 0 14px 3px rgba(231, 50, 114, 0.45);
    animation: tbm-scan 2.4s ease-in-out infinite;
}

@keyframes tbm-scan {
    0%, 100% { transform: translateY(-28px); }
    50% { transform: translateY(28px); }
}

@media (prefers-reduced-motion: reduce) {
    .tbm-scanner__line { animation: none; }
}

.tbm-scanner__hint {
    margin: 0;
    padding: 10px var(--tbm-gutter) 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
}

.tbm-scanner__error {
    position: absolute;
    left: 50%;
    top: 58%;
    width: calc(100% - 2 * var(--tbm-gutter));
    max-width: 360px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    text-align: center;
    font-size: 1.05rem;
    color: var(--tbm-text-secondary);
}

.tbm-scanner__error strong {
    color: var(--tbm-text);
    font-size: 1.2rem;
}

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

/* Search box with suggestions */
.tbm-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tbm-search__field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 14px;
    background: var(--tbm-input);
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
}

.tbm-search__field:focus-within {
    border-color: var(--tbm-pink);
}

.tbm-search__icon {
    flex: none;
    color: var(--tbm-text-secondary);
}

.tbm-search__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--tbm-text);
    font-size: 1.3rem;
    font-weight: 500;
    outline: none;
}

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

.tbm-search__input::-webkit-search-cancel-button {
    filter: invert(1);
}

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

.tbm-search__result {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    color: var(--tbm-text);
    text-align: left;
    cursor: pointer;
}

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

.tbm-search__name {
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbm-search__meta {
    overflow: hidden;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbm-search__message {
    margin: 0;
    font-size: 1.05rem;
}

/* Rings */
.tbm-ring {
    flex: none;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.tbm-ring circle {
    fill: none;
    stroke-width: 3.6;
}

.tbm-ring__track {
    stroke: rgba(var(--tbm-overlay), 0.1);
}

.tbm-ring__arc {
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease;
}

.tbm-ring--kcal .tbm-ring__arc { stroke: var(--tbm-kcal); }
.tbm-ring--carbs .tbm-ring__arc { stroke: var(--tbm-carbs); }
.tbm-ring--protein .tbm-ring__arc { stroke: var(--tbm-protein); }
.tbm-ring--fat .tbm-ring__arc { stroke: var(--tbm-fat); }

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

.tbm-loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

/* =========================================================================
   Vandaag
   ========================================================================= */

.tbm-today__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--tbm-gutter) 10px;
}

.tbm-today__title {
    font-size: 2.4rem;
}

.tbm-today__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Members who are also trainers: a quiet link to the trainer environment on its own line under the title row, so the
   title and the round buttons stay on one line. */
.tbm-today__trainer-link {
    display: inline-flex;
    flex-basis: 100%;
    align-items: center;
    gap: 2px;
    margin-top: -4px;
    color: var(--tbm-text-secondary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.tbm-today__summary {
    padding: 0 var(--tbm-gutter) 6px;
}

.tbm-today__goal-by {
    margin: 4px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    text-align: center;
}

/* One card: the kcal left on top, the macros below a hairline. */
.tbm-summary-block {
    overflow: hidden;
    background: var(--tbm-panel);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
}

/* Kcal left today: "Je kunt nog 194 kcal eten", a bar, eaten and goal. */
.tbm-kcal-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 12px;
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-kcal-left__title {
    font-size: 1.3rem;
    line-height: 1.2;
}

.tbm-kcal-left__title strong {
    font-size: 1.55rem;
    font-weight: 700;
}

.tbm-kcal-left__bar {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: var(--tbm-radius-pill);
    background: rgba(var(--tbm-overlay), 0.1);
}

.tbm-kcal-left__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tbm-kcal);
    transition: width 0.4s ease;
}

.tbm-kcal-left__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 1rem;
}

.tbm-kcal-left__eaten {
    color: var(--tbm-kcal);
    font-weight: 600;
}

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

.tbm-kcal-left--over .tbm-kcal-left__title strong,
.tbm-kcal-left--over .tbm-kcal-left__eaten {
    color: var(--tbm-error);
}

.tbm-kcal-left--over .tbm-kcal-left__fill {
    background: var(--tbm-error);
}

.tbm-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--tbm-border);
}

.tbm-summary__item {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.tbm-summary__item .tbm-ring {
    width: 32px;
    height: 32px;
}

.tbm-summary__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.05;
}

.tbm-summary__value {
    font-size: 1.15rem;
    font-weight: 700;
}

.tbm-summary__value small {
    margin-left: 1px;
    color: var(--tbm-text-secondary);
    font-size: 0.8rem;
}

.tbm-summary__label {
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Meal moments */
.tbm-meal {
    padding: 16px var(--tbm-gutter) 0;
}

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

.tbm-meal__title {
    font-size: 1.6rem;
}

.tbm-meal__kcal {
    margin: 2px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    font-weight: 500;
}

/* Smaller than the header buttons: one per meal moment, the headings lead */
.tbm-meal__add {
    width: 34px;
    height: 34px;
}

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

.tbm-meal__entries {
    overflow: hidden;
}

/* A meal the trainer put ready, until the member confirms it: dashed, so it reads as "not counted yet". */
.tbm-meal__planned {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px dashed var(--tbm-border-strong);
}

.tbm-meal__planned-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 12px 0;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
    font-weight: 600;
}

.tbm-meal__planned-actions {
    padding: 4px 12px 12px;
}

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

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

.tbm-entry:active {
    background: rgba(var(--tbm-overlay), 0.03);
}

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

.tbm-entry__name {
    overflow: hidden;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbm-entry__meta {
    overflow: hidden;
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbm-entry__chevron {
    flex: none;
    color: var(--tbm-text-secondary);
}

/* Date picker dialog: the calendar is the dialog's content, not a card inside it. MudBlazor gives the static picker
   its own border, shadow and a fixed 310px width and height; those go and the days spread over the full width. */
.tbm-date-dialog {
    width: min(400px, 100% - 32px);
}

.tbm-date-dialog .mud-dialog-content {
    padding: 8px 12px;
}

.tbm-date-dialog .mud-picker-static,
.tbm-date-dialog .mud-picker-paper {
    width: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.tbm-date-dialog :is(.mud-picker-content, .mud-picker-calendar-container, .mud-picker-calendar-header,
    .mud-picker-calendar-transition, .mud-picker-calendar) {
    width: 100%;
    min-width: 0;
}

/* A month with six weeks keeps its last row: the month slides in absolutely positioned, so the transition reserves
   six rows of 40px. */
.tbm-date-dialog .mud-picker-content {
    height: auto;
    min-height: 0;
}

.tbm-date-dialog .mud-picker-calendar-transition {
    min-height: 240px;
}

.tbm-date-dialog .mud-picker-calendar,
.tbm-date-dialog .mud-picker-calendar-header-day {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

.tbm-date-dialog .mud-day {
    width: 40px;
    height: 40px;
    margin: 0;
}

/* Summary items link to the breakdown per product */
a.tbm-summary__item {
    color: var(--tbm-text);
    text-decoration: none;
}

/* =========================================================================
   Macro's (breakdown per product)
   ========================================================================= */

.tbm-macro {
    padding: 10px 0 calc(32px + env(safe-area-inset-bottom));
}

.tbm-macro > .tbm-form-page__header,
.tbm-macro > .tbm-macro__summary,
.tbm-macro > .tbm-field-error,
.tbm-macro__empty {
    margin-left: var(--tbm-gutter);
    margin-right: var(--tbm-gutter);
}

.tbm-macro > .tbm-form-page__header {
    margin-left: calc(var(--tbm-gutter) - 6px);
}

.tbm-macro--kcal { color: var(--tbm-kcal); }
.tbm-macro--carbs { color: var(--tbm-carbs); }
.tbm-macro--protein { color: var(--tbm-protein); }
.tbm-macro--fat { color: var(--tbm-fat); }

.tbm-macro__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
}

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

.tbm-macro__select {
    width: auto;
    min-width: 170px;
    background-color: var(--tbm-input-raised);
}

.tbm-macro__left {
    margin: 6px 0 0;
    line-height: 1;
}

.tbm-macro__left strong {
    font-size: 2.2rem;
}

.tbm-macro__left small {
    margin-left: 3px;
    color: var(--tbm-text-secondary);
    font-size: 1.15rem;
}

.tbm-macro__eaten {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.tbm-macro__ring {
    position: relative;
    flex: none;
    width: 112px;
    height: 112px;
}

.tbm-macro__ring .tbm-ring {
    width: 100%;
    height: 100%;
}

.tbm-macro__ring .tbm-ring circle {
    stroke-width: 2.6;
}

.tbm-macro__percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 700;
}

.tbm-macro__percent small {
    font-size: 0.9rem;
    align-self: flex-start;
    margin-top: 38px;
}

.tbm-macro__meal {
    font-size: 1.2rem;
    font-weight: 600;
}

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

/* =========================================================================
   Toevoegen / scannen
   ========================================================================= */

.tbm-add {
    --tbm-camera-height: max(36dvh, 280px);
    position: relative;
    height: 100dvh;
    overflow: hidden;
}

.tbm-add__header {
    position: absolute;
    inset: env(safe-area-inset-top) 0 auto 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--tbm-gutter);
}

.tbm-add__header-spacer {
    width: 44px;
}

.tbm-round-btn.is-on {
    color: var(--tbm-fat);
}

.tbm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--tbm-radius-pill);
    background: rgba(17, 17, 24, 0.85);
    color: var(--tbm-text);
    font-size: 1.25rem;
    cursor: pointer;
}

.tbm-pill strong {
    font-weight: 700;
}

.tbm-pill .mud-icon-root {
    font-size: 1.1rem;
    color: var(--tbm-text-secondary);
}

.tbm-add__camera {
    position: relative;
    height: var(--tbm-camera-height);
    padding-top: env(safe-area-inset-top);
}

.tbm-add__camera .tbm-scanner {
    padding-top: 56px;
    padding-bottom: 14px;
}

.tbm-add__result {
    position: absolute;
    left: var(--tbm-gutter);
    right: var(--tbm-gutter);
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 44px 14px 16px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    font-size: 1.1rem;
}

.tbm-add__result strong {
    font-size: 1.3rem;
}

.tbm-add__create {
    width: auto;
    min-height: 40px;
    margin-top: 6px;
    font-size: 1.05rem;
}

.tbm-add__result-close {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--tbm-text-secondary);
    cursor: pointer;
}

.tbm-add__dev {
    position: absolute;
    right: var(--tbm-gutter);
    top: calc(env(safe-area-inset-top) + 62px);
    z-index: 2;
    display: flex;
    gap: 6px;
    width: 160px;
    opacity: 0.45;
}

.tbm-add__dev:focus-within {
    opacity: 1;
}

.tbm-add__dev .tbm-input {
    min-height: 36px;
    font-size: 0.95rem;
}

.tbm-add__dev .tbm-round-btn {
    width: 36px;
    height: 36px;
}

/* Bottom sheet */
.tbm-sheet {
    position: absolute;
    inset: var(--tbm-camera-height) 0 0 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: var(--tbm-panel);
    border-top: 1px solid var(--tbm-border);
    border-radius: 18px 18px 0 0;
    transition: top 0.25s ease;
}

.tbm-sheet.is-expanded {
    top: calc(env(safe-area-inset-top) + 64px);
}

.tbm-sheet.is-dragging {
    transition: none;
}

.tbm-sheet__handle {
    display: flex;
    justify-content: center;
    flex: none;
    padding: 10px 0 12px;
    cursor: grab;
    touch-action: none;
}

.tbm-sheet__handle span {
    width: 40px;
    height: 4px;
    border-radius: var(--tbm-radius-pill);
    background: rgba(var(--tbm-overlay), 0.25);
}

.tbm-sheet__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--tbm-gutter) calc(96px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
}

/* In één tik */
.tbm-quick {
    margin-top: 18px;
}

.tbm-quick__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.tbm-quick__header .tbm-kicker {
    margin: 0;
}

.tbm-quick__empty {
    margin: 0;
}

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

.tbm-quick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
    transition: background 0.15s, border-color 0.15s;
}

.tbm-quick__item.is-logged {
    background: var(--tbm-success-bg);
    border-color: rgba(110, 231, 183, 0.45);
}

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

.tbm-quick__name {
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

.tbm-quick__kcal {
    flex: none;
    font-size: 1.2rem;
    font-weight: 700;
}

.tbm-quick__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-pink);
    color: var(--tbm-on-pink);
    cursor: pointer;
    transition: background 0.15s;
}

.tbm-quick__toggle .mud-icon-root {
    font-size: 1.4rem;
    stroke-width: 3;
}

.is-logged .tbm-quick__toggle {
    background: var(--tbm-success);
}

/* Toast: "1 item · 165 kcal toegevoegd aan avondeten  KLAAR" */
.tbm-toast {
    position: absolute;
    left: var(--tbm-gutter);
    right: var(--tbm-gutter);
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    background: var(--tbm-text);
    color: var(--tbm-bg);
    border-radius: var(--tbm-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 1.15rem;
    line-height: 1.2;
}

.tbm-toast__action {
    flex: none;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: var(--tbm-pink);
    font-family: var(--tbm-font);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

/* =========================================================================
   Product / dagboekregel
   ========================================================================= */

.tbm-product {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 0 var(--tbm-gutter) calc(16px + env(safe-area-inset-bottom));
}

.tbm-product__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 4px;
    margin: 0 -6px;
}

/* Small icon, but a 44px tap target */
.tbm-heart {
    display: inline-flex;
    padding: 11px;
    border: 0;
    background: none;
    color: var(--tbm-text-secondary);
    cursor: pointer;
}

.tbm-heart .mud-icon-root {
    font-size: 1.375rem;
}

.tbm-heart.is-on {
    color: #FF6B9A;
}

.tbm-product__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.tbm-product__titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.tbm-product__name {
    font-size: 1.9rem;
    overflow-wrap: anywhere;
}

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

.tbm-badge {
    display: inline-flex;
    padding: 3px 12px;
    border-radius: var(--tbm-radius-pill);
    background: rgba(110, 231, 183, 0.12);
    color: var(--tbm-success);
    font-size: 1.05rem;
    font-weight: 700;
}

.tbm-badge--muted {
    background: rgba(252, 211, 77, 0.12);
    color: var(--tbm-fat);
}

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

.tbm-product__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
}

/* Existing entry: changes save by themselves, this line says so */
.tbm-product__saved {
    margin: 10px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
    text-align: center;
}

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

/* Macro tiles */
.tbm-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tbm-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 8px 10px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-top: 3px solid currentColor;
    border-radius: var(--tbm-radius);
}

.tbm-tile--kcal { color: var(--tbm-kcal); }
.tbm-tile--carbs { color: var(--tbm-carbs); }
.tbm-tile--protein { color: var(--tbm-protein); }
.tbm-tile--fat { color: var(--tbm-fat); }

.tbm-tile__label {
    font-size: 1.05rem;
    font-weight: 700;
}

.tbm-tile__value {
    color: var(--tbm-text);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.tbm-tile__value small {
    margin-left: 1px;
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
}

/* Inputs of the product screen */
.tbm-editor__row {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 10px;
}

/* Nutrition information (collapsible) */
.tbm-nutrition {
    padding: 12px 14px;
}

.tbm-nutrition summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    list-style: none;
}

.tbm-nutrition summary::-webkit-details-marker {
    display: none;
}

.tbm-nutrition summary::before {
    content: '\25B6';
    font-size: 0.9rem;
    transition: transform 0.15s;
}

.tbm-nutrition[open] summary::before {
    transform: rotate(90deg);
}

.tbm-nutrition summary .tbm-muted {
    font-size: 1.1rem;
}

.tbm-nutrition__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    margin: 10px 0 0;
    font-size: 1.15rem;
}

.tbm-nutrition__grid div {
    display: flex;
    gap: 4px;
}

.tbm-nutrition__grid dt::after {
    content: ':';
}

.tbm-nutrition__grid dd {
    margin: 0;
}

.tbm-nutrition__source {
    margin: 10px 0 0;
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
}

/* =========================================================================
   Product toevoegen (form)
   ========================================================================= */

.tbm-form-page {
    padding: 10px var(--tbm-gutter) calc(32px + env(safe-area-inset-bottom));
}

.tbm-form-page__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -6px;
}

.tbm-form-page__header .tbm-heading {
    font-size: 2rem;
}

.tbm-form-page__intro {
    margin: 10px 0 18px;
    font-size: 1.1rem;
}

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

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

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

.tbm-form__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 14px;
    background: var(--tbm-card);
    border: 1px solid var(--tbm-border);
    border-radius: var(--tbm-radius);
}

.tbm-form__group legend {
    float: left;
    margin-bottom: 2px;
}

.tbm-label__unit {
    font-weight: 500;
}

.tbm-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
}

.tbm-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--tbm-pink);
}

.tbm-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px dashed var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
    color: var(--tbm-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
}

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

.tbm-file input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* =========================================================================
   Loading indicator and error UI
   ========================================================================= */

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--tbm-input-raised);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--tbm-pink);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--tbm-text-secondary);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Laden");
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #040405;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Er is een fout opgetreden.";
}

/* =========================================================================
   Weight chart (WeightChart.razor), shared by the member app and the trainer screens
   ========================================================================= */

.tbm-wchart {
    --wchart-line: var(--tbm-carbs);
    --wchart-muted: rgba(34, 211, 255, 0.45);
    position: relative;
    padding-left: 28px;
}

.tbm-wchart--desktop {
    --wchart-line: var(--tbm-chart-blue);
    --wchart-muted: rgba(10, 143, 184, 0.55);
    padding-left: 48px;
}

.tbm-wchart__plot {
    position: relative;
}

.tbm-wchart__svg {
    display: block;
    overflow: visible;
}

.tbm-wchart__tick {
    position: absolute;
    left: -28px;
    width: 22px;
    transform: translateY(-50%);
    color: var(--tbm-text-secondary);
    font-size: 0.9rem;
    text-align: right;
}

.tbm-wchart--desktop .tbm-wchart__tick {
    left: -48px;
    width: 40px;
}

.tbm-wchart__grid {
    stroke: var(--tbm-border-strong);
    stroke-width: 1;
}

.tbm-wchart--desktop .tbm-wchart__grid {
    stroke: var(--tbm-border);
}

.tbm-wchart__line {
    stroke: var(--wchart-line);
    stroke-width: 3;
    stroke-linecap: round;
}

.tbm-wchart__trail {
    stroke: var(--wchart-muted);
    stroke-width: 1.25;
    stroke-dasharray: 2 4;
    stroke-linecap: round;
}

.tbm-wchart__goal {
    stroke: var(--tbm-pink-accent);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.tbm-wchart__point--measurement {
    fill: var(--wchart-line);
}

.tbm-wchart__point--interim {
    fill: var(--wchart-muted);
}

.tbm-wchart__point--last {
    stroke: #FFFFFF;
    stroke-width: 3;
}

.tbm-wchart__point--selected {
    fill: var(--tbm-text);
}

.tbm-wchart__hit {
    fill: transparent;
    cursor: pointer;
}

.tbm-wchart__goal-label {
    position: absolute;
    right: 0;
    padding: 0;
    transform: translateY(calc(-100% - 2px));
    border: 0;
    background: none;
    color: var(--tbm-pink-accent);
    font-size: 0.9rem;
    font-weight: 600;
}

button.tbm-wchart__goal-label {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.tbm-wchart__axis {
    position: relative;
    height: 22px;
    margin-top: 14px;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
}

.tbm-wchart__axis span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.tbm-wchart__empty {
    margin: 0;
    padding: 32px 0;
    color: var(--tbm-text-secondary);
    text-align: center;
}

/* Period pills: 3 mnd · 6 mnd · Alles */
.tbm-range-pills {
    display: inline-flex;
    gap: 6px;
}

.tbm-range-pill {
    padding: 2px 12px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    background: transparent;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

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

/* =========================================================================
   Member app: Progressie (Pages/Member/Progress.razor)
   ========================================================================= */

.tbm-progress__top {
    padding: 16px var(--tbm-gutter) 20px;
    background: var(--tbm-panel);
}

.tbm-progress__title {
    font-size: 2.5rem;
}

.tbm-progress__accent {
    color: var(--tbm-carbs);
}

.tbm-progress__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

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

.tbm-progress__weight {
    margin: 0;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
}

.tbm-progress__weight small {
    margin-left: 4px;
    color: var(--tbm-text-secondary);
    font-size: 1.5rem;
}

.tbm-progress__since {
    text-align: right;
}

.tbm-progress__change {
    margin: 2px 0 0;
    color: var(--tbm-carbs);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.tbm-progress__chart {
    margin-top: 18px;
    padding: 12px 14px 12px 12px;
    border-radius: 8px;
    background: var(--tbm-input-raised);
}

.tbm-progress__chart-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.tbm-progress__point {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 6px 4px 6px 12px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-input);
    font-size: 1.05rem;
}

.tbm-progress__point span {
    flex: 1;
}

.tbm-progress__point .tbm-round-btn {
    width: 32px;
    height: 32px;
}

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

.tbm-progress__note {
    margin-top: 16px;
}

.tbm-progress__tables {
    padding: 20px var(--tbm-gutter) 0;
}

/* One row of equal tabs: two, or three once the member has a TBM test. */
.tbm-progress__segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-progress__segment {
    min-height: 40px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--tbm-text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
}

.tbm-progress__segment--active {
    background: var(--tbm-text);
    color: var(--tbm-bg);
}

.tbm-progress__table-card {
    margin-top: 10px;
    padding: 4px 14px 2px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-progress__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.15rem;
}

.tbm-progress__table thead th {
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--tbm-border-strong);
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
}

.tbm-progress__table tbody th,
.tbm-progress__table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--tbm-border);
    text-align: left;
}

.tbm-progress__table tbody tr:last-child th,
.tbm-progress__table tbody tr:last-child td {
    border-bottom: 0;
}

.tbm-progress__table tbody th {
    font-weight: 700;
}

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

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

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

.tbm-progress__empty {
    margin: 20px var(--tbm-gutter) 0;
    padding: 20px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    color: var(--tbm-text-secondary);
    text-align: center;
}

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

.tbm-progress__empty p {
    margin: 6px 0;
}

.tbm-progress__empty strong {
    color: var(--tbm-text);
    font-size: 1.2rem;
}

.tbm-progress__next {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px var(--tbm-gutter) 0;
    padding: 12px 14px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
    font-size: 1.2rem;
}

.tbm-progress__next p {
    margin: 0;
}

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

/* Bottom sheet over the page (Gewicht noteren) */
.tbm-bsheet {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.tbm-bsheet__panel {
    width: 100%;
    max-width: var(--tbm-content-width);
    padding: 16px var(--tbm-gutter) calc(20px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    background: var(--tbm-card);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}

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

.tbm-bsheet__title {
    font-size: 1.7rem;
}

.tbm-weight-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tbm-weight-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
}

.tbm-weight-form .tbm-field-error {
    margin: -4px 0 0;
}

.tbm-weight-form__existing {
    margin: 0;
    color: var(--tbm-text-secondary);
    font-size: 1.05rem;
}

.tbm-weight-form__delete {
    margin-left: 6px;
    color: var(--tbm-error);
}

.tbm-weight-form__tip {
    margin: 0;
    color: var(--tbm-text-secondary);
    font-size: 1rem;
}

/* Secondary outline button (next to the pink primary) */
.tbm-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border: 1.5px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius);
    background: transparent;
    color: var(--tbm-text);
    font-family: var(--tbm-font);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

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

a.tbm-btn-primary {
    gap: 10px;
    text-decoration: none;
}

/* Small rounded link ("Mijn recepten" on Eten toevoegen) */
.tbm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px;
    padding: 6px 14px;
    border: 1px solid var(--tbm-border-strong);
    border-radius: var(--tbm-radius-pill);
    color: var(--tbm-text);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.tbm-chip .mud-icon-root,
.tbm-badge--link .mud-icon-root {
    width: 18px;
    height: 18px;
}

.tbm-badge--link {
    align-items: center;
    gap: 6px;
    background: rgba(231, 50, 114, 0.12);
    color: var(--tbm-text);
    text-decoration: none;
}

.tbm-source--recipe { border-color: rgba(231, 50, 114, 0.45); color: var(--tbm-pink); }

/* Recipes: list, editor, share and receive */
.tbm-recipes__actions,
.tbm-recipe__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 20px;
}

.tbm-recipes__section,
.tbm-recipe__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.tbm-recipes .tbm-entry .tbm-badge {
    flex: none;
    font-size: 0.95rem;
}

/* A fieldset is as wide as its content by default; the lines must shrink to the screen instead. */
.tbm-recipe .tbm-form__group {
    min-width: 0;
}

.tbm-recipe__line .tbm-round-btn {
    width: 36px;
    height: 36px;
    border: none;
    color: var(--tbm-text-secondary);
}

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

.tbm-recipe__line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px 8px 10px;
}

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

.tbm-recipe__line-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.tbm-recipe__line .tbm-entry__meta {
    white-space: normal;
}

/* The amount field of a line: the label is for screen readers only, the unit follows the field. */
.tbm-recipe__amount {
    flex: none;
    width: 72px;
}

.tbm-recipe__amount .tbm-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.tbm-recipe__amount .tbm-input {
    text-align: right;
}

.tbm-recipe__unit {
    flex: none;
    width: 18px;
    color: var(--tbm-text-secondary);
}

.tbm-recipe__add {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.tbm-recipe__add-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.tbm-recipe__find {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.tbm-recipe__scan {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

/* The scanner fills its parent: a fixed camera window inside the form. */
.tbm-recipe__scan-camera {
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
}

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

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

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

.tbm-recipe__totals {
    padding: 12px 14px;
}

.tbm-recipe__totals p {
    margin: 0;
}

.tbm-recipe__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1rem;
}

.tbm-recipe__table th,
.tbm-recipe__table td {
    padding: 4px 6px;
    text-align: right;
    font-weight: 400;
}

.tbm-recipe__table thead th {
    color: var(--tbm-text-secondary);
    font-size: 0.95rem;
    vertical-align: bottom;
}

.tbm-recipe__table tbody th {
    text-align: left;
    white-space: nowrap;
}

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

.tbm-recipe__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
}

.tbm-recipe__dot--kcal { background: var(--tbm-kcal); }
.tbm-recipe__dot--protein { background: var(--tbm-protein); }
.tbm-recipe__dot--carbs { background: var(--tbm-carbs); }
.tbm-recipe__dot--fat { background: var(--tbm-fat); }

.tbm-recipe__more {
    padding: 12px 14px;
}

.tbm-recipe__more summary {
    cursor: pointer;
}

.tbm-recipe__more[open] summary {
    margin-bottom: 12px;
}

.tbm-recipe__hint {
    margin: 8px 0;
    font-size: 1rem;
}

.tbm-recipe__shared {
    margin: 4px 0 8px;
}

.tbm-share__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 8px 0 0;
    text-align: center;
}

/* Always black on white with a margin: scanners need the contrast, also in dark mode. */
.tbm-share__code {
    display: block;
    width: min(78vw, 340px);
    padding: 10px;
    border-radius: var(--tbm-radius);
    background: #FFFFFF;
}

.tbm-share__code svg {
    display: block;
    width: 100%;
    height: auto;
}

.tbm-share__note {
    margin: 12px 0;
    text-align: center;
}

.tbm-share__count {
    align-self: center;
    margin: 0 auto 12px;
}

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

.tbm-receive .tbm-loading {
    flex-direction: column;
    gap: 12px;
}

/* Day plans ("dagschema's") */
.tbm-mealplan__notes {
    resize: vertical;
    min-height: 72px;
    font: inherit;
}

.tbm-mealplan__moment {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.tbm-mealplan__add {
    align-self: flex-start;
}

.tbm-mealplan__note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    padding: 12px 14px;
    white-space: pre-line;
}

/* Four columns on a phone: tighter than the recipe table. */
.tbm-mealplan__totals {
    font-size: 1rem;
}

.tbm-mealplan__totals th,
.tbm-mealplan__totals td {
    padding: 4px 3px;
}

/* Read-only view: space between the totals and the meal moments. */
section.tbm-mealplan__moment {
    margin-top: 18px;
}

.tbm-mealplan__note p {
    margin: 0;
}

.tbm-today-mealplan .tbm-today-training__kicker {
    color: var(--tbm-carbs);
}

/* Mijn progressie: total of the circumferences, a chart per test (Kracht & conditie) */
.tbm-progress__total {
    margin: 0;
    padding: 10px 0 12px;
    border-top: 1px solid var(--tbm-border-strong);
    color: var(--tbm-carbs);
    font-size: 1.15rem;
    font-weight: 700;
}

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

.tbm-mchart {
    margin: 0;
    padding: 12px 14px 6px;
    border-radius: var(--tbm-radius);
    background: var(--tbm-card);
}

.tbm-mchart__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 700;
}

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

.tbm-mchart__svg {
    display: block;
    overflow: visible;
}

.tbm-mchart__line {
    stroke: var(--tbm-carbs);
    stroke-width: 2;
}

.tbm-mchart__point {
    fill: var(--tbm-carbs);
}

.tbm-mchart__point--best {
    fill: var(--tbm-pink);
}

.tbm-mchart__value {
    fill: var(--tbm-text);
    font-size: 13px;
    font-weight: 700;
}

.tbm-mchart__date {
    fill: var(--tbm-text-secondary);
    font-size: 12px;
}

.tbm-pr-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--tbm-radius-pill);
    background: var(--tbm-pink);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}