/* =========================================================================
   Light content theme: the user's choice (ContentThemeState, index.html sets
   html[data-content-theme="light"] before the first paint). The content area,
   the dialogs over it and the member bottom navigation turn light; the trainer
   side bar and popovers (menus, selects) stay dark.
   Load after the other stylesheets: it redefines their tokens.
   ========================================================================= */

html[data-content-theme="light"] .tbm-trainer__content,
html[data-content-theme="light"] .tbm-member__content,
html[data-content-theme="light"] .mud-dialog {
    color-scheme: light;

    /* Surfaces: white page, cards lift off it with a soft shadow */
    --tbm-bg: #FFFFFF;
    --tbm-panel: #FFFFFF;
    --tbm-card: #FFFFFF;
    --tbm-input: #F0F0F4;
    --tbm-input-raised: #E6E6EC;
    --tbm-border: rgba(17, 17, 24, 0.1);
    --tbm-border-strong: rgba(17, 17, 24, 0.2);
    --tbm-overlay: 17, 17, 24;
    --tbm-card-shadow: 0 1px 2px rgba(17, 17, 24, 0.05), 0 4px 14px rgba(17, 17, 24, 0.07);

    /* Text */
    --tbm-text: #111118;
    --tbm-text-secondary: #5C5C6B;

    /* Accent and status colours as text on white need more contrast than on black */
    --tbm-pink-accent: #D11F5E;
    --tbm-chart-muted: #A9CCD8;
    --tbm-success: #0E8A5F;
    --tbm-success-bg: rgba(14, 138, 95, 0.1);
    --tbm-success-chip-bg: rgba(14, 138, 95, 0.12);
    --tbm-error: #D12F45;
    --tbm-error-bg: rgba(209, 47, 69, 0.1);
    --tbm-warning: #A86A00;
    --tbm-warning-bg: rgba(232, 168, 20, 0.16);
    --tbm-blue-bg: rgba(10, 143, 184, 0.12);

    /* Chat */
    --tbm-chat-system-bg: rgba(10, 143, 184, 0.1);
    --tbm-chat-system: #087A9E;
    --tbm-chat-mention: #087A9E;
    --tbm-chat-pinned-bg: rgba(232, 168, 20, 0.16);
    --tbm-chat-pinned: #A86A00;

    /* Planning */
    --tbm-credit-free: #DCDCE3;

    /* MudBlazor components inside the content */
    --mud-palette-background: #FFFFFF;
    --mud-palette-background-gray: #F0F0F4;
    --mud-palette-surface: #FFFFFF;
    --mud-palette-text-primary: #111118;
    --mud-palette-text-primary-rgb: 17, 17, 24;
    --mud-palette-text-secondary: #5C5C6B;
    --mud-palette-text-disabled: rgba(17, 17, 24, 0.38);
    --mud-palette-action-default: #5C5C6B;
    --mud-palette-action-default-hover: rgba(17, 17, 24, 0.06);
    --mud-palette-action-disabled: rgba(17, 17, 24, 0.26);
    --mud-palette-action-disabled-background: rgba(17, 17, 24, 0.12);
    --mud-palette-lines-default: rgba(17, 17, 24, 0.12);
    --mud-palette-lines-inputs: rgba(17, 17, 24, 0.24);
    --mud-palette-table-lines: rgba(17, 17, 24, 0.1);
    --mud-palette-table-hover: rgba(17, 17, 24, 0.04);
    --mud-palette-table-striped: rgba(17, 17, 24, 0.02);
    --mud-palette-divider: rgba(17, 17, 24, 0.1);
    --mud-palette-divider-light: rgba(17, 17, 24, 0.06);
    --mud-palette-skeleton: rgba(17, 17, 24, 0.08);
    --mud-palette-success: #0E8A5F;
    --mud-palette-error: #D12F45;
    --mud-palette-warning: #A86A00;
}

/* Page background behind the content */
html[data-content-theme="light"] .tbm-trainer {
    background: linear-gradient(to right, var(--tbm-sidebar) var(--tbm-sidebar-width), #FFFFFF 0);
}

html[data-content-theme="light"] .tbm-member {
    background: #FFFFFF;
}

html[data-content-theme="light"] .tbm-trainer__content,
html[data-content-theme="light"] .tbm-member__content {
    background: var(--tbm-bg);
    color: var(--tbm-text);
}

@media (max-width: 1023.98px) {
    html[data-content-theme="light"] .tbm-trainer {
        background: #FFFFFF;
    }
}

/* Cards get a soft shadow instead of relying on the dark contrast; on the white page the shadow carries the edge, so
   the hairline border goes. */
html[data-content-theme="light"] .tbm-trainer__content .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0),
html[data-content-theme="light"] .tbm-member__content .mud-paper:not(.mud-paper-outlined):not(.mud-elevation-0) {
    box-shadow: var(--tbm-card-shadow);
}

html[data-content-theme="light"] :is(.tbm-card, .tbm-tile, .tbm-summary-block, .tbm-today-training,
    .tbm-quick__item, .tbm-search__result, .tbm-add__result, .tbm-mchart, .tbm-progress__top, .tbm-progress__next,
    .tbm-progress__table-card, .tbm-mcard, .tbm-mcard-group, .tbm-mcontract, .tbm-mtrain__top, .tbm-wblock, .tbm-myplan__section, .tbm-myplan-agreement) {
    border-color: transparent;
    box-shadow: var(--tbm-card-shadow);
}

/* Form fields (inputs, selects, search fields, the chat composer, file pickers): white like the cards, a light edge and
   a small shadow instead of a grey well; focus gets a pink ring. Disabled fields stay grey so they read as "not
   editable". */
html[data-content-theme="light"] :is(.tbm-input, .tbm-select, .tbm-macro__select, .tbm-search__field, .tbm-search-field,
    .tbm-chat-composer__field, .tbm-winput--unit, .tbm-file, .mud-input-filled) {
    background-color: #FFFFFF;
    border-color: rgba(17, 17, 24, 0.12);
    box-shadow: 0 1px 2px rgba(17, 17, 24, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A field that wraps its input (search, chat composer) shows the focus ring around the whole field */
html[data-content-theme="light"] :is(.tbm-input, .tbm-select, .tbm-macro__select, .tbm-winput--unit, .mud-input-filled):focus,
html[data-content-theme="light"] :is(.tbm-search__field, .tbm-search-field, .tbm-chat-composer__field, .mud-input-filled):focus-within {
    border-color: var(--tbm-pink);
    box-shadow: 0 0 0 3px rgba(231, 50, 114, 0.15);
}

/* Inline workout inputs show no well until they are edited: white on focus too */
html[data-content-theme="light"] .tbm-winput:focus {
    background: #FFFFFF;
}

html[data-content-theme="light"] .tbm-input:disabled,
html[data-content-theme="light"] .tbm-select:disabled {
    background-color: var(--tbm-input);
    box-shadow: none;
}

html[data-content-theme="light"] .tbm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

html[data-content-theme="light"] input.tbm-input[type="date"] {
    color-scheme: light;
}

html[data-content-theme="light"] .tbm-mcard-group > .tbm-mcard {
    box-shadow: none;
}

/* MudBlazor alerts keep the light tints of the dark theme (yellow on pale yellow): use the dark status colours on white */
html[data-content-theme="light"] .mud-alert-text-warning {
    background-color: var(--tbm-warning-bg);
    /* Darker than --tbm-warning: running text on the tint needs 4.5:1 */
    color: #7A4D00;
}

html[data-content-theme="light"] .mud-alert-text-error {
    background-color: var(--tbm-error-bg);
    color: var(--tbm-error);
}

html[data-content-theme="light"] .mud-alert-text-success {
    background-color: var(--tbm-success-bg);
    color: var(--tbm-success);
}

html[data-content-theme="light"] .mud-alert-text-info {
    background-color: var(--tbm-blue-bg);
    color: #087A9E;
}

html[data-content-theme="light"] :is(.mud-alert-text-warning, .mud-alert-text-error, .mud-alert-text-success, .mud-alert-text-info) .mud-alert-icon {
    color: inherit;
}

/* Product photos sit on white: a hairline keeps the tile visible while a photo loads or when it is white itself */
html[data-content-theme="light"] .tbm-avatar img {
    outline: 1px solid var(--tbm-border);
    outline-offset: -1px;
}

/* Hard-coded dark fills: light counterparts */
html[data-content-theme="light"] .tbm-filter-pill:hover:not(.tbm-filter-pill--active) {
    background: #D9D9E1;
}

html[data-content-theme="light"] .tbm-billing__radio {
    background: #FFFFFF;
}

html[data-content-theme="light"] .tbm-billing__card--selected .tbm-billing__radio {
    background: #FFFFFF;
}

html[data-content-theme="light"] .tbm-for-chip--both {
    background: #111118;
    color: #FFFFFF;
}

html[data-content-theme="light"] .tbm-dblock--duo {
    background: #FBE0EA;
}

html[data-content-theme="light"] .tbm-dblock--solo {
    background: #DCEFF6;
}

html[data-content-theme="light"] .tbm-dblock--intake {
    background: #E9E2FF;
}

html[data-content-theme="light"] .tbm-wcal__lane--closed {
    background: rgba(17, 17, 24, 0.08);
}

html[data-content-theme="light"] .tbm-heart.is-on {
    color: var(--tbm-pink);
}

html[data-content-theme="light"] .tbm-pchip--duo {
    color: #C2185B;
}

html[data-content-theme="light"] .tbm-chip--violet {
    color: #6D28D9;
}

html[data-content-theme="light"] .tbm-revenue-info__forecast {
    color: #6B6B7A;
}

html[data-content-theme="light"] .tbm-wchart {
    --wchart-line: var(--tbm-chart-blue);
    --wchart-muted: rgba(10, 143, 184, 0.45);
}

/* The camera stays dark */
html[data-content-theme="light"] .tbm-scanner__viewport {
    background: radial-gradient(ellipse at center, #1A1A24 0%, #040405 70%);
}

/* Shadows on white: lighter */
html[data-content-theme="light"] .tbm-toast {
    box-shadow: 0 10px 30px rgba(17, 17, 24, 0.2);
}

/* Dialogs follow the content: light surface and text, a soft shadow instead of the dark contrast */
html[data-content-theme="light"] .mud-dialog {
    background: var(--tbm-card);
    color: var(--tbm-text);
    box-shadow: 0 8px 32px rgba(17, 17, 24, 0.18);
}

/* Member bottom navigation: white with a hairline and a soft shadow upwards; the Eten button keeps its pink circle with
   a white ring */
html[data-content-theme="light"] .tbm-bottom-nav {
    background: #FFFFFF;
    border-top-color: rgba(17, 17, 24, 0.08);
    box-shadow: 0 -4px 16px rgba(17, 17, 24, 0.06);
}

html[data-content-theme="light"] .tbm-bottom-nav__item {
    color: #5C5C6B;
}

html[data-content-theme="light"] .tbm-bottom-nav__item.active {
    color: #D11F5E;
}

html[data-content-theme="light"] .tbm-bottom-nav__eat {
    color: #111118;
}

html[data-content-theme="light"] .tbm-bottom-nav__eat-circle {
    box-shadow: 0 0 0 6px #FFFFFF, 0 8px 24px rgba(231, 50, 114, 0.35);
}