/* /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/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/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;
}
/* /Components/Shared/TenantMap.razor.rz.scp.css */
.dkmap[b-ans2cvd462] {
    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;
}

.dkmap__sea[b-ans2cvd462] {
    fill: var(--blue-50, #eff4f9);
}

.dkmap__land[b-ans2cvd462] {
    fill: var(--clay-100, #f5efe8);
    stroke: var(--line-2, rgba(19, 28, 40, 0.16));
    stroke-width: 1;
    stroke-linejoin: round;
}

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

/* Invisible, and deliberately bigger than the glyph 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-ans2cvd462] {
    fill: transparent;
    pointer-events: all;
}

.dkmap__pin__glyph[b-ans2cvd462] {
    stroke: var(--paper, #fff);
    stroke-width: 1.5;
    stroke-linejoin: round;
    pointer-events: none; /* the hit circle above already carries the click */
}

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

.dkmap__pin:hover .dkmap__pin__glyph[b-ans2cvd462],
.dkmap__pin:focus-visible .dkmap__pin__glyph[b-ans2cvd462] {
    stroke: var(--blue-500, #5c7fa8);
    stroke-width: 3;
}

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

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

.dkmap__legend__icon[b-ans2cvd462] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dkmap__legend__icon .dkmap__pin__glyph[b-ans2cvd462] {
    stroke: var(--paper, #fff);
    stroke-width: 1.2;
}

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

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

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

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

@media (max-width: 480px) {
    .dkmap__legend[b-ans2cvd462] {
        font-size: 0.8rem;
        gap: 0.3rem 0.8rem;
    }
}
/* /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);
}