/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* #blazor-error-ui er flyttet til den globale app.css, så den også gælder PublicLayout (den
   offentlige statusside). En scoped regel her ramte kun MainLayout og lod bjælken stå permanent
   synlig på statussiden. Denne fil holdes tom med vilje. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xwcsk12wib],
.components-reconnect-repeated-attempt-visible[b-xwcsk12wib],
.components-reconnect-failed-visible[b-xwcsk12wib],
.components-pause-visible[b-xwcsk12wib],
.components-resume-failed-visible[b-xwcsk12wib],
.components-rejoining-animation[b-xwcsk12wib] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-retrying[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-failed[b-xwcsk12wib],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xwcsk12wib] {
    display: block;
}


#components-reconnect-modal[b-xwcsk12wib] {
    background-color: white;
    /* The modal box is always white, so pin the text dark. Without this the paragraphs
       inherit the page text colour, which is light in dark mode — white on white, and the
       message vanishes while the spinner and button (own colours) stay. */
    color: #1f2937;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xwcsk12wib 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xwcsk12wib 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xwcsk12wib 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xwcsk12wib]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xwcsk12wib 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xwcsk12wib {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xwcsk12wib {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xwcsk12wib {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xwcsk12wib] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xwcsk12wib] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xwcsk12wib] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xwcsk12wib] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xwcsk12wib] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xwcsk12wib] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xwcsk12wib] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xwcsk12wib 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xwcsk12wib] {
            animation-delay: -0.5s;
        }

/* Nedsat bevægelse: ringene bliver til en stillestående prik.
   app.css sætter globalt animation-duration til 0,001 ms under
   prefers-reduced-motion. Ripplen starter på 0×0 px, så den lander med det samme
   på en 3 px blå prik — præcis dét, man ser på Windows, når «Animationseffekter»
   er slået fra under Tilgængelighed. Og det er den værste plads at miste
   fremdriftsvisning: brugeren kan ikke se, om der stadig forsøges, eller om det
   er gået i stå.

   En opacitetspuls i stedet. Den flytter ikke noget på skærmen og udløser derfor
   ikke det, reduced-motion er sat i verden for at beskytte imod — men den viser
   stadig, at der sker noget. !important er nødvendigt for at slå den globale regel,
   der også bruger !important. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-xwcsk12wib] {
        top: 0;
        left: 0;
        width: 74px;
        height: 74px;
        opacity: 1;
        animation-name: components-rejoining-puls-b-xwcsk12wib !important;
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }

    /* Den anden ring er kun til for at give ripplen dybde. Uden bevægelse ville
       to ens cirkler oven på hinanden bare se ud som én kraftigere streg. */
    .components-rejoining-animation div:nth-child(2)[b-xwcsk12wib] {
        display: none;
    }
}

@keyframes components-rejoining-puls-b-xwcsk12wib {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes components-rejoining-animation-b-xwcsk12wib {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/CustomerOverviewTiles.razor.rz.scp.css */
/* Six tiles: three by two, or all six in one row when there is room - never five and a lone sixth (an auto-fill grid
   does exactly that at ordinary widths). Two by two on a phone, like the key-figure tiles elsewhere. */
.ctiles[b-2mziotgkh9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.ctiles__tile[b-2mziotgkh9] {
    min-width: 0;
    display: grid;
}

.ctiles__note[b-2mziotgkh9] {
    margin: 0 0 1rem;
}

@media (min-width: 1500px) {
    .ctiles[b-2mziotgkh9] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ctiles[b-2mziotgkh9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}
/* /Components/Pages/Admin/M365Connections.razor.rz.scp.css */
/* The More menu on a connection row (25 October 2026): the house's ⋯ menu (Tenants.razor.css), a native <details> drawn as a
   small popover under its button, holding the actions used now and then: test, service health, analyses, edit, delete. */
.m365c-more[b-6czys6iq8z] {
    position: relative;
}

.m365c-more__button[b-6czys6iq8z] {
    list-style: none;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.m365c-more__button[b-6czys6iq8z]::-webkit-details-marker {
    display: none;
}

.m365c-more__menu[b-6czys6iq8z] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 20;
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    padding: 0.3rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-sm, 10px);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(19, 28, 40, 0.09));
}

.m365c-more__item[b-6czys6iq8z] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-btn, 8px);
    color: var(--ink, #16202e);
    font-size: 0.9rem;
    cursor: pointer;
}

.m365c-more__item:hover:not(:disabled)[b-6czys6iq8z],
.m365c-more__item:focus-visible[b-6czys6iq8z] {
    background: var(--blue-50, #eff4f9);
}

.m365c-more__item:disabled[b-6czys6iq8z] {
    color: var(--muted, #5d6c80);
    cursor: default;
}

/* Delete is the one that throws data away: red text, as ConfirmButton's default link is. */
.m365c-more__item--danger[b-6czys6iq8z] {
    color: var(--crit-ink, #a12a1f);
}

/* On a phone the row's side wraps under the text and starts at the left edge: open the menu rightwards there, so it does
   not grow off the screen (the same fix as the customer list's ⋯). */
@media (max-width: 640px) {
    .m365c-more__menu[b-6czys6iq8z] {
        left: 0;
        right: auto;
    }
}
/* /Components/Pages/Admin/TenantDetail.razor.rz.scp.css */
/* The header's ⋯ menu (25 October 2026): the customer list's pattern (Tenants.razor.css), here for the customer page's rare
   actions — the service notice and «Delete customer». A native <details>; the menu hangs under the button. */
.tenant-more[b-rdhbs4yx6h] {
    position: relative;
}

.tenant-more__button[b-rdhbs4yx6h] {
    list-style: none;
    min-width: 36px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.tenant-more__button[b-rdhbs4yx6h]::-webkit-details-marker {
    display: none;
}

.tenant-more__menu[b-rdhbs4yx6h] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 20;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
    padding: 0.3rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-sm, 10px);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(19, 28, 40, 0.09));
}

/* On a phone the header's actions wrap from the left edge, so a menu anchored to the button's right edge would grow off
   the screen to the left. There it opens rightwards. */
@media (max-width: 640px) {
    .tenant-more__menu[b-rdhbs4yx6h] {
        left: 0;
        right: auto;
    }
}

.tenant-more__item[b-rdhbs4yx6h] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-btn, 8px);
    color: var(--ink, #16202e);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.tenant-more__item:hover:not(:disabled)[b-rdhbs4yx6h],
.tenant-more__item:focus-visible[b-rdhbs4yx6h] {
    background: var(--blue-50, #eff4f9);
}

.tenant-more__item:disabled[b-rdhbs4yx6h] {
    color: var(--muted, #5b6676);
    cursor: not-allowed;
}

.tenant-more__item--danger:not(:disabled)[b-rdhbs4yx6h] {
    color: var(--crit, #b42318);
}
/* /Components/Pages/Admin/Tenants.razor.rz.scp.css */
.tenants__actions[b-d9xptxtdi2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* The ⋯ menu: a native <details>, drawn as a small popover under its button. */
.tenants__more[b-d9xptxtdi2] {
    position: relative;
}

.tenants__more-button[b-d9xptxtdi2] {
    list-style: none;
    min-width: 36px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.tenants__more-button[b-d9xptxtdi2]::-webkit-details-marker {
    display: none;
}

.tenants__more-menu[b-d9xptxtdi2] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 20;
    min-width: 15rem;
    max-width: calc(100vw - 2rem);
    padding: 0.3rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-sm, 10px);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(19, 28, 40, 0.09));
}

/* On a phone the panel head stacks (app.css, max-width 640px) and the actions start at the LEFT edge, so a menu
   anchored to the button's right edge grew off the screen to the left (review A11Y-4). There it opens rightwards. */
@media (max-width: 640px) {
    .tenants__more-menu[b-d9xptxtdi2] {
        left: 0;
        right: auto;
    }
}

.tenants__more-item[b-d9xptxtdi2] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-btn, 8px);
    color: var(--ink, #16202e);
    font-size: 0.9rem;
    cursor: pointer;
}

.tenants__more-item:hover:not(:disabled)[b-d9xptxtdi2],
.tenants__more-item:focus-visible[b-d9xptxtdi2] {
    background: var(--blue-50, #eff4f9);
}

.tenants__more-item:disabled[b-d9xptxtdi2] {
    color: var(--muted, #5d6c80);
    cursor: default;
}

/* The status glyph in the list: a 32 px button round a 20 px mark. */
.tenants__glyph[b-d9xptxtdi2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-btn, 8px);
    cursor: pointer;
}

.tenants__glyph:hover[b-d9xptxtdi2],
.tenants__glyph:focus-visible[b-d9xptxtdi2] {
    border-color: var(--line-2, rgba(19, 28, 40, 0.16));
    background: var(--blue-50, #eff4f9);
}

/* The register's chips and its order (25 October 2026): the chips on the left, the order on the right, wrapping on a phone. */
.tenants__filters[b-d9xptxtdi2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: -0.25rem 0 0.9rem;
}
/* /Components/Pages/Admin/Webshop/CatalogPicker.razor.rz.scp.css */
/* The panel's frame here; the rows inside belong to the opener, hence ::deep. */
.picker[b-pj6zmhjjwv] {
    position: relative;
}

.picker__button[b-pj6zmhjjwv] {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Catches a click outside the panel. Under the panel, over everything else (the user menu's numbers). */
.picker__backdrop[b-pj6zmhjjwv] {
    position: fixed;
    inset: 0;
    z-index: 950;
}

.picker__panel[b-pj6zmhjjwv] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 951;
    width: 26rem;
    max-width: calc(100vw - 2rem);
    max-height: min(30rem, 70vh);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px -18px rgba(22, 32, 46, 0.45);
}

.picker__panel[b-pj6zmhjjwv]  .picker__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.picker__panel[b-pj6zmhjjwv]  .picker__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.25rem 0.3rem;
    border-radius: 6px;
    font-size: 0.88rem;
    cursor: pointer;
}

.picker__panel[b-pj6zmhjjwv]  .picker__row:hover {
    background: var(--blue-50);
}

.picker__panel[b-pj6zmhjjwv]  .picker__row--sub {
    padding-left: 2.2rem;
}

.picker__panel[b-pj6zmhjjwv]  .picker__label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.picker__panel[b-pj6zmhjjwv]  .picker__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker__panel[b-pj6zmhjjwv]  .picker__parent,
.picker__panel[b-pj6zmhjjwv]  .picker__count {
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.picker__panel[b-pj6zmhjjwv]  .picker__count {
    font-variant-numeric: tabular-nums;
}

.picker__panel[b-pj6zmhjjwv]  .picker__twist {
    width: 1.4rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
}

.picker__panel[b-pj6zmhjjwv]  .picker__twist:disabled {
    visibility: hidden;
}

.picker__panel[b-pj6zmhjjwv]  .picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.picker__panel[b-pj6zmhjjwv]  .picker__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* /Components/Pages/Admin/Webshop/WebshopAgentReview.razor.rz.scp.css */
/* The Agentforslag tab (docs/arbejde/2026-10-13-webshop-agent-loft.md). The cards once borrowed .dlg__sect, a dialog's
   section HEADING (upper case, 800 weight, 0.78rem), so the before/after, the agent's reason and the meta line all read as
   small capitals. A card is body text: only its small labels are upper case. Colours are the theme's tokens, so the dark
   theme follows by itself. */

.agent-card[b-jo54mmjach] {
    border-top: 1px solid var(--line);
    padding: 0.8rem 0;
    color: var(--ink);
}

.agent-card__head[b-jo54mmjach] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.agent-card__sides[b-jo54mmjach] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.6rem;
    margin: 0.5rem 0;
}

/* FØR, EFTER, AGENTENS BEGRUNDELSE: the only upper case on a card. */
.agent-card__label[b-jo54mmjach] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.15rem;
}

.agent-card__reason[b-jo54mmjach] {
    margin: 0.2rem 0 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.agent-card__actions[b-jo54mmjach] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}

/* A form row under a panel's table (the keys, the limits): a separator, not a heading. */
.agent-form[b-jo54mmjach] {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
}

/* "Hvis du godkender: ..." - what a click does, in one plain line (docs/arbejde/2026-10-13-webshop-agent-auto-byg.md). */
.agent-card__if[b-jo54mmjach] {
    margin: 0.2rem 0 0.5rem;
    line-height: 1.5;
}
/* /Components/Pages/Admin/Webshop/WebshopAgentSetup.razor.rz.scp.css */
/* The webshop agent's setup (moved from the Agentforslag tab on 24 October 2026): a form row under a panel's table (the
   keys, the limits) is a separator, not a heading. The same rule as on the tab, which keeps it for its pager. */
.agent-form[b-es1v3ivq9s] {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: end;
}
/* /Components/Pages/Admin/Webshop/WebshopCatalog.razor.rz.scp.css */
/* The catalogue's filters: a grid that folds to one column on a phone, the pickers as wide as a select. */
.catalogue-filters[b-8lkgpx99dx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem 0.8rem;
    align-items: end;
}

.catalogue-filters .fld[b-8lkgpx99dx] {
    margin: 0;
    max-width: none;
}

.catalogue-filters__wide[b-8lkgpx99dx] {
    grid-column: span 2;
}

@media (max-width: 560px) {
    .catalogue-filters__wide[b-8lkgpx99dx] {
        grid-column: auto;
    }
}

.catalogue-filters__row[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.8rem;
}

.catalogue-filters__stock[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.catalogue-filters__stock legend[b-8lkgpx99dx] {
    float: left;
    width: auto;
    margin: 0 0.6rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.catalogue-filters__buttons[b-8lkgpx99dx] {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.catalogue-head[b-8lkgpx99dx] {
    flex-wrap: wrap;
    align-items: flex-start;
}

.catalogue-actions[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.catalogue-actions__count[b-8lkgpx99dx] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Gmail's line: "all on this page are chosen — choose all that match". */
.catalogue-banner[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.2rem 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--ink);
    font-size: 0.9rem;
}

.catalogue-table .catalogue-check[b-8lkgpx99dx] {
    width: 2rem;
}

.catalogue-table .num[b-8lkgpx99dx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.catalogue-table tr.is-selected > td[b-8lkgpx99dx] {
    background: var(--blue-50);
}

.catalogue-paging[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.catalogue-paging__size[b-8lkgpx99dx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0.4rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.catalogue-paging__size select[b-8lkgpx99dx] {
    width: auto;
}

.catalogue-consequences[b-8lkgpx99dx] {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

.catalogue-consequences li[b-8lkgpx99dx] {
    margin: 0.3rem 0;
}

/* The bulk dialog's target in words: a long filter (many category names) wraps instead of widening the dialog. */
.catalogue-target[b-8lkgpx99dx] {
    margin: 0 0 0.8rem;
    overflow-wrap: anywhere;
}

/* «Prøv reglerne» in the bulk dialog: one folded group per verdict, the first products as links. */
.catalogue-trial__ask[b-8lkgpx99dx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
}

.catalogue-trial[b-8lkgpx99dx] {
    margin: 0.6rem 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.catalogue-trial__group summary[b-8lkgpx99dx] {
    cursor: pointer;
    padding: 0.2rem 0;
}

.catalogue-trial__group ul[b-8lkgpx99dx] {
    margin: 0.2rem 0 0.4rem;
    padding-left: 1.2rem;
    max-height: 12rem;
    overflow-y: auto;
}
/* /Components/Pages/Admin/Webshop/WebshopFrontEditor.razor.rz.scp.css */
/* The front page editor: the editing column and, beside it from 1200 px, the warnings and the preview (sticky). */

.front__status[b-k0nlqchrex] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    align-items: flex-start;
}

.front__status-text[b-k0nlqchrex] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.front__status-tools[b-k0nlqchrex],
.front__tools[b-k0nlqchrex],
.front__row[b-k0nlqchrex],
.front__chips[b-k0nlqchrex],
.front__badges[b-k0nlqchrex] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.front__grid[b-k0nlqchrex] {
    display: grid;
    gap: 1.25rem;
    margin-top: 1rem;
}

@media (min-width: 1200px) {
    .front__grid[b-k0nlqchrex] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }

    .front__side[b-k0nlqchrex] {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

.front__edit[b-k0nlqchrex],
.front__side[b-k0nlqchrex] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.front__h[b-k0nlqchrex] {
    margin: 0.5rem 0 0;
    font-size: 1.1rem;
}

.front__p[b-k0nlqchrex] {
    margin: 0;
}

.front__fixed[b-k0nlqchrex] {
    margin-top: 0.5rem;
}

.front__section-head[b-k0nlqchrex],
.front__pick-head[b-k0nlqchrex] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.front__section-name[b-k0nlqchrex] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.front__section--hidden[b-k0nlqchrex] {
    opacity: 0.7;
    border-style: dashed;
}

.front__pick[b-k0nlqchrex] {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.front__two[b-k0nlqchrex] {
    display: grid;
    gap: 0 0.75rem;
}

@media (min-width: 760px) {
    .front__two[b-k0nlqchrex] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.front__label[b-k0nlqchrex] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.front__count[b-k0nlqchrex] {
    max-width: 10rem;
}

.front__list[b-k0nlqchrex] {
    list-style: none;
    margin: 0.4rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.front__item[b-k0nlqchrex] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    background: var(--blue-50);
}

.front__item--nav[b-k0nlqchrex] {
    flex-wrap: nowrap;
}

.front__item--nav input[b-k0nlqchrex] {
    max-width: 12rem;
}

.front__nav-cat[b-k0nlqchrex] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front__role[b-k0nlqchrex] {
    min-width: 5.5rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.front__product[b-k0nlqchrex] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    flex: 1 1 18rem;
    min-width: 0;
}

.front__product-text[b-k0nlqchrex] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.front__thumb[b-k0nlqchrex] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 48px;
    border-radius: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.front__thumb--none[b-k0nlqchrex] {
    display: inline-block;
}

.front__issue[b-k0nlqchrex] {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--crit-ink);
}

.front__problems[b-k0nlqchrex],
.front__warnings[b-k0nlqchrex] {
    margin: 0;
    padding-left: 1.2rem;
}

.front__warnings li[b-k0nlqchrex] {
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
}

.front__hits[b-k0nlqchrex] {
    max-height: 55vh;
    overflow-y: auto;
    margin-top: 0.75rem;
}

/* The preview: plain, so it reads as the page's order and words, not as the website's styling. */
.front__page[b-k0nlqchrex] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.front__page-h1[b-k0nlqchrex] {
    margin: 0;
    font-size: 1.35rem;
}

.front__page-h2[b-k0nlqchrex] {
    margin: 0.75rem 0 0;
    font-size: 1.1rem;
}

.front__page-h3[b-k0nlqchrex] {
    margin: 0;
    font-size: 1rem;
}

.front__page-lead[b-k0nlqchrex],
.front__page-text[b-k0nlqchrex],
.front__page-stamp[b-k0nlqchrex],
.front__page-more[b-k0nlqchrex] {
    margin: 0;
}

.front__page-fixed[b-k0nlqchrex] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--line);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}

.front__page-section[b-k0nlqchrex] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.front__cards[b-k0nlqchrex] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.front__card[b-k0nlqchrex] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 0.82rem;
}

.front__card img[b-k0nlqchrex] {
    width: 100%;
    height: 6rem;
    object-fit: contain;
}

.front__card-label[b-k0nlqchrex] {
    align-self: flex-start;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    background: var(--blue-50);
    font-weight: 600;
}

.front__card-name[b-k0nlqchrex] {
    font-weight: 600;
}

.front__card-note[b-k0nlqchrex],
.front__card-alt[b-k0nlqchrex] {
    color: var(--muted);
}
/* /Components/Pages/Admin/WebsiteUdgivelse.razor.rz.scp.css */
/* The danger zone (25 October 2026): the panic button that takes every article off todo-it.dk, last on the page and
   marked as what it is — a red edge and a label — without the raised shadow .panel--haster keeps for "act now". */
.wp-danger[b-ir8nev4kae] {
    border-color: color-mix(in srgb, var(--crit) 35%, var(--line));
    border-left: 3px solid var(--crit);
    border-radius: 4px var(--r-lg) var(--r-lg) 4px;
    margin-top: 1.5rem;
}

.wp-danger__label[b-ir8nev4kae] {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crit-ink, var(--crit));
}
/* /Components/Shared/CustomerCard.razor.rz.scp.css */
.kcard[b-4epneos3yb] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-md, 14px);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(19, 28, 40, 0.06));
    min-width: 0;
}

.kcard__head[b-4epneos3yb] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.kcard__title[b-4epneos3yb] {
    flex: 1;
    min-width: 0;
}

.kcard__name[b-4epneos3yb] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    outline: none;
}

.kcard__name:focus-visible[b-4epneos3yb] {
    outline: 2px solid var(--blue-500, #5c7fa8);
    outline-offset: 2px;
    border-radius: 4px;
}

.kcard__status[b-4epneos3yb] {
    font-size: 0.85rem;
    color: var(--ink-2, #3b4a5d);
}

.kcard__close[b-4epneos3yb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--line, rgba(19, 28, 40, 0.085));
    border-radius: var(--r-btn, 8px);
    background: transparent;
    color: var(--ink-2, #3b4a5d);
    cursor: pointer;
}

.kcard__close:hover[b-4epneos3yb] {
    background: var(--blue-50, #eff4f9);
}

.kcard__facts[b-4epneos3yb] {
    font-size: 0.85rem;
    color: var(--ink-2, #3b4a5d);
    overflow-wrap: anywhere;
}

.kcard__note[b-4epneos3yb] {
    font-size: 0.82rem;
    color: var(--muted, #5d6c80);
}

.kcard__nothing[b-4epneos3yb] {
    margin: 0;
    color: var(--muted, #5d6c80);
}

.kcard__lines[b-4epneos3yb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kcard__line[b-4epneos3yb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line, rgba(19, 28, 40, 0.085));
    border-left: 4px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-sm, 10px);
    min-width: 0;
}

.kcard__line--critical[b-4epneos3yb] { border-left-color: var(--crit, #ac4a41); }
.kcard__line--attention[b-4epneos3yb] { border-left-color: var(--warn, #b07d33); }

.kcard__line-title[b-4epneos3yb] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.kcard__line-meta[b-4epneos3yb] {
    font-size: 0.8rem;
    color: var(--muted, #5d6c80);
    overflow-wrap: anywhere;
}

.kcard__acts[b-4epneos3yb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.kcard__more[b-4epneos3yb] {
    font-size: 0.85rem;
}

.kcard__links[b-4epneos3yb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.2rem;
}

/* The task list's pill buttons, grown to a finger: 32 px tall here, where the card is often read on a phone. */
.kcard__acts .tkt__kvit[b-4epneos3yb] {
    min-height: 32px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
}

/* Busy: shown as disabled, but not the disabled attribute — that throws the keyboard out of a focused button, and out
   of the card with it, where Esc no longer reaches (review A11Y-3). RunAsync ignores a press while busy. */
.kcard__acts .tkt__kvit[aria-disabled="true"][b-4epneos3yb] {
    opacity: 0.6;
    cursor: default;
}

/* «Place on the map» for a customer without a sure position (phase 2, street level only). */
.kcard__place[b-4epneos3yb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-sm, 10px);
    background: var(--blue-50, #eff4f9);
    color: var(--ink-2, #3b4a5d);
    font-size: 0.85rem;
}

/* ⋯ in the footer: moving a pin that is already placed. The page's own ⋯ menu's shape (Tenants.razor.css). */
.kcard__more-menu[b-4epneos3yb] {
    position: relative;
}

.kcard__more-menu > summary[b-4epneos3yb] {
    list-style: none;
    min-width: 36px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.kcard__more-menu > summary[b-4epneos3yb]::-webkit-details-marker {
    display: none;
}

.kcard__more-items[b-4epneos3yb] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.3rem);
    z-index: 20;
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    padding: 0.3rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    border-radius: var(--r-sm, 10px);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(19, 28, 40, 0.09));
}

.kcard__more-item[b-4epneos3yb] {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-btn, 8px);
    color: var(--ink, #16202e);
    font-size: 0.9rem;
    cursor: pointer;
}

.kcard__more-item:hover[b-4epneos3yb],
.kcard__more-item:focus-visible[b-4epneos3yb] {
    background: var(--blue-50, #eff4f9);
}
/* /Components/Shared/CustomerMapView.razor.rz.scp.css */
/* The map's own land and sea, one pair per theme. The app's tokens were borrowed before (--blue-50 and --clay-100),
   and in the dark theme they landed 1.02:1 apart — the coast was only the stroke. Checked in
   TenantMapGeometryTests: land against sea at least 1.3:1 in both themes, and every status ink against the land at
   least 3:1 (WCAG's minimum for a graphic that carries meaning). */
.dkmap[b-a6x2l67wc6] {
    --map-sea: #c6d8e8;
    --map-land: #fbf8f3;
    --map-coast: rgba(19, 28, 40, 0.28);

    display: block;
    width: 100%;
    height: auto;
    /* A country this size never needs to grow past what a desktop panel already gives it — a
       full-bleed map on an ultrawide monitor would leave every pin looking lost in empty sea. */
    max-width: 640px;
    margin: 0 auto;
    border-radius: var(--r-md, 14px);
}

:root[data-theme="dark"] .dkmap[b-a6x2l67wc6] {
    --map-sea: #0b1119;
    --map-land: #283343;
    --map-coast: rgba(255, 255, 255, 0.26);
}

/* The wall is always dark, whatever the viewer's stored theme (see .wall in app.css). Its map fills the hero's map box
   (the whole country, drawn xMaxYMid): the box's own sea shows through, and the land is darker than a tile so the pins
   carry the light. */
.wall .dkmap[b-a6x2l67wc6] {
    --map-sea: transparent;
    --map-land: #172231;
    --map-coast: rgba(165, 188, 213, 0.34);
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.dkmap__sea[b-a6x2l67wc6] {
    fill: var(--map-sea);
}

.dkmap__land[b-a6x2l67wc6] {
    fill: var(--map-land);
    stroke: var(--map-coast);
    stroke-width: 1px;
    stroke-linejoin: round;
    /* A pixel wide in every view: zoomed to Zealand the drawing is 2.7 times larger, and the coast with it. */
    vector-effect: non-scaling-stroke;
}

.dkmap__pin[b-a6x2l67wc6] {
    cursor: pointer;
    outline: none;
}

.dkmap__pin--static[b-a6x2l67wc6] {
    cursor: default;
}

/* Invisible, and deliberately bigger than the mark inside it — the click/touch target, not the drawing.
   fill:transparent (not none) plus pointer-events:all so an SVG <a> with nothing "painted" under the cursor
   still counts as a hit; fill:none would not. */
.dkmap__pin__hit[b-a6x2l67wc6] {
    fill: transparent;
    pointer-events: all;
}

.dkmap__pin[b-a6x2l67wc6]  .pinmark {
    pointer-events: none; /* the hit circle above already carries the click */
}

/* The focus ring here is an SVG stroke, not an outline, so the gate in app.css (no ring after a click or a
   tap, data-input="pointer" from focus-modality.js) is written into the two focus selectors themselves. */
.dkmap__pin:hover[b-a6x2l67wc6]  .pinmark__body,
:root:not([data-input="pointer"]) .dkmap__pin:focus-visible[b-a6x2l67wc6]  .pinmark__body,
.dkmap__pin--selected[b-a6x2l67wc6]  .pinmark__body {
    stroke: var(--blue-500, #5c7fa8);
    stroke-width: 3px;
}

:root:not([data-input="pointer"]) .dkmap__pin:focus-visible .dkmap__pin__hit[b-a6x2l67wc6] {
    stroke: var(--blue-500, #5c7fa8);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

/* Two layouts of the same map, one per width band, because a pin is sized in screen pixels and the server cannot
   know the width: the narrow one is laid out for a phone (300 px), the wide one for 480 px and up. Only one is ever
   shown — display:none also takes the other out of the tab order. Without container queries only the wide one shows. */
.dkmap--narrow[b-a6x2l67wc6] {
    display: none;
}

@container kmap (max-width: 479px) {
    .dkmap--narrow[b-a6x2l67wc6] {
        display: block;
    }

    .dkmap--wide[b-a6x2l67wc6] {
        display: none;
    }
}
/* /Components/Shared/CustomerStatusGlyph.razor.rz.scp.css */
.kglyph[b-qfu933s7jx] {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.2em;
    overflow: visible;
}
/* /Components/Shared/CustomerVectorMap.razor.rz.scp.css */
/* The street-level map's frame. Everything inside it is drawn by the script (MapLibre), so the inner rules reach through
   with ::deep. Never printed: print draws the simple, server-drawn map instead (TenantMap.razor.css, .kmap__print). */
.kgl[b-jxwo3j8lkl] {
    position: relative;
    width: 100%;
    height: clamp(340px, 62vh, 640px);
    border-radius: var(--r-md, 14px);
    overflow: hidden;
    background: var(--blue-50, #eff4f9);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
}

.kgl:focus-visible[b-jxwo3j8lkl] {
    outline: 2px solid var(--focus-ring, #5c7fa8);
    outline-offset: 2px;
}

.kgl[b-jxwo3j8lkl]  .kgl__canvas {
    position: absolute;
    inset: 0;
}

/* The OpenStreetMap credit stays compact and readable in both themes. */
.kgl[b-jxwo3j8lkl]  .maplibregl-ctrl-attrib {
    font-size: 0.72rem;
}

@media print {
    .kgl[b-jxwo3j8lkl] {
        display: none;
    }
}

/* Placing with the keyboard: a crosshair marks the map's centre, which Enter takes. The script adds it only while a
   customer is being placed; it shows while the map has keyboard focus (a mouse places by clicking, under its own cursor). */
.kgl[b-jxwo3j8lkl]  .kgl__crosshair {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    pointer-events: none;
    z-index: 2;
}

.kgl:focus-visible[b-jxwo3j8lkl]  .kgl__crosshair {
    display: block;
}

.kgl[b-jxwo3j8lkl]  .kgl__crosshair::before,
.kgl[b-jxwo3j8lkl]  .kgl__crosshair::after {
    content: "";
    position: absolute;
    background: var(--ink, #16202e);
    box-shadow: 0 0 0 1.5px var(--paper, #fff);
}

.kgl[b-jxwo3j8lkl]  .kgl__crosshair::before {
    left: 14px;
    top: 0;
    width: 2px;
    height: 30px;
}

.kgl[b-jxwo3j8lkl]  .kgl__crosshair::after {
    left: 0;
    top: 14px;
    width: 30px;
    height: 2px;
}
/* /Components/Shared/PinMark.razor.rz.scp.css */
/* The customer mark's colours — the kontrastcheck-tested status inks, in both themes. Strokes are in screen pixels
   (non-scaling), so a mark reads the same on a map zoomed to Zealand as in a 16 px list glyph. */
.pinmark__body[b-hyrlbu8jv5] {
    stroke: var(--paper, #fff);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pinmark--ok .pinmark__body[b-hyrlbu8jv5] { fill: var(--good-ink); }
.pinmark--attention .pinmark__body[b-hyrlbu8jv5] { fill: var(--warn-ink); }
.pinmark--critical .pinmark__body[b-hyrlbu8jv5] { fill: var(--crit-ink); }

/* Hollow and neutral: we measure nothing here. Never green by default. */
.pinmark--unmeasured .pinmark__body[b-hyrlbu8jv5],
.pinmark__body--hollow[b-hyrlbu8jv5] {
    fill: var(--paper, #fff);
    stroke: var(--muted, #5d6c80);
    stroke-width: 2px;
}

.pinmark__inner[b-hyrlbu8jv5] {
    fill: var(--paper, #fff);
}

.pinmark__ring[b-hyrlbu8jv5] {
    fill: none;
    stroke-width: 2.25px;
    vector-effect: non-scaling-stroke;
}

.pinmark__ring--overdue[b-hyrlbu8jv5] { stroke: var(--crit-ink); }

.pinmark__ring--soon[b-hyrlbu8jv5] {
    stroke: var(--warn-ink);
    stroke-dasharray: 3 2.5;
}
/* /Components/Shared/TenantMap.razor.rz.scp.css */
/* The map tab: the map with its list or card beside it on a desktop, stacked on a phone. Nothing here may be wider
   than the panel it sits in — the map scales down, the list wraps, and the page never scrolls sideways at 375 px. */
.kmap[b-ans2cvd462] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.kmap__bar[b-ans2cvd462] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.kmap__summary[b-ans2cvd462] {
    font-weight: 600;
    color: var(--ink-2, #3b4a5d);
    min-width: 0;
}

.kmap__fresh[b-ans2cvd462] {
    font-weight: 400;
    color: var(--muted, #5d6c80);
}

.kmap__tools[b-ans2cvd462] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.kmap__toggle[b-ans2cvd462] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 24px;
    font-size: 0.875rem;
    color: var(--ink-2, #3b4a5d);
    cursor: pointer;
}

.kmap__toggle input[b-ans2cvd462] {
    width: 18px;
    height: 18px;
}

.kmap__body[b-ans2cvd462] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 1.25rem;
    align-items: start;
}

/* The map's own width decides which of its two layouts is shown — see CustomerMapView.razor.css. */
.kmap__map[b-ans2cvd462] {
    container: kmap / inline-size;
    min-width: 0;
}

.kmap__side[b-ans2cvd462] {
    min-width: 0;
}

@media (max-width: 900px) {
    .kmap__body[b-ans2cvd462] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.kmap__legend[b-ans2cvd462] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.85rem;
    color: var(--ink-2, #3b4a5d);
    font-size: 0.85rem;
}

.kmap__legend-item[b-ans2cvd462] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.kmap__legend-icon[b-ans2cvd462] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
}

.kmap__unplaced[b-ans2cvd462] {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
}

.kmap__unplaced-title[b-ans2cvd462] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-2, #3b4a5d);
    margin-bottom: 0.4rem;
}

.kmap__unplaced-list[b-ans2cvd462] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.kmap__unplaced-reason[b-ans2cvd462] {
    color: var(--ink-2, #3b4a5d);
}

.kmap__list-title[b-ans2cvd462] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #5d6c80);
    margin-bottom: 0.4rem;
}

.kmap__list[b-ans2cvd462] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* A row is a button: 44 px tall at the least, the whole row the target. */
.kmap__row[b-ans2cvd462] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    text-align: left;
    background: var(--paper, #fff);
    border: 1px solid var(--line, rgba(19, 28, 40, 0.085));
    border-radius: var(--r-sm, 10px);
    color: var(--ink, #16202e);
    cursor: pointer;
}

.kmap__row:hover[b-ans2cvd462] {
    background: var(--blue-50, #eff4f9);
}

.kmap__row:focus-visible[b-ans2cvd462] {
    outline: 2px solid var(--blue-500, #5c7fa8);
    outline-offset: 1px;
}

.kmap__row-text[b-ans2cvd462] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kmap__row-name[b-ans2cvd462] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.kmap__row-why[b-ans2cvd462] {
    font-size: 0.8rem;
    color: var(--muted, #5d6c80);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .kmap__legend[b-ans2cvd462] {
        font-size: 0.8rem;
        gap: 0.3rem 0.8rem;
    }
}

/* --- Phase 2: the street level (docs/arbejde/2026-10-01-kundekort-fase2-byg.md) ------------------------------------- */

/* Why the simple map is drawn when the street level was expected. */
.kmap__hint[b-ans2cvd462] {
    margin-bottom: 0.6rem;
}

/* «Place on the map»: what to do next, over the map's lower edge, with its buttons. */
.kmap__placing[b-ans2cvd462] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-sm, 10px);
    background: var(--blue-50, #eff4f9);
    border: 1px solid var(--line-2, rgba(19, 28, 40, 0.16));
    color: var(--ink, #16202e);
    font-size: 0.9rem;
}

.kmap__placing-acts[b-ans2cvd462] {
    display: inline-flex;
    gap: 0.4rem;
}

.kmap__note[b-ans2cvd462] {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--good-ink, #2f6b46);
}

.kmap__note--error[b-ans2cvd462] {
    color: var(--crit-ink, #8e3a32);
}

/* The visitor layer's legend: the circle the map draws, in the platform's accent. */
.kmap__cities[b-ans2cvd462] {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--ink-2, #3b4a5d);
}

.kmap__city-mark[b-ans2cvd462] {
    fill: var(--brand, #3b6fd8);
    fill-opacity: 0.22;
    stroke: var(--brand, #3b6fd8);
    stroke-width: 1.5px;
}

/* The street level's cluster, as customer-map.js draws it: filled as the most urgent customer inside, its shape as a badge. */
.kmap__cluster-body[b-ans2cvd462],
.kmap__cluster-badge[b-ans2cvd462] {
    fill: var(--crit-ink, #8e3a32);
    stroke: var(--paper, #fff);
    stroke-width: 1.5px;
    stroke-linejoin: round;
}

.kmap__cluster-count[b-ans2cvd462] {
    fill: var(--paper, #fff);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* «Tilt»: desktop only — a finger has nothing to gain from it, and a narrow screen no room for it. */
@media (pointer: coarse), (max-width: 900px) {
    .kmap__vip[b-ans2cvd462] {
        display: none;
    }
}

/* The printout of the street level is the simple map. */
.kmap__print[b-ans2cvd462] {
    display: none;
}

@media print {
    .kmap__print[b-ans2cvd462] {
        display: block;
    }

    .kmap__print[b-ans2cvd462]  .dkmap--print {
        display: block;
        width: 100%;
        max-width: 640px;
    }

    .kmap__vip[b-ans2cvd462],
    .kmap__placing[b-ans2cvd462] {
        display: none;
    }
}
/* /Components/Shared/TenantSwitcher.razor.rz.scp.css */
.tsw[b-q3jo4xhmca] {
    position: relative;
}

.tsw__current[b-q3jo4xhmca] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: var(--r-md, 8px);
    background: var(--shell, #f1f3f5);
    color: var(--ink, #1a1a1a);
    font-size: .85rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    max-width: 14rem;
}

/* Skjul den native trekant, vi har vores egen caret. */
.tsw__current[b-q3jo4xhmca]::-webkit-details-marker { display: none; }
.tsw__current[b-q3jo4xhmca]::marker { content: ""; }

.tsw__label[b-q3jo4xhmca] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsw__caret[b-q3jo4xhmca] {
    font-size: .7rem;
    opacity: .6;
}

.tsw__menu[b-q3jo4xhmca] {
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    min-width: 13rem;
    background: var(--paper);
    border: 1px solid var(--line, #e2e5e9);
    border-radius: var(--r-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: .3rem;
    z-index: 50;
}

.tsw__head[b-q3jo4xhmca] {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-2, #6b7280);
    padding: .3rem .5rem .35rem;
}

.tsw__item[b-q3jo4xhmca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .45rem .5rem;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--ink, #1a1a1a);
}

.tsw__item:hover[b-q3jo4xhmca] {
    background: var(--shell, #f1f3f5);
}

.tsw__item--active[b-q3jo4xhmca] {
    font-weight: 600;
}

.tsw__check[b-q3jo4xhmca] {
    color: var(--good);
}
/* /Components/Shared/WallCustomerMap.razor.rz.scp.css */
/* The wall map's legend marks: the PinMark glyph at legend size. The rows themselves (.wall-legend) are styled with the rest
   of the wall in app.css. */
.wallmap__mark[b-opw2akcbwn] {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    overflow: visible;
}

/* The street level's cluster, as customer-map.js draws it on the wall: filled as the most urgent customer inside, its shape
   as a badge, the count in the paper colour. */
.wallmap__cluster-body[b-opw2akcbwn],
.wallmap__cluster-badge[b-opw2akcbwn] {
    fill: var(--crit-ink, #ec938a);
    stroke: var(--paper, #1a2431);
    stroke-width: 1.5px;
    stroke-linejoin: round;
}

.wallmap__cluster-count[b-opw2akcbwn] {
    fill: var(--paper, #1a2431);
    font-size: 9px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
}
/* /Components/Shared/WallVectorMap.razor.rz.scp.css */
/* The wall's street-level map: it fills the hero's map box (spec section 5, 2 October 2026), as the simple map does; the
   script keeps the customers clear of the box's corner overlays when it fits them. The wall's sea behind it while the
   tiles arrive. */
.wallkgl[b-dj89uav0pz] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0c121a;
}

.wallkgl[b-dj89uav0pz]  .kgl__canvas {
    position: absolute;
    inset: 0;
}

/* The OpenStreetMap credit: there, small and quiet - read from three metres, it should not compete with the marks. The
   compact credit is shown open (nothing on a wall ever closes it) without its toggle; the selectors carry the compact
   class so they outweigh MapLibre's own white pill, which the script loads after this sheet. */
.wallkgl[b-dj89uav0pz]  .maplibregl-ctrl-attrib.maplibregl-compact {
    min-height: 0;
    margin: 6px;
    padding: 1px 8px;
    border-radius: 8px;
    background-color: rgba(16, 22, 31, 0.72);
    color: var(--muted, #96a5b8);
    font-size: 0.6rem;
    line-height: 1.5;
}

.wallkgl[b-dj89uav0pz]  .maplibregl-ctrl-attrib.maplibregl-compact a {
    color: var(--muted, #96a5b8);
}

.wallkgl[b-dj89uav0pz]  .maplibregl-ctrl-attrib.maplibregl-compact::after,
.wallkgl[b-dj89uav0pz]  .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
    display: none;
}