html, body {
    font-family: var(--font-body);
}

/* MainLayout's header/main/Footer/etc. render as direct children of this div (see index.html) -
   without this, Footer just sits wherever the content ends, floating mid-page on any view shorter
   than the viewport instead of hugging the bottom. */
#app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--accent);
}

button, .btn, input, select, textarea {
    font-family: var(--font-body);
}

/* Base .btn was never actually styled here - only .btn-primary was - so a bare class="btn"
   (used throughout the app for secondary actions: Preview, Replace, Cancel, etc.) fell through to
   Bootstrap's own unthemed default: hardcoded dark-gray text with no real background, from
   bootstrap.min.css's own --bs-btn-color/--bs-btn-bg, never touching BobFit's theme variables at
   all. Looked like plain text rather than a button, and on the "Athletic Charge" theme specifically
   (near-white --ink on a dark --surface) that hardcoded dark text was nearly invisible against the
   dark page background behind it. This makes every themed variable explicit instead. */
.btn {
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md, 8px);
    padding: 0.4rem 0.85rem;
}
.btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--ink) 8%, var(--surface));
}
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    color: var(--accent-contrast);
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-danger {
    color: #fff;
    background-color: var(--danger);
    border-color: var(--danger);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--accent-2);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

/* Created by wwwroot/js/errorReporting.js via document.createElement, not rendered by Blazor - so
   it never gets a component's scoped-CSS attribute and has to be styled globally here instead of
   in ToastHost.razor.css. This is the real replacement for #blazor-error-ui's generic banner
   (which errorReporting.js hides on sight and swaps this in for) - a proper toast naming the page
   that broke, independent of whether the .NET runtime itself is still healthy enough to render
   anything, since ToastHost's own toasts require a working Blazor render to show at all. */
.bobfit-error-toast {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 26rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg, 14px);
    background: var(--ink, #12151C);
    color: var(--ground, #EEF1F6);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9rem;
    z-index: 1100;
}
.bobfit-error-toast-reload {
    flex-shrink: 0;
    color: var(--accent, #3556E6);
    font-weight: 700;
    text-decoration: none;
}

#blazor-error-ui {
    background: var(--surface-strong);
    color: var(--ink);
    border: 1px solid var(--danger);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0.85rem 2.5rem 0.85rem 1rem;
    font-size: 0.9rem;
    z-index: 1000;
}

    #blazor-error-ui .reload {
        color: var(--accent);
        font-weight: 600;
        text-decoration: none;
        margin-left: 0.35rem;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.85rem;
        top: 0.8rem;
        color: var(--ink-muted);
    }

/* Shared/ProgressChart.razor's date-axis tick labels - injected via MarkupString since Razor
   treats a literal <text> tag as its own reserved construct that can't take attributes, so this
   never gets that component's scoped b-xxxx attribute the way the CSS file's other rules do. */
.progress-chart-tick-label {
    fill: var(--ink-muted);
    font-size: 9px;
    font-family: var(--font-mono);
}

/* Created by wwwroot/js/dragReorder.js via document.createElement, not rendered by Blazor - so it
   never gets a component's scoped-CSS attribute and has to be styled globally here instead of in
   WorkoutItemList.razor.css. Marks the gap the dragged row will land in while it's lifted out of
   flow and following the pointer. */
.drag-placeholder {
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    flex-shrink: 0;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.initial-loading {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ground, #EEF1F6);
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: color-mix(in srgb, var(--ink, #14181F) 15%, transparent);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

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

.loading-progress-text {
    text-align: center;
    font-weight: bold;
    font-family: var(--font-display, inherit);
    color: var(--ink, #14181F);
}

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

code {
    color: var(--accent-2);
    font-family: var(--font-mono);
}

/* Shared loading-spinner component (Shared/LoadingSpinner.razor) */
.bobfit-spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-muted);
}
.bobfit-spinner-icon {
    animation: bobfit-spin 0.8s linear infinite;
    color: var(--accent);
}
@keyframes bobfit-spin {
    to { transform: rotate(360deg); }
}