@import '_content/Landbrugnet.Common.Components/Landbrugnet.Common.Components.cq9fqnxgh3.bundle.scp.css';

/* /Components/ReconnectModal.razor.rz.scp.css */
/* The CMS backend's reconnect modal (Components/Providers/ReconnectModal.razor.css), in this
 * application's palette: the CMS's blue becomes the admin's primary #225c6f. Wide enough that the
 * Danish lines stay on one line; the attempt counter is a CSS pill so no MudBlazor component renders
 * inside the native <dialog>. */

.components-reconnect-first-attempt-visible[b-x9cw8nj32y],
.components-reconnect-repeated-attempt-visible[b-x9cw8nj32y],
.components-reconnect-failed-visible[b-x9cw8nj32y],
.components-pause-visible[b-x9cw8nj32y],
.components-resume-failed-visible[b-x9cw8nj32y],
.components-rejoining-animation[b-x9cw8nj32y] {
    display: none;
}

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

#components-reconnect-modal[b-x9cw8nj32y] {
    /* !important, as in the CMS: MudBlazor's stylesheet sets a background on this id that would turn
     * the dialog dark in dark mode. */
    background-color: white !important;
    color: #0F1720 !important;
    width: 30rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem 2.25rem 1.5rem;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 32, 0.28), 0 2px 6px rgba(15, 23, 32, 0.08);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-x9cw8nj32y 0.5s both;

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-x9cw8nj32y {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

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

.reconnect-title[b-x9cw8nj32y] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #0F1720;
    text-align: center;
    letter-spacing: -0.005em;
}

.reconnect-body[b-x9cw8nj32y] {
    text-align: center;
    width: 100%;
}

    .reconnect-body p[b-x9cw8nj32y] { margin: 0; }
    .reconnect-body p + p[b-x9cw8nj32y] { margin-top: 0.45rem; }

.reconnect-body-failed p + p[b-x9cw8nj32y] { margin-top: 1.1rem; }

#components-reconnect-modal p[b-x9cw8nj32y] {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}

.reconnect-icon-failed[b-x9cw8nj32y] {
    color: #C43A2B;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FCECE9;
    box-shadow: inset 0 0 0 1px #F5C6BF;
    align-items: center;
    justify-content: center;
    margin-bottom: -0.2rem;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon-failed[b-x9cw8nj32y] { display: flex; }

.reconnect-attempt-pill-wrap[b-x9cw8nj32y] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.reconnect-attempt-pill[b-x9cw8nj32y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #E9F1F4;
    border: 1px solid #CFE0E6;
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #225c6f;
    box-shadow: 0 1px 2px rgba(34, 92, 111, 0.06);
}

.reconnect-attempt-label[b-x9cw8nj32y] { font-weight: 500; letter-spacing: 0.01em; }

.reconnect-attempt-numbers[b-x9cw8nj32y] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

    .reconnect-attempt-numbers strong[b-x9cw8nj32y] {
        font-weight: 700;
        color: #17414f;
        min-width: 1ch;
        text-align: center;
    }

.reconnect-attempt-sep[b-x9cw8nj32y] { opacity: 0.45; font-weight: 400; }
.reconnect-next-attempt[b-x9cw8nj32y] { margin-top: 0 !important; }
.reconnect-subtle[b-x9cw8nj32y] { font-size: 0.85rem; color: #5F6B78; }
    .reconnect-subtle strong[b-x9cw8nj32y] { color: #33404D; font-weight: 600; }
.reconnect-error[b-x9cw8nj32y] { font-weight: 600; color: #C43A2B; }

#components-reconnect-modal button[b-x9cw8nj32y] {
    border: 0;
    background-color: #225c6f;
    color: white;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 26px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
    box-shadow: 0 1px 2px rgba(15, 23, 32, 0.15), 0 4px 12px rgba(34, 92, 111, 0.18);
    /* MudBlazor.min.css ships `#components-reconnect-modal button { margin: 40px auto !important }`. */
    margin: -0.55rem auto 0 !important;
}

    #components-reconnect-modal button:hover[b-x9cw8nj32y] {
        background-color: #17414f;
        box-shadow: 0 2px 4px rgba(15, 23, 32, 0.18), 0 6px 16px rgba(34, 92, 111, 0.25);
    }

    #components-reconnect-modal button:active[b-x9cw8nj32y] {
        background-color: #17414f;
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(15, 23, 32, 0.15);
    }

    #components-reconnect-modal button:focus-visible[b-x9cw8nj32y] {
        outline: 2px solid #328ba8;
        outline-offset: 2px;
    }

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

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

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

@keyframes components-rejoining-animation-b-x9cw8nj32y {
    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: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
}
/* /Pages/Admin/Workers/WorkerList.razor.rz.scp.css */
/* The job table by its own width, not the window's (the machine list's rule, MachineList.razor.css): with the
   drawer open a 1024px laptop leaves it about 730px, and eight columns needed 880px, so the three action buttons
   scrolled off the card. Tidsplan and Næste kørsel join at 900px; until then the name cell says both in one line
   of small print (worker-cap). A phone or tablet card has a line for each already, so it never shows that line. */
.worker-grid[b-23408i5xfl] {
    container-type: inline-size;
    container-name: worker-grid;
}

.worker-grid[b-23408i5xfl]  .worker-cap {
    color: var(--mud-palette-text-secondary);
}

@container worker-grid (max-width: 899.98px) {
    .worker-grid[b-23408i5xfl]  .worker-col-wide { display: none !important; }
}

@container worker-grid (min-width: 900px) {
    .worker-grid[b-23408i5xfl]  .worker-cap { display: none !important; }
}

@media (max-width: 960px) {
    .worker-grid[b-23408i5xfl]  .mud-sm-table .worker-cap { display: none !important; }
    .worker-grid[b-23408i5xfl]  .mud-sm-table .worker-col-wide { display: flex !important; }
}
/* /Pages/Catalog/BrandList.razor.rz.scp.css */
/* The inbox's "Hører til mærket" picker. In the table (961px and up) it keeps room for a brand name. Below that
   the inbox is cards (Breakpoint Sm), the cell is a row of the column title and the picker, and the picker takes
   whatever the title leaves instead of a fixed 220px that could push the card sideways on a phone. In a table
   cell the flex value does nothing. The wrapper is this page's own element, so no ::deep is needed. */
.brand-inbox__picker[b-41cw3a0l1j] { flex: 1 1 auto; min-width: 0; }

@media (min-width: 961px) {
    .brand-inbox__picker[b-41cw3a0l1j] { min-width: 220px; }
}
/* /Pages/Catalog/CategoryTree.razor.rz.scp.css */
/* ---- The tree: a name column that wraps, and a count column that always shows ------------------------------
   With an automatic layout the widest name decided the table's width, and on a desktop the Maskiner column was
   cut to "Ma" while a phone did not show it at all. Fixed layout gives the counts their own width and the name
   the rest. MudTable renders the table, hence ::deep; the col is ours. */
.category-page[b-sx5gizf446]  .category-tree .mud-table-root { table-layout: fixed; width: 100%; }
.category-tree__count-col[b-sx5gizf446] { width: 6.5rem; }
.category-page[b-sx5gizf446]  .category-tree .category-tree__count { text-align: right; white-space: nowrap; padding-inline: 8px 12px; }

/* The name cell: the icon at the left, the name, code and chips after it as one run of text that wraps. The div
   and span are ours; the icon and the texts in them are MudBlazor's. */
/* The depth is a variable, so a phone can indent less: 18px a level left a four-level name 150px to wrap in. */
.category-tree__name[b-sx5gizf446] { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-left: calc(var(--tree-level, 0) * 18px); }
@media (max-width: 599.98px) {
    .category-tree__name[b-sx5gizf446] { padding-left: calc(var(--tree-level, 0) * 10px); gap: 6px; }
}
.category-tree__label[b-sx5gizf446] { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.5; }
/* A code is one word: "180 289" split over two lines reads as two numbers. */
.category-tree__label[b-sx5gizf446]  .category-tree__code { white-space: nowrap; }
.category-tree__name[b-sx5gizf446]  .category-tree__icon { flex: none; margin-top: 1px; }
.category-tree__label[b-sx5gizf446]  .category-tree__flag { vertical-align: text-bottom; margin-left: 4px; }

/* The tree's own bar ("Træ", what the counts mean, how many are shown) grows with its text instead of cutting
   the second line off at MudBlazor's fixed toolbar height. */
.category-page[b-sx5gizf446]  .category-tree .mud-table-toolbar { height: auto; min-height: 56px; padding-block: 8px; column-gap: 8px; }
.category-page[b-sx5gizf446]  .category-tree .mud-table-toolbar > .mud-typography { white-space: nowrap; }
.category-page[b-sx5gizf446]  .category-tree .category-tree__heading { min-width: 0; flex: 1 1 auto; }

/* ---- Narrow screens: one half at a time ---------------------------------------------------------------------
   Below md the grid stacks, so the page shows the tree or the editor (data-view on .category-page, set by the
   page). The action bar belongs to the editor there - Gem and Slet mean nothing beside the tree. */
@media (max-width: 959.98px) {
    .category-page[data-view="tree"][b-sx5gizf446]  .category-page__editor,
    .category-page[data-view="tree"][b-sx5gizf446]  .category-page__actions { display: none !important; }

    .category-page[data-view="editor"][b-sx5gizf446]  .category-page__tree { display: none !important; }

    /* The tree is the whole page here, so its box may take the screen instead of what was left beside a
       filter bar and an action bar. */
    .category-page[b-sx5gizf446]  .category-tree .mud-table-container { height: calc(100dvh - 240px) !important; min-height: 320px; }
}
/* /Pages/Catalog/LanguageTabLabel.razor.rz.scp.css */
.lang-tab__short[b-slu8ie32ju] { display: none; }

@media (max-width: 599.98px) {
    /* Out of sight but still read aloud: the tab's accessible name stays "Dansk", not "DA". */
    .lang-tab__full[b-slu8ie32ju] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .lang-tab__short[b-slu8ie32ju] { display: inline; }
}
/* /Pages/Catalog/ProviderMappingList.razor.rz.scp.css */
/* The two tabs on a phone: each an equal share of the bar, the icon over the word, so "Kategorier" and
   "Specifikationer" both fit across 360px instead of the second hiding behind MudTabs' scroll arrows - the
   machine editor's rule (MachineUpsert.razor.css). The !important beats the inline styles MudTabs puts on every
   tab (its 160px minimum) and on the wrappers (width: fit-content). */
@media (max-width: 599.98px) {
    .mapping-tabs[b-7d0zlqgvo2]  .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    .mapping-tabs[b-7d0zlqgvo2]  .mud-tabs-tabbar-wrapper > * {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .mapping-tabs[b-7d0zlqgvo2]  .mud-tabs-tabbar .mud-tab {
        min-width: 0 !important;
        width: 100%;
        padding: 6px 2px;
        flex-direction: column;
        gap: 2px;
        font-size: 0.75rem;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .mapping-tabs[b-7d0zlqgvo2]  .mud-tabs-tabbar .mud-tab .mud-icon-root {
        margin: 0 !important;
    }
}
/* /Pages/Catalog/SpecDefinitionUpsert.razor.rz.scp.css */
/* The option picker in the Valgmuligheder table. In the table it keeps a readable width; on a phone's card the
   column title ("Oversættelse") stands on its own line and the picker takes the card's full width, instead of
   squeezing into what is left beside the title and pushing the card sideways. MudTable renders the cells and
   MudAutocomplete the field, hence ::deep. */
.spec-options[b-24z4w0ys5i]  .spec-option-picker { min-width: 15rem; }

@media (max-width: 960px) {
    .spec-options[b-24z4w0ys5i]  .mud-sm-table td.spec-options__picker-cell {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .spec-options[b-24z4w0ys5i]  .mud-sm-table td.spec-options__picker-cell::before { max-width: none; }

    .spec-options[b-24z4w0ys5i]  .spec-option-picker { min-width: 0; width: 100%; }
}
/* /Pages/Catalog/StackedGrid.razor.rz.scp.css */
/* The classes StackedGrid.razor documents. MudBlazor stacks a grid with Breakpoint Xs below 600px
   (mud-xs-table) and one with Breakpoint Sm below 960px (mud-sm-table); each pair of rules is written once per
   class, because a media query cannot read the grid's breakpoint. The cells belong to MudDataGrid, hence ::deep. */

/* The facts line exists for the card; the table has a column for each of them. */
.stacked-grid[b-f5bgmm5bhe]  .mp-stack-facts { display: none; }

@media (max-width: 600px) {
    .stacked-grid[b-f5bgmm5bhe]  .mud-xs-table .mp-stack-hide { display: none !important; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-xs-table .mp-stack-lead { display: block; padding-top: 10px; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-xs-table .mp-stack-lead::before { display: none; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-xs-table .mp-stack-facts { display: block; }
}

@media (max-width: 960px) {
    .stacked-grid[b-f5bgmm5bhe]  .mud-sm-table .mp-stack-hide { display: none !important; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-sm-table .mp-stack-lead { display: block; padding-top: 10px; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-sm-table .mp-stack-lead::before { display: none; }
    .stacked-grid[b-f5bgmm5bhe]  .mud-sm-table .mp-stack-facts { display: block; }
}

/* ---- Columns that wait for the room (StackedGrid.razor, "mp-col-wide") ------------------------------------
   The table's own width decides, not the window's: with the drawer open a 1024px laptop leaves the grid about
   730px and a 1280px one about 990px, and eight columns of 900-1100px scrolled sideways with the edit button off
   the card. A column marked mp-col-wide joins at 900px of grid, mp-col-wider at 1100px; until then its fact stands
   in the lead cell's small print (mp-cap plus mp-cap-wide / mp-cap-wider). The machine list does the same
   (MachineList.razor.css). Only ever hidden, never shown here, so a phone card keeps the rules above. */
.stacked-grid[b-f5bgmm5bhe] {
    container-type: inline-size;
    container-name: stacked-grid;
}

@container stacked-grid (max-width: 899.98px) {
    .stacked-grid[b-f5bgmm5bhe]  .mp-col-wide { display: none !important; }
}

@container stacked-grid (max-width: 1099.98px) {
    .stacked-grid[b-f5bgmm5bhe]  .mp-col-wider { display: none !important; }
}

@container stacked-grid (min-width: 900px) {
    .stacked-grid[b-f5bgmm5bhe]  .mp-cap-wide { display: none !important; }
}

@container stacked-grid (min-width: 1100px) {
    .stacked-grid[b-f5bgmm5bhe]  .mp-cap-wider { display: none !important; }
}

/* A card says it all in its facts line; the table's small print would repeat it there. */
@media (max-width: 600px) {
    .stacked-grid[b-f5bgmm5bhe]  .mud-xs-table .mp-cap { display: none !important; }
}

@media (max-width: 960px) {
    .stacked-grid[b-f5bgmm5bhe]  .mud-sm-table .mp-cap { display: none !important; }
}

/* Words wrap between words in a table cell. mp-wrap-anywhere (app.css) also lets the table squeeze a column below
   its longest word, which is how "Trykluftbremser" became "Trykluftbrem/ser"; this breaks a word only when it
   cannot fit on a line of its own. A phone card still wraps anywhere (app.css, the stacked cells). */
.stacked-grid[b-f5bgmm5bhe]  .mp-wrap-word {
    overflow-wrap: break-word;
    min-width: 0;
}
/* /Pages/Dashboard/Components/ActionListCard.razor.rz.scp.css */
/* Its own height, not the chart's: one line of work under a tall empty card reads as "something is missing". */
.dash-actions[b-cqky2ho1u9]  .dash-card-title {
    font-weight: 600;
}

/* Icon, then the text with its button under it. The card is a third of the page at most, and a button beside
   the text would squeeze the explanation into a column of two-word lines. */
.dash-action[b-cqky2ho1u9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 4px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dash-action[b-cqky2ho1u9]  .dash-action-icon {
    margin-top: 2px;
}

.dash-action-body[b-cqky2ho1u9] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dash-action-button[b-cqky2ho1u9] {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}

.dash-action-reasons[b-cqky2ho1u9] {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Dashboard/Components/DailyChart.razor.rz.scp.css */
/* ApexCharts writes its colours into SVG attributes, which a stylesheet overrides: the axis text, the grid and
   the tooltip follow MudBlazor's palette variables, so the chart changes with the light and dark theme instead
   of keeping a white tooltip on a dark page. */

.dash-chart[b-86yvvdctvg] {
    min-width: 0;
}

.dash-chart[b-86yvvdctvg]  .dash-chart-title {
    display: block;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Hover overlays reach a few pixels past the plot; without a clip a scrolling parent grows scrollbars on hover, the
   chart redraws for the new width, the scrollbars vanish - and it flickers (the CMS saw this). Only the width is
   clipped: the tooltip may stand above or below the chart (overflow: hidden cut it off at the top), and the page keeps
   room for its vertical scrollbar (app.css, scrollbar-gutter), so a tooltip near the bottom cannot change the width. */
.dash-chart-canvas[b-86yvvdctvg] {
    overflow-x: clip;
    overflow-y: visible;
    min-height: 190px;
}

.dash-chart[b-86yvvdctvg]  .apexcharts-xaxis-label,
.dash-chart[b-86yvvdctvg]  .apexcharts-yaxis-label {
    fill: var(--mud-palette-text-secondary);
}

.dash-chart[b-86yvvdctvg]  .apexcharts-gridline,
.dash-chart[b-86yvvdctvg]  .apexcharts-xaxis line,
.dash-chart[b-86yvvdctvg]  .apexcharts-xaxis-tick {
    stroke: var(--mud-palette-lines-default);
}

.dash-chart[b-86yvvdctvg]  .apexcharts-legend-text {
    color: var(--mud-palette-text-primary) !important;
}

.dash-chart[b-86yvvdctvg]  .apexcharts-tooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: var(--mud-elevation-4) !important;
}

.dash-chart[b-86yvvdctvg]  .apexcharts-tooltip-title {
    background: var(--mud-palette-background-gray) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    font-weight: 600;
}
/* /Pages/Dashboard/Components/ImportHealthCard.razor.rz.scp.css */
.dash-card[b-j573lofibz] {
    height: 100%;
}

.dash-card[b-j573lofibz]  .dash-card-paper {
    height: 100%;
}

.dash-card[b-j573lofibz]  .dash-card-title {
    font-weight: 600;
}

.dash-import[b-j573lofibz] {
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dash-import[b-j573lofibz]  .dash-import-name {
    font-weight: 600;
}

/* Label column narrow and quiet, the facts beside it; on a phone the label goes above its fact. */
.dash-facts[b-j573lofibz] {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 4px 12px;
    margin: 8px 0 0;
    font-size: 0.875rem;
}

.dash-facts dt[b-j573lofibz] {
    color: var(--mud-palette-text-secondary);
}

.dash-facts dd[b-j573lofibz] {
    margin: 0;
    overflow-wrap: anywhere;
}

.dash-facts-note[b-j573lofibz] {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.dash-facts-error[b-j573lofibz] {
    color: var(--mud-palette-error);
}

@media (max-width: 599.98px) {
    .dash-facts[b-j573lofibz] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .dash-facts dd[b-j573lofibz] {
        margin-bottom: 6px;
    }
}
/* /Pages/Dashboard/Components/JmaDeliveryCard.razor.rz.scp.css */
.dash-card[b-2y8fjxgjse]  .dash-card-title {
    font-weight: 600;
}

.dash-card[b-2y8fjxgjse]  .dash-jma-when {
    font-weight: 600;
    line-height: 1.3;
}
/* /Pages/Dashboard/Components/KpiTile.razor.rz.scp.css */
/* Tiles in a row are the same height, so the numbers line up however long a hint wraps. */
.dash-tile[b-33fstyd3bx] {
    height: 100%;
}

.dash-tile[b-33fstyd3bx]  .dash-tile-paper {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sentence case rather than capitals: "Klik til annonce" then fits one line in the narrowest tile, and the
   numbers of a row stay level. */
.dash-tile[b-33fstyd3bx]  .dash-tile-label {
    font-weight: 600;
    line-height: 1.3;
}

.dash-tile[b-33fstyd3bx]  .dash-tile-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.dash-tile[b-33fstyd3bx]  .dash-tile-trend {
    flex-wrap: wrap;
    row-gap: 0;
}

.dash-tile[b-33fstyd3bx]  .dash-tile-trend-text {
    font-weight: 600;
}

/* The explanation sits at the bottom of the tile, under whatever the trend line needed. */
.dash-tile[b-33fstyd3bx]  .dash-tile-hint {
    margin-top: auto;
    padding-top: 4px;
    line-height: 1.35;
}

/* The way into the list behind the number, under the explanation. */
.dash-tile[b-33fstyd3bx]  .dash-tile-link {
    padding-top: 2px;
    font-weight: 600;
}
/* /Pages/Dashboard/Components/StockCard.razor.rz.scp.css */
.dash-card[b-zk5pats6yb] {
    height: 100%;
}

.dash-card[b-zk5pats6yb]  .dash-card-paper {
    height: 100%;
}

.dash-card[b-zk5pats6yb]  .dash-card-title {
    font-weight: 600;
}

.dash-stock[b-zk5pats6yb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-stock-label[b-zk5pats6yb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.dash-stock-label[b-zk5pats6yb]  .dash-stock-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-stock-label[b-zk5pats6yb]  .dash-stock-count {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.dash-stock-track[b-zk5pats6yb] {
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-action-disabled-background);
    overflow: hidden;
}

.dash-stock-bar[b-zk5pats6yb] {
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-primary);
}
/* /Pages/Dashboard/Components/SystemStatusCard.razor.rz.scp.css */
.dash-card[b-vp07kwbb8x] {
    height: 100%;
}

.dash-card[b-vp07kwbb8x]  .dash-card-paper {
    height: 100%;
}

.dash-card[b-vp07kwbb8x]  .dash-card-title {
    font-weight: 600;
}

.dash-status[b-vp07kwbb8x] {
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dash-status[b-vp07kwbb8x]  .dash-status-title {
    font-weight: 600;
}

.dash-status-alert[b-vp07kwbb8x] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.dash-status-list[b-vp07kwbb8x] {
    margin: 6px 0;
    padding-left: 18px;
}

.dash-status-list li + li[b-vp07kwbb8x] {
    margin-top: 4px;
}

/* An exception message is one long line with nowhere to break; on a phone it would widen the page. */
.dash-status-list[b-vp07kwbb8x]  .dash-status-message,
.dash-status-list[b-vp07kwbb8x]  .dash-status-job {
    overflow-wrap: anywhere;
}

.dash-status-list[b-vp07kwbb8x]  .dash-status-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Pages/Dashboard/Components/TopMachinesCard.razor.rz.scp.css */
.dash-card[b-28gf2tspsf] {
    height: 100%;
}

.dash-card[b-28gf2tspsf]  .dash-card-paper {
    height: 100%;
}

.dash-card[b-28gf2tspsf]  .dash-card-title {
    font-weight: 600;
}

.dash-card[b-28gf2tspsf]  .dash-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 1%;
}

/* A long machine title wraps inside its cell rather than pushing the numbers off a phone screen. */
.dash-card[b-28gf2tspsf]  .dash-top-title {
    overflow-wrap: anywhere;
}

.dash-card[b-28gf2tspsf]  .dash-top-offline {
    color: var(--mud-palette-warning-darken);
}
/* /Pages/Dashboard/Index.razor.rz.scp.css */
/* The overview's layout. The cards themselves are MudPapers in the CMS look; what is decided here is only how
   they share the width at each size. */

.dash-root[b-8lp036b7n4] {
    container-type: inline-size;
    container-name: dash;
}

.dash-intro[b-8lp036b7n4] {
    margin-bottom: 12px;
}

.dash-intro[b-8lp036b7n4]  .dash-greeting {
    font-weight: 600;
    line-height: 1.3;
}

.dash-root[b-8lp036b7n4]  .dash-card-title {
    font-weight: 600;
}

.dash-root[b-8lp036b7n4]  .dash-kpi-heading {
    display: block;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 4px;
}

.dash-root[b-8lp036b7n4]  .dash-section-heading {
    margin-top: 20px;
}

.dash-root[b-8lp036b7n4]  .dash-empty {
    max-width: 40rem;
    margin: 0 auto;
}

/* The shortcuts on a phone: two by two, each button the full width of its cell. At the full button size
   "MIN FORHANDLER" broke onto two lines and stood taller than its neighbours, so the labels take the small
   button's type - the size of the period buttons just above - with a little less air around the icon, which
   keeps every label on one line down to a 375px phone. Narrower still, a label wraps rather than widening the
   page, and the two buttons of its row stretch to the same height. The stack's own d-flex is !important, hence
   the same here. */
@container dash (max-width: 599px) {
    .dash-root[b-8lp036b7n4]  .dash-shortcuts > div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
    }

    .dash-root[b-8lp036b7n4]  .dash-shortcuts .mud-button-root {
        width: 100%;
        min-height: 40px;
        white-space: normal;
        line-height: 1.25;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.8125rem;
        letter-spacing: 0.02em;
    }

    .dash-root[b-8lp036b7n4]  .dash-shortcuts .mud-button-icon-start {
        margin-right: 6px;
    }
}

/* ---- The tiles ---------------------------------------------------------------------------------------------
   Phone: two columns, "Live på sitet" across both. Wider: the stock group three across, the traffic group four
   across. Widest: both groups on one row. Measured on the page's own width, so an open drawer counts. */

.dash-kpis[b-8lp036b7n4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

/* The groups stand side by side at the widest and the row makes them equally tall; each group's grid then fills
   its group, so the traffic tiles are as tall as the stock tiles - "Live på sitet" has a link the others do not,
   and the traffic tiles stood shorter beside it (Danny, 15-10-2026). */
.dash-kpi-group[b-8lp036b7n4] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dash-kpi-grid[b-8lp036b7n4] {
    flex: 1 1 auto;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-kpi-hero[b-8lp036b7n4] {
    grid-column: 1 / -1;
}

@container dash (min-width: 560px) {
    .dash-kpi-grid-stock[b-8lp036b7n4] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dash-kpi-hero[b-8lp036b7n4] {
        grid-column: auto;
    }

    .dash-kpi-grid-traffic[b-8lp036b7n4] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container dash (min-width: 1080px) {
    .dash-kpis[b-8lp036b7n4] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
    }
}

/* ---- The cards ---------------------------------------------------------------------------------------------
   Narrow: one column, and the two column wrappers step aside (display: contents) so every card is ordered on
   its own - the work before the chart, because "what do I need to do" is the question a salesperson opens the
   page with between two customers. Wide: two columns that each stack their own cards, so the height of one
   never stretches a card in the other. */

.dash-main[b-8lp036b7n4] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dash-col[b-8lp036b7n4] {
    display: contents;
}

.dash-slot[b-8lp036b7n4] {
    min-width: 0;
}

.dash-order-actions[b-8lp036b7n4] { order: 1; }
.dash-order-jma[b-8lp036b7n4] { order: 2; }
.dash-order-chart[b-8lp036b7n4] { order: 3; }
.dash-order-top[b-8lp036b7n4] { order: 4; }
.dash-order-stock[b-8lp036b7n4] { order: 5; }

@container dash (min-width: 880px) {
    .dash-main:not(.dash-main-single)[b-8lp036b7n4] {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
    }

    .dash-main:not(.dash-main-single) .dash-col[b-8lp036b7n4] {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
    }
}

@container dash (min-width: 1400px) {
    .dash-main:not(.dash-main-single)[b-8lp036b7n4] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}
/* /Pages/Dealers/DealerList.razor.rz.scp.css */
/* The dealer grid's widths. The table must fit a tablet and a desktop with the drawer open without the
   publish switch and Rediger sliding behind a sideways scroll - which a long dealer name used to cause. */

/* A long name wraps instead of widening the table. Only in the table: a phone card gives the cell its own row. */
@media (min-width: 600px) {
    .dealer-grid[b-9c46dscq0j]  td.dealer-col-name {
        max-width: 22rem;
    }

    /* "6 på sitet" and the switch with its word stay on one line. */
    .dealer-grid[b-9c46dscq0j]  td.dealer-col-nowrap {
        white-space: nowrap;
    }
}

/* Departments and salespeople are a detail of the dealer page; below a wide desktop the column steps aside,
   and on a phone the card leaves it out. */
@media (max-width: 1279.98px) {
    .dealer-grid[b-9c46dscq0j]  .dealer-col-secondary {
        display: none;
    }
}

/* The switch's word at the size of the rest of the row, not the form-sized label MudBlazor gives it. */
.dealer-grid[b-9c46dscq0j]  .mud-switch .mud-typography {
    font-size: var(--mud-typography-body2-size, 0.875rem);
}
/* /Pages/Dealers/DealerLoginsPanel.razor.rz.scp.css */
/* The action columns hold one small icon each, so the table gives them almost no width, and their headers
   broke into "Luk", "/", "åbn" on three lines. They keep their words on one line instead. */
.dealer-logins-table[b-4loluowwn6]  th.dealer-logins-action {
    white-space: nowrap;
}

/* Name and e-mail may break anywhere (a long address must not widen the page), so with the report columns
   (16-10-2026) the table squeezed them to a few letters a line. They keep a readable width, and the login time
   its one line; on a narrow screen the table scrolls instead. */
.dealer-logins-table[b-4loluowwn6]  td.dealer-logins-text {
    min-width: 10rem;
}

.dealer-logins-table[b-4loluowwn6]  td.dealer-logins-nowrap {
    white-space: nowrap;
}
/* /Pages/Dealers/DealerUpsert.razor.rz.scp.css */
/* The dealer page's button bar stays under the app bar while the form scrolls, so Gem is always in reach.
   It holds buttons only; the state chips under it scroll away with the page.
   The layout's app bar is Dense, which MudBlazor draws a quarter lower than --mud-appbar-height (48px of 64).
   Stuck at the variable itself, the bar left a 16px strip that the form scrolled through. */
.dealer-upsert-bar[b-73u62jxoda] {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    z-index: 4;
}

/* The paper's own gap below it would otherwise be a see-through strip the form scrolls behind. */
.dealer-upsert-bar[b-73u62jxoda]  .admin-toolbar {
    box-shadow: var(--mud-elevation-2);
}

/* The short label is the phone's; wider screens have room for the whole sentence. */
.dealer-upsert-bar[b-73u62jxoda]  .dealer-bar-short {
    display: none;
}

/* A phone keeps the bar on one row where it can: "Tilbage til forhandlere" shows only its arrow, Slet only its
   bin, the overview link says "Overblik" and "Log ind som forhandler" says "Log ind som". Their aria-label and
   tooltip still say the whole thing. With all five (an administrator on a hand-made dealer) the row may wrap at
   360px - see docs/remaining-work.md. */
@media (max-width: 599.98px) {
    .dealer-upsert-bar[b-73u62jxoda]  .dealer-bar-text {
        display: none;
    }

    .dealer-upsert-bar[b-73u62jxoda]  .dealer-bar-short {
        display: inline;
    }

    .dealer-upsert-bar[b-73u62jxoda]  .mud-button-root:has(.dealer-bar-text):not(:has(.dealer-bar-short)) .mud-button-icon-start {
        margin-left: 0;
        margin-right: 0;
    }

    /* Four buttons on a 360px phone need every button a little narrower and the gaps a little tighter. */
    .dealer-upsert-bar[b-73u62jxoda]  .admin-toolbar > .d-flex {
        column-gap: 8px;
    }

    .dealer-upsert-bar[b-73u62jxoda]  .mud-button-root {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .dealer-upsert-bar[b-73u62jxoda]  .mud-button-root:has(.dealer-bar-short) .mud-button-icon-start {
        margin-right: 6px;
    }
}
/* /Pages/Forhandler/MinForhandler.razor.rz.scp.css */
/* Gem stays in reach while the profile scrolls: the bar sticks under the app bar, as on staff's dealer page -
   and, as there, at the dense app bar's height rather than the variable's (see DealerUpsert.razor.css). */
.profile-bar[b-fc0xlft0j4] {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    z-index: 4;
}

.profile-bar[b-fc0xlft0j4]  .admin-toolbar {
    box-shadow: var(--mud-elevation-2);
}

/* A field the dealer cannot change looks it: shaded like a disabled field, a dashed outline and a lock at the
   end, and the ordinary text colour kept so it still reads. Navn, Landsdel and CVR are always ours; the
   contact fields only while a delivery owns them. Before, they had the outline and dark text of Adresse beside
   them, and a tap simply did nothing. */
.profile-form[b-fc0xlft0j4]  .profile-locked .mud-input.mud-input-outlined {
    background-color: var(--mud-palette-background-gray);
}

.profile-form[b-fc0xlft0j4]  .profile-locked .mud-input-outlined-border {
    border-style: dashed;
}

.profile-form[b-fc0xlft0j4]  .profile-locked input {
    cursor: default;
}

.profile-form[b-fc0xlft0j4]  .profile-locked .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}
/* /Pages/Import/ModelbaseList.razor.rz.scp.css */
/* The upload button's slot. MudFileUpload is an input control, so the toolbar's field rules made it full
   width on a phone; inside this slot they do not reach it. Its empty file list still took a few pixels under
   the button, which stood it 2px above the buttons beside it. */
.mp-upload-slot[b-h5qz2eo4ey] { display: flex; align-items: center; }
.mp-upload-slot[b-h5qz2eo4ey]  .mud-file-upload { width: auto; margin: 0; }
.mp-upload-slot[b-h5qz2eo4ey]  .mud-file-upload-files { display: none; }

/* A file name in the history. In a phone's or tablet's stacked card it may break anywhere, or a long name
   would push the card wider than the screen. In the table (md and up) it breaks only when it has to: with
   "anywhere" its narrowest width was one letter, the table gave the column next to nothing, and
   "WM_Modelbase_ID.xml" split mid-word at 1440 with room to spare. */
.mp-file-name[b-h5qz2eo4ey] { overflow-wrap: anywhere; }

@media (min-width: 960px) {
    .mp-file-name[b-h5qz2eo4ey] { overflow-wrap: break-word; }
}
/* /Pages/Import/ProviderList.razor.rz.scp.css */
/* "Seneste kørsel" keeps room for a chip and a time side by side while the providers are a table. Below md
   the table stacks into cards (Breakpoint.Md), where a fixed width beside the label made the card scroll
   sideways on a phone, so there the cell takes what it is given. */
.mp-last-run[b-7qjdkynp40] { min-width: 240px; }

@media (max-width: 959.98px) {
    .mp-last-run[b-7qjdkynp40] { min-width: 0; }
}
/* /Pages/Import/TestImport.razor.rz.scp.css */
/* The upload button's slot. MudFileUpload is an input control, so the toolbar's field rules made it full
   width on a phone; inside this slot they do not reach it. Its empty file list still took a few pixels under
   the button, which stood it 2px above the buttons beside it. */
.mp-upload-slot[b-7iq8c7urjp] { display: flex; align-items: center; }
.mp-upload-slot[b-7iq8c7urjp]  .mud-file-upload { width: auto; margin: 0; }
.mp-upload-slot[b-7iq8c7urjp]  .mud-file-upload-files { display: none; }
/* /Pages/Machines/MachineImagesDialog.razor.rz.scp.css */
/* The enlarged photo and the strip under it (MachineImagesDialog). */
.mp-gallery[b-pnslobq841] { display: flex; flex-direction: column; gap: 8px; outline: none; }
.mp-gallery:focus-visible[b-pnslobq841] { outline: 2px solid var(--mud-palette-primary); outline-offset: 4px; border-radius: 6px; }

.mp-gallery__stage[b-pnslobq841] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
    overflow: hidden;
}

.mp-gallery__image[b-pnslobq841] { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }

.mp-gallery__stage[b-pnslobq841]  .mp-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
}

.mp-gallery__stage[b-pnslobq841]  .mp-gallery__nav--prev { left: 8px; }
.mp-gallery__stage[b-pnslobq841]  .mp-gallery__nav--next { right: 8px; }

.mp-gallery__count[b-pnslobq841] { text-align: center; }

.mp-gallery__strip[b-pnslobq841] { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; justify-content: center; flex-wrap: nowrap; }

.mp-gallery__thumb[b-pnslobq841] {
    flex: 0 0 auto;
    width: 88px;
    height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
}

.mp-gallery__thumb img[b-pnslobq841] { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-gallery__thumb:hover[b-pnslobq841], .mp-gallery__thumb:focus-visible[b-pnslobq841] { opacity: 1; }
.mp-gallery__thumb.is-current[b-pnslobq841] { border-color: var(--mud-palette-primary); opacity: 1; }

@media (max-width: 600px) {
    .mp-gallery__strip[b-pnslobq841] { justify-content: flex-start; }
    .mp-gallery__thumb[b-pnslobq841] { width: 64px; height: 48px; }
    .mp-gallery__image[b-pnslobq841] { max-height: 55vh; }
}
/* /Pages/Machines/MachineList.razor.rz.scp.css */
/* The tiles above the machine list are buttons (a keyboard and a screen reader reach them) that look like the
   paper inside them: the button itself draws nothing but a focus ring. */
.mp-tile[b-kgtsm4lc3p] {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: var(--mud-default-borderradius, 4px);
}

.mp-tile:focus-visible[b-kgtsm4lc3p] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.mp-tile[b-kgtsm4lc3p]  .mp-tile__paper {
    height: 100%;
}

/* The shortcut the grid is showing: outlined inside the paper, so it does not collide with the focus ring. */
.mp-tile--pressed[b-kgtsm4lc3p]  .mp-tile__paper {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.mp-tile[b-kgtsm4lc3p]  .mp-tile__text {
    min-width: 0;
}

.mp-tile[b-kgtsm4lc3p]  .mp-tile__value {
    font-weight: 600;
}

/* The grid's columns by the grid's own width. Vælg, Maskine, Status, Pris and the three actions always fit
   (about 740px, a tablet in portrait); Kategori joins from 980px, Forhandler from 1110px, and Billeder, Årgang
   and Sidst set from 1450px - measured at 1024, 1280, 1440 and 1920 with the drawer open. Until its column is
   there, the same fact stands in the Maskine cell's small print (cap-*): the category, the dealer, year, hours,
   the photo count or a warning "Ingen billeder", and for staff "sidst set" beside a delivered machine's chip. A
   hand-entered machine's "Sidst set" is only its last save, which the editor shows, so that one waits for the
   column. A container query rather than a media query, because the drawer takes 250px or 60px of the same
   screen. A phone's stacked card is below every threshold: it gets the small print, not the columns.

   Maskine is the column that grows. Status, Kategori and Forhandler have a width of their own - a long dealer
   name wraps inside it - so the spare width goes to the machine's title and small print instead of to whatever
   name happens to be long. Status holds its two chips one above the other until the grid is wide, which is what
   keeps a row at three lines on a laptop (measured: 73px at 1440, down from 93-113px). */
.machine-grid[b-kgtsm4lc3p] {
    container-type: inline-size;
    container-name: machine-grid;
}

.machine-grid[b-kgtsm4lc3p]  .col-category,
.machine-grid[b-kgtsm4lc3p]  .col-dealer,
.machine-grid[b-kgtsm4lc3p]  .col-extra {
    display: none !important;
}

.machine-grid[b-kgtsm4lc3p]  .col-machine {
    min-width: 10rem;
}

.machine-grid[b-kgtsm4lc3p]  .col-status {
    width: 6.5rem;
}

.machine-grid[b-kgtsm4lc3p]  .col-category,
.machine-grid[b-kgtsm4lc3p]  .col-dealer {
    width: 10rem;
}

/* The small icon in front of "Ingen billeder", at the caption's own size. */
.machine-grid[b-kgtsm4lc3p]  .mp-caption-icon {
    font-size: 1rem;
}

@container machine-grid (min-width: 980px) {
    .machine-grid[b-kgtsm4lc3p]  .col-category { display: table-cell !important; }
    .machine-grid[b-kgtsm4lc3p]  .cap-category { display: none !important; }
    .machine-grid[b-kgtsm4lc3p]  .col-machine { min-width: 14rem; }
}

@container machine-grid (min-width: 1110px) {
    .machine-grid[b-kgtsm4lc3p]  .col-dealer { display: table-cell !important; }
    .machine-grid[b-kgtsm4lc3p]  .cap-dealer { display: none !important; }
}

@container machine-grid (min-width: 1450px) {
    .machine-grid[b-kgtsm4lc3p]  .col-extra { display: table-cell !important; }
    .machine-grid[b-kgtsm4lc3p]  .cap-extra { display: none !important; }
    .machine-grid[b-kgtsm4lc3p]  .col-machine { min-width: 17rem; }
    .machine-grid[b-kgtsm4lc3p]  .col-status { width: 8.5rem; }
}

/* The stacked phone card: every cell is a full-width row, so no column keeps its desktop width. */
@media (max-width: 599.98px) {
    .machine-grid[b-kgtsm4lc3p]  .col-machine,
    .machine-grid[b-kgtsm4lc3p]  .col-status {
        min-width: 0;
        width: auto;
    }
}

/* A phone gets the tiles as one strip that scrolls sideways - "Aktive 30", label and number on one line - so
   they cost one short row above the filter bar instead of two tall ones. The tile cut off at the right edge is
   what says there are more. The page itself never scrolls sideways: the strip scrolls inside its own box. */
@media (max-width: 599.98px) {
    .mp-tiles[b-kgtsm4lc3p]  .mud-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        margin: 0 0 12px 0;
        padding: 4px 2px 6px;
        gap: 8px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .mp-tiles[b-kgtsm4lc3p]  .mud-grid::-webkit-scrollbar {
        display: none;
    }

    .mp-tiles[b-kgtsm4lc3p]  .mud-grid > .mud-grid-item {
        flex: 0 0 auto;
        max-width: none;
        padding: 0;
    }

    .mp-tile[b-kgtsm4lc3p]  .mp-tile__paper {
        padding: 6px 12px !important;
        white-space: nowrap;
    }

    .mp-tile[b-kgtsm4lc3p]  .mp-tile__text {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 6px !important;
    }

    .mp-tile[b-kgtsm4lc3p]  .mp-tile__value {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* The card image beside the machine's name (the thumbnail opens MachineImagesDialog). */
.machine-grid[b-kgtsm4lc3p]  .machine-cell { display: flex; align-items: flex-start; gap: 12px; }
.machine-grid[b-kgtsm4lc3p]  .machine-cell__text { min-width: 0; flex: 1 1 auto; }
.machine-grid[b-kgtsm4lc3p]  .machine-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 54px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
}
.machine-grid[b-kgtsm4lc3p]  button.machine-thumb { cursor: zoom-in; }
.machine-grid[b-kgtsm4lc3p]  button.machine-thumb:hover { border-color: var(--mud-palette-primary); }
.machine-grid[b-kgtsm4lc3p]  button.machine-thumb:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.machine-grid[b-kgtsm4lc3p]  .machine-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.machine-grid[b-kgtsm4lc3p]  .machine-thumb__count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 18px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 600px) {
    .machine-grid[b-kgtsm4lc3p]  .machine-thumb { width: 64px; height: 48px; }
}
/* /Pages/Machines/MachineUpsert.razor.rz.scp.css */
/* The editor's button bar stays under the app bar while the form scrolls, so Gem is always in reach - the same
   rule as the dealer pages (DealerUpsert.razor.css). The layout's app bar is Dense, which MudBlazor draws a
   quarter lower than --mud-appbar-height (48px of 64); stuck at the variable itself, the bar would leave a strip
   the form scrolls through. The state chips under the bar scroll away with the page. */
.machine-upsert-bar[b-svv8hoq8p3] {
    position: sticky;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    z-index: 4;
}

/* The paper's own gap below it would otherwise be a see-through strip the form scrolls behind. */
.machine-upsert-bar[b-svv8hoq8p3]  .admin-toolbar {
    box-shadow: var(--mud-elevation-2);
}

/* A phone keeps the bar on one row, so the stuck bar is one button high: "Tilbage til mine maskiner" shows only
   its arrow and Slet only its bin. Their aria-label and tooltip still say the whole thing. */
@media (max-width: 599.98px) {
    .machine-upsert-bar[b-svv8hoq8p3]  .machine-bar-text {
        display: none;
    }

    .machine-upsert-bar[b-svv8hoq8p3]  .mud-button-root:has(.machine-bar-text) .mud-button-icon-start {
        margin-left: 0;
        margin-right: 0;
    }

    .machine-upsert-bar[b-svv8hoq8p3]  .mud-button-root:has(.machine-bar-text) {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* The editor's tab headings (MachineUpsert.TabLabel): icon and name from sm up; on a phone the icon over the
   same name, and every tab an equal share of the width, so Stamdata, Specifikationer, Billeder, Publicering and
   Historik all fit across 390px instead of hiding behind MudTabs' scroll arrows. The names are the desktop's
   words - support says "gå til Publicering" - set in their own case, which is narrower than capitals, and
   "Specifikationer" breaks at its soft hyphen. The !important beats the inline styles MudTabs puts on every tab
   (min-width, MinimumTabWidth's 160px) and on its wrapper (width: fit-content). */
.machine-tab[b-svv8hoq8p3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.machine-tab__phone[b-svv8hoq8p3] {
    display: none;
}

@media (max-width: 599.98px) {
    /* Each tab sits in a fit-content wrapper of MudTabs' own; the wrappers share the bar, the tab fills its. */
    .machine-tabs[b-svv8hoq8p3]  .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    .machine-tabs[b-svv8hoq8p3]  .mud-tabs-tabbar-wrapper > * {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    .machine-tabs[b-svv8hoq8p3]  .mud-tabs-tabbar .mud-tab {
        min-width: 0 !important;
        width: 100%;
        padding: 6px 2px;
    }

    .machine-tab[b-svv8hoq8p3] {
        flex-direction: column;
        gap: 2px;
        font-size: 0.7rem;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
    }

    .machine-tab__long[b-svv8hoq8p3] {
        display: none;
    }

    .machine-tab__phone[b-svv8hoq8p3] {
        display: inline;
        text-align: center;
        white-space: normal;
        hyphens: manual;
    }
}

/* A tablet keeps the full names, but not the 160px minimum: five tabs of 160px are wider than 820px, and the
   last one would hide behind a scroll arrow. */
@media (min-width: 600px) and (max-width: 959.98px) {
    .machine-tabs[b-svv8hoq8p3]  .mud-tabs-tabbar .mud-tab {
        min-width: 0 !important;
        padding: 6px 12px;
    }
}

/* The status buttons on Publicering share one width, so the sentence beside each starts on the same line. */
@media (min-width: 600px) {
    .machine-tabs[b-svv8hoq8p3]  .machine-status-button {
        min-width: 190px;
    }
}
/* /Pages/Stats/AiUsage.razor.rz.scp.css */
/* Token counts and prices right-aligned and on one line: "0,01 kr." broken before "kr." read as two values.
   Only in the table - a phone card lays label and value out itself. */
@media (min-width: 600px) {
    .ai-tables[b-p2c69a90r5]  .ai-num {
        text-align: right;
        white-space: nowrap;
    }
}
/* /Pages/Stats/Components/InsightAiCard.razor.rz.scp.css */
/* A tinted card so the AI's words stand apart from the figures, in the theme's own primary colour. */

.insight-ai[b-27gut7u3qw]  .insight-ai-title {
    font-weight: 600;
}

.insight-ai[b-27gut7u3qw] {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.insight-ai[b-27gut7u3qw]  .insight-ai-heading {
    display: block;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.insight-ai-list[b-27gut7u3qw] {
    margin: 0;
    padding-left: 1.2rem;
}

.insight-ai-list li[b-27gut7u3qw] {
    margin-bottom: 4px;
}
/* /Pages/Stats/Components/InsightBarChart.razor.rz.scp.css */
/* The chart's colours follow MudBlazor's palette, as DailyChart's do: axis text, grid and tooltip change with the light
   and dark theme. The table beside it keeps the numbers right-aligned and on one line. */

.insight-chart[b-p5qywkw9f4] {
    min-width: 0;
}

/* Only the width is clipped (as DailyChart's): the tooltip may stand above or below the chart. */
.insight-chart-canvas[b-p5qywkw9f4] {
    overflow-x: clip;
    overflow-y: visible;
    min-height: 160px;
}

.insight-chart[b-p5qywkw9f4]  .apexcharts-xaxis-label,
.insight-chart[b-p5qywkw9f4]  .apexcharts-yaxis-label {
    fill: var(--mud-palette-text-secondary);
}

.insight-chart[b-p5qywkw9f4]  .apexcharts-gridline,
.insight-chart[b-p5qywkw9f4]  .apexcharts-xaxis line,
.insight-chart[b-p5qywkw9f4]  .apexcharts-xaxis-tick {
    stroke: var(--mud-palette-lines-default);
}

.insight-chart[b-p5qywkw9f4]  .apexcharts-tooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.insight-table[b-p5qywkw9f4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-top: 6px;
}

.insight-table th[b-p5qywkw9f4],
.insight-table td[b-p5qywkw9f4] {
    padding: 3px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

.insight-table th[b-p5qywkw9f4] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.insight-num[b-p5qywkw9f4] {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.insight-visually-hidden[b-p5qywkw9f4] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* /Pages/Stats/Components/InsightDonutChart.razor.rz.scp.css */
/* DailyChart's theme rules, and the donut beside its table where there is room, under it where there is not. */

.insight-chart[b-pmgpty5nfe] {
    min-width: 0;
}

.insight-donut[b-pmgpty5nfe] {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

@media (max-width: 599px) {
    .insight-donut[b-pmgpty5nfe] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Only the width is clipped (as DailyChart's): the tooltip may stand above the ring - overflow: hidden cut it off. */
.insight-donut-canvas[b-pmgpty5nfe] {
    overflow-x: clip;
    overflow-y: visible;
    min-height: 200px;
}

.insight-chart[b-pmgpty5nfe]  .apexcharts-datalabel-label,
.insight-chart[b-pmgpty5nfe]  .apexcharts-datalabel-value {
    fill: var(--mud-palette-text-primary);
}

.insight-chart[b-pmgpty5nfe]  .apexcharts-tooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

.insight-chart[b-pmgpty5nfe]  .apexcharts-pie-area {
    stroke: var(--mud-palette-surface);
}

.insight-table[b-pmgpty5nfe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.insight-table th[b-pmgpty5nfe],
.insight-table td[b-pmgpty5nfe] {
    padding: 3px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
}

.insight-table th[b-pmgpty5nfe] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.insight-num[b-pmgpty5nfe] {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.insight-dot[b-pmgpty5nfe] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
}

.insight-visually-hidden[b-pmgpty5nfe] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* /Pages/Stats/Components/PortalStats.razor.rz.scp.css */
/* The traffic tables: numbers right-aligned and on one line - "100,0 %" broken after the comma read as two
   values. Only in the table: a phone card lays the label and the value out itself. */
@media (min-width: 600px) {
    .stats-tables[b-3vbthi7flj]  .stats-num {
        text-align: right;
        white-space: nowrap;
    }
}

/* The column header that explains itself on hover or focus. */
.stats-tables[b-3vbthi7flj]  .stats-help {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: help;
}
/* /Pages/Stats/Insights.razor.rz.scp.css */
/* The insight tables: numbers right-aligned and on one line from sm up; a phone card lays out label and value itself. */
@media (min-width: 600px) {
    .insight-tables[b-glbxd5tnfg]  .insight-num {
        text-align: right;
        white-space: nowrap;
    }
}

/* Each suggestion's own sentence under its chip, in the secondary text colour. */
.insight-suggestions[b-glbxd5tnfg]  .insight-suggestion-text {
    display: block;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    margin-bottom: 4px;
}