/* ===== 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;
}

/* ===== Globala grunder (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);
}

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

/* Atmosfär: subtil volt-tonad ljuskälla + film-grain, fast bakom allt innehåll */
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");
}

/* ===== Anpassad 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);
}

/* Plats för den fasta bott-navigeringen så innehåll inte göms bakom den */
.volt-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ===== Bottom tab bar (global — NavLink-rendrade <a> får inte scoped-attribut) ===== */
.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(62px + 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);
}

/* Aktivt pass pågår: pulserande accent som signalerar att passet är igång. */
.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;
}

/* ===== 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;
}

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

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

/* ===== Formulär / validering ===== */
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-kort (Login/Register/ForgotPassword/ResetPassword m.fl.) ===== */
.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 (sekundära Identity-sidor som ärvt råa Bootstrap-klasser) =====
   Scopas under .volt-identity (sätts i AccountLayout/ManageLayout) så inget läcker till MudBlazor-appen.
   Bootstrap-CSS:en är borttagen, så dessa regler styr elementen helt. */
.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 + ev. login-input inom 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: visa label ovanför fältet (utan Bootstrap-float-mekaniken) */
.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; }

/* Knappar */
.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 / valideringstext */
.volt-identity .text-danger { color: #FF5468; }