/* ===== Self-hosted fonts (Electric / Volt) ===== */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/anton-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibmplexsans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibmplexsans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibmplexsans-600.woff2') format('woff2');
}

html, body {
    font-family: 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;
}

/* ===== Global base (dark-only Electric / Volt) ===== */
:root {
    --volt-accent: #D4FF3F;
    --volt-bg: #0B0B0F;
    --volt-surface: #111317;
    --volt-text: #F2F2F0;
    --volt-line: rgba(242, 242, 240, 0.10);

    /* The rest bar docks on top of the bottom nav, so both derive from this. */
    --volt-bottomnav-height: 62px;
}

html, body {
    background-color: var(--volt-bg);
    color: var(--volt-text);
}

/* Volt-tinted light source and film grain, fixed behind all content. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 85% -10%, rgba(212, 255, 63, 0.10) 0%, rgba(212, 255, 63, 0) 45%),
        radial-gradient(90% 70% at 0% 110%, rgba(92, 200, 255, 0.06) 0%, rgba(92, 200, 255, 0) 50%),
        var(--volt-bg);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--volt-surface);
}
::-webkit-scrollbar-thumb {
    background: rgba(212, 255, 63, 0.22);
    border-radius: 8px;
    border: 2px solid var(--volt-surface);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 255, 63, 0.4);
}

/* ===== App chrome ===== */
.volt-appbar {
    background: rgba(11, 11, 15, 0.85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--volt-line);
}

/* App bar: brand or page title. They share typography so the slot keeps its weight. */
.volt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.volt-brand-mark {
    height: 34px;
    width: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.volt-brand-name,
.volt-appbar-title {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--volt-text);
    margin: 0;
}

.volt-appbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    animation: volt-title-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.volt-appbar-title > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Volt marker in front of the page title. */
.volt-appbar-title::before {
    content: "";
    flex-shrink: 0;
    width: 3px;
    height: 1em;
    border-radius: 2px;
    background: var(--volt-accent);
    box-shadow: 0 0 10px rgba(212, 255, 63, 0.45);
}

@keyframes volt-title-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.volt-appbar-back {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -10px;
    margin-right: 2px;
    border-radius: 50%;
    color: rgba(242, 242, 240, 0.72);
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.volt-appbar-back:hover {
    color: var(--volt-text);
    background-color: rgba(242, 242, 240, 0.06);
}

.volt-appbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Account entry: the user's initial inside a volt ring. */
.volt-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--volt-surface);
    border: 1px solid rgba(212, 255, 63, 0.55);
    color: var(--volt-accent);
    font-family: 'Anton', Impact, sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.volt-avatar:hover {
    border-color: var(--volt-accent);
    box-shadow: 0 0 14px rgba(212, 255, 63, 0.35);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .volt-appbar-title {
        animation: none;
    }
}

/* MudMainContent always reserves room for a fixed app bar; ours sits in the flow. */
.mud-appbar:not(.mud-appbar-fixed-top) ~ .mud-main-content {
    padding-top: 0;
}

/* Room for the fixed bottom nav, which only renders for signed-in users. */
body:has(.volt-bottomnav) .volt-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ===== Bottom tab bar (global: NavLink-rendered <a> get no scoped attribute) ===== */
.volt-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    height: calc(var(--volt-bottomnav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(11, 11, 15, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(242, 242, 240, 0.10);
}

.volt-bottomnav-item,
.volt-bottomnav-fabslot {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(242, 242, 240, 0.55);
    transition: color 0.18s ease;
}

.volt-bottomnav-item:hover {
    color: rgba(242, 242, 240, 0.85);
}

.volt-bottomnav-item.active {
    color: #D4FF3F;
}

.volt-bottomnav-item .mud-icon-root {
    font-size: 1.4rem;
}

.volt-bottomnav-label,
.volt-bottomnav-fablabel {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.volt-bottomnav-item.active .volt-bottomnav-label {
    font-weight: 600;
}

.volt-bottomnav-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #D4FF3F;
    color: #0B0B0F;
    margin-top: -26px;
    box-shadow: 0 0 0 5px rgba(11, 11, 15, 0.94), 0 6px 20px rgba(212, 255, 63, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.volt-bottomnav-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(11, 11, 15, 0.94), 0 8px 26px rgba(212, 255, 63, 0.7);
}

.volt-bottomnav-fab:active {
    transform: scale(0.96);
}

/* Pulsing accent while a workout is running. */
.volt-bottomnav-fab--active {
    background: #0B0B0F;
    color: #D4FF3F;
    border: 2px solid #D4FF3F;
    animation: volt-fab-pulse 1.6s ease-in-out infinite;
}

@keyframes volt-fab-pulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(11, 11, 15, 0.94), 0 0 0 0 rgba(212, 255, 63, 0.55);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(11, 11, 15, 0.94), 0 0 0 7px rgba(212, 255, 63, 0);
    }
}

.volt-bottomnav-fab .mud-icon-root {
    font-size: 1.7rem;
}

.volt-bottomnav-fablabel {
    font-weight: 600;
    color: #D4FF3F;
    margin-top: -2px;
}

/* ===== Workout bar (active session) =====
   Sticks to the top as the exercise list scrolls; top: 0 is free since the app bar
   became non-sticky. */
.volt-passbar {
    position: sticky;
    /* Standalone mode + viewport-fit=cover: clear the notch. */
    top: env(safe-area-inset-top);
    /* Above page content, below popovers (1200), rest panel (1250) and nav (1300). */
    z-index: 1150;
    background: var(--volt-surface);
    border: 1px solid rgba(242, 242, 240, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(11, 11, 15, 0.8);
}

.volt-passbar-row {
    gap: 10px;
}

.volt-passbar-title {
    flex: 1 1 auto;
    min-width: 0;
}

.volt-passbar-name,
.volt-passbar-date {
    display: block;
    margin: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.volt-passbar-timer {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Rest countdown, docked above the bottom nav.
   z-index sits below the nav (1300) but above popovers' backdrop-free content. */
.volt-restbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--volt-bottomnav-height) + env(safe-area-inset-bottom));
    z-index: 1250;
    background: var(--mud-palette-primary);
    border-radius: 16px 16px 0 0;
}

/* ===== Volt utilities ===== */
.volt-card {
    background: var(--volt-surface);
    border: 1px solid rgba(242, 242, 240, 0.08);
    border-radius: 14px;
}

.volt-card-hover {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.volt-card-hover:hover {
    border-color: rgba(212, 255, 63, 0.45);
    box-shadow: 0 0 18px rgba(212, 255, 63, 0.16);
    transform: translateY(-2px);
    cursor: pointer;
}

.volt-stat-value {
    font-family: 'Anton', Impact, sans-serif;
    color: var(--volt-accent);
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Pill segment toggle shared by the workouts page (distribution) and the statistics component. */
.freq-toggle {
    display: flex;
    gap: 10px;
}
.freq-toggle button {
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid rgba(242, 242, 240, 0.28);
    background: transparent;
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.freq-toggle button:hover {
    border-color: rgba(212, 255, 63, 0.55);
}
.freq-toggle button.active {
    background: var(--volt-accent);
    border-color: var(--volt-accent);
    color: var(--volt-bg);
}

.text-uppercase-wide {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.volt-glow {
    box-shadow: 0 0 18px rgba(212, 255, 63, 0.45);
}

/* ===== Active workout: completed sets ===== */
.volt-set-row {
    transition: background-color 0.2s ease, opacity 0.2s ease;
    border-radius: 10px;
}

.volt-set-done {
    background: rgba(63, 224, 143, 0.08);
}
.volt-set-done .mud-input-slot,
.volt-set-done .mud-input {
    opacity: 0.6;
}

/* ===== Workout summary ===== */
.volt-summary {
    position: fixed;
    inset: 0;
    /* Above the bottom nav (1300): the summary is a focused end state. */
    z-index: 1400;
    background: var(--volt-bg);
    display: flex;
    flex-direction: column;
}
.volt-summary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 255, 63, 0.08), transparent 60%);
    pointer-events: none;
}

.volt-summary-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: calc(32px + env(safe-area-inset-top)) 20px 16px;
}

.volt-summary-inner,
.volt-summary-footer {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.volt-summary-footer {
    flex: 0 0 auto;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
}

.volt-summary-overline {
    color: var(--volt-accent);
}

.volt-summary-item {
    animation: volt-summary-in 0.5s ease-out both;
}

@keyframes volt-summary-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.volt-pr-card {
    animation: volt-pr-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes volt-pr-pop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        box-shadow: 0 0 26px rgba(212, 255, 63, 0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .volt-summary-item,
    .volt-pr-card {
        animation: none;
    }
}

/* ===== Forms / validation ===== */
h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #FF5468;
}

.validation-message {
    color: #FF5468;
}

.blazor-error-boundary {
    background: #FF5468;
    padding: 1rem 1rem 1rem 1rem;
    color: #0B0B0F;
    font-weight: 600;
}

    .blazor-error-boundary::after {
        content: "Ett fel har inträffat."
    }

/* ===== Auth cards (Login/Register/ForgotPassword/ResetPassword) ===== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
}

.auth-card {
    max-width: 400px;
    width: 100%;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(242, 242, 240, 0.28);
    border-radius: 12px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #16181D;
    color: #F2F2F0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.login-input::placeholder { color: rgba(242, 242, 240, 0.42); }
.login-input:focus {
    outline: none;
    border-color: #D4FF3F;
    box-shadow: 0 0 0 3px rgba(212, 255, 63, 0.18);
}
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F2F2F0;
    -webkit-box-shadow: 0 0 0 1000px #16181D inset;
}

/* ===== Identity scaffold shim =====
   Scoped under .volt-identity so nothing leaks into the MudBlazor app. Bootstrap's CSS
   is removed, so these rules fully own the elements. */
.volt-identity h1,
.volt-identity h2,
.volt-identity h3,
.volt-identity h4 {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #F2F2F0;
}

.volt-identity p,
.volt-identity li,
.volt-identity label,
.volt-identity .form-label,
.volt-identity .control-label {
    color: rgba(242, 242, 240, 0.82);
}

.volt-identity a {
    color: #D4FF3F;
    text-decoration: none;
}
.volt-identity a:hover { text-decoration: underline; }

.volt-identity kbd {
    background: #16181D;
    border: 1px solid rgba(242, 242, 240, 0.18);
    border-radius: 6px;
    padding: 2px 8px;
    color: #D4FF3F;
    font-family: 'IBM Plex Sans', monospace;
}

/* Inputs (form-control and login-input within identity) */
.volt-identity .form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(242, 242, 240, 0.28);
    border-radius: 12px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #16181D;
    color: #F2F2F0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.volt-identity .form-control::placeholder { color: rgba(242, 242, 240, 0.42); }
.volt-identity .form-control:focus {
    outline: none;
    border-color: #D4FF3F;
    box-shadow: 0 0 0 3px rgba(212, 255, 63, 0.18);
}
.volt-identity .form-control:-webkit-autofill,
.volt-identity .form-control:-webkit-autofill:hover,
.volt-identity .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #F2F2F0;
    -webkit-box-shadow: 0 0 0 1000px #16181D inset;
}

/* form-floating: label above the field, without Bootstrap's float mechanics. */
.volt-identity .form-floating { position: relative; margin-bottom: 1rem; }
.volt-identity .form-floating > label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    order: -1;
}
.volt-identity .form-floating {
    display: flex;
    flex-direction: column;
}
.volt-identity .form-floating > .form-control { order: 0; }

/* Buttons */
.volt-identity .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.volt-identity .btn-lg { padding: 14px 28px; font-size: 1rem; }
.volt-identity .w-100 { width: 100%; }
.volt-identity .btn-primary {
    background: #D4FF3F;
    color: #0B0B0F;
    box-shadow: 0 0 16px rgba(212, 255, 63, 0.35);
}
.volt-identity .btn-primary:hover { filter: brightness(1.06); }
.volt-identity .btn-secondary,
.volt-identity .btn-outline-primary,
.volt-identity .btn-danger {
    background: transparent;
    border-color: rgba(242, 242, 240, 0.4);
    color: #F2F2F0;
}
.volt-identity .btn-danger { border-color: #FF5468; color: #FF5468; }

/* Alerts */
.volt-identity .alert {
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0;
    border: 1px solid rgba(242, 242, 240, 0.14);
    background: #16181D;
    color: #F2F2F0;
}
.volt-identity .alert-info { border-color: rgba(92, 200, 255, 0.4); }
.volt-identity .alert-success { border-color: rgba(63, 224, 143, 0.45); }
.volt-identity .alert-danger,
.volt-identity .alert-warning { border-color: rgba(255, 84, 104, 0.5); }

/* text-danger / validation text */
.volt-identity .text-danger { color: #FF5468; }

/* ===== Exercise detail (bottom sheet) ===== */
/* Global rather than scoped: MudDialog renders out of MudDialogProvider, outside the
   component's DOM scope, so scoped attributes never reach it. */

.volt-exsheet .mud-dialog {
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(242, 242, 240, 0.10);
    border-bottom: none;
    background: var(--volt-surface);
    /* Short content shouldn't stretch to full screen; long content should scroll. */
    max-height: 88vh;
    animation: volt-exsheet-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes volt-exsheet-in {
    from { transform: translateY(14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .volt-exsheet .mud-dialog { animation: none; }
}

/* Grab bar signalling the sheet can be swiped away. */
.volt-exsheet .mud-dialog-title::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 2px;
    background: rgba(242, 242, 240, 0.20);
}

.volt-exsheet-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.volt-exsheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.volt-exsheet-tag {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(242, 242, 240, 0.16);
    color: rgba(242, 242, 240, 0.66);
}

.volt-exsheet-tag--accent {
    border-color: rgba(212, 255, 63, 0.38);
    color: var(--volt-accent);
}

.volt-exsheet-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.volt-exsheet-stat {
    flex: 1 1 140px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(242, 242, 240, 0.04);
    border: 1px solid rgba(242, 242, 240, 0.07);
}

.volt-exsheet-sets {
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.volt-exsheet-howto {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.volt-exsheet-howto-label {
    color: rgba(242, 242, 240, 0.55);
}

.volt-exsheet-lang {
    color: rgba(242, 242, 240, 0.34);
    font-style: italic;
}

/* Own counters in accent colour; the <ol> default renders small grey digits. */
.volt-exsheet-steps {
    list-style: none;
    counter-reset: volt-step;
    margin: 0;
    padding: 0;
}

.volt-exsheet-steps li {
    counter-increment: volt-step;
    position: relative;
    padding: 0 0 14px 34px;
    line-height: 1.55;
    color: rgba(242, 242, 240, 0.86);
}

.volt-exsheet-steps li::before {
    content: counter(volt-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Anton', Impact, sans-serif;
    font-size: 0.76rem;
    color: var(--volt-accent);
    background: rgba(212, 255, 63, 0.12);
    border: 1px solid rgba(212, 255, 63, 0.28);
}

/* Last step needs no bottom padding; the dialog provides it. */
.volt-exsheet-steps li:last-child {
    padding-bottom: 0;
}

.volt-exsheet-freetext {
    color: rgba(242, 242, 240, 0.86);
    line-height: 1.55;
    white-space: pre-line;
}

/* Coloured by direction relative to the goal. Wrong way is information, not an error. */
.volt-stat-value--good { color: #3FE08F; }
.volt-stat-value--off { color: #FFC53F; }

/* Deliberately muted: available, but not competing with the two ways forward. */
.volt-weighin-never {
    margin-top: 14px;
    text-align: center;
}

/* Weigh-in status row on the workout start screen. */
.volt-weighin-row {
    cursor: pointer;
}

/* Perceived exertion: compact trigger in the row, full scale in a sheet. */
.volt-rpe {
    display: flex;
    padding: 0 0 6px 8px;
}

.volt-rpe-trigger {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid var(--volt-line);
    border-radius: 10px;
    background: transparent;
    color: rgba(242, 242, 240, 0.55);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.volt-rpe-trigger:hover {
    border-color: rgba(212, 255, 63, 0.45);
    color: var(--volt-text);
}

.volt-rpe-trigger--set {
    border-color: var(--volt-accent);
    background: rgba(212, 255, 63, 0.14);
    color: var(--volt-accent);
}

/* Three per row holds a 44px+ target down to a 320px viewport. */
.volt-rpe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.volt-rpe-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 4px;
    border: 1px solid var(--volt-line);
    border-radius: 12px;
    background: transparent;
    color: var(--volt-text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.volt-rpe-option:hover {
    border-color: rgba(212, 255, 63, 0.45);
}

.volt-rpe-option--on {
    border-color: var(--volt-accent);
    background: rgba(212, 255, 63, 0.14);
}

.volt-rpe-option-value {
    font-family: 'Anton', Impact, sans-serif;
    font-size: 1.25rem;
    line-height: 1;
}

.volt-rpe-option--on .volt-rpe-option-value {
    color: var(--volt-accent);
}

.volt-rpe-option-label {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: rgba(242, 242, 240, 0.5);
}

/* Set rows: a fixed column for the set-type trigger, the fields share the rest. */
.volt-set-grid {
    display: grid;
    grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr) 30px 30px;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
}

.volt-set-grid--edit {
    grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr) 30px;
}

.volt-set-grid--header {
    margin-bottom: 2px;
}

.volt-set-grid .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.volt-set-grid .mud-icon-button {
    justify-self: center;
}

/* Set type: the set number doubles as the trigger; the type's letter replaces it. */
.volt-settype {
    display: flex;
}

.volt-settype-trigger {
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: 1px dashed var(--volt-line);
    border-radius: 8px;
    background: transparent;
    color: var(--volt-text);
    font-family: 'Anton', Impact, sans-serif;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.volt-settype-trigger:hover {
    border-color: rgba(212, 255, 63, 0.45);
}

/* Muted rather than highlighted: a warm-up is the set that doesn't count. */
.volt-settype-trigger--warmup {
    border-style: solid;
    border-color: rgba(255, 197, 63, 0.45);
    background: rgba(255, 197, 63, 0.10);
    color: var(--mud-palette-warning);
}

.volt-settype-trigger--marked {
    border-style: solid;
    border-color: var(--volt-accent);
    background: rgba(212, 255, 63, 0.14);
    color: var(--volt-accent);
}

.volt-settype-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.volt-settype-option {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--volt-line);
    border-radius: 12px;
    background: transparent;
    color: var(--volt-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.volt-settype-option:hover {
    border-color: rgba(212, 255, 63, 0.45);
}

.volt-settype-option--on {
    border-color: var(--volt-accent);
    background: rgba(212, 255, 63, 0.14);
}

.volt-settype-mark {
    flex: 0 0 28px;
    font-family: 'Anton', Impact, sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
}

.volt-settype-option--on .volt-settype-mark {
    color: var(--volt-accent);
}

.volt-settype-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.volt-settype-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.volt-settype-desc {
    font-size: 0.72rem;
    color: rgba(242, 242, 240, 0.5);
}

/* History: warm-ups stay listed but step back. */
.set-warmup {
    opacity: 0.55;
}

/* Collapsed note: one line whatever its length, so it can't take over the workout view. */
.volt-notes-row {
    cursor: pointer;
    min-height: 32px;
    min-width: 0;
}

.volt-notes-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The collapsed note opener is a button, so strip the browser's own chrome. */
.volt-notes-row {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   AI-paneler. Global rather than component-scoped: the workout analysis and the
   period analysis are the same panel in two places, and isolated CSS would mean
   maintaining two copies of it.
   --------------------------------------------------------------------------- */
/* Speaks the workout card's language: uppercase labels and the lime rule from .exercise-group. */

.ai-panel {
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(242, 242, 240, 0.08);
}

/* Inside a workout the panel sat flush against the exercise list, so a collapsed analysis read as
   a heading for the sets below it rather than as its own thing you can open. An inset block with
   space under it separates the two while staying clearly part of the workout. */
.ai-panel--inset {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--volt-line);
    border-top: 1px solid var(--volt-line);
    border-radius: 12px;
    background: rgba(242, 242, 240, 0.03);
}

.ai-panel--inset .ai-panel-head {
    margin-bottom: 0;
}

.ai-panel--inset .ai-panel-head:not(:only-child) {
    margin-bottom: 12px;
}

/* The whole row is the target, so it reads as something to press rather than a label. */
.ai-panel--inset .ai-panel-toggle {
    flex: 1;
    text-align: left;
}

/* On the statistics tab the panel sits among cards, so a bare block with a top border reads as
   something that fell out of the layout. Same shape as the cards it neighbours. */
.ai-panel--card {
    margin: 0 0 14px;
    padding: 16px 18px 18px;
    border: 1px solid var(--volt-line);
    border-top: 1px solid var(--volt-line);
    border-radius: 14px;
    background: var(--volt-surface);
}

/* The overline names the card; the action below names the period. The info button ends the row,
   which is where it belongs rather than floating beside a full width button. */
.ai-panel--card .ai-panel-head {
    margin-bottom: 14px;
}

.ai-overline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--volt-accent);
}

.ai-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ai-panel-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--volt-accent);
}

.ai-panel-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.ai-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--volt-accent);
    border-bottom: 2px solid var(--volt-accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.ai-chevron.is-open {
    transform: rotate(225deg) translate(-2px, -2px);
}

.ai-info-toggle {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(242, 242, 240, 0.25);
    background: transparent;
    color: rgba(242, 242, 240, 0.6);
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ai-info-toggle:hover,
.ai-info-toggle[aria-expanded="true"] {
    border-color: var(--volt-accent);
    color: var(--volt-accent);
}

.ai-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ai-panel-info {
    margin-bottom: 14px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(242, 242, 240, 0.55);
}

.ai-panel-info p {
    margin: 0 0 8px;
}

.ai-panel-info p:last-child {
    margin-bottom: 0;
}

.ai-action {
    padding: 9px 18px;
    border: 1px solid var(--volt-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--volt-accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

/* The familiar sparkle, deliberately not a bespoke shape: the point of a signifier is that people
   already know what it means. In the accent colour so it still reads as ours. It marks generated
   content at a glance -- which matters most on the buttons, since "Analysera augusti 2026" does not
   otherwise say that a model is involved. */
.ai-mark {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    color: var(--volt-accent);
}

.ai-action-primary .ai-mark {
    color: var(--volt-bg);
}

/* The action is not a third option in the period selector above it. The selector is pill chips
   with a 1px border; making this filled and full width gives it a different silhouette so the eye
   stops grouping them. */
.ai-action-primary {
    background: var(--volt-accent);
    border-color: var(--volt-accent);
    color: var(--volt-bg);
}

.ai-action-primary:hover:not(:disabled) {
    filter: brightness(1.08);
}

.ai-action-block {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
}

/* Shown where the action would be when the selected period has no analysis yet. Hiding the panel
   instead would read as a bug. */
.ai-period-note {
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
    color: var(--volt-text-muted, rgba(255, 255, 255, 0.6));
}

.ai-consent-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.ai-consent-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.ai-consent-actions .ai-action {
    flex: 1;
}

/* A second action next to the primary one: same shape, quieter, so the paid analysis stays
   the obvious choice and sharing or renaming does not compete with it. */
.ai-action-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.78);
}

.ai-action-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.ai-action:hover:not(:disabled) {
    background: var(--volt-accent);
    color: #0B0B0F;
}

.ai-action:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The summary is the answer; everything below it is supporting detail. */
.ai-summary {
    margin: 4px 0 18px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--volt-text);
}

.ai-section {
    border-left: 3px solid var(--volt-accent);
    padding-left: 14px;
    margin-bottom: 16px;
}

.ai-section-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(242, 242, 240, 0.5);
}

.ai-item {
    margin: 0;
    padding: 6px 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(242, 242, 240, 0.9);
    border-top: 1px solid rgba(242, 242, 240, 0.07);
}

.ai-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ai-fineprint {
    margin: 0 0 4px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(242, 242, 240, 0.4);
}

.ai-name-suggestion {
    margin-top: 0.75rem;
}

.ai-name-current {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
}

.ai-name-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--volt-accent, #c6f24e);
    text-decoration: underline;
    cursor: pointer;
}

.ai-name-link:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Exercises the period analysis proposes. Chips rather than prose so they can be opened, and
   so they are visibly the checked part of the answer: only library exercises get this far. */
.ai-exercise-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.4rem 0 1rem;
}

.ai-exercise-chips .ai-section-label {
    flex-basis: 100%;
    margin-bottom: 0;
}

.ai-exercise-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(212, 255, 63, 0.45);
    border-radius: 999px;
    background: rgba(212, 255, 63, 0.08);
    color: var(--volt-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.ai-exercise-chip:hover {
    background: rgba(212, 255, 63, 0.16);
    border-color: var(--volt-accent);
}

.ai-exercise-chip-group {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(242, 242, 240, 0.5);
}
.share-preview {
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.share-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--volt-text-muted, rgba(255, 255, 255, 0.6));
}

.share-actions {
    margin-top: 0.75rem;
}

.share-status {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--volt-text-muted, rgba(255, 255, 255, 0.6));
}

/* Admin form fields. Plain inputs rather than MudBlazor: a static server-rendered form binds by
   the name attribute, which MudBlazor's controls do not emit. */
.admin-field-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    color: var(--volt-text-muted, rgba(255, 255, 255, 0.6));
}

.admin-field {
    width: 100%;
    max-width: 22rem;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font: inherit;
}

/* The action and its info button share a row when there is no heading to hold the latter. */
.ai-action-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.ai-panel--card .ai-action-row {
    margin-top: 0;
}

.ai-action-row .ai-action-block {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Workout page tabs. Hand-rolled rather than MudTabs, which clips its container
   to round the corners -- and position: sticky is defeated by any ancestor with
   overflow other than visible. Same sticky treatment as .stats-toolbar, which
   already works on the statistics tab.
   --------------------------------------------------------------------------- */
/* Anything else that sticks on this page has to clear the bar, so the offset lives in one place.
   8px gap + the bar's own height + 8px below it. */
:root {
    --volt-tabbar-offset: 64px;
}

.volt-tabs {
    position: sticky;
    top: 8px;
    z-index: 6;
    display: flex;
    gap: 6px;
    /* Scrolls sideways by touch: four labels do not fit a phone, and tapping
       through them one at a time was the only way across. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    margin: 8px 0 0;
    border-radius: 999px;
    border: 1px solid var(--volt-line);
    background: rgba(11, 11, 15, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.volt-tabs::-webkit-scrollbar {
    display: none;
}

.volt-tabs button {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.volt-tabs button:hover {
    border-color: rgba(212, 255, 63, 0.4);
}

.volt-tabs button.active {
    background: var(--volt-accent);
    border-color: var(--volt-accent);
    color: var(--volt-bg);
}

.volt-tabpanel {
    padding: 18px 0 0;
}