@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --up-green: oklch(0.6 0.19 152);
    --up-green-dark: oklch(0.48 0.17 152);
    --up-navy: oklch(0.32 0.09 255);
    --up-cream: oklch(0.98 0.008 90);
    --up-ink: oklch(0.22 0.02 90);
    --up-orange: #f97316;
    --up-green-light: oklch(0.92 0.05 152);
    --up-font-heading: "Merriweather", Georgia, "Times New Roman", serif;
    --up-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reusable brand lockup (logo badge + wordmark), shared between the marketing
   homepage and the app shell so the brand looks the same everywhere. */
.up-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.up-brand-icon {
    /* uppsamlingsplats.png already has the green square + pictogram baked in,
       so it just needs to fill the rounded badge — no extra background here. */
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

.up-brand-word {
    font-family: var(--up-font-heading);
    font-weight: 900;
    color: var(--up-ink);
}

.up-brand-accent {
    color: var(--up-green);
    font-weight: 700;
}

.up-brand-on-green .up-brand-word {
    color: white;
}

.up-brand-on-green .up-brand-accent {
    color: rgba(255, 255, 255, 0.85);
}

html, body {
    font-family: var(--up-font-body);
    color: var(--up-ink);
    background: var(--up-cream);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--up-font-heading);
    font-weight: 800;
}

a, .btn-link {
    color: var(--up-green-dark);
}

/* Brand color overrides — Bootstrap's compiled .btn-primary/.btn-success
   classes bake their colors in at build time, so CSS variables alone won't
   retroactively repaint them; override the classes directly instead. */
.btn-primary,
.btn-success {
    color: #fff;
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--up-green-dark);
    border-color: var(--up-green-dark);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--up-green-dark);
    border-color: var(--up-green);
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    color: #fff;
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.btn {
    border-radius: 10px;
    font-weight: 600;
}

.text-primary,
.text-success {
    color: var(--up-green-dark) !important;
}

.bg-primary,
.bg-success {
    background-color: var(--up-green) !important;
}

.border-primary,
.border-success {
    border-color: var(--up-green) !important;
}

.form-check-input:checked {
    background-color: var(--up-green);
    border-color: var(--up-green);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--up-green);
    box-shadow: 0 0 0 0.2rem oklch(0.6 0.19 152 / 20%);
}

.card {
    border-radius: 14px;
}

/* Pill-style tabs matching the homepage's search-card tabs, instead of
   Bootstrap's default underlined nav-tabs. */
.nav-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: 1px solid oklch(0.85 0.05 152);
    border-radius: 999px;
    color: var(--up-green-dark);
    background: white;
    font-weight: 600;
    padding: 7px 16px;
}

.nav-tabs .nav-link:hover {
    border-color: var(--up-green);
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    background: var(--up-green);
    color: white;
    border-color: var(--up-green);
}

/* Soft rounded card that the app shell's main content sits in, so pages built
   from plain Blazorise components (accordions, list groups, tabs) read as one
   cohesive surface instead of bare white-on-white. */
.up-app-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (max-width: 576px) {
    .up-app-card {
        padding: 16px;
        border-radius: 12px;
    }
}

.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 var(--up-green);
}

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

/* ---------------------------------------------------------------------
   Collector view (the "uppsamlingsvy" a starter uses while running a
   collection) — location status banner, mobile tab switcher / desktop
   panel grid, map frame, and the bottom progress bar. Reuses the same
   design tokens as the public site so this operational view matches the
   homepage's look and feel instead of default Bootstrap/Blazorise chrome.
   ------------------------------------------------------------------- */

/* Geolocation status banner (start form + map panel) */
.up-cv-location-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

.up-cv-location-status-pending {
    background: oklch(0.95 0.02 250);
    color: oklch(0.42 0.05 250);
}

.up-cv-location-status-ok {
    background: var(--up-green-light);
    color: var(--up-green-dark);
}

.up-cv-location-status-error {
    background: oklch(0.95 0.04 55);
    color: oklch(0.45 0.15 45);
}

/* Neutral (nothing chosen yet, no action needed from the user) and "attn"
   (a recoverable, expected state — GPS denied/unavailable/low-accuracy —
   that deserves a nudge but is not a real error). Kept visually distinct
   from -error/-ok so a normal "no place chosen yet" state never reads as
   a warning, and a real problem is never lost in a sea of orange. */
.up-cv-location-status-neutral {
    background: oklch(0.95 0.01 90);
    color: var(--up-ink);
}

.up-cv-location-status-attn {
    background: oklch(0.96 0.05 80);
    color: oklch(0.42 0.12 70);
}

.up-land-status-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.up-cv-location-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: up-cv-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes up-cv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile tab switcher — pill buttons matching the homepage search-card tabs */
.up-cv-tabbar {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.up-cv-tab {
    flex: 1;
    min-width: 0;
    border: 1px solid oklch(0.85 0.05 152);
    background: white;
    color: var(--up-green-dark);
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.up-cv-tab-active {
    background: var(--up-green);
    color: white;
    border-color: var(--up-green);
}

.up-cv-tab-badge {
    background: var(--up-green-light);
    color: var(--up-green-dark);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 700;
}

.up-cv-tab-active .up-cv-tab-badge {
    background: rgba(255, 255, 255, 0.28);
    color: white;
}

/* Panels: only the active one shows on narrow viewports; from 900px up all
   three show at once in a grid and the tab switcher disappears. */
.up-cv-panel {
    display: none;
}

.up-cv-panels.up-cv-active-home .up-cv-panel-home,
.up-cv-panels.up-cv-active-collected .up-cv-panel-collected,
.up-cv-panels.up-cv-active-map .up-cv-panel-map {
    display: block;
}

.up-cv-panel-title {
    font-family: var(--up-font-heading);
    font-size: 1rem;
    color: var(--up-green-dark);
    margin-bottom: 12px;
    display: none;
}

@media (min-width: 900px) {
    .up-cv-tabbar {
        display: none;
    }

    .up-cv-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: start;
    }

    .up-cv-panel {
        display: block !important;
    }

    .up-cv-panel-home {
        grid-column: 1;
        grid-row: 1;
    }

    .up-cv-panel-collected {
        grid-column: 1;
        grid-row: 2;
    }

    .up-cv-panel-map {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .up-cv-panel-title {
        display: block;
    }
}

/* QR / add-person panel */
.up-cv-qr-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 4px 0 8px;
    text-align: center;
}

/* Collected-people list */
.up-cv-collected-list .list-group-item {
    margin-bottom: 8px;
}

.up-cv-collected-empty {
    color: oklch(0.5 0.02 90);
    text-align: center;
    padding: 24px 8px;
    font-size: 0.92rem;
}

/* Collected-person card — replaces the old solid-color block (inline
   background-color on ListGroupItem) with a white card + left accent bar,
   matching the rest of the brand's card language. */
.up-cv-person-card {
    background: white;
    border: 1px solid oklch(0.9 0.01 90) !important;
    border-left: 4px solid var(--up-green) !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.up-cv-person-card:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.up-cv-person-card-pending {
    border-left-color: var(--up-orange) !important;
}

.up-cv-person-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.up-cv-person-name {
    font-weight: 700;
    color: var(--up-ink);
}

.up-cv-person-meta {
    font-size: 0.82rem;
    color: oklch(0.5 0.02 90);
    margin-top: 2px;
}

.up-cv-person-dot {
    margin: 0 4px;
}

.up-cv-person-time {
    font-variant-numeric: tabular-nums;
}

.up-cv-person-time-meta {
    opacity: 0.85;
}

.up-cv-person-status {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--up-green);
    font-size: 0.7rem;
}

.up-cv-person-card-pending .up-cv-person-status {
    background: var(--up-orange);
}

.up-cv-person-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid oklch(0.94 0.01 90);
    font-size: 0.85rem;
}

/* Person list wrapper (report view) + order badge + delete icon button */
.up-cv-person-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.up-cv-person-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--up-green-light);
    color: var(--up-green-dark);
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}

.up-cv-person-delete {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: oklch(0.7 0.01 90);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.up-cv-person-delete:hover,
.up-cv-person-delete:focus-visible {
    color: oklch(0.55 0.15 25);
    background: oklch(0.95 0.04 25);
}

/* "Orsak till återsamling" pill selector — replaces raw Bootstrap
   Success/Danger/Warning/Info colored buttons with a single brand-consistent
   pill style (matches .up-cv-tab) instead of a mismatched red/orange/blue set. */
.up-cv-cause-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.up-cv-cause-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid oklch(0.85 0.05 152);
    background: white;
    color: var(--up-green-dark);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--up-font-body);
    cursor: pointer;
    white-space: nowrap;
}

.up-cv-cause-pill-active {
    background: var(--up-green);
    color: white;
    border-color: var(--up-green);
}

.up-cv-cause-custom {
    margin-top: 4px;
    max-width: 420px;
}

/* Map */
.up-cv-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.up-cv-map-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid oklch(0.9 0.01 90);
}

/* "Fler inställningar..." accordion (Accordion1Item) — replace the flat
   full-bleed green bar with a rounded pill toggle matching the rest of the
   brand's button language. */
.accordion-item {
    border: none !important;
    background: transparent !important;
    margin-bottom: 12px;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    border-radius: 999px !important;
    font-weight: 600;
    padding: 12px 20px !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    border-radius: 18px !important;
}

.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-body {
    padding: 16px 6px 4px !important;
}

/* Bottom progress bar (timer + step indicator) — bleeds to the edges of the
   surrounding .up-app-card so it reads as an attached footer strip instead
   of a fixed bar detached from the card, which is what made it look "loose"
   below the page before. */
.up-cv-progress-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--up-green);
    color: white;
    margin: 28px -24px -24px;
    padding: 14px clamp(16px, 4vw, 32px);
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    font-family: var(--up-font-body);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

@media (max-width: 576px) {
    .up-cv-progress-bar {
        margin: 20px -16px -16px;
        border-radius: 0 0 12px 12px;
        gap: 16px;
    }
}

.up-cv-progress-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--up-font-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.up-cv-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--up-font-body);
}

.up-cv-step {
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-cv-step-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--up-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    flex-shrink: 0;
}

.up-cv-step-current .up-cv-step-badge {
    background: white;
    color: var(--up-green-dark);
}

.up-cv-step-label {
    font-family: var(--up-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
}

.up-cv-step-current .up-cv-step-label {
    opacity: 1;
}

.up-cv-step-connector {
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
}

.up-cv-step-action {
    background: white;
    color: var(--up-green-dark);
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--up-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Landing page workspace ("/") — map-centric "hitta/välj plats -> starta"
   flow. Lives inside the shared .up-app-card from AssemblyPointEventMainLayout,
   but (unlike the old 420px-capped .up-landing) uses the card's full width,
   putting the map beside the selection/action panel on larger screens
   instead of leaving most of the card empty.
   ------------------------------------------------------------------- */
.up-land {
    max-width: 100%;
}

.up-land-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 18px;
}

.up-land-note {
    font-size: 0.85rem;
    color: oklch(0.55 0.02 90);
    margin-top: 4px;
}

.up-land-offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: oklch(0.95 0.04 55);
    color: oklch(0.4 0.14 45);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* Single CSS grid whose named areas are rearranged per breakpoint — on
   mobile platsstatus comes before the map, on desktop the map sits beside a
   status/platsval/action column instead. This is why status/map/placeval/
   action are separate grid items rather than nested in one wrapper: grid
   areas can only place *direct* children freely, not something buried a
   couple of divs deep. */
.up-land-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "active"
        "status"
        "map"
        "placeval"
        "action"
        "mina"
        "help";
    gap: 20px;
}

.up-land-area-header { grid-area: header; }
.up-land-area-active { grid-area: active; }
.up-land-area-status { grid-area: status; }
.up-land-area-map { grid-area: map; min-width: 0; }
.up-land-area-placeval { grid-area: placeval; min-width: 0; }
.up-land-area-action { grid-area: action; }
.up-land-area-mina { grid-area: mina; }
.up-land-area-help { grid-area: help; }

@media (min-width: 900px) {
    .up-land-grid {
        grid-template-columns: 1.35fr 1fr;
        column-gap: 28px;
        grid-template-areas:
            "header header"
            "active active"
            "map status"
            "map placeval"
            "map action"
            "mina mina"
            "help help";
    }
}

/* No height set here on purpose — AssemblyPointDiscoveryMap's <RealTimeMap>
   carries its own fixed pixel height (380px), so this frame just wraps that
   at its natural content height. A conflicting height here would either
   clip the map (frame shorter than 380px) or leave dead space (frame
   taller), and a percentage height would resolve to nothing since this
   frame's own parent (.up-land-area-map, a CSS grid item) has no defined
   height of its own either. */
.up-land-map-frame {
    border-radius: 16px;
    overflow: hidden;
    background: var(--up-cream);
    border: 1px solid oklch(0.9 0.01 90);
}

@media (min-width: 900px) {
    .up-land-map-frame {
        position: sticky;
        top: 84px;
    }
}

.up-land-map-placeholder {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: oklch(0.6 0.02 90);
    font-size: 0.9rem;
    text-align: center;
    padding: 24px;
}

.up-land-nearby {
    background: var(--up-cream);
    border-radius: 14px;
    padding: 14px 16px;
}

.up-land-nearby-empty {
    color: oklch(0.5 0.02 90);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.up-land-nearby-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.up-land-nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: white;
    border: 1px solid oklch(0.9 0.01 90);
    border-radius: 12px;
    padding: 10px 12px;
}

.up-land-nearby-item-selected {
    border-color: var(--up-green);
    background: var(--up-green-light);
}

.up-land-nearby-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.up-land-nearby-name {
    font-weight: 700;
    color: var(--up-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

.up-land-verified-badge {
    color: var(--up-green-dark);
    display: inline-flex;
}

.up-land-nearby-meta,
.up-land-nearby-address {
    font-size: 0.82rem;
    color: oklch(0.55 0.02 90);
}

.up-land-temp-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: oklch(0.97 0.03 55);
    border: 1px solid oklch(0.88 0.06 55);
    border-radius: 12px;
    padding: 10px 12px;
}

.up-land-temp-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.up-land-temp-confirmed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--up-green-dark);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.up-land-primary-action {
    text-align: center;
}

.up-land-primary-action .btn {
    min-height: 48px;
}

.up-land-local-note {
    font-size: 0.8rem;
    color: oklch(0.55 0.02 90);
    margin-top: 8px;
}

.up-land-mina {
    background: var(--up-cream);
    border-radius: 14px;
    padding: 14px 16px;
}

.up-land-mina-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: white;
    border: 1px solid oklch(0.9 0.01 90);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.up-land-mina-title {
    font-weight: 700;
    color: var(--up-ink);
}

.up-land-mina-meta {
    font-size: 0.82rem;
    color: oklch(0.55 0.02 90);
}

.up-land-mina-empty {
    color: oklch(0.5 0.02 90);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.up-land-how {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid oklch(0.92 0.01 90);
    text-align: center;
}

.up-land-how-steps {
    list-style: none;
    margin: 14px 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
}

@media (min-width: 700px) {
    .up-land-how-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.up-land-how-steps li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.up-land-how-steps strong {
    color: var(--up-green-dark);
    font-size: 0.9rem;
}

.up-land-how-steps span {
    font-size: 0.85rem;
    color: oklch(0.45 0.02 90);
}

.up-land-disclaimer {
    font-size: 0.78rem;
    color: oklch(0.6 0.02 90);
    margin-top: 6px;
}

/* Header connectivity indicator (SectionOutlet "header-actions" on "/") */
.up-conn-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
}

.up-conn-status-pending {
    color: oklch(0.5 0.02 90);
    background: oklch(0.94 0.01 90);
}

.up-conn-status-online {
    color: var(--up-green-dark);
    background: var(--up-green-light);
}

.up-conn-status-offline {
    color: oklch(0.45 0.15 45);
    background: oklch(0.95 0.04 55);
}

/* Respect reduced-motion preferences for the spinner used across the app
   (GPS/nearby-search loading states included). */
@media (prefers-reduced-motion: reduce) {
    .up-cv-location-spinner {
        animation-duration: 1.6s;
    }
}

/* ---------------------------------------------------------------------
   App footer — mirrors Uppsamlingsplats.Web's PublicFooter look (same dark
   palette/brand lockup/link style) so the operational PWA reads as the same
   product as the marketing site instead of a disconnected tool.
   ------------------------------------------------------------------- */
.up-app-footer {
    background: oklch(0.16 0.01 90);
    color: oklch(0.85 0.01 90);
    padding: 28px 20px 16px;
    margin-top: 32px;
}

.up-app-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.up-app-footer-brand .up-brand-word {
    color: white;
}

.up-app-footer-brand .up-brand-accent {
    color: var(--up-green);
}

.up-app-footer-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.up-app-footer-nav a {
    color: oklch(0.85 0.01 90);
}

.up-app-footer-nav a:hover {
    color: white;
}

.up-app-footer-copyright {
    font-size: 0.78rem;
    color: oklch(0.6 0.01 90);
    white-space: nowrap;
}

/* Small text-color/size utilities, mirrored from Uppsamlingsplats.Web's
   app.css (.up-muted / .up-small) so the two apps' CSS stay independent
   files but agree on the same look for the same job. */
.up-muted {
    color: oklch(0.5 0.02 90);
}

.up-small {
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   App shell width — constrains the shared .up-app-card to a comfortable
   reading/working width on desktop (~1280px) instead of stretching a
   compact, action-oriented tool edge-to-edge on wide monitors.
   ------------------------------------------------------------------- */
.up-app-shell {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   App header (AppHeader.razor) — compact status/link/menu cluster, not a
   copy of the marketing site's navbar. Everything here is a status
   indicator or a secondary link; the primary task lives on the page.
   ------------------------------------------------------------------- */
.up-appheader {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

.up-appheader-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--up-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--up-ink);
    text-decoration: none;
    background: none;
    border: none;
    padding: 6px 2px;
    cursor: pointer;
}

.up-appheader-link:hover {
    color: var(--up-green-dark);
}

.up-appheader-link-desktop {
    display: none;
}

@media (min-width: 900px) {
    .up-appheader-link-desktop {
        display: inline-flex;
    }
}

.up-appheader-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid oklch(0.88 0.01 90);
    background: white;
    color: var(--up-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.up-appheader-menu-btn:hover {
    border-color: var(--up-green);
    color: var(--up-green-dark);
}

.up-appheader-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 224px;
    background: white;
    border: 1px solid oklch(0.9 0.01 90);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 40;
}

.up-appheader-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--up-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--up-ink);
    text-decoration: none;
    cursor: pointer;
}

.up-appheader-menu-item:hover {
    background: var(--up-green-light);
    color: var(--up-green-dark);
}

.up-appheader-menu-item-mobile-only {
    display: flex;
}

@media (min-width: 900px) {
    .up-appheader-menu-item-mobile-only {
        display: none;
    }
}

.up-appheader-link:focus-visible,
.up-appheader-menu-btn:focus-visible,
.up-appheader-menu-item:focus-visible,
.up-install-banner-dismiss:focus-visible,
.up-help-close:focus-visible {
    outline: 2px solid var(--up-green);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Hjälp dialog — small centered modal, hand-rolled (no Blazorise Modal
   dependency; see AppHeader.razor for why).
   ------------------------------------------------------------------- */
.up-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 60;
}

.up-help-dialog {
    background: white;
    border-radius: 16px;
    padding: 20px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.up-help-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.up-help-close {
    border: none;
    background: none;
    color: oklch(0.5 0.02 90);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
}

.up-help-close:hover {
    color: var(--up-ink);
    background: oklch(0.94 0.01 90);
}

.up-help-steps {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.up-help-steps strong {
    display: block;
    color: var(--up-green-dark);
    font-size: 0.9rem;
}

.up-help-steps span {
    font-size: 0.85rem;
    color: oklch(0.45 0.02 90);
}

/* ---------------------------------------------------------------------
   PWA install banner (PwaInstallBanner.razor) — discreet, dismissible.
   ------------------------------------------------------------------- */
.up-install-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--up-green-light);
    color: var(--up-green-dark);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 12px;
    font-size: 0.85rem;
}

.up-install-banner span {
    flex: 1;
    min-width: 0;
}

.up-install-banner-dismiss {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--up-green-dark);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
}

.up-install-banner-dismiss:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------
   Active/pågående local collection banner — informational only, see the
   comment above `activeCollection` in Home.razor for why there is
   deliberately no "Fortsätt" button here.
   ------------------------------------------------------------------- */
.up-land-active-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: oklch(0.97 0.03 55);
    border: 1px solid oklch(0.88 0.06 55);
    border-radius: 14px;
    padding: 14px 16px;
}

.up-land-active-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: oklch(0.5 0.14 55);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Places the map + platsval below the platsstatus banner within the
   "placeval" grid area get a bit of breathing room between the nearby-list
   card and the tillfällig-plats card when both are shown at once. */
.up-land-area-placeval > * + * {
    margin-top: 14px;
}

/* ---------------------------------------------------------------------
   Sticky mobile action bar — keeps "Starta återsamling här" reachable
   one-handed without scrolling back up once a place is chosen. Hidden
   entirely on desktop, where the primary action button in the workspace
   itself is already always in view.
   ------------------------------------------------------------------- */
.up-land-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-top: 1px solid oklch(0.9 0.01 90);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.up-land-sticky-cta span {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--up-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .up-land-sticky-cta {
        display: none;
    }
}

/* Reserves space for the sticky bar so it never covers the last section of
   the page on mobile, regardless of whether the bar happens to be showing
   for the current selection state. */
@media (max-width: 899px) {
    .up-land {
        padding-bottom: 72px;
    }
}

/* Skip link — same pattern as Uppsamlingsplats.Web's .up-skip-link, target
   is #app-main-content in AssemblyPointEventMainLayout.razor. Off-screen
   until keyboard-focused, then jumps above the fixed LayoutHeader bar. */
.up-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    background: var(--up-green-dark);
    color: white !important;
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}

.up-skip-link:focus {
    left: 0;
}