html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Clip the ~scrollbar-width overshoot from full-bleed (100vw) elements so
       the page never scrolls sideways. */
    overflow-x: hidden;
    max-width: 100%;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Identity / account pages (static-rendered, no MudBlazor JS) ---- */
.account-card {
    max-width: 26rem;
    margin: 3rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.account-card h1 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    line-height: 1.2;
}

.account-subtitle {
    color: #6b6b6b;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    flex: 1;
    min-width: 0; /* allow the field to shrink within the flex row */
}

.form-row {
    display: flex;
    gap: 0.75rem;
}

.form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #333;
}

.form-input {
    width: 100%;
    box-sizing: border-box; /* keep padding/border inside the column width */
    padding: 0.6rem 0.75rem;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: #2e7d32;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.account-button {
    width: 100%;
    padding: 0.7rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.account-button:hover {
    background: #1b5e20;
}

.account-links {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.account-alert {
    background: #fdecea;
    color: #b71c1c;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.account-alert--success {
    background: #e8f5e9;
    color: #1b5e20;
    border-color: #c8e6c9;
}

.account-card--wide {
    max-width: 34rem;
}

.profile-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background: #f5f5f5;
    border-radius: 8px;
}

.profile-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profile-meta dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b6b6b;
}

.profile-meta dd {
    margin: 0;
    font-weight: 600;
}

.profile-section {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .account-card { margin: 1rem; padding: 1.5rem; }
    .form-row { flex-direction: column; gap: 0; }
}

/* Anchor links (nav, scroll hint) glide to their section instead of jumping. */
html {
    scroll-behavior: smooth;
}

/* ---- Public landing page ---- */
/* Pull the page flush under the app bar; sections + photo bands scroll normally. */
.landing {
    margin-top: -16px; /* offsets MudContainer's my-4 top margin */
}

/* Break an element out of the centered layout container to span the viewport. */
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Hero: scrolling photo with a darkened overlay and centred text. */
.landing-hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    /* Same breathing room below the hero as the photo bands get. */
    margin-bottom: 3.5rem;
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.38)),
                url('/images/Vagen.jpg') center/cover no-repeat;
    color: #fff;
}

.landing-hero__inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem clamp(1.25rem, 5vw, 4rem);
    text-align: center;
}

.landing-hero__title {
    color: #fff;
    font-weight: 700;
    max-width: 42rem;
    margin: 0 auto;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.landing-hero__subtitle {
    color: rgba(255, 255, 255, 0.94);
    font-weight: 400;
    max-width: 34rem;
    margin: 0.75rem auto 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.landing-hero__login-hint {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.landing-hero__login-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

/* White-outlined notice box with an action button. */
.landing-hero__notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 640px;
    margin: 2rem auto 0;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    background: rgba(39, 51, 56, 0.4);
    backdrop-filter: blur(2px);
    color: #fff;
    text-align: left;
}

.landing-hero__notice-icon {
    color: #fff;
    flex-shrink: 0;
}

.landing-hero__notice-text {
    flex: 1;
    color: #fff;
}

@media (max-width: 600px) {
    .landing-hero__notice {
        flex-direction: column;
        text-align: center;
    }
}

/* Clickable scroll hint: an anchor to #om wrapping the bouncing arrow icon. */
.landing-hero__hint {
    display: inline-block;
    margin-top: 3rem;
    color: rgba(255, 255, 255, 0.85);
    animation: landing-bounce 1.8s ease-in-out infinite;
}

.landing-hero__hint:hover {
    color: #fff;
}

@keyframes landing-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* Full-width photo band between content sections. */
.landing-band {
    min-height: 42vh;
    display: flex;
    align-items: flex-end;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Only vertical margins: the shorthand would zero out .full-bleed's
       negative side margins and shove the band half a container to the right. */
    margin-block: 3.5rem;
}

.landing-band__caption {
    width: 100%;
    padding: 2rem clamp(1.25rem, 5vw, 4rem);
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(39, 51, 56, 0.7) 100%);
}

.landing-band__caption .mud-typography {
    color: #fff;
    max-width: 1100px;
    margin: 0 auto;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Sections scroll clear of the fixed app bar when reached via anchor links.
   Horizontal padding keeps the text off the edges (the hero/bands are full-bleed,
   so without this the body content looks cramped against the gutter). */
.landing-section {
    scroll-margin-top: 80px;
    margin-bottom: 3.5rem;
    padding-inline: clamp(0.5rem, 3vw, 2rem);
}

.landing-section--last {
    margin-bottom: 2rem;
}

/* Karta/flygfoto pair in the "Vårt område" section; links open the full-size file. */
.landing-area-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.h-100 {
    height: 100%;
}

/* ---- Leaflet map boxes ---- */
.rr-map {
    height: 360px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    z-index: 0; /* keep map panes under MudBlazor overlays/menus */
}

.rr-map--sm {
    height: 240px;
}

/* ---- Site footer ---- */
.app-footer {
    background: #273338;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3rem;
}

.app-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem clamp(1.25rem, 5vw, 4rem) 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.app-footer__col {
    flex: 1 1 220px;
}

.app-footer__brand {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.app-footer__col h4 {
    color: #fff;
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.app-footer__col a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin-bottom: 0.4rem;
}

.app-footer__col a:hover {
    color: #fff;
    text-decoration: underline;
}

.app-footer__col p {
    margin: 0.25rem 0;
    line-height: 1.5;
}

.app-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1rem clamp(1.25rem, 5vw, 4rem);
    font-size: 0.85rem;
    text-align: center;
}

/* ---- Login / register full-screen photo background ---- */
.account-bg {
    min-height: 100vh;
    background: url('/images/login-bg.jpg') center/cover no-repeat fixed;
}

.account-bg-overlay {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Darken slightly so the white card and text stay readable over the photo. */
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45));
}

.account-bg .account-card {
    margin: 0;
    width: 100%;
    max-width: 26rem;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------------------
   Admin-editable texts (<EditableText>). The pen only renders for admins; it
   sits at the top-right of the text block and brightens on hover/focus.
   --------------------------------------------------------------------------- */
.editable-text {
    position: relative;
    display: block;
}

/* Keep wrapped text clear of the pen so it never covers a word. */
.editable-text--admin > .mud-typography {
    padding-right: 2.25rem;
}

.editable-text__pen {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
    z-index: 1;
}

.editable-text--admin:hover .editable-text__pen,
.editable-text__pen:focus-visible {
    opacity: 1;
}

.editable-text--editing {
    width: 100%;
    text-align: left;
}

/* ---- Mini calendar on the Händelser page (Meetings.razor) ---- */
.rr-cal-panel {
    position: sticky;
    top: 80px; /* clears the fixed app bar */
}

.rr-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}

.rr-cal__wd {
    font-size: .7rem;
    font-weight: 500;
    color: rgba(0, 0, 0, .54);
    padding: 4px 0;
}

.rr-cal__d {
    position: relative;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    font: inherit;
    font-size: .8125rem;
    color: inherit;
    cursor: pointer;
}

.rr-cal__d:hover {
    background: rgba(0, 0, 0, .06);
}

.rr-cal__d--today {
    font-weight: 700;
}

.rr-cal__d--selected,
.rr-cal__d--selected:hover {
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 500;
}

.rr-cal__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.rr-cal__dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.rr-cal__dot--primary { background: var(--mud-palette-primary); }
.rr-cal__dot--secondary { background: var(--mud-palette-secondary); }
.rr-cal__d--selected .rr-cal__dot { background: #fff; }

/* ---------------------------------------------------------------------------
   App bar
   The navigation is grouped rather than run together: a hairline rule separates
   the association's own pages from the member's, and the board's from both.
   --------------------------------------------------------------------------- */

/*
   The brand is set at h6 (20px) and the navigation at 14px. Centring puts their
   *boxes* on a common centre, but a text baseline sits at a distance from that
   centre that depends on the font's ascent — so two type sizes centred in one
   row read as two lines. Aligning this group on the baseline instead hands the
   metric arithmetic to the browser, which keeps it correct if the type size or
   the font ever changes.
*/
.appbar-lead {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

/*
   Every item in the row must be the same box, or the labels don't share a line.
   MudBadge wraps its button in an inline-block, and MudMenu wraps its button in
   a plain div next to an empty popover element. Both build a line box around an
   inline-level button, which adds leading under the baseline — and they add
   different amounts, so align-items:center lands them on different heights.
   Making the wrappers flex removes the line box; the fixed height removes the
   rest of the difference.
*/
.appbar-nav .mud-badge-root,
.appbar-nav .mud-menu {
    display: flex;
    align-items: center;
}

.appbar-nav .mud-button-root {
    height: 36px;
}

.appbar-rule {
    width: 1px;
    height: 22px;
    flex: none;
    margin: 0 10px;
    background: rgba(255, 255, 255, .22);
}

/* The account is an avatar rather than an e-mail address: initials carry the
   same "you are signed in as" message in a fraction of the width. The circle is
   drawn on the menu's own activator button, so it opens like any other menu. */
.appbar-avatar .mud-button-root {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    color: #1b2a22;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.appbar-avatar .mud-button-root:hover {
    background: var(--mud-palette-secondary);
    filter: brightness(1.08);
}

/* ---------------------------------------------------------------------------
   Member images
   --------------------------------------------------------------------------- */

/* The app-bar avatar carries the member's picture as a CSS variable, so the menu
   activator stays the same button the other menus use (see MainLayout). The label
   keeps rendering underneath — MudMenu draws no activator without one — so the
   initials are made transparent rather than removed, and stay readable to a
   screen reader. */
.appbar-avatar--photo .mud-button-root {
    background-image: var(--rr-avatar, none);
    background-size: cover;
    background-position: center;
    color: transparent;
}

.rr-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Thumbnails in the thread list stay small; the thread itself shows them larger. */
.rr-forum-thumb {
    height: 64px;
    width: 64px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.rr-forum-image {
    max-height: 240px;
    max-width: 100%;
    border-radius: 6px;
    display: block;
}