/* /Components/Admin/Applications/HkFlowOverrideDialog.razor.rz.scp.css */
/* Canvas | override editor; single column below 1100px. */
.hk-fod-grid[b-ftz20tue86] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .hk-fod-grid[b-ftz20tue86] {
        grid-template-columns: 1fr;
    }
}

.hk-fod-inspector[b-ftz20tue86] {
    background: #fff;
    border: 1px solid #d7dee5;
    border-radius: 6px;
    min-height: 430px;
    max-height: 70vh;
    overflow: auto;
}

/* Panel chrome — the same look as the output flow editor's inspector (the panel renders as a child,
   hence ::deep). */
.hk-fod-inspector[b-ftz20tue86]  .hk-fod-panel > h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #66788a;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid #d7dee5;
}

.hk-fod-inspector[b-ftz20tue86]  .hk-fod-panel-body {
    padding: 12px 14px;
}

.hk-fod-inspector[b-ftz20tue86]  .hk-fod-section {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #66788a;
    margin: 12px 0 6px;
    padding-top: 8px;
    border-top: 1px solid #eceff2;
}

.hk-fod-inspector[b-ftz20tue86]  .hk-fod-activity-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
/* /Components/Admin/Customers/CustomerEmailComposeDialog.razor.rz.scp.css */
/* The message body is a Radzen editor; the height is what no utility expresses. */
.hk-email-body[b-7gqitwx74n]  .rz-html-editor {
    height: 18rem;
}
/* /Components/Admin/DocumentImport/DocumentImportView.razor.rz.scp.css */
/* The configuration tree is its own surface on the section's tinted body (design.md §12), and scrolls on its own so
   a long configuration does not push the selected field's properties out of view. */
.hk-docimport-tree[b-q3be1lox8i] {
    max-height: 34rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* The test result is a read-out of what the importer produced, in the grid's text size (design.md §8). It scrolls on
   its own: a repeating collection can run to hundreds of lines. */
.hk-docimport-result[b-q3be1lox8i] {
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    font-size: var(--hk-grid-font-size);
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
/* /Components/Admin/EmailTemplates/EmailTemplateEditorView.razor.rz.scp.css */
/* The body gets the height of a page section to write in; HkHtmlModeEditor's own height is sized for a dialog. Its
   parts are other components' elements, so they need ::deep, and the extra class outranks the component's rule. */
.hk-emailtemplate-body[b-3as3lv6nyy]  .hk-html-modes .hk-html-modes-editor,
.hk-emailtemplate-body[b-3as3lv6nyy]  .hk-html-modes .hk-html-modes-source,
.hk-emailtemplate-body[b-3as3lv6nyy]  .hk-html-modes .hk-preview-iframe {
    height: 24rem;
}
/* /Components/Admin/HtmlTemplates/HtmlTemplateDesignerView.razor.rz.scp.css */
/* The variable tree scrolls inside its section rather than stretching the column past the editors. */
.hk-htmltpl-variables[b-dvvh7ghvkr] {
    max-height: 24rem;
    overflow-y: auto;
}

/* The composed email, framed like a field so its own white page reads apart from the app's. */
.hk-htmltpl-preview[b-dvvh7ghvkr] {
    display: block;
    width: 100%;
    height: 70vh;
    border: 1px solid var(--bs-border-color);
    background: var(--hk-surface-raised);
}
/* /Components/Admin/InfoPages/InfoPagesView.razor.rz.scp.css */
/* The HTML editor gets the height of a page section to write in; Radzen sizes it by its own root's height, which no
   utility reaches through the component. */
.hk-infopage-html[b-1tzqdttc2w]  .rz-html-editor {
    height: 24rem;
}

/* The media-bank picture stays a thumbnail beside the fields, as WebForms' img-thumbnail did. */
.hk-infopage-thumb[b-1tzqdttc2w] {
    max-height: 6rem;
}
/* /Components/Admin/MediaBank/MediaBankView.razor.rz.scp.css */
/* The folder tree scrolls on its own, so a long tree leaves its rail in view. No utility sets a max-height. */
.hk-mb-tree[b-0m8x84udlv] {
    max-height: 32rem;
    overflow-y: auto;
}
/* /Components/Admin/MediaBank/MediaObjectEditDialog.razor.rz.scp.css */
/* The preview box: a fixed frame the thumbnail or the file-type icon sits centred in, whatever its proportions. */
.hk-mb-edit-preview[b-ey652fmel1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--hk-surface-raised);
}

.hk-mb-edit-preview img[b-ey652fmel1] {
    max-width: 100%;
    max-height: 18rem;
}

.hk-mb-edit-preview i[b-ey652fmel1] {
    font-size: 3.5rem;
    color: var(--hk-n-500);
}
/* /Components/Admin/MediaBank/MediaObjectGallery.razor.rz.scp.css */
.hk-mb-gallery-wrap[b-m6lhavamvw] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The select-all line over the tiles: the gallery is not a grid, so it has no header cell for the box. */
.hk-mb-gallery-head[b-m6lhavamvw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.25rem 0.5rem;
}

/* The tiles scroll on their own so the meta strip and the rail stay in view, as the WebForms panel did. */
.hk-mb-gallery[b-m6lhavamvw] {
    max-height: 32rem;
    min-height: 10rem;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    align-content: start;
}

.hk-mb-empty[b-m6lhavamvw] {
    grid-column: 1 / -1;
    padding: 1rem 0.5rem;
}

.hk-mb-tile[b-m6lhavamvw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.5rem 0.35rem;
    border: 1px solid var(--hk-n-200);
    border-radius: 0.375rem;
    background: var(--hk-surface-raised);
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.hk-mb-tile:hover[b-m6lhavamvw] {
    border-color: var(--hk-n-400);
    background: var(--hk-surface-sunken);
}

.hk-mb-tile:focus-visible[b-m6lhavamvw] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* A selected tile is the selected-row blue every grid uses (design.md §6), never a tint of the brand. */
.hk-mb-tile-selected[b-m6lhavamvw],
.hk-mb-tile-selected:hover[b-m6lhavamvw] {
    border-color: var(--bs-primary);
    background: var(--hk-row-selected-bg);
}

.hk-mb-thumb[b-m6lhavamvw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0.25rem;
    background: var(--hk-surface-sunken);
}

.hk-mb-thumb img[b-m6lhavamvw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hk-mb-thumb i[b-m6lhavamvw] {
    font-size: 2.5rem;
    color: var(--hk-n-500);
}

.hk-mb-name[b-m6lhavamvw] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--hk-grid-font-size);
    line-height: 1.2;
    word-break: break-word;
}

.hk-mb-meta[b-m6lhavamvw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem 0.75rem;
    max-height: 6.25rem;
    overflow: auto;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--hk-n-200);
    background: var(--hk-surface-sunken);
    font-size: var(--hk-grid-font-size);
}

.hk-mb-meta-row[b-m6lhavamvw] {
    display: flex;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.hk-mb-meta-row dt[b-m6lhavamvw] {
    font-weight: 600;
}

.hk-mb-meta-row dd[b-m6lhavamvw] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .hk-mb-meta[b-m6lhavamvw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/OrdersConfig/TvBoardEditorView.razor.rz.scp.css */
/* The preview: a 16:9 screen in miniature. The frame is a width container, so the board inside scales its type with
   the frame (TvBoardView.razor.css, .hk-tvb-preview) the way the wall scales it with the viewport. */
.hk-tvbe-frame[b-l24nx9a1jw] {
    aspect-ratio: 16 / 9;
    container-type: inline-size;
    overflow: hidden;
    background: var(--hk-app-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Beside the form, the preview stays in view while the widgets below are edited. It parks under the page's own
   sticky rail, whose height is one toolbar row. */
@media (min-width: 1400px) {
    .hk-tvbe-preview-column[b-l24nx9a1jw] {
        position: sticky;
        top: calc(var(--hk-sticky-top, 0px) + 3.5rem);
    }
}
/* /Components/Admin/OutputFlows/OutputFlowActivityPalette.razor.rz.scp.css */
.hk-ofp[b-19udsqqekn] {
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 430px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

/* Minimised: a strip just wide enough for the toggle, so the canvas gets the width back. */
.hk-ofp-collapsed[b-19udsqqekn] {
    min-height: 0;
    align-items: center;
}

/* The same header band as the inspector's panels, so palette and inspector frame the canvas alike.
   The toggle rides in the band, at its right edge — and is the whole band once minimised. */
.hk-ofp-head[b-19udsqqekn] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 14px;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-ofp-collapsed .hk-ofp-head[b-19udsqqekn] {
    padding: 6px 0;
    border-bottom: 0;
}

.hk-ofp-head > h2[b-19udsqqekn] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0;
}

.hk-ofp-toggle[b-19udsqqekn] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.hk-ofp-toggle:hover[b-19udsqqekn] {
    background: var(--hk-n-100);
    color: var(--bs-body-color);
}

/* The strip's name, turned sideways so a minimised palette still says what it is. */
.hk-ofp-rail[b-19udsqqekn] {
    writing-mode: vertical-rl;
    margin: 4px auto;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    user-select: none;
}

.hk-ofp-hint[b-19udsqqekn] {
    color: var(--bs-secondary-color);
    padding: 8px 14px;
    border-bottom: 1px solid var(--hk-n-100);
}

.hk-ofp-body[b-19udsqqekn] {
    overflow: auto;
    padding: 8px;
}

.hk-ofp-cat[b-19udsqqekn] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: 8px 6px 3px;
}

.hk-ofp-cat:hover[b-19udsqqekn] {
    color: var(--bs-body-color);
}

.hk-ofp-cat-count[b-19udsqqekn] {
    margin-left: auto;
    background: var(--hk-n-100);
    border-radius: 8px;
    padding: 0 6px;
    color: var(--bs-secondary-color);
}

.hk-ofp-item[b-19udsqqekn] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    padding: 5px 8px;
    cursor: pointer;
}

.hk-ofp-item:hover:not(:disabled)[b-19udsqqekn] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

.hk-ofp-item:disabled[b-19udsqqekn] {
    color: var(--hk-n-400);
    cursor: not-allowed;
}
/* /Components/Admin/OutputFlows/OutputFlowCanvasEditor.razor.rz.scp.css */
/* Palette | canvas | inspector; single column below 1100px. */
.hk-ofe-grid[b-khmj9jaox4] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    gap: 12px;
    align-items: stretch;
}

/* Palette minimised to its strip — the canvas takes the freed width. */
.hk-ofe-grid-minimised[b-khmj9jaox4] {
    grid-template-columns: 2.25rem minmax(0, 1fr) 320px;
}

@media (max-width: 1100px) {
    .hk-ofe-grid[b-khmj9jaox4],
    .hk-ofe-grid-minimised[b-khmj9jaox4] {
        grid-template-columns: 1fr;
    }
}

.hk-ofe-inspector[b-khmj9jaox4] {
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    min-height: 430px;
    max-height: 70vh;
    overflow: auto;
}

/* The save result carries one validation message per line, which no utility expresses. */
.hk-ofe-lines[b-khmj9jaox4] {
    white-space: pre-line;
}

/* Inspector panel chrome shared by the general / activity / link panels (rendered as children of
   .hk-ofe-inspector, hence ::deep). The same band as a section card's header (base.css §7), at the
   inspector's own scale. The head pins to the top of the scrolling inspector so the panel's action
   rail stays in reach however far down the body the user has scrolled. */
.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 14px;
    background: var(--hk-surface-raised);
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-panel-head > h2 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* The rail keeps its own chrome (base.css §5) and only drops the spacing it carries for a page. */
.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-panel-head .hk-toolbar {
    margin: 8px 0 0;
}

.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-panel-body {
    padding: 12px 14px;
}

.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-section {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 12px 0 6px;
    padding-top: 8px;
    border-top: 1px solid var(--hk-n-100);
}

/* A long checkbox list inside a panel scrolls rather than pushing the rest out of reach. */
.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-scroll {
    max-height: 12rem;
    overflow-y: auto;
}

/* The link-type picker fused ahead of its value field: wide enough for the two words, no wider. */
.hk-ofe-inspector[b-khmj9jaox4]  .hk-ofe-linktype {
    flex: 0 0 6rem;
}
/* /Components/Admin/PaymentGateways/PaymentGatewaysView.razor.rz.scp.css */
/* The buyer's information gets the room WebForms' editor had (20em), so a formatted text can be read while edited. */
.hk-gateway-information[b-4rqo2n5cdc]  .rz-html-editor {
    height: 20rem;
}

/* The stored image stays a thumbnail beside the upload button. */
.hk-gateway-image[b-4rqo2n5cdc] {
    max-height: 3.125rem;
}
/* /Components/Admin/Planning/GeneralPlanningSettingsView.razor.rz.scp.css */
/* The cancel-message dialog's split, as in WebForms: the message and the recipient two thirds of the row, the type
   the third beside the message. Past design.md §5's half on purpose: both are free text (a sentence, an address
   list or a #{...} expression) next to a short list, and the room is theirs. Only where the 12-column grid is
   in force; below xl base.css §11 steps the grid down and the spans go with it. */
@media (min-width: 1200px) {
    .hk-form-grid-12 > .hk-plmsg-wide[b-ljka5gcitx] {
        grid-column: span 8;
    }

    .hk-form-grid-12 > .hk-plmsg-narrow[b-ljka5gcitx] {
        grid-column: span 4;
    }
}
/* /Components/Admin/Portals/PortalEditorView.razor.rz.scp.css */
/* The portal editor's own chrome. The logotype preview is bounded so a large upload cannot
   stretch its pane; everything else on the page is Bootstrap utilities. */

.hk-portal-logo[b-v6gwhgkcxl] {
    max-height: 3.75rem;
    max-width: 100%;
}
/* /Components/Admin/Portals/PortalSettingsView.razor.rz.scp.css */
/* The portal settings' own chrome. The icon preview is bounded so a 128-pixel mobile icon and a 32-pixel web icon
   read as the same small square, as on the site settings; everything else on the page is Bootstrap utilities. */

.hk-portal-icon[b-aihb5qe4hx] {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
/* /Components/Admin/Prices/HkPriceEditor.razor.rz.scp.css */
/* The tier list holds two short numbers a row; across a full-width section the quantity and its value drift apart. */
.hk-price-tiers[b-jcyz2fxm5k] {
    max-width: 36rem;
}
/* /Components/Admin/Prices/PriceExchangeRatesTab.razor.rz.scp.css */
/* A rate keeps room for its digits: the matrix scrolls rather than squeezing a cell to nothing. */
.hk-rate[b-eufp2cka31] {
    min-width: 6.5rem;
}
/* /Components/Admin/Processes/AvailableDaysEditor.razor.rz.scp.css */
/* The week in fixed steps, measured against the editor's own width rather than the viewport (it sits in a
   section or a tab, whatever is beside it): all seven days on one row, then Monday–Thursday over Friday–Sunday,
   and when even four columns do not fit, a row per day with its toggle, start and end side by side. A count
   that follows the width on its own (auto-fit) left Sunday alone on a row of its own. */
.hk-avdays-cq[b-3wvjms1owj] {
    container-type: inline-size;
}

.hk-avdays[b-3wvjms1owj] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
}

.hk-avdays-day[b-3wvjms1owj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* Seven columns of at least 8rem and their gaps. */
@container (max-width: 64rem) {
    .hk-avdays[b-3wvjms1owj] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Four columns of at least 8rem and their gaps. */
@container (max-width: 36rem) {
    .hk-avdays[b-3wvjms1owj] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .hk-avdays-day[b-3wvjms1owj] {
        display: grid;
        grid-template-columns: minmax(6rem, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 0.5rem;
    }
}
/* /Components/Admin/Processes/CalculationEditor.razor.rz.scp.css */
/* Calculation editor. */

/* The test field's latest-jobs menu. A dropdown item never wraps, so a long job name would stretch the menu past
   the window; capped, each job's order and name wrap under its number instead. */
.hk-calc-recent-jobs[b-54f1ctvako] {
    max-width: min(28rem, 90vw);
}

.hk-calc-recent-jobs .dropdown-item[b-54f1ctvako] {
    white-space: normal;
}
/* /Components/Admin/Push/HkMediaObjectPickerDialog.razor.rz.scp.css */
/* The category tree is its own surface on the dialog's tinted body (design.md §12), and scrolls on its own so a
   deep tree does not push the object list out of view. The height matches the grid's MaxHeight beside it. */
.hk-mediapicker-tree[b-6lz0vd3x37] {
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
/* /Components/Admin/Push/PushView.razor.rz.scp.css */
/* The preview stays a picture rather than a page: a tall image would otherwise push the rest of the editor out of
   view. 20rem is about the WebForms preview box (212 × 296 px) at the app's density. */
.hk-push-preview[b-z47yehht1w] {
    max-height: 20rem;
}
/* /Components/Admin/Resources/ResourcesView.razor.rz.scp.css */
/* The category tree scrolls on its own, so a long tree leaves its rail in view. No utility sets a max-height. */
.hk-resources-tree[b-9r3a4zb7wi] {
    max-height: 60vh;
    overflow-y: auto;
}

/* The text editor gets the height of a text to write in; Radzen sizes it by its own root's height, which no utility
   reaches through the component. */
.hk-resources-html[b-9r3a4zb7wi]  .rz-html-editor {
    height: 22rem;
}
/* /Components/Admin/Settings/RegistrationSettingsEditor.razor.rz.scp.css */
/* The administrator and role lists of the activation section: a framed list that scrolls past a dozen entries,
   as the WebForms CheckBoxLists did, so a long role register does not push the rest of the tab down. */

.hk-registration-list[b-20c06rwbnf] {
    max-height: 12rem;
    overflow-y: auto;
}
/* /Components/Admin/Sites/SiteEditorView.razor.rz.scp.css */
/* The site editor's own chrome. The logotype preview is bounded so a large upload cannot
   stretch its pane; everything else on the page is Bootstrap utilities. */

.hk-site-logo[b-ph3ou1qvp8] {
    max-height: 3.75rem;
    max-width: 100%;
}
/* /Components/Admin/Sites/SiteSettingsView.razor.rz.scp.css */
/* The site settings' own chrome. The icon preview is bounded so a 128-pixel mobile icon and a 32-pixel web icon
   read as the same small square; everything else on the page is Bootstrap utilities. */

.hk-site-icon[b-b1z2cbyczv] {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}
/* /Components/Admin/Smtp/SmtpSettingsView.razor.rz.scp.css */
.hk-smtp[b-xl8fq85bdf] {
    max-width: 72rem;
}
/* /Components/Admin/SystemSettings/SystemSettingsView.razor.rz.scp.css */
/* A read-out of a dozen facts: at the module's full width its few fields stand far apart. */
.hk-sysadmin[b-lhxus1bpv7] {
    max-width: 64rem;
}
/* /Components/Admin/TemplateDesigner/Editors/CampaignKitTemplateEditor.razor.rz.scp.css */
/* The notice may hold one line per member template that could not be added. */
.hk-template-notice[b-5g41qrw8sa] {
    white-space: pre-line;
}
/* /Components/Admin/TemplateDesigner/Editors/CompositeTemplateEditor.razor.rz.scp.css */
/* A script error can span several lines. */
.hk-template-notice[b-4t2kegt0l0] {
    white-space: pre-line;
}
/* /Components/Admin/TemplateDesigner/Editors/EmailTemplateEditor.razor.rz.scp.css */
/* Which of the template's fields the job carries: a template can define many, so the box scrolls. */
.hk-template-check-list[b-54kwpju6dt] {
    max-height: 10rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Editors/GroupTemplateEditor.razor.rz.scp.css */
/* The notice may hold one line per member template that could not be read. */
.hk-template-notice[b-gq2glup0pa] {
    white-space: pre-line;
}
/* /Components/Admin/TemplateDesigner/Editors/KitTemplateEditor.razor.rz.scp.css */
/* The notice may hold one line per member template that could not be added. */
.hk-template-notice[b-rpcjo6bzcz] {
    white-space: pre-line;
}
/* /Components/Admin/TemplateDesigner/Shared/SelectJobDefinitionTemplateDialog.razor.rz.scp.css */
/* The job-definition templates: the list scrolls inside the dialog, so the name field under it stays in view. */
.hk-template-jdt-list[b-b2qf2g5bh9] {
    max-height: 20rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateCampaignKitExceptionsGrid.razor.rz.scp.css */
/* A kit can hold many members: the add menu scrolls instead of running off the dialog. */
.hk-template-exception-menu[b-c07dwitv6k] {
    max-height: 20rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateDynamicBarcodeFieldDialog.razor.rz.scp.css */
/* The colour swatch in front of the colour select; its fill is the picked colour, set inline at runtime. */
.hk-template-swatch[b-ri180cycka] {
    width: 2rem;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateDynamicColorsDialog.razor.rz.scp.css */
/* A colour's swatch in the list; its fill is the colour itself, set inline at runtime. */
.hk-template-color-swatch[b-69abk06a8f] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateDynamicFieldDependencies.razor.rz.scp.css */
/* A direction's own grid is a grid item of the outer one: without this its min-content width would push it out of
   its column (design.md §5, "a field is never wider than its column"). */
.hk-template-dependency[b-p8b585bz6f] {
    min-width: 0;
    align-content: start;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateDynamicTextBindingDialog.razor.rz.scp.css */
/* The colour swatch in front of a colour select; its fill is the picked colour, set inline at runtime. */
.hk-template-swatch[b-0orbqmbgng] {
    width: 2rem;
}

/* A token's fields beside its badge and commands: a flex item may shrink below its controls' min-content. */
.hk-template-token-body[b-0orbqmbgng] {
    min-width: 0;
}

/* The rich-text editor for a written expression; Radzen sizes to its content otherwise. */
.hk-template-html-editor[b-0orbqmbgng]  .rz-html-editor {
    height: 16rem;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateDynamicTextFieldDialog.razor.rz.scp.css */
/* The colour swatch in front of a colour select; its fill is the picked colour, set inline at runtime. */
.hk-template-swatch[b-uv5kj0ztpz] {
    width: 2rem;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateGeneralSection.razor.rz.scp.css */
/* The template's thumbnail beside the fields: never taller than the fields column usually is. */
.hk-template-thumbnail[b-r4qdfg9tpr] {
    max-height: 22rem;
}

/* The properties-per-version choice: a job definition can carry many properties, so the box scrolls. */
.hk-template-check-list[b-r4qdfg9tpr] {
    max-height: 8rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateMediaObjectPickerDialog.razor.rz.scp.css */
/* The folder tree and the object list scroll on their own, so the dialog keeps its footer in view. */
.hk-template-picker-tree[b-2sel3e9m7q] {
    max-height: 26rem;
    overflow-y: auto;
}

.hk-template-picker-list[b-2sel3e9m7q] {
    max-height: 24rem;
    overflow-y: auto;
}

/* A row click picks the object (HkGridSelection semantics in multi-select mode). */
.hk-template-picker-row[b-2sel3e9m7q] {
    cursor: pointer;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateParameterStorage.razor.rz.scp.css */
/* The roles checklist: a long role register scrolls inside its box instead of stretching the section. */
.hk-template-roles[b-nm6d7i30g0] {
    max-height: 8rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplatePdfFieldsPreview.razor.rz.scp.css */
/* The fixed frame the page is letter-boxed into (FrameWidth × FrameHeight in the code), never wider than its column. */
.hk-template-preview-frame[b-agzbiz8oy8] {
    width: 850px;
    height: 500px;
    max-width: 100%;
}

/* The rendered page; its offset and size are set inline from the page's own size. */
.hk-template-preview-page[b-agzbiz8oy8] {
    position: absolute;
}

/* The field outlines drawn over the page; clicks go through to the page. */
.hk-template-preview-overlay[b-agzbiz8oy8] {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.hk-template-preview-edge[b-agzbiz8oy8] {
    fill: none;
    stroke: var(--bs-border-color);
}

.hk-template-preview-field[b-agzbiz8oy8] {
    fill: color-mix(in srgb, var(--bs-info) 20%, transparent);
    stroke: var(--bs-success);
}
/* /Components/Admin/TemplateDesigner/Shared/TemplatePdfMarginDialog.razor.rz.scp.css */
/* The page preview is its own surface on the dialog's tinted body (design.md §12: raised, framed by a border). */
.hk-template-margin-frame[b-8ojux1toif] {
    padding: 0.5rem;
    text-align: center;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.hk-template-margin-preview[b-8ojux1toif] {
    max-height: 500px;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateSelectDialog.razor.rz.scp.css */
/* The category tree beside the templates: it scrolls on its own, about as tall as the templates grid. */
.hk-template-picker-tree[b-yg8oxzbt61] {
    max-height: 24rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateSplitFileDialog.razor.rz.scp.css */
/* The page boundaries of a long file scroll inside the dialog instead of stretching it. */
.hk-template-split-list[b-xqp31v4nm8] {
    max-height: 16rem;
    overflow-y: auto;
}
/* /Components/Admin/TemplateDesigner/Shared/TemplateSupplierFilters.razor.rz.scp.css */
/* Fixed layout: the three select columns share the width, so a select with a long option shrinks with the
   section instead of pushing the table out of it (design.md §6, no sideways scroll). */
.hk-template-filters[b-3a2cnyd73l] {
    table-layout: fixed;
}

.hk-template-filters-cmd[b-3a2cnyd73l] {
    width: 3rem;
}
/* /Components/Admin/Templates/TemplatesView.razor.rz.scp.css */
/* The category tree and the dialog pick lists scroll on their own, so a long tree leaves the rail and the
   dialog footer in view. No utility sets a max-height. */
.hk-templates-tree[b-pbtjyyxdm5] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Components/Admin/Warehouses/WarehouseInventoryView.razor.rz.scp.css */
/* The rows measure themselves against the page's content, not the viewport (design.md §6): a container. Its layout
   containment also makes it the containing block of the hidden labels and the hidden header, so they stay inside
   its scroll box (the trap #2006 fixed on the incoming-delivery page, whose card fold this copies). */
.hk-inv-wrap[b-t5iiny42ef] {
    container: hk-inv / inline-size;
}

/* The rows lay out automatically, which squeezes a form-control to nothing: give each cell control a floor. */
.hk-inv-lines .form-control[b-t5iiny42ef] {
    min-width: 7rem;
}

.hk-inv-lines .hk-inv-quantity[b-t5iiny42ef] {
    min-width: 6rem;
}

/* The date picker is Radzen's markup, so the floor above does not reach it; this one fits a date beside its clear
   and calendar buttons. */
.hk-inv-lines[b-t5iiny42ef]  .rz-datepicker {
    min-width: 9rem;
}

/* The article is the only text in the row; without a floor every control took its room. */
.hk-inv-article[b-t5iiny42ef] {
    min-width: 12rem;
}

/* The "updated" mark sits in the command cluster, whose own rule spaces only button from button. */
.hk-inv-updated + .btn[b-t5iiny42ef] {
    margin-left: 0.25rem;
}

/* A field's label, hidden while the rows are a table (the column header says it) and shown on a card. Not
   Bootstrap's visually-hidden: every property of that is marked important, so a card could not lift it. */
.hk-inv-label[b-t5iiny42ef] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Cards ──
   Below the width the incoming-delivery columns need (estimated 60rem: the article's floor, five controls, the
   commands and the cell padding), each row is a card: the article and its commands on top, the fields in even rows
   under it — four columns, then two on a phone. One breakpoint for both update types, so switching between them
   does not also switch the layout; stock taking's three fields would fit a table a little longer. */
@container hk-inv (max-width: 59.99rem) {
    .hk-inv-lines[b-t5iiny42ef],
    .hk-inv-lines tbody[b-t5iiny42ef] {
        display: block;
        background: none;
    }

    .hk-inv-lines thead[b-t5iiny42ef] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .hk-inv-lines tbody tr[b-t5iiny42ef] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--hk-surface-raised);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .hk-inv-lines tbody tr + tr[b-t5iiny42ef] {
        margin-top: 0.5rem;
    }

    .hk-inv-lines td[b-t5iiny42ef],
    .hk-inv-lines tbody tr:hover > td[b-t5iiny42ef] {
        display: block;
        min-width: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
        background: none;
        border: 0;
    }

    .hk-inv-lines .form-control[b-t5iiny42ef],
    .hk-inv-lines .hk-inv-quantity[b-t5iiny42ef],
    .hk-inv-lines[b-t5iiny42ef]  .rz-datepicker {
        min-width: 0;
    }

    .hk-inv-lines .hk-inv-article[b-t5iiny42ef] {
        grid-row: 1;
        grid-column: 1 / -2;
        font-weight: 600;
    }

    /* width: auto undoes the shared cell's 1% (base.css §9), which as a grid item left the commands spilling out of
       the card's edge. */
    .hk-inv-lines .hk-actions[b-t5iiny42ef] {
        grid-row: 1;
        grid-column: -2 / -1;
        justify-self: end;
        width: auto;
        white-space: nowrap;
    }

    .hk-inv-label[b-t5iiny42ef] {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 0.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@container hk-inv (max-width: 33.99rem) {
    .hk-inv-lines tbody tr[b-t5iiny42ef] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Database/Dialogs/FileEditModal.razor.rz.scp.css */
/* The editor fills the dialog body (FullHeight, p-0 d-flex flex-column): this wrapper is the flex item that
   takes the remaining height and the Monaco editor inside it is 100% of it. min-height 0 lets it shrink
   below the editor's content height so the editor scrolls itself instead of the body. */
.hk-dbedit-source[b-ihbuoi5qk4] {
	flex: 1 1 auto;
	min-height: 0;
}

/* Edge to edge, as the textarea before it was: the editor's own frame (HkCodeEditor.razor.css) would draw a
   rounded border inside the square, padding-less body. */
.hk-dbedit-source[b-ihbuoi5qk4]  .hk-code-editor {
	border: 0;
	border-radius: 0;
}

/* Under the save error the alert's own margin spaces it; the dialog body's block gap (base.css §15)
   would add to it, because flex items do not collapse margins. */
.alert + .hk-dbedit-source[b-ihbuoi5qk4] {
	margin-top: 0;
}
/* /Components/Database/Dialogs/FileHistoryModal.razor.rz.scp.css */
/* The body has no padding (the list and preview run to its edges), so the head carries its own. */
.hk-dbhist-head[b-n9usyjlauv] {
	padding: 0.75rem 0.75rem 0;
}

/* The revision list takes at most 40% of the panel and scrolls; the preview under it takes the rest. */
.hk-dbhist-list[b-n9usyjlauv] {
	max-height: 40%;
	overflow-y: auto;
	flex-shrink: 0;
}

.hk-dbhist-preview[b-n9usyjlauv] {
	min-height: 0;
}

.hk-dbhist-preview-head[b-n9usyjlauv] {
	flex-shrink: 0;
}

/* The preview fills what is left of the panel: base.css sizes every textarea to its content and caps it
   at 14rem, which left the content a strip at the top. Read as written, so it neither grows with its
   content nor resizes by hand — the flex column sizes it and it scrolls itself. Same as FileEditModal. */
.hk-dbhist-source[b-n9usyjlauv] {
	field-sizing: fixed;
	min-height: 0;
	max-height: none;
	resize: none;
}
/* /Components/Database/Dialogs/MetaDataEditModal.razor.rz.scp.css */
/* The name gets the most room and the type a select's worth; the value takes the rest. */
.hk-dbmeta-name[b-fx52hw13v2] {
	width: 35%;
}

.hk-dbmeta-type[b-fx52hw13v2] {
	width: 20%;
}

/* Auto table layout would squeeze a form-control to nothing in a narrow dialog (design.md §6). */
td .form-control[b-fx52hw13v2],
td .form-select[b-fx52hw13v2] {
	min-width: 8rem;
}
/* /Components/Database/Sections/BrowseView.razor.rz.scp.css */
/* The ported ResourceAdmin components (tree, file list, filter bar, dialogs) were written
   against the MAUI app's own palette. Rather than rewrite all seven stylesheets, the module
   root re-points that vocabulary at the application tokens — so the database admin now tracks
   the HaiKom brand, including a tenant's runtime override, with the child sheets untouched.
   Same technique as the Radzen mapping in wwwroot/css/radzen-overrides.css. */
.hk-dbadmin[b-az7zqw4xa2] {
	--color-accent: var(--bs-primary);
	--color-accent-bg: var(--bs-primary-bg-subtle);
	--color-bg: var(--hk-surface-raised);
	--color-bg-secondary: var(--hk-surface-sunken);
	--color-border: var(--bs-border-color);
	--color-text: var(--bs-body-color);
	--color-text-muted: var(--bs-secondary-color);
	--radius-sm: var(--bs-border-radius-sm);
	--radius-md: var(--bs-border-radius);
	--shadow-lg: var(--hk-shadow-lg);
	/* The pane bands share one height, so the three line up although only the inspector's
	   holds a button (MetaDataPanel reads it too). */
	--db-pane-head-h: 2.5rem;
}

.browse-wrapper[b-az7zqw4xa2] {
	display: flex;
	flex-direction: column;
}

/* The gutter of a g-3 row, as between the price items' category tree and grid. */
.browse-container[b-az7zqw4xa2],
.file-panel[b-az7zqw4xa2] {
	gap: 1rem;
}

.browse-container[b-az7zqw4xa2] {
	flex: 1;
	min-height: 0;
}

/* The panes are section cards (hk-order-section); the gap spaces them, so the card's margin goes. */
.tree-panel[b-az7zqw4xa2],
.file-list-area[b-az7zqw4xa2],
.metadata-panel-area[b-az7zqw4xa2] {
	margin-bottom: 0;
}

/* Clip rather than the card's hidden: below lg the file list's sticky header pins to the viewport,
   which a scroll container in between would stop. */
.tree-panel[b-az7zqw4xa2],
.file-list-area[b-az7zqw4xa2] {
	overflow: clip;
	background-color: var(--color-bg-secondary);
}

.tree-panel[b-az7zqw4xa2] {
	min-height: 0;
}

/* The tree's rail stays above its scroll panel, so it is in view however far the tree scrolls. */
.tree-rail[b-az7zqw4xa2] {
	flex-shrink: 0;
}

.tree-body[b-az7zqw4xa2] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.file-panel[b-az7zqw4xa2] {
	min-width: 0;
	min-height: 0;
}

.file-list-area[b-az7zqw4xa2] {
	min-width: 0;
	min-height: 0;
}

.file-list-body[b-az7zqw4xa2] {
	min-height: 0;
}

.metadata-panel-area[b-az7zqw4xa2] {
	overflow-y: auto;
}

/* The section band (base.css §7) as each pane's head; the title and summary keep the band's
   type rather than a heading's. */
.db-pane-head[b-az7zqw4xa2] {
	flex-shrink: 0;
	min-height: var(--db-pane-head-h);
	padding-block: 0.25rem;
}

.db-pane-title[b-az7zqw4xa2] {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

.db-pane-head > .hk-order-section-summary[b-az7zqw4xa2] {
	min-width: 0;
}

/* From lg up the explorer keeps tree, list and inspector in view at once, so the page fills the
   viewport inside the content padding instead of scrolling with it: the shell's tokens, never a
   copy of their values (design.md §13). The page head keeps its own height, the explorer the rest. */
@media (min-width: 992px) {
	.hk-dbadmin[b-az7zqw4xa2] {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--hk-topbar-h) - 2 * var(--hk-module-content-pad));
	}

	.browse-wrapper[b-az7zqw4xa2] {
		flex: 1;
		min-height: 0;
		overflow: hidden;
	}

	/* As wide as the price items' category tree: a col-lg-3 in a g-3 row. */
	.tree-panel[b-az7zqw4xa2] {
		flex: 0 0 calc(25% - 0.75rem);
		min-width: 160px;
	}

	/* The band stays put. The rows scroll in the file list's own panel under its rail (FileList.razor.css);
	   the body scrolls only when an expanded filter leaves the list less than its minimum. */
	.file-list-body[b-az7zqw4xa2] {
		overflow-y: auto;
	}

	.metadata-panel-area[b-az7zqw4xa2] {
		width: 220px;
		min-width: 160px;
	}
}

/* Below lg the panes stack (the markup's flex-column flex-lg-row): the tree keeps a capped
   height with its own scroll so the files are reachable under it, and the list takes the full
   width and flows. Two 160px side panels left a 7px column for the files at 375px (#2028). */
@media (max-width: 991.98px) {
	.tree-panel[b-az7zqw4xa2] {
		max-height: 40vh;
	}

	/* The inspector is a sheet over the lower half of the screen rather than a block under the
	   list: there it was a whole list's scroll away from the row that was tapped, so the details
	   of the selected file are now in view wherever the list is scrolled. It stays under the
	   topbar (10) and the context menu (1000), and over the list's sticky header (1) and the
	   pinned status bar. */
	.metadata-panel-area[b-az7zqw4xa2] {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 50vh;
		z-index: 9;
		background-color: var(--color-bg);
		/* A sheet on the screen edge, not a card: only its top edge is drawn. */
		border: 0;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		box-shadow: var(--shadow-lg);
	}

	/* Room under the list while the sheet is open, so its last rows can be scrolled clear. */
	.browse-wrapper.metadata-sheet-open[b-az7zqw4xa2] {
		padding-bottom: 50vh;
	}

	/* Pinned to the bottom of the screen: it carries the selection count and the way into the
	   inspector, which below its fold would be as far away as the inspector used to be. */
	.status-bar[b-az7zqw4xa2] {
		position: sticky;
		bottom: 0;
		z-index: 2;
		border-top: 1px solid var(--color-border);
	}
}

/* The line under the panes, on the page ground: selection count and paste/copy status. */
.status-bar[b-az7zqw4xa2] {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-muted);
	background: var(--hk-app-bg);
}

/* design.md §11: a 44 px tap target where the pointer is a finger. Below lg the status bar's
   button is the only way into the inspector sheet (MetaDataPanel's close button is its pair). */
@media (pointer: coarse) {
	.status-bar .btn[b-az7zqw4xa2] {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
}

/* Shared vocabulary of both tree components (project + directory), kept here on
   the module root so the two scoped sheets cannot drift apart. */
[b-az7zqw4xa2] .tree-toggle {
	width: 1rem;
	text-align: center;
	flex-shrink: 0;
	color: var(--color-text-muted);
	font-size: 0.75rem;
}

[b-az7zqw4xa2] .tree-icon {
	flex-shrink: 0;
	margin-right: 3px;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}
/* /Components/Database/Sections/ContextMenu.razor.rz.scp.css */
.context-overlay[b-hb7v498f7k] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
}

.context-menu[b-hb7v498f7k] {
	position: fixed;
	z-index: 1001;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	min-width: 160px;
	padding: 4px 0;
	font-size: 0.875rem;
}

.context-menu[b-hb7v498f7k]  .dropdown-item:hover {
	background-color: var(--color-accent-bg);
	color: var(--color-accent);
}

.context-menu[b-hb7v498f7k]  .dropdown-item.text-danger:hover {
	background-color: var(--bs-danger-bg-subtle);
	color: var(--bs-danger-text-emphasis);
}
/* /Components/Database/Sections/FileList.razor.rz.scp.css */
[b-l8oj8nwrn7] table {
	font-size: 0.8125rem;
}

/* The checkbox column shrinks to its box, like HkGrid's tool column (whose class is scoped to HkGrid). */
.db-select-col[b-l8oj8nwrn7] {
	width: 1px;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

[b-l8oj8nwrn7] .table > tbody > tr.text-danger > td {
	color: var(--bs-danger) !important;
}

[b-l8oj8nwrn7] table thead th {
	position: sticky;
	top: 0;
	background-color: var(--color-bg);
	z-index: 1;
}

/* The whole pane below the filter, so a right-click on the empty space under the rows reaches the list. */
.db-file-list[b-l8oj8nwrn7] {
	flex: 1;
	min-height: 100%;
}

/* From lg up the rail stays put and the rows scroll in the panel under it, where the header pins at
   its top. A scroll panel rather than a sticky rail: the rail wraps in a narrow list pane, and a
   header parked under a sticky rail needs the rail's height as a fixed number. The list keeps room
   for some rows when an expanded filter takes the pane, and the pane then scrolls instead. */
@media (min-width: 992px) {
	.db-file-list[b-l8oj8nwrn7] {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		min-height: 12rem;
	}

	.db-file-rail[b-l8oj8nwrn7] {
		flex-shrink: 0;
	}

	.db-file-scroll[b-l8oj8nwrn7] {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
}

/* Below lg the list no longer has a scroll panel of its own — the page scrolls — so the rail and the
   header pin against the viewport, under the sticky topbar like every other sticky thing (design.md
   §13, #2028), the header under the rail. The rail's height is one rail row (base.css §5: a control,
   the rail's padding and border, and its margin, which the pane's ground fills so no row shows
   through); a rail that wraps on a narrow phone covers the header's top while it is pinned. */
@media (max-width: 991.98px) {
	.db-file-list[b-l8oj8nwrn7] {
		--db-file-rail-h: calc(var(--hk-control-height) + 0.5rem + 2 * var(--bs-border-width) + 0.875rem);
	}

	.db-file-rail[b-l8oj8nwrn7] {
		position: sticky;
		top: var(--hk-sticky-top, 0px);
		z-index: 2;
		background-color: var(--color-bg-secondary);
	}

	[b-l8oj8nwrn7] table thead th {
		top: calc(var(--hk-sticky-top, 0px) + var(--db-file-rail-h));
	}
}
/* /Components/Database/Sections/FilterBar.razor.rz.scp.css */
.filter-bar[b-cayrfud6ma] {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.8125rem;
}

.filter-header[b-cayrfud6ma] {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	cursor: pointer;
	user-select: none;
	gap: 6px;
}

.filter-header:hover[b-cayrfud6ma] {
	background-color: var(--color-bg-secondary);
}

.filter-toggle[b-cayrfud6ma] {
	width: 1rem;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.75rem;
}

.filter-title[b-cayrfud6ma] {
	font-weight: 600;
	color: var(--color-text);
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}

.filter-count[b-cayrfud6ma] {
	color: var(--color-text-muted);
	font-size: 0.6875rem;
}

.filter-summary[b-cayrfud6ma] {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.filter-active-label[b-cayrfud6ma] {
	font-size: 0.6875rem;
	color: var(--color-text-muted);
	min-width: 1.5rem;
}

.filter-body[b-cayrfud6ma] {
	padding: 4px 8px 8px;
}

.filter-row[b-cayrfud6ma] {
	display: flex;
	/* Five controls in a row overflow a phone-width list panel; let them wrap (#2028). */
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 4px;
	align-items: center;
}

.filter-input[b-cayrfud6ma] {
	/* A floor, or the inputs shrink to a sliver before the row wraps (#2028). */
	flex: 1 1 8rem;
	min-width: 8rem;
	font-size: 0.8125rem !important;
	padding: 2px 6px !important;
}

.filter-select[b-cayrfud6ma], .filter-type[b-cayrfud6ma] {
	width: auto;
	min-width: 120px;
	font-size: 0.8125rem !important;
	padding: 2px 6px !important;
}

.filter-remove[b-cayrfud6ma] {
	padding: 1px 6px !important;
	font-size: 0.75rem;
	line-height: 1;
}
/* /Components/Database/Sections/MetaDataPanel.razor.rz.scp.css */
/* The inspector is a card like the other two panes: the section band over the tinted body. */
.metadata-panel[b-yw050fkf5m] {
	min-height: 100%;
	background-color: var(--color-bg-secondary);
}

/* The band, at the height the other panes' bands share (--db-pane-head-h, BrowseView). Sticky:
   the inspector scrolls on its own, and the band holds the way to close it. */
.metadata-head[b-yw050fkf5m] {
	position: sticky;
	top: 0;
	z-index: 1;
	min-height: var(--db-pane-head-h);
	padding-block: 0.25rem;
}

.metadata-title[b-yw050fkf5m] {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

/* The close button is slimmed from lg up, where the three bands stand side by side and must keep
   the shared height. Below lg the bands stack and nothing lines up, so the sheet's band takes the
   full button. */
@media (min-width: 992px) {
	.metadata-head .btn[b-yw050fkf5m] {
		--bs-btn-padding-y: 0.125rem;
	}
}

/* design.md §11: a 44 px tap target where the pointer is a finger. On a phone this button is the
   only way to close the sheet; that the band then outgrows its neighbours on a wide touch screen
   is the lesser cost. */
@media (pointer: coarse) {
	.metadata-head .btn[b-yw050fkf5m] {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}
}

/* The sub-section header's grey and type, copied from .hk-section-plain-head (HkSection.razor.css)
   on purpose — keep the two in step. Not an HkSection Plain: that frames its body, and the
   inspector is already the frame, so a second box inside it would only be clutter (design.md §4). */
.metadata-subhead[b-yw050fkf5m] {
	margin: 0;
	padding: 0.375rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-emphasis-color);
	background: var(--hk-n-300);
}

/* The entries are the inspector's data, so they lie on the raised ground like a grid. */
.metadata-list[b-yw050fkf5m] {
	flex: 1;
	background-color: var(--color-bg);
}

.file-info-item[b-yw050fkf5m] {
	padding: 2px 0;
}

.file-info-label[b-yw050fkf5m] {
	font-weight: 600;
	color: var(--color-text-muted);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.file-info-value[b-yw050fkf5m] {
	font-size: 0.8125rem;
	color: var(--color-text);
	word-break: break-word;
	margin-top: 1px;
}

.metadata-item[b-yw050fkf5m] {
	padding: 6px 10px;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.8125rem;
}

.metadata-item:hover[b-yw050fkf5m] {
	background-color: var(--color-bg-secondary);
}

.metadata-name[b-yw050fkf5m] {
	font-weight: 600;
	color: var(--color-text-muted);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.metadata-value[b-yw050fkf5m] {
	color: var(--color-text);
	word-break: break-word;
	margin-top: 1px;
}
/* /Components/Flows/FlowButtons.razor.rz.scp.css */
.hk-flow-buttons[b-2fw2h2imma] {
    margin: 0 0 1rem;
}

.hk-flow-buttons-bottom[b-2fw2h2imma] {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-flow-buttons-collapsed[b-2fw2h2imma] {
    display: none;
}

.hk-flow-buttons-left[b-2fw2h2imma],
.hk-flow-buttons-center[b-2fw2h2imma],
.hk-flow-buttons-right[b-2fw2h2imma] {
    flex: 1 1 0;
}

.hk-flow-buttons-center[b-2fw2h2imma] {
    justify-content: center;
}

.hk-flow-buttons-right[b-2fw2h2imma] {
    justify-content: flex-end;
}
/* /Components/Flows/FlowValidationSummary.razor.rz.scp.css */
.alert[b-ixfbc04uh7]  .inner-message {
    display: block;
    padding-left: 1rem;
}
/* /Components/Flows/FlowWizard.razor.rz.scp.css */
.hk-flow[b-8qk6ex8eor] {
    max-width: 64rem;
    margin: 0 auto;
}
/* /Components/Flows/Shared/CartItemsGrid.razor.rz.scp.css */
.hk-cart-items-table[b-900thhacp2]  .hk-cart-controls {
    width: 5.5rem;
    white-space: nowrap;
}

.hk-cart-items-table[b-900thhacp2]  .hk-cart-thumbnail {
    width: 4.5rem;
}

.hk-cart-items-table[b-900thhacp2]  .hk-cart-quantity {
    width: 8rem;
}

.hk-cart-items-table[b-900thhacp2]  .hk-cart-quantity .hk-quantity-input {
    max-width: 6rem;
    margin: 0 auto;
}

.hk-cart-items-table[b-900thhacp2]  .hk-job-information {
    font-size: 0.875em;
    color: var(--bs-secondary-color);
}

.hk-cart-items-table[b-900thhacp2]  .hk-job-information-label {
    font-weight: 600;
}

.hk-cart-items-table[b-900thhacp2]  .hk-cart-separator-row td {
    border-top: 0;
    padding: 0;
}

.hk-cart-items-table[b-900thhacp2]  .hk-order-items-total-separator {
    border-top: 2px solid var(--bs-border-color);
    margin: 0.25rem 0;
}

.hk-cart-items-table[b-900thhacp2]  .hk-cart-footer-row td {
    border-top: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
/* /Components/Flows/Shared/HtmlPreviewFrame.razor.rz.scp.css */
.hk-preview-iframe[b-mnznb00uwm] {
    display: block;
    width: 100%;
    min-height: 40em;
    border: 1px solid var(--bs-border-color);
    background: #fff;
}
/* /Components/Flows/Shared/KitTemplateRow.razor.rz.scp.css */
.hk-kit-thumbnail img[b-u7hu82kml9] {
    max-width: 100%;
    max-height: 8rem;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.hk-kit-property-value[b-u7hu82kml9] {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.hk-kit-controls[b-u7hu82kml9] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.hk-kit-controls[b-u7hu82kml9]  .hk-quantity-selection {
    flex-wrap: nowrap;
}
/* /Components/Flows/Shared/PdfMarginChangerDialog.razor.rz.scp.css */
.hk-margin-preview img[b-j3x3w3mx26] {
    max-height: 60vh;
    border: 1px solid var(--bs-border-color);
}
/* /Components/Flows/Shared/SelectEntryDialog.razor.rz.scp.css */
.hk-select-entry-list[b-1xxiy90s3c] {
    max-height: 24em;
    overflow-y: auto;
}

.hk-select-entry-list tr[b-1xxiy90s3c] {
    cursor: pointer;
}

.hk-select-entry-check[b-1xxiy90s3c] {
    width: 2em;
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* Module-specific content; shared shell geometry lives in admin.css, the sidebar's own parts in ModuleSidebar.razor.css. */

/* An empty breadcrumb leaf (the landing sets none) leaves no dangling separator. */
.hk-adm-crumb .breadcrumb-item.active:empty[b-j1hd05zr4h] {
    display: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.hk-layout[b-u2rbsx9tp3] {
    display: flex;
    min-height: 100vh;
    /* Read by .hk-toolbar-sticky (base.css §5): a sticky rail parks below the
       topbar instead of sliding underneath/over it. Topbar height + its border. */
    --hk-sticky-top: calc(4rem + 1px);
}

.hk-sidebar[b-u2rbsx9tp3] {
    --bs-offcanvas-width: 16rem; /* keep the offcanvas drawer the same width as the pinned column */
    width: 16rem;
    flex: 0 0 16rem;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}

.hk-sidebar-head[b-u2rbsx9tp3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-sidebar-brand[b-u2rbsx9tp3] {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.hk-sidebar-logo[b-u2rbsx9tp3] {
    max-height: 2.75rem;
    max-width: 13rem;
    object-fit: contain;
}

.hk-sidebar-scroll[b-u2rbsx9tp3] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
}

.hk-sidebar-foot[b-u2rbsx9tp3] {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.6rem 1rem;
}

.hk-main[b-u2rbsx9tp3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hk-topbar[b-u2rbsx9tp3] {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    min-height: 4rem; /* aligned with the sidebar header */
    padding: 0 1.25rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-topbar-toggle[b-u2rbsx9tp3] {
    color: var(--bs-body-color);
    font-size: 1.25rem;
    line-height: 1;
}

.hk-topbar-title[b-u2rbsx9tp3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-content[b-u2rbsx9tp3] {
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem;
}
/* /Components/Layout/ModuleSidebar.razor.rz.scp.css */
/* The module sidebar's own parts (issue 2308). The shell's geometry and the card's base look are admin.css's (.hk-module-*);
   on the dark rail everything reads the rail's tokens (base.css §1 --hk-sidebar-*), in the menus Bootstrap's own. */

/* ---- The card: the shared tenant card as the module menu's toggle ---------------------------------------------- */
.hk-module-switch[b-vllg17clso] {
    margin: 0.75rem;
}

.hk-module-card[b-vllg17clso] {
    width: 100%;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    /* Micro interaction: a hairline lift on hover, settles back on press. */
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* On the dark rail the lift is a brighter wash, not a shadow — a shadow has nothing darker to fall on. */
.hk-module-card:hover[b-vllg17clso],
.hk-module-card[aria-expanded="true"][b-vllg17clso] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-muted);
}

.hk-module-card:hover[b-vllg17clso] {
    transform: translateY(-1px);
}

.hk-module-card:active[b-vllg17clso] {
    transform: translateY(0) scale(0.99);
}

.hk-module-card .hk-module-tenant-mark[b-vllg17clso] {
    font-size: 1rem;
}

.hk-module-card .hk-module-tenant-info[b-vllg17clso] {
    flex: 1;
}

.hk-module-card-caret[b-vllg17clso],
.hk-module-account-caret[b-vllg17clso] {
    flex-shrink: 0;
    color: var(--hk-sidebar-muted);
    font-size: 0.875rem;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The chevron turns to point back at the card while the menu is open. */
.hk-module-card[aria-expanded="true"] .hk-module-card-caret[b-vllg17clso],
.hk-module-account-toggle[aria-expanded="true"] .hk-module-account-caret[b-vllg17clso] {
    transform: rotate(180deg);
}

/* ---- The two menus: light dropdowns over the rail and, on desktop, over the page (admin.css lifts the rail) ----- */
.hk-module-menu[b-vllg17clso],
.hk-module-account-menu[b-vllg17clso] {
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
    padding: 0.375rem;
}

/* Wider than the 16rem rail so a module's line and an e-mail address fit; never wider than a phone. */
.hk-module-menu[b-vllg17clso],
.hk-module-account-menu[b-vllg17clso] {
    width: 20rem;
    max-width: calc(100vw - 1.5rem);
}

/* The rail's white focus ring (admin.css) would vanish on the white menus; they take the page's back. */
.hk-module-menu :focus-visible[b-vllg17clso],
.hk-module-account-menu :focus-visible[b-vllg17clso] {
    box-shadow: var(--hk-focus-ring);
}

/* Bootstrap shows a menu with display:block, so the entrance is a keyframe animation. It moves the `translate`
   property, not `transform`, because Popper positions the menu through an inline transform. The account menu opens
   upward, so it rises into place. */
.hk-module-menu.show[b-vllg17clso] {
    animation: hk-module-menu-in-b-vllg17clso 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.hk-module-account-menu.show[b-vllg17clso] {
    animation: hk-module-menu-up-b-vllg17clso 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes hk-module-menu-in-b-vllg17clso {
    from {
        opacity: 0;
        translate: 0 -0.375rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes hk-module-menu-up-b-vllg17clso {
    from {
        opacity: 0;
        translate: 0 0.375rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.hk-module-menu .dropdown-header[b-vllg17clso] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ---- The module menu's rows: a mark, the title and a line under it ------------------------------------------- */
.hk-module-menu-item[b-vllg17clso] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0.625rem;
    border-radius: var(--bs-border-radius);
}

/* The module you are in: the tinted row, the filled chip and a check. */
.hk-module-menu-item.is-current[b-vllg17clso] {
    background: var(--bs-tertiary-bg);
}

.hk-module-menu-item.is-current:hover[b-vllg17clso],
.hk-module-menu-item.is-current:focus[b-vllg17clso] {
    background: var(--bs-secondary-bg);
}

.hk-module-chip[b-vllg17clso],
.hk-module-portal-mark[b-vllg17clso],
.hk-module-menu-icon[b-vllg17clso] {
    flex: none;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
}

.hk-module-chip[b-vllg17clso] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1rem;
}

.is-current > .hk-module-chip[b-vllg17clso] {
    background: var(--bs-primary);
    color: var(--hk-on-primary);
}

/* A portal is its initials, as the shop's portal list draws them. */
.hk-module-portal-mark[b-vllg17clso] {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 650;
}

/* An icon without a chip (the shop), in the chips' column so the titles line up. */
.hk-module-menu-icon[b-vllg17clso] {
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.hk-module-menu-text[b-vllg17clso] {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.hk-module-menu-title[b-vllg17clso] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

/* The line wraps rather than ending in an ellipsis: it says what the module holds, and a longer translation (the
   English site line) would otherwise lose its end. */
.hk-module-menu-line[b-vllg17clso] {
    display: block;
    white-space: normal;
    font-size: 0.75rem; /* 12px floor for informative text */
    color: var(--bs-secondary-color);
}

.hk-module-menu-check[b-vllg17clso] {
    flex: none;
    color: var(--bs-primary);
}

/* ---- The account foot: one button that opens the account menu upward ----------------------------------------- */
.hk-module-account-toggle[b-vllg17clso] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-lg);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hk-module-account-toggle:hover[b-vllg17clso],
.hk-module-account-toggle[aria-expanded="true"][b-vllg17clso] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-border);
}

.hk-module-avatar[b-vllg17clso] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hk-sidebar-active);
    color: var(--hk-sidebar-text-strong);
    font-size: 0.75rem;
    font-weight: 600;
}

.hk-module-account-info[b-vllg17clso] {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

/* The rail's text colour, not its muted one: the button lies on a white wash on hover and while open, where the muted
   grey falls under AA (as on the card, admin.css .hk-module-tenant-sub). */
.hk-module-account-sub[b-vllg17clso] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hk-sidebar-text);
    font-size: 0.75rem; /* 12px floor for informative text */
}

.hk-module-account-menu .dropdown-item[b-vllg17clso] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--bs-border-radius);
    font-size: 0.8125rem;
}

.hk-module-account-menu .dropdown-item > .bi:first-child[b-vllg17clso] {
    color: var(--bs-secondary-color);
}

.hk-module-account-head[b-vllg17clso] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.625rem 0.5rem;
}

.hk-module-account-avatar[b-vllg17clso] {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.8125rem;
    font-weight: 650;
}

.hk-module-account-who[b-vllg17clso] {
    min-width: 0;
    line-height: 1.3;
}

.hk-module-account-name[b-vllg17clso] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-module-account-mail[b-vllg17clso] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

/* Opens in a new tab: the Open / view icon (design.md §9), quiet at the row's end. */
.hk-module-ext[b-vllg17clso] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* ---- Language, opened in place under its row --------------------------------------------------------------- */
.hk-module-lang > summary[b-vllg17clso] {
    list-style: none;
    cursor: pointer;
}

.hk-module-lang > summary[b-vllg17clso]::-webkit-details-marker {
    display: none;
}

.hk-module-lang > summary[b-vllg17clso]::marker {
    content: "";
}

.hk-module-lang-value[b-vllg17clso] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hk-module-lang-caret[b-vllg17clso] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hk-module-lang[open] .hk-module-lang-caret[b-vllg17clso] {
    transform: rotate(180deg);
}

.hk-module-lang-list[b-vllg17clso] {
    margin: 0 0 0.25rem 1.375rem;
    padding-left: 0.25rem;
    border-left: 1px solid var(--bs-border-color);
}

.hk-module-lang-list .dropdown-item.is-current[b-vllg17clso] {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

.hk-module-lang-flag[b-vllg17clso] {
    height: 0.875rem;
    width: auto;
}

/* design.md §11: 44 px tap targets where the pointer is a finger. */
@media (pointer: coarse) {
    .hk-module-account-toggle[b-vllg17clso],
    .hk-module-menu-item[b-vllg17clso],
    .hk-module-account-menu .dropdown-item[b-vllg17clso] {
        min-height: 2.75rem;
    }
}
/* /Components/Layout/ShopLayout.razor.rz.scp.css */
.hk-shop[b-9aewma4e3i] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bs-body-bg);
    /* Read by the page alerts (HkPageAlerts) and the sticky rails: they park below the header instead of over its
       cart and account icons. Header height (.hk-shop-topbar's min-height) + its border. */
    --hk-sticky-top: calc(4rem + 1px);
}

.hk-shop-header[b-9aewma4e3i] {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-shop-topbar[b-9aewma4e3i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.5rem 1.25rem;
}

.hk-shop-topbar-left[b-9aewma4e3i],
.hk-shop-icons[b-9aewma4e3i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-shop-icons[b-9aewma4e3i] {
    margin-left: auto;
}

.hk-shop-icon[b-9aewma4e3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    color: var(--bs-body-color);
    font-size: 1.25rem;
    text-decoration: none;
    position: relative;
}

.hk-shop-icon:hover[b-9aewma4e3i] {
    background: var(--bs-tertiary-bg);
}

.hk-shop-brand[b-9aewma4e3i] {
    display: inline-flex;
    align-items: center;
    margin: 0;
    text-decoration: none;
    color: var(--bs-body-color);
}

.hk-shop-logo[b-9aewma4e3i] {
    max-height: 2.75rem;
    max-width: 14rem;
    object-fit: contain;
}

.hk-shop-brand-text[b-9aewma4e3i] {
    font-size: 1.25rem;
    font-weight: 600;
}

.hk-shop-cart-quantity[b-9aewma4e3i] {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.1rem;
    text-align: center;
}

.hk-shop-cart-quantity-zero[b-9aewma4e3i] {
    display: none;
}

.hk-shop-navbar[b-9aewma4e3i] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-shop-nav[b-9aewma4e3i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-shop-nav-link[b-9aewma4e3i] {
    display: inline-block;
    padding: 0.75rem 0.9rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 500;
}

.hk-shop-nav-link:hover[b-9aewma4e3i] {
    color: var(--bs-primary);
}

.hk-shop-nav-label[b-9aewma4e3i] {
    padding: 0.75rem 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.hk-shop-nav-separator[b-9aewma4e3i] {
    width: 1px;
    height: 1.5rem;
    background: var(--bs-border-color);
}

.hk-shop-nav-sub[b-9aewma4e3i] {
    list-style: none;
    padding-left: 1rem;
}

.hk-shop-main[b-9aewma4e3i] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
}

.hk-shop-alert[b-9aewma4e3i] {
    margin-bottom: 1rem;
}

.hk-shop-footer[b-9aewma4e3i] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.hk-shop-offcanvas[b-9aewma4e3i] {
    --bs-offcanvas-width: 18rem;
}

.hk-shop-icon-text[b-9aewma4e3i] {
    width: auto;
    padding: 0 0.6rem;
    gap: 0.4rem;
    font-size: 1.1rem;
}

.hk-shop-icon-label[b-9aewma4e3i] {
    font-size: 0.9rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-shop-dropdown[b-9aewma4e3i] {
    min-width: 18rem;
}

.hk-shop-dropdown-sub[b-9aewma4e3i] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hk-shop-switch[b-9aewma4e3i] {
    min-width: 22rem;
}

.hk-shop-cart-budget-error[b-9aewma4e3i] {
    color: var(--bs-danger);
}

.hk-shop-cart-menu[b-9aewma4e3i] {
    min-width: 22rem;
}

.hk-shop-cart-items[b-9aewma4e3i] {
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    max-height: 18rem;
    overflow-y: auto;
}

.hk-shop-cart-items li[b-9aewma4e3i] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.hk-shop-cart-item-name[b-9aewma4e3i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-shop-cart-empty[b-9aewma4e3i] {
    color: var(--bs-secondary-color);
}

.hk-shop-cart-summary[b-9aewma4e3i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
}

.hk-shop-search[b-9aewma4e3i] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    min-width: 16rem;
}

.hk-shop-navbar-end[b-9aewma4e3i] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hk-shop-body[b-9aewma4e3i] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    align-items: flex-start;
}

.hk-shop-side[b-9aewma4e3i] {
    flex: 0 0 15rem;
    padding: 1.25rem 0.75rem 2rem 1.5rem;
}

.hk-shop-body .hk-shop-main[b-9aewma4e3i] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.hk-shop-content-header[b-9aewma4e3i] {
    margin-bottom: 1rem;
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* Vertical navigation tree. Plain block lists (no Bootstrap .nav / flex-wrap), native
   <details> disclosure. Bootstrap is used elsewhere for what it's good at; this small
   sheet is the bespoke piece Bootstrap doesn't model — a vertical nav tree.

   Colours read the --hk-nav-* pair with the light page values as fallback: the application and shop
   layouts render the tree on white and set nothing, the module shells (admin.css .hk-module-sidebar)
   set the pair for their dark rail. One tree, two grounds, no second stylesheet. */

.hk-sidebar-list[b-7ldsmdshr1] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hk-sidebar-children[b-7ldsmdshr1] {
    margin-left: 0.4rem;
    padding-left: 0.65rem;
    border-left: 1px solid var(--hk-nav-border, var(--bs-border-color));
}

/* Leaf links and group headers share the same row styling. */
.hk-sidebar-link[b-7ldsmdshr1],
.hk-sidebar-summary[b-7ldsmdshr1] {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    color: var(--hk-nav-text, var(--bs-body-color));
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

/* Remove the native <details> disclosure triangle (we use our own caret). */
.hk-sidebar-summary[b-7ldsmdshr1] {
    list-style: none;
}
.hk-sidebar-summary[b-7ldsmdshr1]::-webkit-details-marker {
    display: none;
}
.hk-sidebar-summary[b-7ldsmdshr1]::marker {
    content: "";
}

.hk-sidebar-link:hover[b-7ldsmdshr1],
.hk-sidebar-summary:hover[b-7ldsmdshr1] {
    background: var(--hk-nav-hover, var(--bs-tertiary-bg));
    color: var(--hk-nav-text-strong, var(--bs-body-color));
}

/* The "selected" style — background, weight and, on the dark rail, a 2px accent edge at the left so the
   current item reads from across the room. On white the accent is unset and the edge is not drawn. */
.hk-sidebar-link.active[b-7ldsmdshr1] {
    background: var(--hk-nav-active, var(--bs-secondary-bg));
    color: var(--hk-nav-text-strong, var(--bs-emphasis-color));
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--hk-nav-accent, transparent);
}

/* Icons sit a step quieter than their label, and light up with the row. */
.hk-sidebar-icon[b-7ldsmdshr1],
.hk-sidebar-caret[b-7ldsmdshr1] {
    color: var(--hk-nav-muted, inherit);
}

.hk-sidebar-link:hover .hk-sidebar-icon[b-7ldsmdshr1],
.hk-sidebar-summary:hover .hk-sidebar-icon[b-7ldsmdshr1],
.hk-sidebar-link.active .hk-sidebar-icon[b-7ldsmdshr1] {
    color: inherit;
}

.hk-sidebar-text[b-7ldsmdshr1] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-sidebar-icon[b-7ldsmdshr1] {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    margin-right: 0.55rem;
    text-align: center;
}

.hk-sidebar-icon-img[b-7ldsmdshr1] {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
}

.hk-sidebar-caret[b-7ldsmdshr1] {
    flex: 0 0 auto;
    margin-left: 0.35rem;
    font-size: 0.8125rem;
    transition: transform 0.15s ease;
}

.hk-sidebar-group[open] > .hk-sidebar-summary .hk-sidebar-caret[b-7ldsmdshr1] {
    transform: rotate(180deg);
}

.hk-sidebar-label[b-7ldsmdshr1] {
    display: block;
    padding: 0.85rem 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hk-nav-muted, var(--bs-secondary-color));
}

.hk-sidebar-divider[b-7ldsmdshr1] {
    margin: 0.5rem 0.25rem;
    border-color: var(--hk-nav-border, var(--bs-border-color));
    opacity: 1;
}
/* /Components/Orders/Dashboard/DashboardCard.razor.rz.scp.css */
/* The dashboard widget card: Bootstrap's card at the larger radius of the modernised dashboard look, with a quiet
   sentence-case title. Only what no utility expresses is here. */

.hk-dash-card[b-c90p0tcy1m] {
    container-type: inline-size;
    --bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-spacer-y: 1.125rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--hk-shadow-md);
}

/* A flex row lets its items shrink below their content only when told to, or the truncated title pushes the link out. */
.hk-dash-card-head[b-c90p0tcy1m],
.hk-dash-card-title[b-c90p0tcy1m] {
    min-width: 0;
}

/* The title in the emphasis colour beside its icon chip (issue 1893): the chip carries the family, the title the name. */
.hk-dash-card-title[b-c90p0tcy1m] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

/* The card's "Show all" sits beside the title, or at the foot of a card too narrow for both (issue 1893): a Small
   widget's title would otherwise be cut to make room for it. */
.hk-dash-card-more-foot[b-c90p0tcy1m] {
    display: none;
}

@container (max-width: 22rem) {
    .hk-dash-card-more[b-c90p0tcy1m] {
        display: none;
    }

    .hk-dash-card-more-foot[b-c90p0tcy1m] {
        display: inline-block;
        align-self: flex-start;
    }
}

/* A half-width card on a phone: the title wraps beside its chip rather than losing its end ("Ready to…"). */
@container (max-width: 12.5rem) {
    .hk-dash-card-title[b-c90p0tcy1m] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* A widget as a tile in the header band (issue 1893): a wash of white over the brand fill, the band's on-primary text.
   The band sets the text and link colours; the tile re-points the few Bootstrap parts a Small widget draws with,
   which set their own colours on their own element and so do not inherit them: the muted text utility, a meter's
   track and default bar, a list group's ground, and a sparkline's line (hk-chart.js reads --bs-primary off the chart). */

.hk-dash-tile[b-c90p0tcy1m] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem 1rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--hk-on-primary) 18%, transparent);
    border-radius: var(--bs-border-radius-xl);
    background: color-mix(in srgb, var(--hk-on-primary) 10%, transparent);
    --bs-secondary-rgb: var(--hk-on-primary-rgb);
}

.hk-dash-tile:has(.stretched-link:hover)[b-c90p0tcy1m] {
    background: color-mix(in srgb, var(--hk-on-primary) 16%, transparent);
}

.hk-dash-tile-title[b-c90p0tcy1m] {
    font-size: 0.8125rem;
    font-weight: 500;
    /* The band's full white: its 82% step is under AA (4.18:1) on the tile's wash at this size. */
    color: var(--hk-on-primary);
}

.hk-dash-tile-title a[b-c90p0tcy1m] {
    color: inherit;
    font-weight: inherit;
}

/* A link inside the tile stays clickable over the stretched title link. */
.hk-dash-tile[b-c90p0tcy1m]  a:not(.stretched-link) {
    position: relative;
    z-index: 2;
}

.hk-dash-tile[b-c90p0tcy1m]  .progress {
    height: 0.375rem;
    margin-top: auto;
    --bs-progress-bg: color-mix(in srgb, var(--hk-on-primary) 16%, transparent);
    --bs-progress-bar-bg: var(--hk-on-primary);
}

/* A late share on the brand fill: the danger red mixed light, as the danger text below, so it reads on the slate. */
.hk-dash-tile[b-c90p0tcy1m]  .progress.hk-dash-meter-late {
    --bs-progress-bar-bg: color-mix(in srgb, var(--bs-danger) 35%, var(--hk-on-primary));
}

.hk-dash-tile[b-c90p0tcy1m]  .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: inherit;
    --bs-list-group-border-color: color-mix(in srgb, var(--hk-on-primary) 18%, transparent);
}

/* Danger text (a late count, "2 at risk") turns a light red: the emphasis red is dark and vanishes on the slate. A tenth
   of the red keeps it AA on the tile's wash (4.6:1); more falls under. What sits on a light ground of its own — a pill,
   an icon chip, the error card's box — keeps the dark red, and the error card's own lines inherit it (text-reset). */
.hk-dash-tile[b-c90p0tcy1m]  .text-danger-emphasis:not([class*="bg-"]) {
    --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 10%, var(--hk-on-primary));
}

.hk-dash-tile[b-c90p0tcy1m]  .hk-chart {
    --bs-primary: var(--hk-on-primary);
}

/* On a phone a tile is the label, the number and its change: the caption, a chart and a meter wait for the card the
   user opens (issue 1893). A tile that is a list (To do's categories) keeps it — the list is all it has. The number
   steps down to fit half the phone. */
@media (max-width: 575.98px) {
    .hk-dash-tile[b-c90p0tcy1m] {
        padding: 0.75rem;
    }

    .hk-dash-tile[b-c90p0tcy1m]  .hk-dash-kpi > div > :not(.badge),
    .hk-dash-tile[b-c90p0tcy1m]  .hk-chart,
    .hk-dash-tile[b-c90p0tcy1m]  .progress {
        display: none;
    }

    .hk-dash-tile[b-c90p0tcy1m]  .hk-dash-kpi-value {
        font-size: 1.25rem;
    }
}
/* /Components/Orders/Dashboard/DashboardChip.razor.rz.scp.css */
/* A widget's icon chip (issue 1893), moved here from the card's sheet so the catalog draws the same one (issue 1908). */

.hk-dash-chip[b-d18zhdfz58] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.0625rem;
}

/* The analysis family has no Bootstrap tone: it borrows the palette's one purple (the planning screens' sequence
   marker), mixed as base.css mixes the status tones into their subtle ground and emphasis text. */
.hk-dash-chip-analysis[b-d18zhdfz58] {
    background: color-mix(in srgb, var(--hk-sequence) 12%, var(--hk-n-0));
    color: color-mix(in srgb, var(--hk-sequence) 65%, var(--hk-n-900));
}
/* /Components/Orders/Dashboard/DashboardEditBar.razor.rz.scp.css */
/* The customize-mode bar over a widget (issue 1868): the grip and the name on the left, the tools on the right. The tools
   wrap under the name on a Small widget, which is a quarter of the row. It is the head of the widget's dashed frame
   (issue 1893, OverviewData.razor.css), so it draws no box of its own. */

.hk-dash-edit-bar[b-amdhy5f5lx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.hk-dash-drag-handle[b-amdhy5f5lx] {
    cursor: grab;
    color: var(--bs-secondary-color);
}

.hk-dash-edit-title[b-amdhy5f5lx] {
    flex: 1 1 6rem;
    min-width: 0;
    font-weight: 600;
}

.hk-dash-edit-tools[b-amdhy5f5lx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: auto;
}
/* /Components/Orders/Dashboard/DashboardEmpty.razor.rz.scp.css */
/* A widget's empty state (issue 1893): the round chip and the sentence, centred in what is left of the card. */

.hk-dash-empty[b-v2qeqb2jel] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    text-align: center;
}

.hk-dash-empty-icon[b-v2qeqb2jel] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}
/* /Components/Orders/Dashboard/DashboardKpi.razor.rz.scp.css */
/* The headline number: large, tight and tabular so the digits of neighbouring cards line up; it never wraps, an
   amount split over two lines is two numbers. */

.hk-dash-kpi[b-ux3vjtgwl8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.hk-dash-kpi-value[b-ux3vjtgwl8] {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-emphasis-color);
}

/* A half-width card on a phone (issue 1893): the number steps down so an amount still fits on one line. */
@container (max-width: 12.5rem) {
    .hk-dash-kpi-value[b-ux3vjtgwl8] {
        font-size: 1.375rem;
    }
}
/* /Components/Orders/Dashboard/DashboardSkeleton.razor.rz.scp.css */
/* The loading blocks (issue 1893): the card's grey in the shapes of a number, a caption and a chart, breathing slowly
   so they read as "coming" rather than as an empty card. Still for anyone who asks for less motion. */

.hk-dash-skel[b-rwql312gbf] {
    display: block;
    border-radius: var(--bs-border-radius);
    background: var(--hk-n-100);
    animation: hk-dash-skel-breathe-b-rwql312gbf 1.6s ease-in-out infinite;
}

.hk-dash-skel-band .hk-dash-skel[b-rwql312gbf] {
    background: color-mix(in srgb, var(--hk-on-primary) 16%, transparent);
}

.hk-dash-skel-value[b-rwql312gbf] {
    width: 60%;
    height: 1.875rem;
}

.hk-dash-skel-line[b-rwql312gbf] {
    width: 40%;
    height: 0.75rem;
}

.hk-dash-skel-block[b-rwql312gbf] {
    width: 100%;
    height: 2.75rem;
    margin-top: 0.25rem;
}

.hk-dash-skel-chip[b-rwql312gbf] {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--bs-border-radius-lg);
}

.hk-dash-skel-title[b-rwql312gbf] {
    width: 7.5rem;
    height: 0.875rem;
}

/* The board's stand-in card: the widget card's shape (DashboardCard.razor.css). */
.hk-dash-skel-card[b-rwql312gbf] {
    --bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-spacer-y: 1.125rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--hk-shadow-md);
}

@keyframes hk-dash-skel-breathe-b-rwql312gbf {
    50% {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-dash-skel[b-rwql312gbf] {
        animation: none;
    }
}
/* /Components/Orders/Dashboard/DeliveriesTodayWidget.razor.rz.scp.css */
/* Deliveries today. The timeline is hour lines across the working day with one card per delivery, placed by its
   transport time and stacked in lanes the server worked out so no two cards overlap. The positions, the lane count and
   the card width are runtime values in inline styles; everything else is here. A card narrower than a readable day
   (the container query) shows the list instead. */

.hk-dlv-meter[b-f9ztzrqin5] {
    height: 0.375rem;
}

.hk-dlv-cq[b-f9ztzrqin5] {
    container-type: inline-size;
}

/* Its own display rather than d-flex: Bootstrap's utility outranks every rule, so the query below could not hide it. */
.hk-dlv-board[b-f9ztzrqin5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hk-dlv-list[b-f9ztzrqin5] {
    display: none;
}

@container (max-width: 40rem) {
    .hk-dlv-board[b-f9ztzrqin5] {
        display: none;
    }

    .hk-dlv-list[b-f9ztzrqin5] {
        display: block;
    }
}

.hk-dlv-tl[b-f9ztzrqin5] {
    --hk-dlv-lane-h: 3.25rem;
    position: relative;
    height: calc(1.5rem + var(--hk-dlv-lanes) * var(--hk-dlv-lane-h));
}

.hk-dlv-hour[b-f9ztzrqin5] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--bs-border-color);
}

.hk-dlv-hour-label[b-f9ztzrqin5] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.hk-dlv-hour-start .hk-dlv-hour-label[b-f9ztzrqin5] {
    transform: translateX(0.25rem);
}

.hk-dlv-hour-end .hk-dlv-hour-label[b-f9ztzrqin5] {
    transform: translateX(calc(-100% - 0.25rem));
}

.hk-dlv-now[b-f9ztzrqin5] {
    position: absolute;
    top: 1.25rem;
    bottom: 0;
    z-index: 1;
    border-left: 2px solid var(--bs-danger);
}

.hk-dlv-now-label[b-f9ztzrqin5] {
    position: absolute;
    bottom: 0;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-danger-text-emphasis);
    background: var(--hk-surface-raised);
}

.hk-dlv-card[b-f9ztzrqin5] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--hk-dlv-card-w);
    height: calc(var(--hk-dlv-lane-h) - 0.375rem);
    padding: 0.25rem 0.5rem;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.3;
    text-decoration: none;
    border-left: 3px solid currentColor;
    border-radius: var(--bs-border-radius);
}

/* A flex column's items shrink below their content only when told to, or the truncation never kicks in. */
.hk-dlv-card > span[b-f9ztzrqin5] {
    min-width: 0;
}

.hk-dlv-chip[b-f9ztzrqin5] {
    text-decoration: none;
    font-weight: 600;
}

.hk-dlv-dot[b-f9ztzrqin5] {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
}

.hk-dlv-time[b-f9ztzrqin5] {
    min-width: 2.75rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Orders/Dashboard/FlowBar.razor.rz.scp.css */
/* A thin bar: the flow is read by its numbers, the bar only shows the proportion. */

.hk-flow-bar[b-lwgw73hphi] {
    --bs-progress-height: 0.375rem;
}
/* /Components/Orders/Dashboard/FlowRows.razor.rz.scp.css */
/* A flow at Medium: one grid of rows, so the counts and the bars line up down the card. */

.hk-flow-rows[b-086zybbk1a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(4rem, 35%) minmax(3.5rem, auto);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.625rem;
}

/* A stage's four cells lie straight in the grid; the wrapper only keys the stage. */
.hk-flow-row[b-086zybbk1a] {
    display: contents;
}

/* The whole flow above the rows (issue 1893): a segment per stage, as wide as its count, in the stage's shade. */
.hk-flow-strip[b-086zybbk1a] {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.1875rem;
    height: 0.875rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    border-radius: var(--bs-border-radius-pill);
}

.hk-flow-strip > span[b-086zybbk1a],
.hk-flow-key[b-086zybbk1a] {
    background: color-mix(in srgb, var(--bs-info) var(--hk-flow-shade), var(--hk-n-0));
}

.hk-flow-strip > span[b-086zybbk1a] {
    flex-basis: 0;
}

.hk-flow-key[b-086zybbk1a] {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
}

/* On a phone the rows say it all; the strip above them steps out (issue 1893). A row is the stage, its count and its
   late count on one line and the bar under them across the card: four columns leave a long stage name no room. The
   dense flow lets the late count fill the first line beside the count, ahead of the bar. */
@media (max-width: 575.98px) {
    .hk-flow-strip[b-086zybbk1a] {
        display: none;
    }

    .hk-flow-rows[b-086zybbk1a] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-auto-flow: row dense;
        row-gap: 0.375rem;
    }

    .hk-flow-rows[b-086zybbk1a]  .hk-flow-bar {
        grid-column: 1 / -1;
        margin-bottom: 0.375rem;
    }

    .hk-flow-late[b-086zybbk1a] {
        grid-column: 3;
    }
}

/* A stage name longer than its column wraps inside it rather than running under the count. */
.hk-flow-name[b-086zybbk1a] {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Components/Orders/Dashboard/OccupancyTodayWidget.razor.rz.scp.css */
/* Occupancy today. The load bar is the occupancy board's (ProductionOccupancy.razor.css): a fill to the load in the
   strong tone of its band over the weak tone, the bands' tones the semantic tokens mixed with white. It is drawn here
   again because the board's sheet is scoped to that page; keep the two alike. */

.hk-occw-bar[b-en2f3huz5g] {
    display: block;
    padding: 0.125rem 0.375rem;
    border-radius: var(--bs-border-radius-sm);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--bs-body-color);
    background: linear-gradient(to right,
        var(--hk-occw-strong) var(--hk-occw-fill, 0%),
        var(--hk-occw-weak) var(--hk-occw-fill, 0%));
}

.hk-occw-ok[b-en2f3huz5g] {
    --hk-occw-strong: color-mix(in srgb, var(--bs-success) 55%, white);
    --hk-occw-weak: color-mix(in srgb, var(--bs-success) 16%, white);
}

.hk-occw-medium[b-en2f3huz5g] {
    --hk-occw-strong: color-mix(in srgb, var(--bs-warning) 55%, white);
    --hk-occw-weak: color-mix(in srgb, var(--bs-warning) 16%, white);
}

.hk-occw-high[b-en2f3huz5g] {
    --hk-occw-strong: color-mix(in srgb, var(--hk-accent) 55%, white);
    --hk-occw-weak: color-mix(in srgb, var(--hk-accent) 16%, white);
}

.hk-occw-over[b-en2f3huz5g] {
    --hk-occw-strong: color-mix(in srgb, var(--bs-danger) 55%, white);
    --hk-occw-weak: color-mix(in srgb, var(--bs-danger) 16%, white);
}

/* A process type's heading, as the board's phone layout heads its groups. */
.hk-occw-type[b-en2f3huz5g] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color);
}

/* Medium: the name and its bar in one row, the bars one width so the loads line up down the card. */
.hk-occw-row[b-en2f3huz5g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 40%);
    align-items: center;
    gap: 0.75rem;
    min-height: 1.75rem;
}

/* The bands' legend under the bars (issue 1893): a swatch in each band's strong tone and its range. */
.hk-occw-legend[b-en2f3huz5g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-occw-legend > li[b-en2f3huz5g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hk-occw-swatch[b-en2f3huz5g] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    background: var(--hk-occw-strong);
}
/* /Components/Orders/Dashboard/OnTimeWidget.razor.rz.scp.css */
/* The meter is thinner than Bootstrap's progress bar, and the week label keeps one width so the meters line up. */

.hk-dash-bar[b-t3vw2lh4bz] {
    height: 0.375rem;
}

.hk-dash-week[b-t3vw2lh4bz] {
    min-width: 4.5rem;
}

/* The rate as a ring at Small (issue 1893): the success green round to the share, the rest the meter's grey track,
   and a disc of the card's white over the middle. Drawn in CSS, so it needs no inline SVG (design.md §1). */
.hk-ontime-ring[b-t3vw2lh4bz] {
    flex: none;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--hk-surface-raised) 74%, transparent 75%),
        conic-gradient(var(--bs-success) var(--hk-ontime-share), var(--hk-n-100) 0);
}
/* /Components/Orders/Dashboard/OrderFlowWidget.razor.rz.scp.css */
/* The order flow at Large: the stages side by side, wrapping onto a second row on a narrow screen rather than squeezing
   a stage below its name. Medium is FlowRows. */

.hk-flow-stages[b-se2e0bljuo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.hk-flow-stage[b-se2e0bljuo] {
    min-width: 0;
}

.hk-flow-stage-count[b-se2e0bljuo] {
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
/* /Components/Orders/Dashboard/OrdersWidget.razor.rz.scp.css */
/* The orders per day at Small (issue 1893): a row of thin bars, as tall as the busiest day, in the economy family's
   brand tint so they stay quieter than the number above them. */

.hk-orders-bars[b-ryro4n6160] {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    height: 2.25rem;
}

.hk-orders-bars > span[b-ryro4n6160] {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0.1875rem 0.1875rem 0 0;
    background: color-mix(in srgb, var(--bs-primary) 30%, var(--hk-n-0));
}
/* /Components/Orders/Dashboard/OrderValueWidget.razor.rz.scp.css */
/* The chart legend's line swatches: the period's solid brand line and the previous period's dashed neutral one, as
   hk-chart.js draws them. */

.hk-dash-swatch[b-5j2prl90ga] {
    display: inline-block;
    width: 0.875rem;
    border-top: 2px solid var(--bs-primary);
}

.hk-dash-swatch-previous[b-5j2prl90ga] {
    border-top: 2px dashed var(--hk-n-400);
}
/* /Components/Orders/Dashboard/ProductionFlowWidget.razor.rz.scp.css */
/* The production flow at Large: a kanban whose columns wrap onto further rows, down to one column on a phone, rather
   than scrolling sideways. Medium is FlowRows, as the order flow's. */

.hk-pflow-board[b-wj8z7fxwga] {
    display: grid;
    /* Narrow enough that the six built-in stages share one row on a desktop's Large card. */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* A column is the tinted ground the work sits on, and each job a white surface on it (design.md §12, two grounds). */
.hk-pflow-col[b-wj8z7fxwga] {
    min-width: 0;
    background: var(--hk-surface-sunken);
}

.hk-pflow-card[b-wj8z7fxwga] {
    min-width: 0;
    gap: 0.125rem;
    background: var(--hk-surface-raised);
    box-shadow: var(--hk-shadow-xs);
}

/* A card's lines shrink so a long name truncates instead of widening the column. */
.hk-pflow-line[b-wj8z7fxwga] {
    min-width: 0;
}
/* /Components/Orders/Dashboard/RankList.razor.rz.scp.css */
/* A thin bar under each ranked row, and a share column of one width so the figures line up down the list. */

.hk-rank-bar[b-tscizux16c] {
    height: 0.375rem;
    /* The analysis family's purple (issue 1893); Bootstrap's own bar colour is a fixed blue, not a token. */
    --bs-progress-bar-bg: var(--hk-sequence);
}

/* A flex item shrinks below its content only when told to, or a long name pushes the figures out. */
.hk-rank-text[b-tscizux16c] {
    min-width: 0;
}

.hk-rank-share[b-tscizux16c] {
    min-width: 3rem;
    text-align: end;
}

/* The rank, in the analysis family's chip tint (DashboardCard.razor.css), so the list reads as the card's own. */
.hk-rank-badge[b-tscizux16c] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--hk-sequence) 12%, var(--hk-n-0));
    color: color-mix(in srgb, var(--hk-sequence) 65%, var(--hk-n-900));
}

/* A breakdown: the strip of its parts above the rows, and each row's key to it. */
.hk-rank-strip[b-tscizux16c] {
    display: flex;
    gap: 0.1875rem;
    height: 0.875rem;
    overflow: hidden;
    border-radius: var(--bs-border-radius-pill);
}

.hk-rank-strip > span[b-tscizux16c],
.hk-rank-key[b-tscizux16c] {
    background: color-mix(in srgb, var(--hk-sequence) var(--hk-rank-shade), var(--hk-n-0));
}

.hk-rank-strip > span[b-tscizux16c] {
    flex-basis: 0;
}

.hk-rank-key[b-tscizux16c] {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.1875rem;
}

/* On a phone the order of the rows is the rank; the badge steps out and gives the name its room (issue 1893). */
@media (max-width: 575.98px) {
    .hk-rank-badge[b-tscizux16c] {
        display: none;
    }
}
/* /Components/Orders/Dashboard/ToDoWidget.razor.rz.scp.css */
/* The inbox rows: a category chip, two lines of text that truncate rather than push the button out, the owner's
   initials. Only what no utility expresses is here; the colours are Bootstrap's subtle/emphasis pairs in the markup. */

.hk-todo-icon[b-84i6zq4xbs],
.hk-todo-owner[b-84i6zq4xbs] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
}

/* A row's category chip is the card head's chip in small (issue 1893): a step larger, rounded as it is (rounded-3). */
.hk-todo-icon[b-84i6zq4xbs] {
    width: 2rem;
    height: 2rem;
}

.hk-todo-owner[b-84i6zq4xbs] {
    font-size: 0.6875rem;
    font-weight: 600;
}

/* A flex item shrinks below its content only when told to, or a long customer name pushes the row's button out. */
.hk-todo-text[b-84i6zq4xbs] {
    min-width: 0;
}

/* On a narrow card the text needs the room: the age and the owner step out, as a table's lesser columns do
   (design.md §6). The title still says how late, and the order the row opens names who is responsible. */
.hk-todo-list[b-84i6zq4xbs] {
    container-type: inline-size;
}

@container (max-width: 26rem) {
    .hk-todo-age[b-84i6zq4xbs],
    .hk-todo-owner[b-84i6zq4xbs] {
        display: none;
    }
}

/* On a phone-wide card a row whose action opens its order opens by itself (issue 1893): the order link stretches over
   the row and a chevron says so, and the row's button steps out — two targets for one place in a short row are one too
   many for a thumb. A row whose action leads elsewhere keeps its button, or the phone loses that action (issue 1913). */
.hk-todo-list > li[b-84i6zq4xbs] {
    position: relative;
}

.hk-todo-chevron[b-84i6zq4xbs] {
    display: none;
}

@container (max-width: 24rem) {
    .hk-todo-opens-order .hk-todo-action[b-84i6zq4xbs] {
        display: none;
    }

    .hk-todo-opens-order .hk-todo-chevron[b-84i6zq4xbs] {
        display: inline-block;
    }

    .hk-todo-opens-order .hk-todo-open[b-84i6zq4xbs]::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}
/* /Components/Orders/Dialogs/AddProcessesDialog.razor.rz.scp.css */
/* Add processes: the search above a list of the processes by category. */

/* A surface on the dialog body's ground, as the price-override dialog's item list is. */
.hk-ap-list[b-84wunzvz9q] {
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* A category heads its processes as a group band: the sub-section grey an HkGrid band draws (design.md §6). */
.hk-ap-group-head[b-84wunzvz9q] {
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--hk-n-300);
}

.hk-ap-options[b-84wunzvz9q] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-ap-options > li[b-84wunzvz9q] {
    padding: 0.4375rem 0.75rem 0.4375rem 2.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-ap-options > li:first-child[b-84wunzvz9q] {
    border-top: 0;
}

.hk-ap-options > li:hover[b-84wunzvz9q] {
    background: var(--bs-tertiary-bg);
}

.hk-ap-options .form-check[b-84wunzvz9q] {
    margin: 0;
}

.hk-ap-name[b-84wunzvz9q] {
    font-weight: 600;
}

/* What the process is, under its name and a step back. */
.hk-ap-description[b-84wunzvz9q] {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}
/* /Components/Orders/Dialogs/Co2ResultDialog.razor.rz.scp.css */
/* CO₂ result panels. */

.hk-co2-panel[b-lps09pgjvn] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.hk-co2-panel.is-order[b-lps09pgjvn] {
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.hk-co2-head[b-lps09pgjvn] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.hk-co2-total[b-lps09pgjvn] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-success-text-emphasis);
    margin-bottom: 0.5rem;
}

.hk-co2-total span[b-lps09pgjvn] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-left: 0.375rem;
}

.hk-co2-value[b-lps09pgjvn] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    padding: 0.1875rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.hk-co2-num[b-lps09pgjvn] {
    white-space: nowrap;
    color: var(--bs-secondary-color);
}
/* /Components/Orders/Dialogs/ComparePrintersDialog.razor.rz.scp.css */
/* Compare printers dialog. */

.hk-cp-filter[b-gawalrgp62] {
    margin-bottom: 0.875rem;
}

.hk-cp-types[b-gawalrgp62] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* The press's name heads its row; the Current badge sits beside it. */
.hk-cp-name[b-gawalrgp62] {
    font-weight: 600;
    white-space: nowrap;
}

/* The job's own press: every other row is read against it, so it is set apart with the brand's faintest tint
   rather than the selection blue, which would say "picked" (design.md §6). */
.hk-cp-current > *[b-gawalrgp62] {
    background: var(--bs-primary-bg-subtle);
}

/* The difference against the current press, under its figure and a step smaller. The sign carries it; the text
   emphasis variants repeat it in colour (design.md §12 — the state tokens themselves do not clear AA as text). */
.hk-cp-diff[b-gawalrgp62] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.hk-cp-diff.is-better[b-gawalrgp62] {
    color: var(--bs-success-text-emphasis);
}

.hk-cp-diff.is-worse[b-gawalrgp62] {
    color: var(--bs-danger-text-emphasis);
}

.hk-cp-sheet[b-gawalrgp62] {
    white-space: nowrap;
}

.hk-cp-sheet-part[b-gawalrgp62] {
    margin-right: 0.375rem;
    font-weight: 600;
}

/* The presses that cannot take the job: a band one rank below the dialog, the sub-section grey an HkGrid group
   band draws (design.md §6). */
.hk-cp-group > th[b-gawalrgp62] {
    font-weight: 600;
    background: var(--hk-n-300);
}

/* Why the press cannot take the job, in place of its figures — a reason to read, so the danger emphasis. */
.hk-cp-reason[b-gawalrgp62] {
    color: var(--bs-danger-text-emphasis);
}

/* A press's parts, opened under its row on the table's own ground. */
.hk-cp-detail > td[b-gawalrgp62] {
    padding-top: 0;
    background: var(--hk-surface-sunken);
}

.hk-cp-parts[b-gawalrgp62] {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/ConfirmQuoteDialog.razor.rz.scp.css */
/* Confirm-quote item selection — table chrome comes from the shared .hk-table. */

/* The shared rule (base.css) right-aligns it; this cell also shares its line. */
.hk-table .hk-num input[b-7jdmv38ihc] {
    display: inline-block;
}
/* /Components/Orders/Dialogs/CreateCreditOrderDialog.razor.rz.scp.css */
/* Credit-order item selection — table chrome comes from the shared .hk-table. */

/* /Components/Orders/Dialogs/CreateFromWizardDialog.razor.rz.scp.css */
/* Create from wizard — no component-specific rules; the "nothing picked" message is a dialog alert. */
/* /Components/Orders/Dialogs/EditOrderItemDialog.razor.rz.scp.css */
/* Order-item dialog. */

.hk-price-type[b-nid9mm9z7g] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    align-items: center;
    min-height: calc(1.5em + .75rem + 2px);
}
/* /Components/Orders/Dialogs/EditPrintFileDialog.razor.rz.scp.css */
/* Print-file editor: one block per print part. The section headings are the
   shared .hk-subhead and the stacked fields the shared .hk-field (base.css §11). */

/* A checkbox sits under its caption like the text fields do, so the columns stay aligned. */
.hk-pf-check[b-2g6l9gjlbq] {
    justify-content: flex-start;
}

.hk-pf-check input[type="checkbox"][b-2g6l9gjlbq] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* The add-print-part picker — a single select, not an action bar. */
.hk-pf-addpart[b-2g6l9gjlbq] {
    margin-bottom: 0.75rem;
    max-width: 18rem;
}

.hk-pf-part-head[b-2g6l9gjlbq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.hk-pf-part-name[b-2g6l9gjlbq] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}

.hk-pf-warning[b-2g6l9gjlbq] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}
/* /Components/Orders/Dialogs/EditPrintPartDialog.razor.rz.scp.css */
/* Print-part dialog: the shared field set for add, edit and bulk edit. */

/* The stacked field itself is the shared .hk-field (base.css §11). */
.hk-epp-check[b-xr3fi2qhr4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
}

.hk-epp-message[b-xr3fi2qhr4] {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/JobReportingDialog.razor.rz.scp.css */
/* The reportable items' boxes sit in table cells, and an auto-laid-out table squeezes a form-control to
   nothing without a floor (design.md §6). */
.hk-jr-items .form-control[b-048gwhct6v],
.hk-jr-items .form-select[b-048gwhct6v] {
    min-width: 4.5rem;
}

.hk-jr-name[b-048gwhct6v] {
    min-width: 12rem;
}

.hk-jr-comment[b-048gwhct6v] {
    min-width: 14rem;
}
/* /Components/Orders/Dialogs/NewVersionsDialog.razor.rz.scp.css */
/* Job screen — the new-versions dialog. */

/* A count of copies is a short number; the form grid would stretch it across the dialog. */
.hk-nv-count[b-y7utejnei3] {
    max-width: 8rem;
}
/* /Components/Orders/Dialogs/OrderLogDialog.razor.rz.scp.css */
/* The message keeps its own line breaks, one change per line. */

.hk-log-message[b-lhhnzd8xz4] {
    white-space: pre-wrap;
}
/* /Components/Orders/Dialogs/PreflightDialog.razor.rz.scp.css */
/* Preflight dialog: the configuration and file picks, the overridable inputs, and the reports.
   The section headings are the shared .hk-subhead and the stacked fields the shared .hk-field. */

.hk-pfl-row[b-kv1m2nxd1f] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 2fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* The file picks are a short list, so they stay visible rather than hiding in a dropdown. */
.hk-pfl-files[b-kv1m2nxd1f] {
    max-height: 9rem;
    overflow-y: auto;
}

.hk-pfl-override[b-kv1m2nxd1f] {
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

.hk-pfl-override-name[b-kv1m2nxd1f] {
    font-weight: 600;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    color: var(--bs-emphasis-color);
}

.hk-pfl-actions[b-kv1m2nxd1f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.hk-pfl-message[b-kv1m2nxd1f] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
}

.hk-pfl-report[b-kv1m2nxd1f] {
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

.hk-pfl-report-file[b-kv1m2nxd1f] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}

.hk-pfl-label[b-kv1m2nxd1f] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    align-self: center;
}

.hk-pfl-response[b-kv1m2nxd1f] {
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.hk-pfl-response-head[b-kv1m2nxd1f] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.hk-pfl-response-name[b-kv1m2nxd1f] {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-pfl-response-description[b-kv1m2nxd1f],
.hk-pfl-response-message[b-kv1m2nxd1f] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-pfl-response-message[b-kv1m2nxd1f] {
    margin: 0.25rem 0 0;
}
/* /Components/Orders/Dialogs/PriceOverrideDialog.razor.rz.scp.css */
/* Price overrides: the price items beside the editor for the chosen one. */

.hk-po-body[b-r3ah3ep43t] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
}

/* The items, a surface on the dialog body's ground that scrolls on its own beside a long editor. */
.hk-po-list[b-r3ah3ep43t] {
    flex: 0 0 17rem;
    max-height: 28rem;
    overflow-y: auto;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* A process heads its items as a group band: the sub-section grey an HkGrid band draws (design.md §6). */
.hk-po-group[b-r3ah3ep43t] {
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--hk-n-300);
}

.hk-po-items[b-r3ah3ep43t] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-po-item[b-r3ah3ep43t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--bs-body-color);
    background: none;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
}

.hk-po-items > li:first-child > .hk-po-item[b-r3ah3ep43t] {
    border-top: 0;
}

.hk-po-item:hover[b-r3ah3ep43t] {
    background: var(--bs-tertiary-bg);
}

/* The chosen item: the selection blue every grid uses (design.md §6) — a grey read as switched off. */
.hk-po-item.is-selected[b-r3ah3ep43t] {
    font-weight: 600;
    background: var(--hk-row-selected-bg);
}

.hk-po-item-name[b-r3ah3ep43t] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hk-po-editor[b-r3ah3ep43t] {
    display: flex;
    flex: 1 1 26rem;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

/* The item's name, then the switch that decides whether this job overrides its price list, then — while it is
   off — the line saying why the prices below are greyed. */
.hk-po-item-head[b-r3ah3ep43t] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hk-po-item-title[b-r3ah3ep43t] {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-po-item-head > .form-switch[b-r3ah3ep43t] {
    margin: 0;
}

.hk-po-field[b-r3ah3ep43t] {
    max-width: 22rem;
}

/* The one way a half can be priced, stated where the choice would be. */
.hk-po-type[b-r3ah3ep43t] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Cost and price side by side, one under the other once there is not room for both. */
.hk-po-halves[b-r3ah3ep43t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem 1.5rem;
}

.hk-po-half[b-r3ah3ep43t] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hk-po-half > legend[b-r3ah3ep43t] {
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-po-types[b-r3ah3ep43t] {
    flex-wrap: wrap;
    align-self: flex-start;
}

.hk-po-steps[b-r3ah3ep43t] {
    font-size: 0.8125rem;
}

/* The step the job's quantity reaches — the one the calculation actually prices at. */
.hk-po-step-reached > td[b-r3ah3ep43t] {
    font-weight: 600;
    background: var(--bs-primary-bg-subtle);
}

/* Narrower than the two columns want: the list goes above the editor, and holds fewer rows at a time. */
@media (max-width: 991.98px) {
    .hk-po-list[b-r3ah3ep43t] {
        flex-basis: 100%;
        max-height: 14rem;
    }
}
/* /Components/Orders/Dialogs/PrintFileUploadDialog.razor.rz.scp.css */
/* Print-file upload chooser: the print-part picks, the store-original flag and the file button. */

.hk-upload-hint[b-wid3bkz9mz] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-upload-parts[b-wid3bkz9mz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.hk-upload-part[b-wid3bkz9mz] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
}

.hk-upload-part-name[b-wid3bkz9mz] {
    display: block;
    font-size: 0.875rem;
}

.hk-upload-part-description[b-wid3bkz9mz] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.hk-upload-flag[b-wid3bkz9mz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
}

.hk-upload-file[b-wid3bkz9mz] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.hk-upload-file-name[b-wid3bkz9mz] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-upload-message[b-wid3bkz9mz] {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/ProcessJobDialog.razor.rz.scp.css */
/* Process job — the flow's steps as a connected step list (design.md §12), the look of the job's Production list:
   the step's number in a disc in the left gutter, the step beside it, a line from each disc down to the next. */

.hk-pj-steps-block > .hk-form-label[b-umfnycfz24] {
    display: block;
    margin-bottom: 0.375rem;
}

.hk-pj-steps[b-umfnycfz24] {
    --hk-pj-disc: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-pj-step[b-umfnycfz24] {
    position: relative;
    display: grid;
    grid-template-columns: var(--hk-pj-disc) minmax(0, 1fr);
    column-gap: 0.625rem;
}

.hk-pj-step:not([hidden]) ~ .hk-pj-step:not([hidden])[b-umfnycfz24] {
    margin-top: 0.375rem;
}

/* Level with the step's header row, which is what the number labels. */
.hk-pj-step-number[b-umfnycfz24] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hk-pj-disc);
    height: var(--hk-pj-disc);
    margin-top: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--hk-on-primary);
    background: var(--bs-primary);
    border-radius: 50%;
}

/* The joining line, drawn under the discs; a step with no visible step after it draws none. */
.hk-pj-step:has(~ .hk-pj-step:not([hidden]))[b-umfnycfz24]::before {
    content: "";
    position: absolute;
    top: 0.4375rem;
    bottom: -0.375rem;
    left: calc(var(--hk-pj-disc) / 2 - 1px);
    width: 2px;
    background: var(--hk-n-300);
}

/* The step: a surface on the dialog body's tinted ground, its header the disclosure. */
.hk-pj-step-card[b-umfnycfz24] {
    min-width: 0;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.hk-pj-step-head[b-umfnycfz24] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 0;
    border-radius: inherit;
}

.hk-pj-step-head:hover[b-umfnycfz24] {
    background: var(--bs-secondary-bg);
}

.hk-pj-step-head[aria-expanded="true"][b-umfnycfz24] {
    border-bottom: 1px solid var(--bs-border-color);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.hk-pj-step-title[b-umfnycfz24] {
    flex: 0 0 auto;
    font-weight: 600;
}

/* What the step does — read in passing, never worth wrapping the row for. */
.hk-pj-step-description[b-umfnycfz24] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-pj-step-caret[b-umfnycfz24] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--bs-secondary-color);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hk-pj-step-head[aria-expanded="true"] .hk-pj-step-caret[b-umfnycfz24] {
    transform: rotate(180deg);
}

.hk-pj-step-body[b-umfnycfz24] {
    padding: 0.75rem;
}
/* /Components/Orders/Dialogs/ReleaseToProductionDialog.razor.rz.scp.css */
/* The check/uncheck-all control governs the job list below it, so it is separated
   from the individual rows rather than reading as the first of them. */

.hk-release-checkall[b-12lc9fo2st] {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
/* /Components/Orders/Dialogs/RouteJobDialog.razor.rz.scp.css */
/* Route job dialog. */

.hk-route-body[b-j92yodnqd9] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.hk-route-switches[b-j92yodnqd9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* The stacked field itself is the shared .hk-field (base.css §11). */
.hk-route-field[b-j92yodnqd9] {
    max-width: 28rem;
}

.hk-route-configuration[b-j92yodnqd9] {
    display: flex;
    gap: 0.375rem;
}

.hk-route-configuration select[b-j92yodnqd9] {
    flex: 1 1 auto;
}

.hk-route-result ul[b-j92yodnqd9] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/ScriptVariablesDialog.razor.rz.scp.css */
/* The script-variable read-out behind every "Show variables" (route job, print sheets, routing, calculation). */

.hk-vars-filter[b-n6393c61pb] {
    margin-bottom: 0.75rem;
}

/* The stacked field itself is the shared .hk-field (base.css §11). */
.hk-vars-field[b-n6393c61pb] {
    max-width: 18rem;
}

/* A long value must not push the dialog wider than it is. The cell is HkGrid's, hence ::deep. */
.hk-vars-grid[b-n6393c61pb]  .hk-vars-value {
    word-break: break-word;
}
/* /Components/Orders/Dialogs/SelectQuantityDialog.razor.rz.scp.css */
/* A pickable price-step row. Its hover and the selected blue are the shared .hk-table chrome (base.css §8). */
.hk-selectable[b-lf3upiku92] {
    cursor: pointer;
}

/* Selected: on top of the shared row-selection colour, an accent bar and the heavier weight — this list is a picker
   where the choice is the whole point of the dialog, so it is marked twice over. */
.hk-selectable.is-selected[b-lf3upiku92] {
    box-shadow: inset 3px 0 0 var(--hk-row-selected-border);
    font-weight: 600;
}
/* /Components/Orders/Dialogs/SelectWizardDialog.razor.rz.scp.css */
/* Update from wizard — the properties step's warning. */

.hk-sw-warning[b-9r7xhbyvi0] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--bs-danger);
}
/* /Components/Orders/Dialogs/SendOrderNotificationDialog.razor.rz.scp.css */
/* Send-notification email body. */

.hk-notify-body > .hk-form-label[b-v60sinopnd] {
    display: block;
    margin-bottom: 0.25rem;
}

/* The three modes share one height, so switching tab does not make the dialog jump. The editor is Radzen's
   element, outside this component's scope, so it needs ::deep like the preview frame. */
.hk-notify-body[b-v60sinopnd]  .hk-notify-editor,
.hk-notify-source[b-v60sinopnd],
.hk-notify-body[b-v60sinopnd]  .hk-preview-iframe {
    height: 22em;
    min-height: 0;
}

/* Source is read as written: no auto-growing (base.css field-sizing), no wrapping of long lines. */
.hk-notify-source[b-v60sinopnd] {
    field-sizing: fixed;
    white-space: pre;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/SendPreviewEmailDialog.razor.rz.scp.css */
/* Preview-email body — the same three modes SendOrderNotificationDialog gives its message. */

.hk-preview-mail-body > .hk-form-label[b-yiux19qqgk] {
    display: block;
    margin-bottom: 0.25rem;
}

/* The three modes share one height, so switching tab does not make the dialog jump. */
.hk-preview-mail-editor[b-yiux19qqgk],
.hk-preview-mail-source[b-yiux19qqgk],
.hk-preview-mail-body[b-yiux19qqgk]  .hk-preview-iframe {
    height: 22em;
    min-height: 0;
}

/* Source is read as written: no auto-growing (base.css field-sizing), no wrapping of long lines. */
.hk-preview-mail-source[b-yiux19qqgk] {
    field-sizing: fixed;
    white-space: pre;
    font-size: 0.8125rem;
}
/* /Components/Orders/Dialogs/SplitOrderDialog.razor.rz.scp.css */
/* Split-order flow selection. */

.hk-split-flow[b-swog0wj1d9] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-split-jobs[b-swog0wj1d9] {
    flex: 1;
    min-width: 0;
}

.hk-split-job[b-swog0wj1d9] {
    display: block;
    font-size: 0.8125rem;
    padding: 0.125rem 0;
}

.hk-split-dep[b-swog0wj1d9] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-warning-text-emphasis);
}
/* /Components/Orders/Dialogs/SupplierEmailDialog.razor.rz.scp.css */
/* Send-to-supplier email body. */

.hk-supplier-email-body > .hk-form-label[b-immwmt7q4y] {
    display: block;
    margin-bottom: 0.25rem;
}

/* The editor is Radzen's element, outside this component's scope; 25em as the RadEditor it replaces. */
.hk-supplier-email-body[b-immwmt7q4y]  .hk-supplier-email-editor {
    height: 25em;
    min-height: 0;
}
/* /Components/Orders/Dialogs/WizardPicker.razor.rz.scp.css */
/* The wizard list, shared by the two dialogs that pick one. Its chrome is HkGrid's; nothing of its own is needed. */
/* /Components/Orders/Sections/CustomerDashboard.razor.rz.scp.css */
/* Non-admin order dashboard: the columns are a Bootstrap row, the panels static HkSection cards and
   the order lists HkGrids. The one local rule is the KPI tile's icon chip box, which no utility sizes. */

.hk-cd-chip[b-t54v8jkefc] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
}
/* /Components/Orders/Sections/HkActivityOverride.razor.rz.scp.css */
/* One flow-activity override block — a subtle card that groups the activity's
   button / information / input overrides under the output flow. */

.hk-activity-override[b-mdmzmit66x] {
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

.hk-activity-override-header[b-mdmzmit66x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.hk-activity-title[b-mdmzmit66x] {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.hk-activity-description[b-mdmzmit66x] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-activity-revert[b-mdmzmit66x] {
    margin-left: auto;
    flex-shrink: 0;
}

/* Embedded in a host's step: no card of its own — the step is the frame — and the blocks one rhythm apart. */
.hk-activity-override-embedded[b-mdmzmit66x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hk-activity-override-actions[b-mdmzmit66x] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Orders/Sections/HkReleaseJobItem.razor.rz.scp.css */
/* One releasable job in the release-to-production dialog: a framed block on the dialog's tinted ground, a
   border rather than a fill doing the separating (design.md §12). */

.hk-release-item[b-ku89houa68] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.hk-release-warning[b-ku89houa68] {
    font-size: 0.8125rem;
    color: var(--bs-warning-text-emphasis);
    margin: 0.25rem 0;
}

.hk-release-ready[b-ku89houa68] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bs-success-text-emphasis);
    margin: 0.25rem 0;
}
/* /Components/Orders/Sections/JobAdditionalItems.razor.rz.scp.css */
/* The quantity, its unit and the padlock read as one control, so the group is capped rather than
   stretching to the column. */
.hk-ai-quantity[b-ca69yvdw9i] {
    max-width: 12rem;
    margin-left: auto;
}
/* /Components/Orders/Sections/JobGeneral.razor.rz.scp.css */
/* Job screen — the General section. */

/* The field grids are the shared ones (base.css §11) — the four-column one for the
   fields, a two-column one for the pair of notes. Nothing here overrides them. */

.hk-jg-eco-items[b-php56e4gva] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hk-jg-messages[b-php56e4gva] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

/* The thumbnail rides the section's top-right as a media object; the form keeps
   the left edge, so nothing indents for the image's full height. On narrow
   screens it wraps below the fields — where PrintJob.ascx also rendered it. */
.hk-jg-body[b-php56e4gva] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.hk-jg-fields[b-php56e4gva] {
    flex: 1 1 30rem;
    min-width: 0;
}

/* One rhythm between the blocks the column stacks — grid, eco labels, notes, rail. */
.hk-jg-fields > * + *[b-php56e4gva] {
    margin-top: 0.875rem;
}

.hk-jg-thumbnail[b-php56e4gva] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hk-jg-thumbnail img[b-php56e4gva] {
    max-width: 8rem;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

.hk-jg-thumbnail-button[b-php56e4gva] {
    padding: 0;
    border: 0;
    background: none;
}
/* /Components/Orders/Sections/JobPreflight.razor.rz.scp.css */
/* No local styles: the preflight list is an HkGrid and the rail above it comes
   from .hk-order-toolbar in wwwroot/css/base.css. */
/* /Components/Orders/Sections/JobPrice.razor.rz.scp.css */
/* Job screen — the Price section. */

/* The four override amounts on one row, as WebForms had them. The form grid's 14rem column minimum
   needs ~60rem for four, and the section lives in the job page's col-lg-5, so the row always broke in
   two. These fields hold a short number beside a unit and a padlock, so once the section is wide enough
   they share one row. 38.5rem is where the longest label, "Subsequent price (SEK)", still fits on one
   line; any narrower and it wraps and pushes its input below the others. The switch is a container query
   rather than a lower minimum alone, which would pass through three columns and leave the fourth field
   on a row by itself; below it the grid keeps its own minimum and steps down to two columns, then one,
   as before. */
.hk-price-fields[b-oulnbnulrw] {
    container-type: inline-size;
}

@container (min-width: 38.5rem) {
    .hk-price-fields > .hk-form-grid[b-oulnbnulrw] {
        --hk-form-col-min: 8rem;
    }
}

/* The CO2 read-out's totals above its grid. */
.hk-price-co2-totals[b-oulnbnulrw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}
/* /Components/Orders/Sections/JobPrintPartGrid.razor.rz.scp.css */
/* Job screen — the compact print-part grid. */

/* ── A version's row ──────────────────────────────────────────────────────────
   On the sunken ground under a full-strength rule, as a table's foot is (base.css §8): the break between two
   versions, while their parts keep the table's white. The ground stays while hovered, so the break never flickers. */
.hk-ppg-version-row > td[b-c0oqlz00tu],
.hk-ppg-table tbody > .hk-ppg-version-row:hover > td[b-c0oqlz00tu] {
    background: var(--hk-surface-sunken);
}

/* The rule is the bottom edge of the row above, so two lines never stack. */
.hk-ppg-table tbody > tr:has(+ .hk-ppg-version-row) > td[b-c0oqlz00tu] {
    border-bottom-color: var(--hk-n-300);
}

.hk-ppg-version-row .hk-ppg-version[b-c0oqlz00tu] {
    font-weight: 600;
}

/* What the version holds, read in passing. */
.hk-ppg-v-parts[b-c0oqlz00tu] {
    color: var(--bs-secondary-color);
}

/* A part of a version sits a step in from the version's name above it. */
.hk-ppg-in-version[b-c0oqlz00tu] {
    margin-left: 1rem;
    width: calc(100% - 1rem);
}

/* A row that selects on click (design.md §6). */
.hk-ppg-selectable[b-c0oqlz00tu] {
    cursor: pointer;
}

/* The typed boxes. A form-control is width:100%, which auto table layout is free to squeeze to nothing when a
   sibling column carries a long value — measured at 28px for the name beside a 253px media column. A floor keeps
   the name and version boxes usable (the table scrolls in that case, which design.md §6 reads as the row carrying
   more than the column it lives in can hold); the quantity is one width wherever it is typed. */
.hk-ppg-name[b-c0oqlz00tu],
.hk-ppg-version[b-c0oqlz00tu] {
    min-width: 8rem;
}

.hk-ppg-quantity[b-c0oqlz00tu] {
    width: 6.5rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Orders/Sections/JobPrintParts.razor.rz.scp.css */
/* Job screen — print-part cards. */

/* One part after another on the sub-section's body, a rule between them rather than a frame round each. */
.hk-pp-part + .hk-pp-part[b-kmueagzftn] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-pp-head[b-kmueagzftn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.hk-pp-title[b-kmueagzftn] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}

.hk-pp-summary[b-kmueagzftn] {
    margin-left: 0.625rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-pp-head-actions[b-kmueagzftn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hk-pp-process[b-kmueagzftn] {
    width: auto;
    min-width: 10rem;
}

/* The card's fields are the shared form grid (base.css §11); this is the link that sits under the print
   media select inside its row, so it only needs lifting off the control above it. */
.hk-pp-media-edit[b-kmueagzftn] {
    margin-top: 0.1875rem;
    font-size: 0.75rem;
}

.hk-pp-actions[b-kmueagzftn] {
    margin-top: 0.625rem;
}

/* ── The read-out ─────────────────────────────────────────────────────────────
   The page drawn to the part's proportions, then its facts in two columns beside it. */
.hk-pp-readout[b-kmueagzftn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    margin-bottom: 0.75rem;
}

.hk-pp-page-figure[b-kmueagzftn] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

/* A fixed square the page is fitted into, so a portrait and a landscape part take the same room and the facts
   beside them start at the same place. */
.hk-pp-page-frame[b-kmueagzftn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
}

/* The page: a sheet on the card, its sides from the inline aspect-ratio. Portrait fills the height, landscape
   the width, and the other side follows. */
.hk-pp-page[b-kmueagzftn] {
    height: 100%;
    max-width: 100%;
    background: var(--hk-surface-raised);
    border: 1px solid var(--hk-n-400);
    box-shadow: 2px 2px 0 var(--hk-n-300);
}

.hk-pp-page.is-landscape[b-kmueagzftn] {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.hk-pp-page-size[b-kmueagzftn] {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hk-pp-facts[b-kmueagzftn] {
    display: grid;
    flex: 1 1 18rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 1.5rem;
    min-width: 0;
    margin: 0;
}

.hk-pp-facts .hk-form-value[b-kmueagzftn] {
    overflow-wrap: anywhere;
}

/* One column of facts on a phone, where two would halve a media name. */
@media (max-width: 575.98px) {
    .hk-pp-facts[b-kmueagzftn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Opened, the toggle sits under the fields it closes. */
.hk-pp-edit:not([hidden]) + .hk-pp-toggle[b-kmueagzftn] {
    margin-top: 0.75rem;
}
/* /Components/Orders/Sections/JobPrintSheets.razor.rz.scp.css */
/* Job screen — the press-sheet (imposition) editor. */

/* The process name heads its block only in the section of its own; inside a process card the card's header names it. */
.hk-ps-process-name[b-bh72mhay1w] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* The switch beside the pack method sits level with the select, not with the label above it — the
   empty label WebForms put over the checkbox for the same reason. */
.hk-ps-check-row[b-bh72mhay1w] {
    align-self: end;
    padding-bottom: 0.375rem;
}

/* A media and its sheets, under a divider rather than in a box of their own: inside a press process they already
   sit in the process card inside the Production section, and a third frame with its own band read as a section
   within a section within a section. The media's name heads the group like the process fields' last row. */
.hk-ps-group[b-bh72mhay1w] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-ps-group-head[b-bh72mhay1w] {
    margin-bottom: 0.5rem;
}

.hk-ps-media[b-bh72mhay1w] {
    font-weight: 600;
}

/* The media's rail keeps whatever ground it lies on — the process card's (JobProcesses.razor.css) or the section
   body's (base.css §7) — and only needs the room below it. */
.hk-ps-group[b-bh72mhay1w] >  .hk-toolbar {
    margin: 0 0 0.75rem;
}

.hk-ps-sheet[b-bh72mhay1w] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.25rem;
}

.hk-ps-sheet + .hk-ps-sheet[b-bh72mhay1w] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Beside the preview: the sheet's figures, the waste breakdown and the toggle under them. */
.hk-ps-sheet-main[b-bh72mhay1w] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

/* The opened fields take the sheet's whole width under the preview and the figures, a rule above them. The
   fieldset between is display:contents, so its blocks are this column's own items and the gap spaces them. */
.hk-ps-sheet-fields[b-bh72mhay1w] {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* The figures stand in one column, level with the preview they describe. */
.hk-ps-facts[b-bh72mhay1w] {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The waste breakdown under the figures: a quiet disclosure, the text as the costing wrote it, line by line. */
.hk-ps-waste > summary[b-bh72mhay1w] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.hk-ps-waste-text[b-bh72mhay1w] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: pre-line;
}

/* The parts placed on the sheet: their caption, the table, and the add under it. */
.hk-ps-parts[b-bh72mhay1w] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* A picker in a cell keeps a usable width however the table's auto layout shares the row out (design.md §6). */
.hk-ps-part-select[b-bh72mhay1w] {
    min-width: 9rem;
}

.hk-ps-part-count[b-bh72mhay1w] {
    width: 5rem;
    min-width: 4rem;
    margin-left: auto;
}

/* Width and height share one caption, as they do on the print-part card. */
.hk-ps-pair[b-bh72mhay1w] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.hk-ps-times[b-bh72mhay1w] {
    color: var(--bs-secondary-color);
}

.hk-ps-properties[b-bh72mhay1w] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* The preview is what the sheet is, so it takes the room: up to about half the card, and never less than a
   size the parts on it can still be told apart at. */
.hk-ps-sheet-preview[b-bh72mhay1w] {
    display: flex;
    flex: 1 1 14rem;
    max-width: 24rem;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
}

/* The preview is the click target that opens the enlarged copy. */
.hk-ps-preview[b-bh72mhay1w] {
    width: 100%;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
}

.hk-ps-preview[b-bh72mhay1w]  svg {
    display: block;
    width: 100%;
    height: auto;
}

/* A sheet of known proportions (--hk-ps-ratio, width over height) is fitted into both the column's width and a
   height cap: a landscape sheet fills the column, while a portrait or roll sheet — a banner is metres long — stops
   at the cap and narrows to keep its shape, instead of growing as tall as the column is wide times its length. */
.hk-ps-preview.has-ratio[b-bh72mhay1w] {
    --hk-ps-preview-max-h: 18rem;
    width: min(100%, calc(var(--hk-ps-preview-max-h) * var(--hk-ps-ratio)));
    aspect-ratio: var(--hk-ps-ratio);
}

.hk-ps-preview.has-ratio[b-bh72mhay1w]  svg {
    height: 100%;
}

/* ── The imposition drawing ─────────────────────────────────────────────────
   ImpositionPreview.GenerateThemedPreviewSvg names each element by what it is (hk-imp-*); the colours are the
   page's, from the tokens, so the drawing sits in the design and follows a tenant's brand, while the WebForms
   page keeps its own palette from GeneratePreviewSvg. A stylesheet beats the fill and stroke attributes the
   drawing still carries as a fallback. The same rules colour the small preview and the enlarged one. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp {
    border: 1px solid var(--hk-n-400);
}

/* The sheet: paper, a pale cool tint that tells it from the grey chrome around it. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-sheet {
    fill: var(--bs-info-bg-subtle);
}

/* The press's unprintable edge: a faint amber band, a caution rather than an error. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-margin {
    fill: var(--bs-warning-bg-subtle);
    opacity: 1;
}

.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-bleed {
    fill: var(--hk-n-300);
}

/* The placed parts: white pages with a dark outline, the one thing on the sheet that must read at a glance. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-part {
    fill: var(--hk-surface-raised);
    stroke: var(--hk-n-600);
}

.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-fold {
    stroke: var(--bs-primary);
}

.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-grain {
    fill: var(--bs-info);
    opacity: 0.5;
}

.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-text {
    fill: var(--hk-n-500);
}

/* The edge a sheet-fed offset press takes in first: the full-strength amber of the margin band beside it. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-gripper {
    fill: var(--bs-warning);
}

/* The line a work-and-turn / work-and-tumble sheet backs up across; nothing may lie over it. */
.hk-ps-drawing[b-bh72mhay1w]  .hk-imp-mirror {
    stroke: var(--bs-danger);
}

/* A sheet whose imposition does not fit what it must carry. */
.hk-ps-preview-error[b-bh72mhay1w] {
    border-color: var(--bs-danger);
}

.hk-ps-sheet-actions[b-bh72mhay1w] {
    display: flex;
    gap: 0.375rem;
}

.hk-ps-preview-large[b-bh72mhay1w]  svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
}
/* /Components/Orders/Sections/JobProcesses.razor.rz.scp.css */
/* Job screen — the production processes. */

/* The override select sits in a rail, where base.css §5 sets width:auto — on a <select> that is the width of
   its longest option, so it keeps the cap the old wrapper gave it. */
.hk-jp-override-select[b-0jzbdidosp] {
    max-width: 22rem;
}

/* ── The sequence ─────────────────────────────────────────────────────────────
   A connected step list (design.md §12): the step's number in a disc in the left gutter, the process card
   beside it, and a line running from each disc down to the next, so the route reads as one path. */
.hk-jp-steps[b-0jzbdidosp] {
    --hk-jp-disc: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hk-jp-step[b-0jzbdidosp] {
    position: relative;
    display: grid;
    grid-template-columns: var(--hk-jp-disc) minmax(0, 1fr);
    column-gap: 0.75rem;
}

.hk-jp-step + .hk-jp-step[b-0jzbdidosp] {
    margin-top: 0.5rem;
}

/* Level with the card's header row, which is what the number labels. */
.hk-jp-step-number[b-0jzbdidosp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hk-jp-disc);
    height: var(--hk-jp-disc);
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--hk-on-primary);
    background: var(--bs-primary);
    border-radius: 50%;
}

/* The joining line: from this disc through the gap to the next step's disc; the discs are drawn over it. */
.hk-jp-step:not(:last-child)[b-0jzbdidosp]::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    bottom: -0.5rem;
    left: calc(var(--hk-jp-disc) / 2 - 1px);
    width: 2px;
    background: var(--hk-n-300);
}

/* One card per process, as ProcessControl's accordion item was: a header band that is the disclosure, then
   the body. A surface on the section body's ground (base.css §7), so the band reads as a band. */
.hk-jp-process[b-0jzbdidosp] {
    min-width: 0;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* The header is a <button> spanning the card, so the whole row toggles — as the accordion title did. */
.hk-jp-head[b-0jzbdidosp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 0;
    border-radius: inherit;
}

.hk-jp-head:hover[b-0jzbdidosp] {
    background: var(--bs-secondary-bg);
}

.hk-jp-head[aria-expanded="true"][b-0jzbdidosp] {
    border-bottom: 1px solid var(--bs-border-color);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* The category the process belongs to, the band it used to sit under: a fixed column of micro-caps, so the
   names line up down the sequence. */
.hk-jp-kind[b-0jzbdidosp] {
    flex: 0 0 8rem;
    min-width: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The scheduling bullet before the name — hollow until the process is planned; the status itself is on the name. */
.hk-jp-bullet[b-0jzbdidosp] {
    flex: 0 0 auto;
    font-size: 0.5rem;
    color: var(--bs-secondary-color);
}

/* Planned, it takes the moment's state on the scale the planning board draws its state stripe with
   (HkTimeline.razor.css), so a moment reads the same on the job as on the board. */
.hk-jp-bullet.is-notstarted[b-0jzbdidosp] { color: var(--hk-n-400); }
.hk-jp-bullet.is-started[b-0jzbdidosp]    { color: var(--bs-primary); }
.hk-jp-bullet.is-paused[b-0jzbdidosp]     { color: var(--bs-warning); }
.hk-jp-bullet.is-complete[b-0jzbdidosp]   { color: var(--bs-secondary-color); }
.hk-jp-bullet.is-canceled[b-0jzbdidosp]   { color: var(--bs-danger); }

.hk-jp-name[b-0jzbdidosp] {
    flex: 0 0 auto;
    font-weight: 600;
}

/* The property values behind the name — long, and never worth wrapping the row for. */
.hk-jp-summary[b-0jzbdidosp] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-jp-summary-entry + .hk-jp-summary-entry[b-0jzbdidosp]::before {
    content: ", ";
}

/* A labelled entry: the property name in the body weight, its value a step back — lblDetails' bold titles. */
.hk-jp-summary-entry > b[b-0jzbdidosp] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.hk-jp-summary-entry > b + span[b-0jzbdidosp] {
    margin-left: 0.25em;
}

/* The process's time and cost from the calculation, at the row's end where the eye runs down them. */
.hk-jp-figures[b-0jzbdidosp] {
    display: flex;
    flex: 0 0 auto;
    gap: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On a phone the category takes a line of its own above the name, rather than a third of a row that has no
   third to spare. */
@media (max-width: 575.98px) {
    .hk-jp-head[b-0jzbdidosp] {
        flex-wrap: wrap;
        row-gap: 0.125rem;
    }

    .hk-jp-kind[b-0jzbdidosp] {
        flex-basis: 100%;
    }
}

.hk-jp-caret[b-0jzbdidosp] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--bs-secondary-color);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hk-jp-head[aria-expanded="true"] .hk-jp-caret[b-0jzbdidosp] {
    transform: rotate(180deg);
}

/* The body stacks the rail, the field grids and — for a press process — the media; one rhythm between them. */
.hk-jp-body[b-0jzbdidosp] {
    padding: 0.75rem;
}

/* ::deep — the rail, the dynamic forms and the sheet editor's blocks are other components' roots. */
.hk-jp-body[b-0jzbdidosp] >  * + * {
    margin-top: 0.75rem;
}

/* The card is a surface of its own, so the rails in it go back to the tinted ground: base.css §7 turns a rail
   inside a section body white to contrast with that body's tint, and the card is not that tint. The ground and
   the contrast its children draw against move as a pair (base.css §5), so both are set. */
.hk-jp-body[b-0jzbdidosp]  .hk-toolbar {
    --hk-rail-bg: var(--hk-surface-sunken);
    --hk-rail-contrast: var(--hk-surface-raised);
}

.hk-jp-instructions p[b-0jzbdidosp] {
    margin: 0;
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

/* The switch at the rail's right end, level with the buttons beside it. */
.hk-jp-rail-check[b-0jzbdidosp] {
    margin: 0 0.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.hk-jp-purchaseorder[b-0jzbdidosp] {
    margin: 0;
    font-size: 0.8125rem;
}

/* A versioned job's print parts: a column per version, its name above its parts (#1762). */
.hk-jp-part-groups[b-0jzbdidosp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.hk-jp-part-group[b-0jzbdidosp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
}

.hk-jp-part-version[b-0jzbdidosp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
/* /Components/Orders/Sections/JobRoutingToolbar.razor.rz.scp.css */
/* Job screen — the routing toolbar. */

.hk-routing-field[b-j3ow79bw5g] {
    margin: 0;
    min-width: 12rem;
}

.hk-routing-messages[b-j3ow79bw5g] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}
/* /Components/Orders/Sections/JobVariableData.razor.rz.scp.css */
/* Job screen — the Variable data section. */

.hk-vdp-grid[b-44qms0jpyx] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
}

.hk-vdp-field > span[b-44qms0jpyx] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* What the run failed with. */
.hk-vdp-error > div[b-44qms0jpyx] {
    color: var(--bs-danger);
}

.hk-vdp-message[b-44qms0jpyx] {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-danger);
}
/* /Components/Orders/Sections/MultipleDeliveries.razor.rz.scp.css */
/* Delivery/order-item distribution matrix: one column per order item, one row per
   delivery. The matrix grows with the order, so it scrolls on its own rather than
   forcing the whole page sideways. The "Remaining quantity" summary is a <tfoot>,
   styled by the shared .hk-table. */

.hk-deliveries-matrix[b-avhflzi9rn] {
    overflow-x: auto;
}
/* /Components/Orders/Sections/OrderItems.razor.rz.scp.css */
/* No local styles: the order-items grid renders entirely from the shared
   .hk-table, .hk-actions and .hk-order-toolbar in wwwroot/css/base.css. */
/* /Components/Orders/Sections/OrderJobs.razor.rz.scp.css */
/* No local styles: the jobs list renders on the Radzen grid dressed by wwwroot/css/radzen-overrides.css §5
   (.hk-rz-grid), and its toolbar is the shared .hk-toolbar in wwwroot/css/base.css. Kept so the component has
   an obvious home if it ever needs one. */
/* /Components/Orders/Sections/OrderListingView.razor.rz.scp.css */
/* Shared chrome for every order-admin listing (Orders / Jobs / Processings /
   Purchase orders / Consignments). The head's counts and the empty state are Bootstrap
   utilities in the markup; the table and pager are styled by the HkGrid component. */

/* Record link in the first column (rendered by this component, so its scoped style applies
   even though the cell is rendered inside HkGrid). */
.hk-ol-link[b-z9forz1f60] {
    font-weight: 600;
    color: var(--bs-link-color);
    text-decoration: none;
}

/* A view's image column (WebForms' GridImageColumn). The configured image is a tenant asset of
   unknown size, so it is capped to the row's own height rather than allowed to set it. */
.hk-ol-cell-img[b-z9forz1f60] {
    max-height: 1.5rem;
    max-width: 100%;
    object-fit: contain;
}
/* /Components/Orders/Sections/OrderResources.razor.rz.scp.css */
/* Order attachments — the grid is the shared .hk-rz-grid, the row commands the shared .hk-actions
   buttons and the upload triggers HkFileUpload. Nothing of its own to style. */
/* /Components/Orders/Sections/OverviewData.razor.rz.scp.css */
/* The dashboard grid: twelve columns, a Small widget a quarter, Medium a half, Large the whole row. Below xl a Small
   widget takes half and the others the row — on a phone too (issue 1893): two numbers side by side halve the
   scrolling, and the number steps down to fit a half-width card (DashboardKpi.razor.css). A cell whose widget has
   nothing to show is empty and gives its place back. */

.hk-dash-grid[b-80udex02ln] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.125rem;
}

.hk-dash-cell[b-80udex02ln] {
    min-width: 0;
}

.hk-dash-cell:empty[b-80udex02ln] {
    display: none;
}

.hk-dash-s[b-80udex02ln] {
    grid-column: span 3;
}

.hk-dash-m[b-80udex02ln] {
    grid-column: span 6;
}

.hk-dash-l[b-80udex02ln] {
    grid-column: span 12;
}

@media (max-width: 1199.98px) {
    .hk-dash-s[b-80udex02ln] {
        grid-column: span 6;
    }

    .hk-dash-m[b-80udex02ln] {
        grid-column: span 12;
    }
}

/* The header band (issue 1893): the page's head drawn in the brand colour, holding the day, the greeting, the summary
   line, the period, Customize and the tabs. Everything inside reads in the on-primary colour; Bootstrap's text
   utilities and links take their colours from these variables, as the section band's do (base.css §7). */

.hk-dash-band[b-80udex02ln] {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.5rem 1.625rem 1.375rem;
    margin-bottom: 1.125rem;
    border-radius: var(--bs-border-radius-xl);
    background: var(--bs-primary);
    color: var(--hk-on-primary);
    --bs-body-color: var(--hk-on-primary);
    --bs-emphasis-color: var(--hk-on-primary);
    --bs-secondary-color: color-mix(in srgb, var(--hk-on-primary) 82%, transparent);
    --bs-link-color-rgb: var(--hk-on-primary-rgb);
    --bs-link-hover-color-rgb: var(--hk-on-primary-rgb);
}

.hk-dash-band-head[b-80udex02ln] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.hk-dash-band-intro[b-80udex02ln] {
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.hk-dash-band-day[b-80udex02ln] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.hk-dash-band-title[b-80udex02ln] {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hk-dash-band-actions[b-80udex02ln] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

/* The tabs as pills on the band: the open one white with the brand's text, the others outlined in a wash of white. */
.hk-dash-tabs .nav-pills[b-80udex02ln] {
    --bs-nav-link-color: var(--hk-on-primary);
    --bs-nav-link-hover-color: var(--hk-on-primary);
    --bs-nav-pills-link-active-bg: var(--hk-on-primary);
    --bs-nav-pills-link-active-color: var(--bs-primary);
}

.hk-dash-tabs .nav-link[b-80udex02ln] {
    border: 1px solid color-mix(in srgb, var(--hk-on-primary) 30%, transparent);
    border-radius: var(--bs-border-radius-pill);
}

.hk-dash-tabs-below[b-80udex02ln] {
    margin-bottom: 1rem;
}

.hk-dash-tabs-below .nav-link[b-80udex02ln] {
    border-radius: var(--bs-border-radius-pill);
}

@media (max-width: 575.98px) {
    .hk-dash-band[b-80udex02ln] {
        padding: 1.125rem 1rem 1rem;
    }

    .hk-dash-band-title[b-80udex02ln] {
        font-size: 1.5rem;
    }

    /* The period runs the full width under the greeting, a third of it each. */
    .hk-dash-band-actions[b-80udex02ln],
    .hk-dash-band-actions nav[b-80udex02ln],
    .hk-dash-band-actions .btn-group[b-80udex02ln] {
        width: 100%;
    }

    .hk-dash-band-actions .btn-group > .btn[b-80udex02ln] {
        flex: 1 1 0;
    }
}

/* Customise mode's rail (issue 1868), under the band: Save, Cancel and Add widget, the tab actions in its menu. */

.hk-dash-rail[b-80udex02ln] {
    margin-bottom: 1rem;
}

/* Customise mode. A widget with nothing to show leaves its body empty; the note after it says so, so the cell keeps
   a bar to move or remove it by. */

/* Each widget in one dashed frame with its tools at the head (issue 1893): the dash says "being arranged", and the
   widget under the tools is dimmed, since it is there to be recognised rather than read. */
.hk-dash-edit-frame[b-80udex02ln] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem 1rem;
    border: 2px dashed color-mix(in srgb, var(--bs-primary) 40%, var(--hk-n-0));
    border-radius: var(--bs-border-radius-xl);
    background: var(--hk-surface-raised);
}

.hk-dash-edit-body[b-80udex02ln] {
    flex: 1 1 auto;
    opacity: 0.6;
}

.hk-dash-edit-empty[b-80udex02ln] {
    display: none;
    margin: 0;
}

.hk-dash-edit-body:empty + .hk-dash-edit-empty[b-80udex02ln] {
    display: block;
}

.hk-dash-editing .hk-dash-cell[b-80udex02ln] {
    position: relative;
}

.hk-dash-dragging[b-80udex02ln] {
    opacity: 0.5;
}

/* Where a dragged widget will land (hk-dashboard.js): a bar on the side of the target it goes to — left or right in a
   row of smaller widgets, above or below one that spans the row. */

.hk-dash-drop-before[b-80udex02ln]::before,
.hk-dash-drop-after[b-80udex02ln]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--bs-primary);
}

.hk-dash-drop-before[b-80udex02ln]::before {
    left: -0.625rem;
}

.hk-dash-drop-after[b-80udex02ln]::after {
    right: -0.625rem;
}

.hk-dash-drop-row.hk-dash-drop-before[b-80udex02ln]::before,
.hk-dash-drop-row.hk-dash-drop-after[b-80udex02ln]::after {
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
}

.hk-dash-drop-row.hk-dash-drop-before[b-80udex02ln]::before {
    top: -0.625rem;
    bottom: auto;
}

.hk-dash-drop-row.hk-dash-drop-after[b-80udex02ln]::after {
    top: auto;
    bottom: -0.625rem;
}

/* The band's tiles (issue 1893): the tab's first Small widgets, as many to a row as fit at about 13rem each — four
   at desktop width — and two to a row on a phone. A tile whose widget has nothing to show gives its place back. */

.hk-dash-tiles[b-80udex02ln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.hk-dash-tile-cell[b-80udex02ln] {
    min-width: 0;
}

.hk-dash-tile-cell:empty[b-80udex02ln] {
    display: none;
}

@media (max-width: 575.98px) {
    .hk-dash-tiles[b-80udex02ln] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }
}

/* Customising the band (issue 1908): a line on how it works, each tile framed with its tools as a board widget is but
   in the band's light dash, and an empty slot that adds a number while the band has room. */

.hk-dash-band-hint[b-80udex02ln] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-dash-band-edit[b-80udex02ln] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    border: 2px dashed color-mix(in srgb, var(--hk-on-primary) 45%, transparent);
    border-radius: var(--bs-border-radius-xl);
}

.hk-dash-band-slot[b-80udex02ln] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 8rem;
    padding: 1rem;
    border: 2px dashed color-mix(in srgb, var(--hk-on-primary) 45%, transparent);
    border-radius: var(--bs-border-radius-xl);
    background: transparent;
    color: var(--hk-on-primary);
    font-weight: 500;
}

.hk-dash-band-slot:hover:not(:disabled)[b-80udex02ln],
.hk-dash-band-slot:focus-visible[b-80udex02ln] {
    background: color-mix(in srgb, var(--hk-on-primary) 10%, transparent);
}
/* /Components/Orders/Sections/PriceCalculationTable.razor.rz.scp.css */
/* The price-calculation breakdown. The WebForms control (.job-price-calculation in main.css) gives the
   figures their hierarchy with three banded levels and a total block set apart from them; the classes below
   are that same language, in tokens. */

.hk-price-calculation[b-tu1gus8qag] {
    font-size: 0.8125rem;
}

/* ── The bands ──────────────────────────────────────────────────────────────
   A top section is a filled band, its parts a quiet fill, the items themselves the plain surface. The
   WebForms band is a mid grey that carries its white text at 2.6:1; --hk-n-600 is the same weight of grey
   at 6.4:1, so the band keeps its role and the text clears AA. */
.hk-price-band[b-tu1gus8qag] {
    color: var(--hk-n-0);
    background: var(--hk-n-600);
}

.hk-price-level-1[b-tu1gus8qag] {
    background: var(--hk-surface-sunken);
}

.hk-price-level-2[b-tu1gus8qag] {
    background: var(--hk-surface-raised);
}

.hk-price-level-1 > td[b-tu1gus8qag],
.hk-price-level-2 > td[b-tu1gus8qag] {
    font-size: 0.75rem;
}

/* A section that opens on a click answers the pointer. */
.hk-price-togglable[b-tu1gus8qag] {
    cursor: pointer;
}

/* ── The total block ────────────────────────────────────────────────────────
   Its rows are top-level too, and carrying no band is what sets the sum apart from the sections it sums —
   so most of them need no rule at all. Two are drawn further: */

/* The calculated sum closes the sections above it. */
.hk-price-row-calculation > td[b-tu1gus8qag] {
    border-top: 2px solid var(--hk-n-400);
}

/* What the customer pays. */
.hk-price-row-total > td[b-tu1gus8qag] {
    font-weight: 650;
}

/* ── Values ─────────────────────────────────────────────────────────────────
   A value an operator has overridden, rather than one the engine produced. */
.hk-price-override[b-tu1gus8qag] {
    font-style: italic;
    color: var(--bs-warning-text-emphasis);
}

/* A contribution margin below the product type's minimum, or an overrun against the calculation. */
.hk-price-warning[b-tu1gus8qag],
.hk-price-warning-row > td[b-tu1gus8qag] {
    color: var(--bs-danger);
}

/* On the filled band neither marker has any contrast left, so both switch to a colour that reads there —
   the same move WebForms makes with its pale overrun red. The override keeps its italic either way. */
.hk-price-band > td.hk-price-warning[b-tu1gus8qag] {
    color: var(--bs-danger-bg-subtle);
}

.hk-price-band > td.hk-price-override[b-tu1gus8qag] {
    color: inherit;
}

/* The row carries the fill, so the shared hover tint (base.css §8) must not paint over it. A section that
   can be opened still reacts, tinted from its own text colour — which darkens the light rows and lightens
   the band, with no second set of colours to keep in step. */
.hk-price-calculation tbody tr:hover > td[b-tu1gus8qag] {
    background: transparent;
}

.hk-price-calculation tbody tr.hk-price-togglable:hover > td[b-tu1gus8qag] {
    background: color-mix(in srgb, currentColor 8%, transparent);
}
/* /Components/Orders/Sections/PrintFiles.razor.rz.scp.css */
/* Job screen — print files. Same grid look as the order-items table, which is scoped to its own component. */

.hk-printfile-flag[b-4ugn9ywy1y] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
}
/* /Components/Orders/Sections/ProcessingDetail.razor.rz.scp.css */
/* Canvas + inspector side by side; the inspector drops below the canvas on narrow screens. */
.hk-pd-flow-wrap[b-dolrefue4u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .hk-pd-flow-wrap[b-dolrefue4u] {
        grid-template-columns: 1fr;
    }
}

/* The "still running" note: a caption-sized spinner, which no Bootstrap size covers. */
.hk-pd-polling .spinner-border[b-dolrefue4u] {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.125rem;
}
/* /Components/Orders/Sections/ProcessingFlowInspector.razor.rz.scp.css */
/* The canvas's right-hand panel. Only the chrome no Bootstrap utility expresses lives here — the card
   itself, the counts strip and the severity-striped message cards; every colour is a token (design.md §12),
   so the panel follows a tenant's palette the way the status badges do. */
.hk-pfi[b-5qcf09t946] {
    display: flex;
    flex-direction: column;
    min-height: 430px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* The same uppercase band a section card's head carries, at panel scale. */
.hk-pfi-head[b-5qcf09t946] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-pfi-body[b-5qcf09t946] {
    padding: 0.75rem 0.875rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Machine-written names (activity ids, result names) read as code, not prose. */
.hk-pfi-sub[b-5qcf09t946] {
    font-family: var(--bs-font-monospace);
    word-break: break-word;
}

.hk-pfi-counts[b-5qcf09t946] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.hk-pfi-count[b-5qcf09t946] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    padding: 0.375rem 0.5625rem;
}

.hk-pfi-count b[b-5qcf09t946] {
    display: block;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.hk-pfi-count.hk-pfi-c-ok b[b-5qcf09t946] { color: var(--bs-success-text-emphasis); }
.hk-pfi-count.hk-pfi-c-warn b[b-5qcf09t946] { color: var(--bs-warning-text-emphasis); }
.hk-pfi-count.hk-pfi-c-err b[b-5qcf09t946] { color: var(--bs-danger-text-emphasis); }
.hk-pfi-count.hk-pfi-c-skip b[b-5qcf09t946] { color: var(--bs-secondary-color); }

.hk-pfi-msgs[b-5qcf09t946] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* A message card striped down its left edge with the severity it carries — the word beside the count
   above says which severity that is, so the stripe never carries the meaning alone. */
.hk-pfi-msg[b-5qcf09t946] {
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: var(--bs-border-radius-sm);
    padding: 0.4375rem 0.625rem;
}

.hk-pfi-msg .hk-pfi-ts[b-5qcf09t946] {
    font-family: var(--bs-font-monospace);
    display: block;
    margin-top: 0.1875rem;
}

.hk-pfi-msg.hk-pfi-m-ok[b-5qcf09t946] { border-left-color: var(--bs-success); }

.hk-pfi-msg.hk-pfi-m-warn[b-5qcf09t946] {
    border-left-color: var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}

.hk-pfi-msg.hk-pfi-m-err[b-5qcf09t946] {
    border-left-color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

.hk-pfi-empty[b-5qcf09t946] {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    padding: 0.625rem;
}
/* /Components/Orders/TvBoards/TvBoardView.razor.rz.scp.css */
/* A board read from across a room, on exactly one screen. Its type scales with the screen, so sizes are em against
   .hk-tvb — a deliberate departure from design.md §12's utilities-first rule: Bootstrap's fs-* utilities are rem-based
   and would stay desk-sized on a TV. The board is the viewport's height and clips; the grid shares what is left after
   the header out to the slots, and every widget fits itself into its slot instead of growing. It has no phone
   layout (design.md §11): a template is the layout of a wall display, and a narrow slot is handled where it matters,
   by the widgets' own container queries. */
.hk-tvb[b-fek27hn5ql] {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1em clamp(1rem, 2vw, 3rem);
    font-size: clamp(1rem, 0.3rem + 0.8vw, 2.25rem);
}

/* The company name and the clock are one headline: same size, same weight. */
.hk-tvb-headline[b-fek27hn5ql] {
    font-size: 2em;
    line-height: 1.2;
}

.hk-tvb-clock[b-fek27hn5ql] {
    font-variant-numeric: tabular-nums;
}

/* The board's announcement under the header reads from across the room too, a step under the headline. */
.hk-tvb-band-message[b-fek27hn5ql] {
    font-size: 1.5em;
    line-height: 1.25;
}

.hk-tvb-grid[b-fek27hn5ql] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 0.75em;
}

/* A slot is a size container, so a widget can ask how much room it was given rather than how big the screen is. */
.hk-tvb-slot[b-fek27hn5ql] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    container-type: size;
}

.hk-tvb-widget-error[b-fek27hn5ql] {
    height: 100%;
    justify-content: center;
}

/* In the editor the board fills a 16:9 frame (a width container) instead of the screen, and scales its type with
   the frame's width the way the wall scales it with the viewport's: 1.05% is what the clamp above gives a 1920 px
   screen, and the side padding is that screen's 2vw in em. */
.hk-tvb-preview[b-fek27hn5ql] {
    height: 100%;
    padding: 1em 1.9em;
    font-size: 1.05cqw;
}

/* An empty slot is blank on the wall; in the editor a dashed outline shows where it is. */
.hk-tvb-empty-slot[b-fek27hn5ql] {
    height: 100%;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* ── templates: one grid per key in TvBoardTemplates; the area names are the slot keys ── */

.hk-tvb-t-classic[b-fek27hn5ql] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 0.8fr) repeat(3, minmax(0, 2fr));
    grid-template-areas: "strip" "wide1" "wide2" "wide3";
}

.hk-tvb-t-kpi-two-columns[b-fek27hn5ql] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 5fr);
    grid-template-areas: "strip strip" "left right";
}

.hk-tvb-t-big-left[b-fek27hn5ql] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-areas: "large side1" "large side2" "large side3";
}

.hk-tvb-t-quadrants[b-fek27hn5ql] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-areas: "q1 q2" "q3 q4";
}

.hk-tvb-t-strip-one-list[b-fek27hn5ql] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 5fr);
    grid-template-areas: "strip" "main";
}

.hk-tvb-t-single[b-fek27hn5ql] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "main";
}
/* /Components/Orders/TvBoards/TvChartWidget.razor.rz.scp.css */
/* The section card fills its slot and hands its body's height to the chart, which fills it (HkChart Fill). Sizes are
   em against the board (TvBoardView.razor.css says why). */
.hk-tvb-chart[b-b43cnms4vc] {
    height: 100%;
}

.hk-tvb-chart[b-b43cnms4vc]  .hk-tvb-chart-section {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* The band's head is sized in rem by base.css §7; here it follows the board's scale. */
.hk-tvb-chart[b-b43cnms4vc]  .hk-order-section-head {
    font-size: 0.75em;
}

.hk-tvb-chart[b-b43cnms4vc]  .hk-order-section-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The chart is laid over its canvas rather than inside it: a percentage height down a chain of flex items is not
   always definite, and ApexCharts measures its element once to size the SVG. */
.hk-tvb-chart-canvas[b-b43cnms4vc] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.hk-tvb-chart-canvas[b-b43cnms4vc]  .hk-chart {
    position: absolute;
    inset: 0;
}

.hk-tvb-chart-empty[b-b43cnms4vc] {
    margin: 0;
    font-style: italic;
    color: var(--bs-secondary-color);
}
/* /Components/Orders/TvBoards/TvKpiRowWidget.razor.rz.scp.css */
/* The tiles share the slot's width and fill its height; the number scales with the tile, not the screen, so a
   strip and a quarter of the screen both read well. */
.hk-tvb-kpis[b-6xfl2x0gek] {
    height: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.75em;
}

.hk-tvb-kpi-body[b-6xfl2x0gek] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.6em 0.9em;
    container-type: size;
}

.hk-tvb-kpi-title[b-6xfl2x0gek] {
    font-size: 1.15em;
}

.hk-tvb-kpi-icon[b-6xfl2x0gek] {
    font-size: 1.6em;
    line-height: 1;
}

.hk-tvb-kpi-value[b-6xfl2x0gek] {
    font-size: clamp(1.5em, 40cqh, 4em);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hk-tvb-kpi-unit[b-6xfl2x0gek] {
    font-size: 0.95em;
}

/* In a slot that is taller than it is wide the tiles stack instead of lining up. */
@container (max-aspect-ratio: 1/1) {
    .hk-tvb-kpis[b-6xfl2x0gek] {
        grid-auto-flow: row;
        grid-auto-rows: minmax(0, 1fr);
    }
}
/* /Components/Orders/TvBoards/TvListWidget.razor.rz.scp.css */
/* A list row on a wall display, in em against the board (TvBoardView.razor.css says why). The frame around the rows
   is TvPagedSection's. */
.hk-tvb-row[b-q4vn72jbci] {
    padding: 0.4em 0.75em;
    border-radius: var(--bs-border-radius);
    background: var(--hk-surface-raised);
}

/* The heading line is the large one, the detail line under it smaller, as on the old board. */
.hk-tvb-row-main[b-q4vn72jbci] {
    font-size: 1.2em;
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr) 10em 8em;
    gap: 0.625em;
    align-items: baseline;
}

.hk-tvb-row-details[b-q4vn72jbci] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9375em;
    font-size: 0.8em;
}

/* base.css §12 sizes the badge in rem for a listing; on the board it follows the line it sits on. */
.hk-tvb-row[b-q4vn72jbci]  .hk-status-badge {
    font-size: 0.7em;
    font-weight: 600;
}

/* The id in the old board's colours. The state tokens themselves, not their -text-emphasis variants (design.md
   §12): the id is bold and at least 1.2em of a board whose type starts at 1rem, which is large text, where AA asks
   3:1 — and --bs-success, the weakest, gives 3.41:1. */
.hk-tvb-orderid[b-q4vn72jbci] {
    color: var(--bs-info);
    font-variant-numeric: tabular-nums;
}

.hk-tvb-orderid.red[b-q4vn72jbci] {
    color: var(--bs-danger);
}

.hk-tvb-orderid.green[b-q4vn72jbci] {
    color: var(--bs-success);
}

/* A narrow slot drops the side text first; the status stays, since it is what the board is read for. Measured
   against the list's own width (TvPagedSection's viewport), because a list in a quarter of a TV is as narrow as one
   on a laptop. */
@container (max-width: 34em) {
    .hk-tvb-row-main[b-q4vn72jbci] {
        grid-template-columns: 4em minmax(0, 1fr) auto;
    }

    .hk-tvb-owner[b-q4vn72jbci] {
        display: none;
    }
}
/* /Components/Orders/TvBoards/TvMessageWidget.razor.rz.scp.css */
/* An announcement is the board's largest text: twice the board's size (em, TvBoardView.razor.css says why), starting
   at the top of its area. The line breaks typed in the editor are kept; what does not fit is clipped, never scrolled. */
.hk-tvb-message[b-9ne1vye1lw] {
    overflow: hidden;
    font-size: 2em;
    line-height: 1.25;
}

.hk-tvb-message-text[b-9ne1vye1lw] {
    white-space: pre-line;
}
/* /Components/Orders/TvBoards/TvPagedSection.razor.rz.scp.css */
/* A paged widget on a wall display. Sizes are em against the board, which scales its type with the screen
   (TvBoardView.razor.css says why that departs from design.md §12's rem utilities). */
.hk-tvb-widget[b-d5lxe1xtnj] {
    height: 100%;
}

/* The section card fills its slot, and its body hands all the height it has to the viewport. */
.hk-tvb-widget[b-d5lxe1xtnj]  .hk-tvb-section {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* The band's head is sized in rem by base.css §7; here it follows the board's scale. */
.hk-tvb-widget[b-d5lxe1xtnj]  .hk-order-section-head {
    font-size: 0.75em;
}

.hk-tvb-widget[b-d5lxe1xtnj]  .hk-order-section-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A width container, so a row can drop a column when its slot is narrow rather than when the screen is. */
.hk-tvb-viewport[b-d5lxe1xtnj] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    container-type: inline-size;
}

.hk-tvb-rows[b-d5lxe1xtnj] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.hk-tvb-probe[b-d5lxe1xtnj] {
    position: absolute;
    inset: 0 0 auto 0;
    visibility: hidden;
}

.hk-tvb-empty[b-d5lxe1xtnj] {
    margin: 0;
    padding: 0.4em 0.75em;
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* A widget with more than one page slides each page in. */
.hk-tvb-turns[b-d5lxe1xtnj] {
    animation: hk-tvb-page-in-b-d5lxe1xtnj 0.5s ease-out;
}

@keyframes hk-tvb-page-in-b-d5lxe1xtnj {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-tvb-turns[b-d5lxe1xtnj] {
        animation: none;
    }
}
/* /Components/Orders/TvBoards/TvProcessStatusWidget.razor.rz.scp.css */
/* A process row on a wall display, in em against the board (TvBoardView.razor.css says why). */
.hk-tvb-process[b-cioipj80dq] {
    padding: 0.4em 0.75em;
    border-radius: var(--bs-border-radius);
    background: var(--hk-surface-raised);
}

.hk-tvb-process-head[b-cioipj80dq] {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-size: 1.2em;
}

.hk-tvb-process-current[b-cioipj80dq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4em, 12em) auto;
    align-items: center;
    gap: 0.75em;
}

.hk-tvb-process-bar[b-cioipj80dq] {
    height: 0.7em;
}

.hk-tvb-process-share[b-cioipj80dq] {
    font-variant-numeric: tabular-nums;
}

.hk-tvb-process-next[b-cioipj80dq] {
    font-size: 0.8em;
}

/* base.css §12 sizes the badge in rem for a listing; on the board it follows the line it sits on. */
.hk-tvb-process[b-cioipj80dq]  .hk-status-badge {
    font-size: 0.7em;
    font-weight: 600;
}
/* /Components/Orders/TvBoards/TvProgressWidget.razor.rz.scp.css */
/* The share scales with the tile it sits in (a size container), so a strip and a quarter of the screen both read. */
.hk-tvb-progress[b-ucqh8kocfg] {
    background: var(--hk-surface-raised);
}

.hk-tvb-progress-body[b-ucqh8kocfg] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3em;
    padding: 0.6em 0.9em;
    container-type: size;
}

.hk-tvb-progress-title[b-ucqh8kocfg] {
    font-size: 1.15em;
}

.hk-tvb-progress-value[b-ucqh8kocfg] {
    font-size: clamp(1.5em, 35cqh, 4em);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hk-tvb-progress-bar[b-ucqh8kocfg] {
    height: 0.8em;
}

.hk-tvb-progress-caption[b-ucqh8kocfg] {
    font-size: 0.95em;
}
/* /Components/Pages/Admin/Landing.razor.rz.scp.css */
.hk-adm-landing-row[b-blm673v1qq] {
    max-width: 72rem;
}
/* /Components/Pages/Orders/CompleteDelivery.razor.rz.scp.css */
/* The consignment detail beside the table (CompleteDeliveryConsignment), styled from here through ::deep so the page
   keeps one sheet. Its blocks sit in this wrapper, not straight in the section body, so base.css's flow rule between
   a body's blocks never reached them and the sub-sections touched: the same rhythm here. Counted from the first block
   that shows something, so the alerts' live region, empty most of the time, adds no space. Three classes' weight, to
   win over the sub-section's own zero margin. */
.hk-cd-detail[b-mansntviu4]  > :not(:empty) ~ * {
    margin-top: 0.75rem;
}

/* A panel beside the list: the form grids' column floor (14rem) left the transport fields two across; three fit at 10rem. */
.hk-cd-detail[b-mansntviu4]  .hk-form-grid {
    --hk-form-col-min: 10rem;
}

/* The recipient in two short lines under the title, set off from the transport below by the same hairline the items
   and packages blocks draw. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-recipient {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Items and packages: a block under a hairline with a small heading line — its title, summary and few actions —
   instead of a framed sub-section (see the component's note). */
.hk-cd-detail[b-mansntviu4]  .hk-cd-block {
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-block-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-block-summary {
    color: var(--bs-secondary-color);
}

/* An item is one line, as in WebForms — include, quantity, name and job, location, HS code — wrapping only where the
   panel is narrow; no table to scroll sideways. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-order {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.375rem 0;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item + .hk-cd-item {
    border-top: 1px solid var(--bs-border-color);
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item .hk-cd-quantity {
    width: 8.5rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item-name {
    flex: 1 1 10rem;
    min-width: 0;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item .hk-cd-hs {
    flex: 0 1 9rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-item-note {
    flex-basis: 100%;
}

/* Packages and pallet rows as WebForms drew them: a light frame per box, close under one another, then the pallet
   switch. The list is the container the box grids measure, so they follow the panel, not the viewport. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-packages {
    container: hk-cd-packages / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-packages > .alert {
    margin: 0;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-packages > .form-check {
    margin: 0;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-package {
    min-width: 0;
    margin: 0;
    padding: 0.625rem 0.75rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* A pallet row's name and commands; packages have none (their remove command ends the first row). Floated as
   Bootstrap's reboot leaves a legend, so it stays inside the frame instead of cutting into its top line. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-package-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Five columns in every box, fixed rather than the form grid's own count, so the rows keep their shape in the panel: the wide fields span three and the short ones two, over a last row of five measures. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-package-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-span-2 {
    grid-column: span 2;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-span-3 {
    grid-column: span 3;
}

/* A control with the package's remove command after it. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-with-remove {
    display: flex;
    gap: 0.5rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-with-remove > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Five measures of 6rem, their gaps and the frame no longer fit: three columns, the wide fields a row of their own. */
@container hk-cd-packages (max-width: 37rem) {
    .hk-cd-detail[b-mansntviu4]  .hk-cd-package-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Nor three: a field per row. */
@container hk-cd-packages (max-width: 22rem) {
    .hk-cd-detail[b-mansntviu4]  .hk-cd-package-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hk-cd-detail[b-mansntviu4]  .hk-cd-span-2,
    .hk-cd-detail[b-mansntviu4]  .hk-cd-span-3 {
        grid-column: auto;
    }
}

/* Editable cells: an auto-layout table squeezes a form control to nothing without a floor (design.md §6). */
.hk-cd-detail[b-mansntviu4]  .hk-cd-quantity {
    flex-wrap: nowrap;
    min-width: 8.5rem;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-hs {
    min-width: 7rem;
}

/* The recipient: name, address and orders on a line each, cut with an ellipsis (the line's tooltip holds it whole), so
   every consignment is a row of the same height. Width 100% with max-width 0 is the table's way of giving a column
   what the others leave without letting its text widen the table. */
.hk-cd-list[b-mansntviu4]  .hk-cd-recipient-col {
    width: 100%;
    max-width: 0;
}

/* The band of the consignments delivered without a booking: tinted as ProduceProcesses tints "Past due"
   (bg-danger-subtle), so a consignment nobody books stands out. The name says what it is; the tint only draws the eye.
   HkGrid draws the band, so the band's own header content marks it. */
.hk-cd-list[b-mansntviu4]  tr.hk-grid-group:has(.hk-cd-band-nobooking) > td {
    background-color: var(--bs-danger-bg-subtle);
}

.hk-cd-list[b-mansntviu4]  .hk-cd-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The run's options in the page rail (see the rail's note): a label beside its control, at the rail's small size, with
   a small button's side padding so they stand apart as the buttons do. */
.hk-cd-rail-option[b-mansntviu4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.hk-cd-rail-option .form-select[b-mansntviu4] {
    width: auto;
}

.hk-cd-rail-documents[b-mansntviu4] {
    min-width: 14rem;
}
/* /Components/Pages/Orders/IncomingDelivery.razor.rz.scp.css */
/* The lines measure themselves against the section, not the viewport (design.md §6): a container. Its layout
   containment also makes it the containing block of the hidden labels and the hidden header, so they stay
   inside its scroll box — a hidden label that escaped it once widened the whole page to wherever its cell sat. */
.hk-incoming-wrap[b-b7au2b2p3r] {
    container: hk-incoming / inline-size;
}

/* The lines table lays out automatically, which squeezes a form-control to nothing: give each cell control a floor. */
.hk-incoming-lines .form-control[b-b7au2b2p3r],
.hk-incoming-lines .form-select[b-b7au2b2p3r] {
    min-width: 7rem;
}

.hk-incoming-lines .hk-incoming-quantity[b-b7au2b2p3r] {
    min-width: 5.5rem;
}

/* The date picker is Radzen's markup, so the floor above does not reach it; this one fits a date beside its
   clear and calendar buttons. */
.hk-incoming-lines[b-b7au2b2p3r]  .rz-datepicker {
    min-width: 9rem;
}

/* The name is the only free text in the row; without a floor every control's took its room. */
.hk-incoming-name[b-b7au2b2p3r] {
    min-width: 10rem;
}

/* A field's label, hidden while the lines are a table (the column header says it) and shown on a card. Not
   Bootstrap's visually-hidden: every property of that is marked important, so a card could not lift it. */
.hk-incoming-label[b-b7au2b2p3r] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Cards ──
   Below the width all ten columns need (measured 1390px with the Norwegian headers, the widest; Swedish 1355,
   English 1381), each line is a card on the section's tinted body: the item number and name on top, then the
   read-outs and the fields in even rows — eight columns, four, then two on a phone. A field's label sits above
   it, as in the form grid. A very long item number or warehouse name can still widen the table past the
   breakpoint; it then scrolls inside its own box, and the page stays put. */
@container hk-incoming (max-width: 89.99rem) {
    .hk-incoming-lines[b-b7au2b2p3r],
    .hk-incoming-lines tbody[b-b7au2b2p3r] {
        display: block;
        background: none;
    }

    .hk-incoming-lines thead[b-b7au2b2p3r] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .hk-incoming-lines tbody tr[b-b7au2b2p3r] {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
        background: var(--hk-surface-raised);
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .hk-incoming-lines tbody tr + tr[b-b7au2b2p3r] {
        margin-top: 0.5rem;
    }

    .hk-incoming-lines td[b-b7au2b2p3r],
    .hk-incoming-lines tbody tr:hover > td[b-b7au2b2p3r] {
        display: block;
        min-width: 0;
        padding: 0;
        text-align: left;
        white-space: normal;
        background: none;
        border: 0;
    }

    .hk-incoming-lines .form-control[b-b7au2b2p3r],
    .hk-incoming-lines .form-select[b-b7au2b2p3r],
    .hk-incoming-lines[b-b7au2b2p3r]  .rz-datepicker {
        min-width: 0;
    }

    .hk-incoming-lines .hk-incoming-name[b-b7au2b2p3r] {
        grid-column: 2 / -1;
        font-weight: 600;
    }

    /* A line without an item number: the name takes the whole top row instead of leaving a hole. */
    .hk-incoming-lines .hk-incoming-item:empty[b-b7au2b2p3r] {
        display: none;
    }

    .hk-incoming-lines .hk-incoming-item:empty + .hk-incoming-name[b-b7au2b2p3r] {
        grid-column: 1 / -1;
    }

    .hk-incoming-lines .hk-incoming-note[b-b7au2b2p3r] {
        grid-column: 1 / -1;
    }

    /* A read-out's value centred in the height its neighbours' controls take, so it reads on their line. */
    .hk-incoming-lines .hk-incoming-readout[b-b7au2b2p3r] {
        display: grid;
        grid-template-rows: auto 1fr;
        align-items: center;
    }

    .hk-incoming-label[b-b7au2b2p3r] {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0 0 0.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}

@container hk-incoming (max-width: 67.99rem) {
    .hk-incoming-lines tbody tr[b-b7au2b2p3r] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container hk-incoming (max-width: 33.99rem) {
    .hk-incoming-lines tbody tr[b-b7au2b2p3r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hk-incoming-lines .hk-incoming-item[b-b7au2b2p3r],
    .hk-incoming-lines .hk-incoming-name[b-b7au2b2p3r] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Orders/OrderAdminOverview.razor.rz.scp.css */
/* No local styles: the page header and access-denied state render from the shared
   .hk-page-head and .hk-state in wwwroot/css/base.css. The data section carries its
   own sheet, because scoped CSS does not cross component boundaries. */
/* /Components/Pages/Orders/ProduceProcesses.razor.rz.scp.css */
/* The status-action rail keeps one button's height even when the selection allows no action, so the
   view below does not move when the selection changes. Inherits the rail's own flex layout. */
/* Deliberate departure from design.md §3, which makes every rail button quiet — transparent border,
   tinted on hover. That is right for a row of actions, where the icons and words carry the meaning and an
   outline each would be noise. This is not that: it is a segmented control, and the segments the planner
   has NOT chosen are the only thing saying the other views exist. Four borderless words read as a
   sentence. The range control below it keeps its outlines purely because it sits outside the rail, so
   this also stops one page from drawing the same kind of control two ways. */
.hk-pp-views .btn-outline-secondary[b-r4q9k9ofau] {
    --bs-btn-border-color: var(--bs-border-color);
}

/* A rail check puts its box a small gap from its label (base.css §5), about what the rail leaves between one
   control and the next — so three of them in a row would read as three labels each paired with the box to
   its right. A wider outer gap settles which belongs to which; nothing else in this rail is a .form-check. */
.hk-toolbar .form-check[b-r4q9k9ofau] {
    margin-left: 0.5rem;
}

.hk-pp-actions[b-r4q9k9ofau] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 1.9375rem;
}

/* The status rail's plain buttons keep the outline btn-outline-secondary has everywhere outside a rail
   (base.css §4), instead of the rail's quiet treatment — they sit beside filled buttons and have to read as
   buttons too. The values are §4's own. */
.hk-pp-actions[b-r4q9k9ofau]  .btn-outline-secondary {
    --bs-btn-color: var(--hk-n-700);
    --bs-btn-border-color: var(--hk-n-300);
    --bs-btn-bg: var(--hk-n-0);
    --bs-btn-hover-bg: var(--hk-n-100);
    --bs-btn-hover-border-color: var(--hk-n-400);
    --bs-btn-disabled-border-color: var(--hk-n-200);
}

/* The filter switches: one cell of the form grid, two columns wide, split three ways. Each switch is a field
   of its own — the label on the label line, the box centred on the control line beside the fields of the
   same row. On a phone the grid may be down to one column, where a span of two would add a column, so the
   cell takes the whole row instead. */
.hk-form-grid > .hk-pp-filter-checks[b-r4q9k9ofau] {
    grid-column: span 2;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--hk-form-gap-x);
}

@media (max-width: 575.98px) {
    .hk-form-grid > .hk-pp-filter-checks[b-r4q9k9ofau] {
        grid-column: 1 / -1;
    }
}

.hk-form-grid > .hk-pp-filter-checks > .hk-pp-filter-check[b-r4q9k9ofau] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0.1875rem;
    margin-bottom: 0;
}

.hk-pp-filter-check > .form-check-input[b-r4q9k9ofau] {
    align-self: center;
    margin: 0;
}

/* The section body's flow rule gives the panel row a top margin, which replaces the negative one .row pairs
   with its gutter — so the gutter came on top of the status rail's own margin. Put .row's margin back: the
   panels then sit a rail's gap under the status actions, as the two rails sit under each other. */
.hk-pp-sticky[b-r4q9k9ofau]  .hk-order-section-body > .row.hk-pp-panels {
    margin-top: calc(-1 * var(--bs-gutter-y));
}

/* The list's columns take their widths from the <colgroup>, not from the rows currently in view — otherwise
   a virtualised list re-measures and shifts as rows with longer content scroll in. */
.hk-pp-table[b-r4q9k9ofau] {
    table-layout: fixed;
}

/* The column proportions (the WebForms grid's ItemStyle-Width percentages), in the <colgroup> order:
   checkbox, job/order, status, priority, customer, job, time, process, media. The status badge and the
   priority number are short and always the same size, so those two are fixed widths — the longest badge
   ("Avbruten") and a two-digit priority — rather than a share of the row; the job takes what is left.
   The job/order ids keep their share: some tenants' numbers are long. */
.hk-pp-table col:nth-child(1)[b-r4q9k9ofau] { width: 3%; }
.hk-pp-table col:nth-child(2)[b-r4q9k9ofau] { width: 10%; }
.hk-pp-table col:nth-child(3)[b-r4q9k9ofau] { width: 5.5rem; }
.hk-pp-table col:nth-child(4)[b-r4q9k9ofau] { width: 2.5rem; }
.hk-pp-table col:nth-child(5)[b-r4q9k9ofau] { width: 16%; }
.hk-pp-table col:nth-child(7)[b-r4q9k9ofau] { width: 7%; }
.hk-pp-table col:nth-child(8)[b-r4q9k9ofau] { width: 14%; }
.hk-pp-table col:nth-child(9)[b-r4q9k9ofau] { width: 14%; }

/* The selected job's other moments, on the app's faint tint (the WebForms grid's #fafafa) — a step below the
   selected blue, so they read as belonging to the selection without being part of it. */
.hk-pp-table tr.is-related > td[b-r4q9k9ofau] {
    background: var(--hk-surface-sunken);
}

/* Rows select on click, so they read as clickable; no text selection on Shift+click ranges. */
.hk-pp-row[b-r4q9k9ofau] {
    cursor: pointer;
    user-select: none;
}

/* The production section (rails and info panel) stays pinned while the page scrolls, below the layout's
   sticky topbar (same offset and stacking level as .hk-toolbar-sticky in base.css); the filter above it
   scrolls away. The wrapper, not the section, is sticky: the section card is overflow: hidden (design.md §13).
   The page background behind it, so the card does not show the view sliding underneath. */
.hk-pp-sticky[b-r4q9k9ofau] {
    position: sticky;
    top: var(--hk-sticky-top, 0px);
    z-index: 5;
    /* 0.5rem above the card plus the filter's 0.5rem margin, 1rem below: one rem to each neighbour. */
    padding-block: 0.5rem 1rem;
    background: var(--hk-app-bg);
}

/* The four info-panel sub-sections (Information, Details, Processes, Log) share one fixed body height and
   scroll vertically, so a long log or a long process list never pushes the view down. The body is
   HkSection's own, hence ::deep. */
/* White bodies, deliberately not the sub-section's tinted ground (design.md §12): these are read-outs to scan,
   as the WebForms info boxes were, not fields to work in. A rail inside (the log's) then inverts back to grey,
   so it still contrasts with the ground it lies on (design.md §3). */
.hk-pp-panels[b-r4q9k9ofau]  .hk-section-plain-body .hk-toolbar {
    --hk-rail-bg: var(--hk-surface-sunken);
    --hk-rail-contrast: var(--hk-surface-raised);
}

.hk-pp-panels[b-r4q9k9ofau]  .hk-section-plain-body {
    background: var(--hk-surface-raised);
    height: 11.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    /* The thumb in the sub-section head's grey, so the scrollbar reads as part of the panel's frame. */
    scrollbar-color: var(--hk-n-300) transparent;
}

/* One rhythm for every line in the four cards: the key/value lists, the process list and the log. Tighter
   than the body line-height, because these are label/value pairs read down a narrow column rather than
   prose read across one — the extra leading buys nothing here and the page has no height to spare. The
   lines shrink by about as much as the card did, so roughly the same number still fits without scrolling.
   The process row's link button inherits the text metrics so it does not stand taller than its neighbours. */
.hk-pp-kv > dt[b-r4q9k9ofau],
.hk-pp-kv > dd[b-r4q9k9ofau],
.hk-pp-process[b-r4q9k9ofau],
.hk-pp-log-entry[b-r4q9k9ofau] {
    padding-block: 0.0625rem;
    line-height: 1.35;
}

/* The key/value lists are ruled: a hairline under each pair, label and value together, so the eye follows a
   row across the gap between them. A little more padding than the bare lines, so the rule does not touch the
   text. The last pair has the card's edge under it and needs no rule of its own. */
.hk-pp-kv > dt[b-r4q9k9ofau],
.hk-pp-kv > dd[b-r4q9k9ofau] {
    padding-block: 0.1875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-pp-kv > :nth-last-child(-n + 2)[b-r4q9k9ofau] {
    border-bottom: 0;
}

/* Regular weight, not a link's semibold (design.md §10): in this list the weight marks the selected moment
   (fw-bold in the markup), so every row carrying it would leave nothing to tell that one apart. The body text
   colour too, as in the panels beside it: the brand colour down the whole list read as a column of links. It is
   left to the selected moment, which it marks together with the weight. Hover still shows the link colour. */
.hk-pp-process .btn[b-r4q9k9ofau] {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-font-weight: 400;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    vertical-align: baseline;
}

.hk-pp-process .btn.is-selected[b-r4q9k9ofau] {
    --bs-btn-color: var(--bs-link-color);
}

/* The moment's state: a small block before the name, in the scale the list badge and the boards' stripe use
   (ready green, started and paused yellow, complete grey, canceled red), not started a pale grey. The status
   in words is the row's tooltip and the button's hidden text; the block is for scanning. */
.hk-pp-process-state[b-r4q9k9ofau] {
    display: inline-block;
    width: 0.5rem;
    height: 1em;
    margin-right: 0.5rem;
    vertical-align: -0.125em;
    border-radius: 1px;
    background: var(--hk-n-200);
}

.hk-pp-process-state.is-ready[b-r4q9k9ofau] { background: var(--bs-success); }
.hk-pp-process-state.is-started[b-r4q9k9ofau],
.hk-pp-process-state.is-paused[b-r4q9k9ofau] { background: var(--bs-warning); }
.hk-pp-process-state.is-complete[b-r4q9k9ofau] { background: var(--bs-secondary-color); }
.hk-pp-process-state.is-canceled[b-r4q9k9ofau] { background: var(--bs-danger); }

/* The view under the production section is a surface of its own on the page, as a grid is (design.md §12):
   raised, framed and rounded like the section card above it. */
.hk-pp-view[b-r4q9k9ofau] {
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--hk-shadow-xs);
    overflow: hidden;
}

/* The band at the top of a board view: navigation, range, zoom, grouping. */
.hk-board-chrome[b-r4q9k9ofau] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.875rem;
    background: var(--hk-n-25);
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-board-period[b-r4q9k9ofau] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Virtualize needs a scroll port of its own; without a bounded height it renders everything. */
.hk-list-scroll[b-r4q9k9ofau] {
    max-height: 65vh;
    overflow-y: auto;
}

.hk-list-scroll thead th[b-r4q9k9ofau] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--hk-surface-sunken);
}

/* A date section inside the flattened list. It is a row rather than a heading because the list is one
   virtualized sequence — headers and items have to share a scroll model. */
.hk-list-group > td[b-r4q9k9ofau] {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hk-n-600);
    background: var(--hk-surface-sunken);
}
/* /Components/Pages/Orders/ProductionOccupancy.razor.rz.scp.css */
/* Production occupancy board.

   Two things no Bootstrap utility expresses: the load bar, whose fill is the load percentage and whose
   tone is the band it falls into, and the stacked phone layout the nine-column matrix turns into below
   md. Everything else on the page is a utility or a catalog component. Colours are the semantic tokens
   (base.css §1) mixed with white — the board has no palette of its own. */

/* The eight load columns are one scale and have to be comparable across a row, so their widths are the
   declared ones rather than whatever the headings happen to measure — "Past due" is a shorter word than a
   day and would otherwise come out narrower. Fixed layout makes the column widths the ones the grid asks
   for; the name column takes the rest and wraps. The table belongs to HkGrid, hence ::deep. */
.hk-occ-board[b-7cmf29ni8e]  .hk-grid-table {
    table-layout: fixed;
}

/* A fixed column no longer widens for its heading, and a date has no break opportunity of its own, so let
   it break rather than spill into the next column at the narrow end of the range. */
.hk-occ-board[b-7cmf29ni8e]  .hk-grid-table th {
    overflow-wrap: anywhere;
}

.hk-occ-bar[b-7cmf29ni8e] {
    display: block;
    padding: 0.125rem 0.375rem;
    border-radius: var(--bs-border-radius-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--bs-body-color);
    /* The strong tone fills up to the load, the weak tone covers the rest — one stop pair on --hk-occ-fill. */
    background: linear-gradient(to right,
        var(--hk-occ-strong) var(--hk-occ-fill, 0%),
        var(--hk-occ-weak) var(--hk-occ-fill, 0%));
}

.hk-occ-ok[b-7cmf29ni8e] {
    --hk-occ-strong: color-mix(in srgb, var(--bs-success) 55%, white);
    --hk-occ-weak: color-mix(in srgb, var(--bs-success) 16%, white);
}

.hk-occ-medium[b-7cmf29ni8e] {
    --hk-occ-strong: color-mix(in srgb, var(--bs-warning) 55%, white);
    --hk-occ-weak: color-mix(in srgb, var(--bs-warning) 16%, white);
}

.hk-occ-high[b-7cmf29ni8e] {
    --hk-occ-strong: color-mix(in srgb, var(--hk-accent) 55%, white);
    --hk-occ-weak: color-mix(in srgb, var(--hk-accent) 16%, white);
}

.hk-occ-over[b-7cmf29ni8e] {
    --hk-occ-strong: color-mix(in srgb, var(--bs-danger) 55%, white);
    --hk-occ-weak: color-mix(in srgb, var(--bs-danger) 16%, white);
}

/* The phone board: a block per process, a line per day. */
.hk-occ-stack-group[b-7cmf29ni8e] {
    margin: 1rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color);
}

.hk-occ-stack-group:first-child[b-7cmf29ni8e] {
    margin-top: 0;
}

.hk-occ-stack-item[b-7cmf29ni8e] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.hk-occ-stack-name[b-7cmf29ni8e] {
    margin-bottom: 0.375rem;
    font-weight: 600;
}

.hk-occ-stack-row[b-7cmf29ni8e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
}

.hk-occ-stack-day[b-7cmf29ni8e] {
    flex: 0 0 55%;
    font-size: 0.8125rem;
}

/* The bar takes the rest of the line, so the loads line up down the block. */
.hk-occ-stack-value[b-7cmf29ni8e] {
    flex: 1 1 auto;
    text-align: center;
}
/* /Components/Pages/Orders/PurchasingNeeds.razor.rz.scp.css */
/* The quantity box, its unit and its button read as one control, capped rather than stretching to the column. */
.hk-pn-quantity[b-oc7nb9wajd] {
    max-width: 14rem;
    margin-left: auto;
}

/* The grids lay out automatically (hk-rz-fit), which would squeeze the number box to nothing (design.md §6). */
.hk-pn-quantity > .form-control[b-oc7nb9wajd] {
    min-width: 5rem;
}
/* /Components/Pages/Orders/TvView.razor.rz.scp.css */
/* A board read from across a workshop. Its type scales with the screen, so the sizes below are em against
   .hk-tv — a deliberate departure from design.md §12's utilities-first rule: Bootstrap's fs-* utilities are
   rem-based and would stay desk-sized on a TV. The local rules are only what no utility expresses. */
.hk-tv[b-wpnonxak8v] {
    padding: 1.5em clamp(1rem, 3vw, 4rem);
    font-size: clamp(1rem, 0.3rem + 0.8vw, 2.25rem);
}

/* The company name and the clock are one headline: same size, same weight. */
.hk-tv-headline[b-wpnonxak8v] {
    font-size: 2em;
    line-height: 1.2;
}

.hk-tv-clock[b-wpnonxak8v] {
    font-variant-numeric: tabular-nums;
}

/* ── dashboard ── */

.hk-tv-kpi-title[b-wpnonxak8v] {
    font-size: 1.15em;
}

.hk-tv-kpi-icon[b-wpnonxak8v] {
    font-size: 1.6em;
    line-height: 1;
}

.hk-tv-kpi-value[b-wpnonxak8v] {
    font-size: 2em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hk-tv-kpi-unit[b-wpnonxak8v] {
    font-size: 0.95em;
}

/* ── sections ── */

/* The band's head is sized in rem by base.css §7; here it follows the board's scale. */
.hk-tv[b-wpnonxak8v]  .hk-order-section-head {
    font-size: 0.75em;
}

.hk-tv-list[b-wpnonxak8v] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.hk-tv-item[b-wpnonxak8v] {
    padding: 0.4em 0.75em;
    border-radius: var(--bs-border-radius);
    background: var(--hk-surface-raised);
}

/* A padding line keeps its height and nothing else. */
.hk-tv-item-blank[b-wpnonxak8v] {
    visibility: hidden;
}

/* The heading line is the large one, as on the WebForms board (1.3rem over a .8rem detail line). The two lines
   share a first column of 6em and a gap of .75em at the board's size, written in each line's own em. */
.hk-tv-item-main[b-wpnonxak8v] {
    font-size: 1.2em;
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr) 10em 8em;
    gap: 0.625em;
    align-items: baseline;
}

.hk-tv-item-details[b-wpnonxak8v] {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 0.9375em;
    font-size: 0.8em;
}

/* The id in the WebForms board's colours: blue, red when overdue, green in production. The state tokens
   themselves, not their -text-emphasis variants (design.md §12): the id is bold and at least 1.2rem, which is
   large text, where AA asks 3:1 — and --bs-success, the weakest, gives 3.41:1. */
/* base.css §12 sizes the badge in rem for a listing; on the board it follows the line it sits on. */
.hk-tv[b-wpnonxak8v]  .hk-status-badge {
    font-size: 0.7em;
    font-weight: 600;
}

.hk-tv-orderid[b-wpnonxak8v] {
    color: var(--bs-info);
    font-variant-numeric: tabular-nums;
}

.hk-tv-orderid.red[b-wpnonxak8v] {
    color: var(--bs-danger);
}

.hk-tv-orderid.green[b-wpnonxak8v] {
    color: var(--bs-success);
}

.hk-tv-empty[b-wpnonxak8v] {
    grid-column: 1 / -1;
    font-style: italic;
    color: var(--bs-secondary-color);
}

/* A section with more than one page slides each page in, as the WebForms board does. */
.hk-tv-turns[b-wpnonxak8v] {
    animation: hk-tv-page-in-b-wpnonxak8v 0.5s ease-out;
}

@keyframes hk-tv-page-in-b-wpnonxak8v {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-tv-turns[b-wpnonxak8v] {
        animation: none;
    }
}

/* Below lg the owner steps out first; the status stays, since it is what the board is read for. */
@media (max-width: 61.98rem) {
    .hk-tv-item-main[b-wpnonxak8v] {
        grid-template-columns: 4em minmax(0, 1fr) auto;
    }

    .hk-tv-item-details[b-wpnonxak8v] {
        grid-template-columns: 6em minmax(0, 1fr);
    }

    .hk-tv-owner[b-wpnonxak8v] {
        display: none;
    }
}
/* /Components/Pages/Orders/Warnings.razor.rz.scp.css */
/* The provider that raised the warning, under its type: the same fact, stepped back. */
.hk-warn-source[b-8f8vd874ft] {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/*
   The error's first line in the list. Two lines at most: the column takes what the table leaves it and the
   rest of the text is one click away in the detail, so the row never grows with a stack trace.
*/
.hk-warn-summary[b-8f8vd874ft] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/*
   The reference is an identifying column and never drops, so it has to fit at 375 px: a long import-job id
   breaks inside itself once it no longer fits on a line of its own, rather than widening the table into the
   wrapper's sideways scroll. The space before the id stays the first place it wraps. The detail row sits in
   the same table, so its id breaks the same way.
*/
.hk-warn-ref[b-8f8vd874ft] {
    overflow-wrap: anywhere;
}

.hk-warn-detail[b-8f8vd874ft] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.5rem;
}

/* The error's label, its Copy button and the text belong together, so they sit closer than the blocks. */
.hk-warn-error-block[b-8f8vd874ft] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hk-warn-error-head[b-8f8vd874ft] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hk-warn-error-block .hk-order-note[b-8f8vd874ft] {
    margin: 0;
}

/*
   The whole error, often a stack trace. Wrapped and at full length — the row was opened to read it — on the
   raised ground so it reads as the text itself, in the body colour: the page already says it is an error.
*/
.hk-warn-error[b-8f8vd874ft] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--bs-body-color);
}
/* /Components/Shared/FlowGraph/FlowCanvas.razor.rz.scp.css */
.hk-fg-canvas[b-tcs13fjudv] {
    position: relative;
    overflow: hidden;
    height: 430px;
    background: #f7f9fa;
    border: 1px solid #d7dee5;
    border-radius: 6px;
    background-image: radial-gradient(#dbe2e8 1px, transparent 1px);
    background-size: 22px 22px;
}

.hk-fg-head[b-tcs13fjudv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    pointer-events: none;
}

.hk-fg-zoom[b-tcs13fjudv] {
    margin-left: auto;
    display: flex;
    gap: 4px;
    pointer-events: auto;
}

.hk-fg-zoom button[b-tcs13fjudv] {
    width: 26px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid #d7dee5;
    border-radius: 4px;
    color: #66788a;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.hk-fg-zoom button.hk-fg-fit[b-tcs13fjudv] {
    width: auto;
    padding: 0 8px;
    font-size: 11.5px;
}

.hk-fg-viewport[b-tcs13fjudv] {
    position: absolute;
    inset: 0;
    cursor: grab;
}

.hk-fg-viewport.hk-fg-panning[b-tcs13fjudv] {
    cursor: grabbing;
}

.hk-fg-world[b-tcs13fjudv] {
    position: absolute;
    top: 0;
    left: 0;
    /* Set by the viewport from the graph model; the element's own style attribute belongs to
       FlowCanvas.razor.js, which owns the pan/zoom transform. */
    width: var(--hk-fg-world-w, 0);
    height: var(--hk-fg-world-h, 0);
    transform-origin: 0 0;
}

.hk-fg-world[b-tcs13fjudv]  svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

[b-tcs13fjudv] .hk-fg-edge {
    fill: none;
    stroke-width: 2;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-taken {
    stroke: #6f8496;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-idle {
    stroke: #ccd5dc;
    stroke-width: 1.5;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-ghost {
    stroke: #b08c4f;
    stroke-dasharray: 5 4;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-errlink {
    stroke: #cf4133;
    stroke-dasharray: 5 4;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-errlink-idle {
    stroke: #e5a49d;
    stroke-dasharray: 5 4;
}

[b-tcs13fjudv] .hk-fg-edge.hk-fg-sel {
    stroke: #0f6bb2;
    stroke-width: 2.4;
}

[b-tcs13fjudv] .hk-fg-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
    cursor: pointer;
}

.hk-fg-legend i.hk-fg-lg-rule[b-tcs13fjudv] {
    width: auto;
    height: auto;
    background: #fff;
    border: 1px solid #bcd4e6;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 9.5px;
    font-style: normal;
    color: #0b5187;
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    line-height: 14px;
}

.hk-fg-edge-label[b-tcs13fjudv] {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #d7dee5;
    border-radius: 9px;
    padding: 0 7px;
    font-size: 10.5px;
    color: #66788a;
    white-space: nowrap;
    line-height: 16px;
}

.hk-fg-edge-label.hk-fg-lab-rule[b-tcs13fjudv] {
    color: #0b5187;
    border-color: #bcd4e6;
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

.hk-fg-edge-label.hk-fg-lab-ghost[b-tcs13fjudv] {
    color: #8a6420;
    border-color: #dcc389;
    background: #fdf7ea;
}

.hk-fg-edge-label.hk-fg-lab-err[b-tcs13fjudv] {
    color: #9c3428;
    border-color: #e0b1aa;
    background: #fdf1ef;
}

.hk-fg-edge-label.hk-fg-lab-clickable[b-tcs13fjudv] {
    cursor: pointer;
}

.hk-fg-edge-label.hk-fg-lab-clickable:hover[b-tcs13fjudv] {
    border-color: #aebbc6;
}

.hk-fg-edge-label.hk-fg-lab-selected[b-tcs13fjudv] {
    outline: 2px solid #0f6bb2;
    outline-offset: 1px;
}

.hk-fg-legend[b-tcs13fjudv] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #d7dee5;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11.5px;
    color: #66788a;
}

.hk-fg-legend span[b-tcs13fjudv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hk-fg-legend i[b-tcs13fjudv] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.hk-fg-legend i.hk-fg-lg-ok[b-tcs13fjudv] { background: #2f9e63; }
.hk-fg-legend i.hk-fg-lg-warn[b-tcs13fjudv] { background: #d9882b; }
.hk-fg-legend i.hk-fg-lg-err[b-tcs13fjudv] { background: #cf4133; }
.hk-fg-legend i.hk-fg-lg-skip[b-tcs13fjudv] { background: #c2ccd4; }
.hk-fg-legend i.hk-fg-lg-run[b-tcs13fjudv] { background: #0f6bb2; }

.hk-fg-legend i.hk-fg-lg-ghost[b-tcs13fjudv] {
    background: #fff;
    border: 1.5px dashed #c9a75e;
}
/* /Components/Shared/FlowGraph/FlowNode.razor.rz.scp.css */
.hk-fg-node[b-50g2qoomen] {
    position: absolute;
    width: 172px;
    background: #fff;
    border: 1.5px solid #d7dee5;
    border-left-width: 5px;
    border-radius: 6px;
    padding: 7px 9px 7px 10px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(29, 40, 51, .07);
}

.hk-fg-node:hover[b-50g2qoomen] {
    box-shadow: 0 2px 7px rgba(29, 40, 51, .16);
}

.hk-fg-cat[b-50g2qoomen] {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #66788a;
}

.hk-fg-name[b-50g2qoomen] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1px;
}

.hk-fg-foot[b-50g2qoomen] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    min-height: 16px;
}

.hk-fg-step[b-50g2qoomen] {
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    border-radius: 8px;
    padding: 0 6px;
    line-height: 15px;
}

.hk-fg-msgs[b-50g2qoomen] {
    font-size: 11px;
    color: #66788a;
}

.hk-fg-msgs.hk-fg-running[b-50g2qoomen] {
    color: #0f6bb2;
    font-weight: 600;
}

.hk-fg-ic[b-50g2qoomen] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.hk-fg-node.hk-fg-n-ok[b-50g2qoomen] { border-color: #2f9e63; }
.hk-fg-node.hk-fg-n-ok .hk-fg-step[b-50g2qoomen] { background: #2f9e63; }

.hk-fg-node.hk-fg-n-warn[b-50g2qoomen] { border-color: #d9882b; }
.hk-fg-node.hk-fg-n-warn .hk-fg-step[b-50g2qoomen] { background: #d9882b; }

.hk-fg-node.hk-fg-n-err[b-50g2qoomen] { border-color: #cf4133; }
.hk-fg-node.hk-fg-n-err .hk-fg-step[b-50g2qoomen] { background: #cf4133; }

.hk-fg-node.hk-fg-n-skip[b-50g2qoomen] {
    border-color: #c2ccd4;
    background: #f0f3f5;
    color: #7b8894;
}

.hk-fg-node.hk-fg-n-skip .hk-fg-name[b-50g2qoomen] {
    font-weight: 500;
    color: #7b8894;
}

.hk-fg-node.hk-fg-n-run[b-50g2qoomen] {
    border-color: #0f6bb2;
    animation: hk-fg-pulse-b-50g2qoomen 1.6s ease-in-out infinite;
}

.hk-fg-node.hk-fg-n-run .hk-fg-step[b-50g2qoomen] {
    background: #0f6bb2;
}

@keyframes hk-fg-pulse-b-50g2qoomen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 107, 178, .45); }
    50% { box-shadow: 0 0 0 7px rgba(15, 107, 178, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hk-fg-node.hk-fg-n-run[b-50g2qoomen] {
        animation: none;
        box-shadow: 0 0 0 4px rgba(15, 107, 178, .25);
    }
}

.hk-fg-node.hk-fg-n-ghost[b-50g2qoomen] {
    border-style: dashed;
    border-color: #c9a75e;
    background: #fdfaf2;
}

/* Sub flow node — stacked-cards look to signal "contains a flow". */
.hk-fg-node.hk-fg-n-sub[b-50g2qoomen] {
    box-shadow: 3px 3px 0 -1px #fff, 3px 3px 0 0 #b8c3cd, 0 1px 2px rgba(29, 40, 51, .07);
}

.hk-fg-node.hk-fg-n-sub.hk-fg-n-ghost[b-50g2qoomen] {
    box-shadow: 3px 3px 0 -1px #fdfaf2, 3px 3px 0 0 #c9a75e;
}

.hk-fg-sub-toggle[b-50g2qoomen] {
    margin-left: auto;
    border: 1px solid #d7dee5;
    border-radius: 4px;
    background: #f5f7f9;
    color: #3c4c5a;
    font-size: 11px;
    line-height: 1;
    padding: 1px 5px;
    cursor: pointer;
}

.hk-fg-sub-toggle:hover[b-50g2qoomen] {
    background: #e8edf1;
}

/* The toggle takes the right slot in the footer; the state icon moves next to it. */
.hk-fg-node.hk-fg-n-sub .hk-fg-ic[b-50g2qoomen] {
    margin-left: 0;
}

.hk-fg-node.hk-fg-n-selected[b-50g2qoomen] {
    outline: 2px solid #0f6bb2;
    outline-offset: 2px;
}

.hk-fg-badge[b-50g2qoomen] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a5c12;
    background: #fbf0d3;
    border: 1px solid #e3cd8e;
    border-radius: 8px;
    padding: 0 6px;
    line-height: 14px;
}

/* Not eligible in the current context — visible for layout, but clearly inert. */
.hk-fg-node.hk-fg-n-muted[b-50g2qoomen] {
    opacity: .55;
    cursor: default;
}

.hk-fg-node.hk-fg-n-muted:hover[b-50g2qoomen] {
    box-shadow: 0 1px 2px rgba(29, 40, 51, .07);
}

.hk-fg-start[b-50g2qoomen] {
    position: absolute;
    top: -9px;
    left: 8px;
    background: #3c4c5a;
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    border-radius: 3px;
    padding: 1px 6px;
}
/* /Components/Shared/HkCalendar/HkCalendar.razor.rz.scp.css */
/*
    HkCalendar.

    One scroll port holds the board. The hour gutter is sticky-left and every day's heading sticky-top, so
    a planner scrolling into the evening keeps both the hours and the dates. Height comes from one variable
    the component sets — --hk-cal-height, the envelope's length at the current zoom — which is what makes
    zoom a single number rather than a re-layout.

    Colour carries category, the left stripe carries state: the same reading as HkTimeline, because the two
    boards show the same moments and a planner should not have to learn them twice.
*/

.hk-cal[b-l53mkcuom4] {
    --hk-cal-gutter-w: 2.25rem;
    /* Hugs one line of the heading. It used to be taller than its content, which read as an empty row
       under every date. */
    --hk-cal-head-h: 1.875rem;
    --hk-cal-line: var(--hk-n-200);
    --hk-cal-line-strong: var(--hk-n-300);

    position: relative;
    overflow: auto;
    max-height: 72vh;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overscroll-behavior-x: contain;
}

.hk-cal-board[b-l53mkcuom4] {
    display: flex;
    align-items: flex-start;
    min-width: max-content;
}

/* ── the hour gutter ──────────────────────────────────────────────────────── */

.hk-cal-gutter-col[b-l53mkcuom4] {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: 0 0 var(--hk-cal-gutter-w);
    background: var(--hk-surface-raised);
    border-right: 1px solid var(--hk-cal-line-strong);
}

.hk-cal-corner[b-l53mkcuom4] {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--hk-cal-head-h);
    background: var(--hk-surface-sunken);
    border-bottom: 1px solid var(--hk-cal-line-strong);
}

.hk-cal-gutter[b-l53mkcuom4] {
    position: relative;
    height: var(--hk-cal-height);
}

/* Sat above its own line rather than on it: a label centred on the hour reads as belonging to the half
   hour before it as much as to the hour itself. Whole hours only — the component filters the rest out. */
.hk-cal-tick[b-l53mkcuom4] {
    position: absolute;
    right: 0.375rem;
    transform: translateY(-0.1em);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

/* ── day columns ──────────────────────────────────────────────────────────── */

.hk-cal-day[b-l53mkcuom4] {
    flex: 1 1 0;
    /* Grid and flex items are min-content wide by default, which would let a long block label push the
       column past its share and shove the rest of the week sideways. */
    min-width: 6rem;
    border-right: 1px solid var(--hk-cal-line);
}

.hk-cal-day:last-child[b-l53mkcuom4] {
    border-right: 0;
}

/* Centred rather than baseline-aligned: with a fixed height, baseline alignment parks the text against
   the top and leaves the rest of the row looking like a blank line. */
.hk-cal-head[b-l53mkcuom4] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    height: var(--hk-cal-head-h);
    padding: 0 0.4375rem;
    overflow: hidden;
    background: var(--hk-surface-sunken);
    border-bottom: 1px solid var(--hk-cal-line-strong);
}

.hk-cal-head-day[b-l53mkcuom4] {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hk-n-700);
}

.hk-cal-head-date[b-l53mkcuom4] {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

/* Today is marked on the heading and nowhere else, which is what every calendar does — and the reason is
   visible on this one: a tint down the column mixes with the grey of the non-working hours and muddies
   both. Info blue rather than the brand slate, which reads grey (design.md §14), and rather than green,
   which the blocks already use for ready-to-start. The accent is left to the now line, so orange on this
   board means one thing: this instant. */
.hk-cal-day.is-today .hk-cal-head[b-l53mkcuom4] {
    background: var(--bs-info-bg-subtle);
    border-bottom-color: var(--bs-info-border-subtle);
}

.hk-cal-day.is-today .hk-cal-head-day[b-l53mkcuom4] {
    color: var(--bs-info-text-emphasis);
}

/* At the right end, away from the date, because it answers a different question — not which day this is,
   but that the day holds work this view cannot reach. */
.hk-cal-head-hidden[b-l53mkcuom4] {
    display: inline-flex;
    gap: 0.1875rem;
    align-items: center;
    margin-left: auto;
    font-size: 0.6875rem;
    white-space: nowrap;
    color: var(--bs-warning-text-emphasis);
}

/* Clipped, so a preview dragged above the envelope's first hour is cut at the column's edge instead of
   escaping over the heading. The block it came from reports its real start either way. */
.hk-cal-col[b-l53mkcuom4] {
    position: relative;
    height: var(--hk-cal-height);
    overflow: hidden;
}


/* ── the background layer ─────────────────────────────────────────────────── */

.hk-cal-back[b-l53mkcuom4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hk-cal-band[b-l53mkcuom4] {
    position: absolute;
    right: 0;
    left: 0;
}

/* Mixed from the palette rather than written as a literal, so a tenant's branding reaches the shading too
   and design.md §12's grep stays where it is. The values match HkTimeline's bands exactly. */
.hk-cal-band.is-nonworking[b-l53mkcuom4] {
    background: color-mix(in srgb, var(--hk-n-900) 4.5%, transparent);
}

/* A closed day reads differently from "outside working hours" — same weight, different texture. */
.hk-cal-band.is-holiday[b-l53mkcuom4] {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--bs-danger) 10%, transparent) 0 6px,
        color-mix(in srgb, var(--bs-danger) 4%, transparent) 6px 12px);
}

.hk-cal-line[b-l53mkcuom4] {
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px solid var(--hk-cal-line);
}

.hk-cal-now[b-l53mkcuom4] {
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--hk-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hk-n-0) 60%, transparent);
}

/* ── blocks ───────────────────────────────────────────────────────────────── */

.hk-cal-block[b-l53mkcuom4] {
    --hk-cal-fill: var(--bs-info-bg-subtle);
    --hk-cal-edge: var(--bs-info-border-subtle);
    --hk-cal-state: var(--hk-n-400);

    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.15;
    text-align: left;
    color: var(--hk-n-800);
    background: var(--hk-cal-fill);
    border: 1px solid var(--hk-cal-edge);
    /* The width the WebForms calendar used. A calendar can afford it — the stripe runs down the block's
       height, which is the generous dimension here. The timeline's runs along time, where a short moment
       is a few pixels wide and this would be most of it, so that board keeps a thinner one. */
    border-left: 0.5rem solid var(--hk-cal-state);
    border-radius: var(--bs-border-radius-sm);
    cursor: grab;
    /* Mouse-only by decision: with no touch-action override a touch scrolls the board and never starts a
       drag, which is what the production floor wants. */
    user-select: none;
}

/* A block that cannot be dragged must not offer the hand. It is still clickable, so it gets the pointer. */
.hk-cal-block.is-fixed[b-l53mkcuom4] {
    cursor: pointer;
}

.hk-cal-block-body[b-l53mkcuom4] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.0625rem;
    min-height: 0;
    padding: 0.125rem 0.25rem;
    overflow: hidden;
}

/* Resize grips, drawn OVER the block's edges rather than inside its layout: a flex child would take its
   height from the label, which is exactly what a short moment has none of to give. Out of the flow they
   cost nothing, so a block a third the size can still offer them. Visible only while hovered, and only
   rendered where there is a middle left to grab by — the component decides that. */
.hk-cal-handle[b-l53mkcuom4] {
    position: absolute;
    right: 0;
    left: 0;
    height: 7px;
    cursor: ns-resize;
    background: transparent;
}

.hk-cal-handle:not(.is-end)[b-l53mkcuom4] {
    top: 0;
}

.hk-cal-handle.is-end[b-l53mkcuom4] {
    bottom: 0;
}

/* Thinner on a short block, so the middle stays the largest target on it and a drag still means a move. */
.hk-cal-block.is-short .hk-cal-handle[b-l53mkcuom4] {
    height: 5px;
}

/* The mark sits ON the edge rather than centred in the grip: the grip is an overlay now, so a line down
   its middle would be a line through the label. The hit area stays the full strip. */
.hk-cal-block:hover .hk-cal-handle[b-l53mkcuom4]::after {
    position: absolute;
    left: 50%;
    width: 40%;
    height: 2px;
    background: var(--hk-cal-edge);
    transform: translateX(-50%);
    content: "";
}

.hk-cal-block:hover .hk-cal-handle:not(.is-end)[b-l53mkcuom4]::after {
    top: 1px;
}

.hk-cal-block:hover .hk-cal-handle.is-end[b-l53mkcuom4]::after {
    bottom: 1px;
}

.hk-cal-block:hover[b-l53mkcuom4] {
    z-index: 1;
    box-shadow: var(--hk-shadow-sm);
    filter: brightness(0.98);
}

.hk-cal-block:focus-visible[b-l53mkcuom4] {
    z-index: 1;
    outline: 0;
    box-shadow: var(--hk-focus-ring);
}

/* Three sides, never the fourth: `border-color` would take the state stripe with it, and being picked is
   not a state. The inset ring sits inside the border, so it leaves the stripe alone too. */
.hk-cal-block.is-selected[b-l53mkcuom4] {
    border-top-color: var(--bs-primary);
    border-right-color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

/* Category — what kind of moment this is. */
.hk-cal-block.is-priority[b-l53mkcuom4] {
    --hk-cal-fill: var(--bs-success-bg-subtle);
    --hk-cal-edge: var(--bs-success-border-subtle);
}

.hk-cal-block.is-group[b-l53mkcuom4] {
    --hk-cal-fill: color-mix(in srgb, var(--hk-sequence) 14%, white);
    --hk-cal-edge: color-mix(in srgb, var(--hk-sequence) 34%, white);
}

/* A moment belonging to no job, told the way the WebForms calendar told it: a broken stripe. It is the one
   category a planner must not mistake, so it gets a second signal beyond its fill. Unlike WebForms it keeps
   its state colour — a custom moment is started and finished like any other, and there is no reason the
   stripe should stop saying so just because the pattern changed. */
.hk-cal-block.is-custom[b-l53mkcuom4] {
    --hk-cal-fill: var(--hk-n-100);
    --hk-cal-edge: var(--hk-n-300);

    border-left-style: dotted;
}

.hk-cal-block.is-transport[b-l53mkcuom4] {
    --hk-cal-fill: var(--bs-danger-bg-subtle);
    --hk-cal-edge: var(--bs-danger-border-subtle);
}

/* State — the left stripe, readable independently of the fill. The scale is the status badge's, so a
   moment reads the same on the board as in the information panel beside it: green is ready to start,
   not finished, and finished is the quiet grey of something needing no further attention. */
.hk-cal-block.is-notstarted[b-l53mkcuom4] { --hk-cal-state: var(--hk-n-400); }
.hk-cal-block.is-started[b-l53mkcuom4]    { --hk-cal-state: var(--bs-warning); }
.hk-cal-block.is-paused[b-l53mkcuom4]     { --hk-cal-state: var(--bs-warning); }
.hk-cal-block.is-complete[b-l53mkcuom4]   { --hk-cal-state: var(--bs-secondary-color); }
.hk-cal-block.is-canceled[b-l53mkcuom4]   { --hk-cal-state: var(--bs-danger); }

/* Everything it waits for is done — the one thing a planner scans for, so it takes the stripe rather than
   an outline of its own. Last, because it stands in for the not-started it always comes with. */
.hk-cal-block.is-ready[b-l53mkcuom4]      { --hk-cal-state: var(--bs-success); }

.hk-cal-block.is-canceled .hk-cal-block-label[b-l53mkcuom4] {
    text-decoration: line-through;
}

/* A block cut by the top or bottom of the column continues outside it, so the edge it was cut at loses its
   rounding and its rule: a square, open edge says "this goes on" where a closed one would lie. */
.hk-cal-block.is-cut-top[b-l53mkcuom4] {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.hk-cal-block.is-cut-bottom[b-l53mkcuom4] {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* A short moment gets one line instead of two, centred in what height it has and a size smaller, so a
   quarter of an hour reads as a name rather than as the top halves of two. The customer is still in the
   hover text and in the accessible name, so nothing is lost — only deferred to a second look. */
.hk-cal-block.is-short .hk-cal-block-body[b-l53mkcuom4] {
    justify-content: center;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    line-height: 1;
}

.hk-cal-block.is-short .hk-cal-block-sub[b-l53mkcuom4] {
    display: none;
}

.hk-cal-block-label[b-l53mkcuom4] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-cal-block-sub[b-l53mkcuom4] {
    overflow: hidden;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Everything that is not the chain being followed. Dimming rather than highlighting keeps the lit blocks
   in their own status colours, which is what the planner still needs while following the chain. */
/* Enough to recede, not enough to disappear: the rest of the plan is still what the lit chain has to be
   read against, so a planner following one job must be able to see what it is being fitted around. */
.hk-cal-block.is-dimmed[b-l53mkcuom4] {
    opacity: 0.45;
}

.hk-cal-block.is-dimmed:hover[b-l53mkcuom4],
.hk-cal-block.is-dimmed:focus-visible[b-l53mkcuom4] {
    opacity: 0.85;
}

/* ── what a crowded hour could not show ───────────────────────────────────
   Sits in the cluster's last lane and spans what it is standing in for, so the reader can see how much of
   the hour is behind it rather than just that something is. */

.hk-cal-more[b-l53mkcuom4] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    font-size: 0.625rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color);
    background: var(--hk-n-100);
    border: 1px dashed var(--hk-cal-line-strong);
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
}

.hk-cal-more:hover[b-l53mkcuom4] {
    color: var(--bs-primary);
    border-color: var(--hk-focus-border-color);
}

.hk-cal-more:focus-visible[b-l53mkcuom4] {
    outline: 0;
    box-shadow: var(--hk-focus-ring);
}

/* ── the gesture, drawn ───────────────────────────────────────────────────
   The source block never moves: it fades in place while the preview carries the requested time. After the
   drop the preview stays until the reload answers, so the board never flashes back to the pre-drag layout
   while the engine is replanning.

   The preview (.hk-cal-preview) and badge (.hk-cal-badge) are created by hk-planning-drag.js, which copies
   the component's CSS-isolation scope attribute onto them — that is why this scoped file can style them. */

.hk-cal-block.is-pending[b-l53mkcuom4],
.hk-cal-block.is-drag-source[b-l53mkcuom4],
.hk-cal-block.is-pending-source[b-l53mkcuom4] {
    opacity: 0.35;
}

.hk-cal.is-dragging[b-l53mkcuom4] {
    cursor: grabbing;
    user-select: none;
}

/* Full column width: which share of the day it will end up with is not known until the reload, so the
   preview claims the column rather than drawing a guess as a fact. */
.hk-cal-preview[b-l53mkcuom4] {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--bs-primary) 14%, white);
    border: 1px dashed var(--bs-primary);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--hk-shadow-md);
}

.hk-cal-preview-label[b-l53mkcuom4] {
    padding: 0.125rem 0.25rem;
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--hk-n-800);
}

.hk-cal-preview.is-pending[b-l53mkcuom4] {
    border-style: solid;
    opacity: 0.7;
}

/* Positioned in viewport coordinates by the controller, so it follows the pointer out over the headings
   and past the board's own edges. */
.hk-cal-badge[b-l53mkcuom4] {
    position: fixed;
    z-index: 1060;
    padding: 0.125rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    color: var(--hk-n-0);
    background: var(--hk-n-800);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--hk-shadow-md);
}

/* ── empty ────────────────────────────────────────────────────────────────── */

/* Over the grid rather than under it: the columns are a full envelope tall, so a line below them would sit
   a screen away from the emptiness it is describing. */
.hk-cal-empty[b-l53mkcuom4] {
    position: absolute;
    top: 30%;
    right: 0;
    left: 0;
    margin: 0;
    text-align: center;
    pointer-events: none;
}

/* ── narrow screens ───────────────────────────────────────────────────────
   design.md §11 wants one column below lg and §6 forbids sideways scrolling. A week of seven days cannot
   honour either: at 375px a column would be 45px, which holds a colour and no words. So this is a
   deliberate departure — the board scrolls sideways below lg and the columns keep a width that can carry a
   label, with the hour gutter pinned so the times never scroll away.

   The way out for a phone is the Day range, which is one column and needs none of this; the range buttons
   are right above the board. Widening the columns is what makes the week usable on a tablet, which is
   where it is actually read. */
@media (max-width: 991.98px) {
    .hk-cal-day[b-l53mkcuom4] {
        min-width: 9rem;
    }

    .hk-cal[b-l53mkcuom4] {
        max-height: 80vh;
    }
}
/* /Components/Shared/HkChart/HkChart.razor.rz.scp.css */
/* Reserves the chart's final height (ApexCharts presets draw at 280) so the panel doesn't jump. */
.hk-chart[b-ut6rnsbkpi] {
    min-height: 280px;
}

/* A host that sizes the chart (Fill) gives it a height; the chart takes all of it and reserves nothing. */
.hk-chart-fill[b-ut6rnsbkpi] {
    min-height: 0;
    height: 100%;
}
/* /Components/Shared/HkCodeEditor/HkCodeEditor.razor.rz.scp.css */
/* The frame around the Monaco surface; the host sets the height via the Height parameter. */
.hk-code-editor[b-va61ii5cyp] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* The BlazorMonaco container div (a child component's element, hence ::deep) fills the frame. */
.hk-code-editor[b-va61ii5cyp]  .hk-code-editor-monaco {
    height: 100%;
}
/* /Components/Shared/HkColorSelect.razor.rz.scp.css */
/* Colour multi-select: the chosen colours as chips, plus a picker and a free-text box for a new one. */

.hk-colors[b-01uqeuoxlc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
}

.hk-colors-disabled[b-01uqeuoxlc] {
    background: var(--bs-secondary-bg);
}

.hk-colors-empty[b-01uqeuoxlc] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    padding: 0 0.25rem;
}

.hk-color[b-01uqeuoxlc] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-emphasis-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
}

.hk-color-remove[b-01uqeuoxlc] {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.hk-colors-add[b-01uqeuoxlc] {
    width: auto;
    min-width: 5rem;
}

.hk-colors-new[b-01uqeuoxlc] {
    width: auto;
    min-width: 8rem;
    flex: 1 1 8rem;
}
/* /Components/Shared/HkContentResourcePickerDialog.razor.rz.scp.css */
/* The folder tree and the resource table scroll on their own, so the dialog keeps its footer in view
   (the same heights as the media-bank pickers). */
.hk-resource-picker-tree[b-coy1jrtgmv] {
    max-height: 26rem;
    overflow-y: auto;
}

.hk-resource-picker-list[b-coy1jrtgmv] {
    max-height: 24rem;
    overflow-y: auto;
}

/* A row click picks the resource. */
.hk-resource-picker-row[b-coy1jrtgmv] {
    cursor: pointer;
}
/* /Components/Shared/HkFileUpload/HkFileUpload.razor.rz.scp.css */
/* Shared upload control: a trigger label with the real file input stretched invisibly over it
   (a file input cannot be styled directly), plus inline progress and errors. */

/* Inline-flex, not inline-block: as a flex item the trigger label creates no line box, so no strut sits
   under the button's baseline. That strut is what made an upload button taller than the buttons beside it
   in a toolbar rail. Column direction keeps progress and errors stacked under the trigger. */
.hk-file-upload[b-5hencn346p] {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
}

.hk-file-upload-trigger[b-5hencn346p] {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    margin: 0;
    cursor: pointer;
}

.hk-file-upload-trigger input[type="file"][b-5hencn346p] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

/* The invisible input lies over the button, so the pointer never reaches the button itself and
   .btn:hover never fires. Hovering the trigger paints the button's own Bootstrap hover state instead,
   so an upload button lights up exactly like the buttons beside it — whatever variant the caller gave it.
   ::deep because the button is the caller's ChildContent and carries the caller's scope, not this file's. */
.hk-file-upload-trigger:hover[b-5hencn346p]  .btn:not(.disabled) {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* The same for an upload rendered as a "more" menu item (the customer list's imports). */
.hk-file-upload-trigger:hover[b-5hencn346p]  .dropdown-item:not(.disabled) {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.hk-file-upload-trigger input[type="file"]:disabled[b-5hencn346p] {
    cursor: default;
}

/* The whole control is the drop target; the class is toggled by hk-file-upload.js. */
.hk-file-upload-dragover[b-5hencn346p] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius-sm);
}

.hk-file-upload-progress[b-5hencn346p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
}

.hk-file-upload-track[b-5hencn346p] {
    flex: 0 0 8rem;
    height: 0.375rem;
    background: var(--bs-secondary-bg);
    border-radius: 999px;
    overflow: hidden;
}

.hk-file-upload-bar[b-5hencn346p] {
    display: block;
    height: 100%;
    background: var(--bs-primary);
    transition: width 0.15s ease;
}

.hk-file-upload-status[b-5hencn346p] {
    color: var(--bs-secondary-color);
}

.hk-file-upload-processing[b-5hencn346p] {
    margin-top: 0.375rem;
}

.hk-file-upload-error[b-5hencn346p] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}
/* /Components/Shared/HkFormBuilder/HkHtmlModeEditor.razor.rz.scp.css */
/* The three modes share one height, so switching tab does not make the dialog jump. The editor and the preview
   frame are other components' elements, outside this component's scope, so they need ::deep. */
.hk-html-modes[b-zqsuhmgs96]  .hk-html-modes-editor,
.hk-html-modes-source[b-zqsuhmgs96],
.hk-html-modes[b-zqsuhmgs96]  .hk-preview-iframe {
    height: 14rem;
    min-height: 0;
}

/* Source is read as written: no auto-growing (base.css field-sizing), no wrapping of long lines. */
.hk-html-modes-source[b-zqsuhmgs96] {
    field-sizing: fixed;
    white-space: pre;
    font-size: 0.8125rem;
}
/* /Components/Shared/HkForm/HkDynamicForm.razor.rz.scp.css */
/* HkDynamicForm — component chrome only.

   The field arrangement (.hk-form-rows / .hk-form-grid / .hk-form-row /
   .hk-form-label) lives in base.css §11, shared with the hand-written forms.
   It used to be duplicated here, and the copy silently outranked the global one
   (a scoped selector carries an extra attribute), so a dynamic form's labels
   rendered 16px near-black while a hand-written one's rendered 13px grey — in
   the same section. Nothing that decides layout or typography belongs here. */

.hk-form[b-99l2vyvtg1] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* A named group is a visible section; the layout container class on the same
   element arranges its fields. */
.hk-form-group[b-99l2vyvtg1] {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.hk-form-group-title[b-99l2vyvtg1] {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 0.25rem;
}

.hk-form-help[b-99l2vyvtg1] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.hk-form-error[b-99l2vyvtg1] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--bs-danger);
}

/* The .form-control / .form-select are rendered by the per-type input child components, so reach
   them through ::deep from the parent-scoped invalid row. */
.hk-form-row-invalid[b-99l2vyvtg1]  .form-control,
.hk-form-row-invalid[b-99l2vyvtg1]  .form-select {
    border-color: var(--bs-danger);
}

.hk-form-info[b-99l2vyvtg1] {
    grid-column: 1 / -1;
    color: var(--bs-secondary-color);
}

/* "Show in dialog" information element: a link spanning the row, and the self-rendered modal. */
.hk-form-info-link[b-99l2vyvtg1] {
    grid-column: 1 / -1;
    justify-self: start;
    text-decoration: underline;
}

.hk-form-dialog[b-99l2vyvtg1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    max-width: min(40rem, 92vw);
    max-height: 80vh;
    overflow: auto;
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--hk-shadow-lg);
}

.hk-form-dialog-head[b-99l2vyvtg1] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem 0;
}

.hk-form-dialog-body[b-99l2vyvtg1] {
    padding: 0 1.25rem 1.25rem;
}

/* The group tab strip's own styling lives in HkFormGroupTabs; these cover the renderer's own chrome. */

/* Help is revealed by a small question-mark button next to the control. */
.hk-form-help-button[b-99l2vyvtg1] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.hk-form-help-button:hover[b-99l2vyvtg1] {
    color: var(--bs-body-color);
}

/* A trigger input's status line, rendered by the child component. */
.hk-form-field[b-99l2vyvtg1]  .trigger-status {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* The resource field's file table (child component, so reached through ::deep). */
.hk-form-field[b-99l2vyvtg1]  .hk-form-resource-list {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.hk-form-field[b-99l2vyvtg1]  .hk-form-resource-list td {
    padding: 0.125rem 0.5rem 0.125rem 0;
    vertical-align: middle;
}

.hk-form-field[b-99l2vyvtg1]  .hk-form-resource-size {
    color: var(--bs-secondary-color);
    text-align: right;
    white-space: nowrap;
}

.hk-form-field[b-99l2vyvtg1]  .hk-form-resource-message {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}
/* /Components/Shared/HkForm/HkFormGroupTabs.razor.rz.scp.css */
/* The tab strip over a grouped form (port of the WebForms InputElementGroupTabStrip). */
.hk-form-tabs[b-9j5gcrb5ek] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-form-tab[b-9j5gcrb5ek] {
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background: none;
    color: var(--bs-secondary-color);
}

.hk-form-tab:hover[b-9j5gcrb5ek] {
    color: var(--bs-body-color);
}

/* The open group reads as attached to the form below it. */
.hk-form-tab.selected[b-9j5gcrb5ek] {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    margin-bottom: -1px;
}

/* A group holding a validation error is flagged so the user can find it without opening every tab. */
.hk-form-tab.invalid[b-9j5gcrb5ek] {
    color: var(--bs-danger);
}
/* /Components/Shared/HkForm/HkImageCropper.razor.rz.scp.css */
.hk-form-cropper[b-nppklxglfa] {
    margin-top: 0.5rem;
    max-width: 100%;
}

/* Keep the crop surface to a sensible height; the image is rendered by the inner CropperComponent. */
.hk-form-cropper[b-nppklxglfa]  img {
    max-height: 60vh;
    max-width: 100%;
}

.hk-form-cropper-actions[b-nppklxglfa] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Shared/HkForm/HkListField.razor.rz.scp.css */
/* Radio-button list layout (moved here from HkDynamicForm with the radio markup). */
.hk-form-radios[b-gm4mddnbf1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hk-form-radios-h[b-gm4mddnbf1] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}
/* /Components/Shared/HkForm/HkMediaBankPicker.razor.rz.scp.css */
.hk-mbp[b-bgfrhw7fd3] {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--hk-shadow-lg);
    z-index: 1051;
}

.hk-mbp-head[b-bgfrhw7fd3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-mbp-title[b-bgfrhw7fd3] {
    font-weight: 600;
}

.hk-mbp-body[b-bgfrhw7fd3] {
    padding: 1rem;
    overflow-y: auto;
}

.hk-mbp-message[b-bgfrhw7fd3] {
    padding: 2rem 0;
    text-align: center;
}

.hk-mbp-grid[b-bgfrhw7fd3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.hk-mbp-item[b-bgfrhw7fd3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
}

.hk-mbp-item:hover[b-bgfrhw7fd3] {
    border-color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
}

.hk-mbp-thumb[b-bgfrhw7fd3] {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.hk-mbp-name[b-bgfrhw7fd3] {
    font-size: 0.8125rem;
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
}
/* /Components/Shared/HkForm/HkPriceItemPicker.razor.rz.scp.css */
/* Price-item picker. */

.hk-price-item-picker[b-ec8uvrtnge] {
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.hk-pip-provider[b-ec8uvrtnge] {
    flex: 0 1 12rem;
    min-width: 0;
}

.hk-pip-field[b-ec8uvrtnge] {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

/* The popover's own UA box (centred, bordered, padded) replaced by a dropdown menu's; HkPriceItemPicker.razor.js
   sets its place and size. */
.hk-pip-popup[b-ec8uvrtnge] {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: .25rem 0;
    overflow-y: auto;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--hk-shadow-lg);
}

.hk-pip-options[b-ec8uvrtnge] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The rows and their heading share one set of columns, so the values line up under the headings. */
.hk-pip-row[b-ec8uvrtnge] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) 6rem 4rem;
    column-gap: .75rem;
    align-items: baseline;
    padding: .375rem .75rem;
}

.hk-pip-row > span[b-ec8uvrtnge] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-pip-head[b-ec8uvrtnge] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-pip-option[b-ec8uvrtnge] {
    cursor: pointer;
}

.hk-pip-option.active[b-ec8uvrtnge] {
    background: var(--hk-row-selected-bg);
}

.hk-pip-name[b-ec8uvrtnge] {
    font-weight: 500;
}

.hk-pip-empty[b-ec8uvrtnge] {
    padding: .375rem .75rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .hk-pip-row[b-ec8uvrtnge] {
        grid-template-columns: minmax(0, 1fr) 5rem;
    }

    .hk-pip-row > span:nth-child(2)[b-ec8uvrtnge],
    .hk-pip-row > span:nth-child(4)[b-ec8uvrtnge] {
        display: none;
    }
}
/* /Components/Shared/HkForm/HkRichTextField.razor.rz.scp.css */
/* The configured content-area background (RichTextInput.BackgroundColor), applied to the editable body. */
.hk-form-richtext-host[b-8vdj0fcjsa]  .rz-html-editor-content {
    background-color: var(--hk-richtext-bg, transparent);
}

/* ShowToolbarOnFocus: the toolbar only appears while the editor has focus. */
.hk-form-richtext-toolbar-on-focus[b-8vdj0fcjsa]  .rz-html-editor-toolbar {
    display: none;
}

.hk-form-richtext-toolbar-on-focus:focus-within[b-8vdj0fcjsa]  .rz-html-editor-toolbar {
    display: flex;
}
/* /Components/Shared/HkForm/HkTimePicker.razor.rz.scp.css */
/* The browser draws a clock inside the field too; the group's button is the clock here, so the field's own
   is not drawn twice. Chromium and WebKit only — Firefox draws none. */
.hk-time-input[b-mu0852wmbl]::-webkit-calendar-picker-indicator {
    display: none;
}
/* /Components/Shared/HkGrid/HkGrid.razor.rz.scp.css */
/* Reusable data grid. Bootstrap table as the base; this sheet is the small bespoke layer.
   Theme-aware via Bootstrap CSS variables. */

.hk-grid-caption[b-epxaujg0ue] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

/* The frame: the same hairline, corner radius and raised ground the Radzen grid gets from --rz-grid-border
   in radzen-overrides.css §5, so the two grid kinds sit on one page without a seam (design.md §6). The wrapper
   already clips (overflow-x: auto), which is what rounds the header band's corners. */
.hk-grid > .table-responsive[b-epxaujg0ue] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--hk-surface-raised);
}

.hk-grid-table[b-epxaujg0ue] {
    font-size: var(--hk-grid-font-size);
    margin: 0;
}

/* The frame draws the bottom edge; a last row's own hairline would double it. */
.hk-grid-table > tbody > tr:last-child > *[b-epxaujg0ue],
.hk-grid-table > tfoot > tr:last-child > *[b-epxaujg0ue] {
    border-bottom: 0;
}

/* Header typography comes from the global `.table > thead > tr > th` rule in
   base.css §8 — a scoped copy here used to override it with slightly different
   weight and tint, so grid headers and .hk-table headers never quite matched. */

/* A header may wrap at its spaces. With nowrap the full title is the column's minimum width, so a view's
   configured widths lose to its longest titles and the table overflows its card. */
.hk-grid-table > thead > tr > th[b-epxaujg0ue] {
    white-space: normal;
}

/* Sortable header rendered as a borderless button/link so it reads as a header but acts as a control. */
.hk-grid-sort[b-epxaujg0ue] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hk-grid-sort:hover[b-epxaujg0ue] {
    color: var(--bs-emphasis-color);
}

.hk-grid-sort-ind[b-epxaujg0ue] {
    font-size: 0.6875rem;
}

.hk-grid-row-clickable[b-epxaujg0ue] {
    cursor: pointer;
}

/* Tool columns (row expander / selection checkbox) — shrink to content, centered. */
.hk-grid-tool-col[b-epxaujg0ue] {
    width: 1px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

/* The selected-row colour is shared chrome, not this component's: base.css §8 paints .hk-grid-row-selected
   for HkGrid and the hand-written tables alike, through Bootstrap's own table-state variable. */

/* Striped: the stripe is Bootstrap's type layer, the one .table-striped sets, so hover and selection — the state
   layer over it — still win on a grey row. A class rather than :nth-of-type, which counts band and detail rows. */
.hk-grid-row-alt > *[b-epxaujg0ue] {
    --bs-table-bg-type: var(--hk-row-stripe-bg);
}

/* The row open beside a grid that also has a selection (Current with Selection): a bar down its leading edge,
   so it reads apart from the selected rows' blue and composes with it. A pseudo-element rather than a cell
   shadow, which Bootstrap already uses for the hover and selection tint. */
.hk-grid-row-current > :first-child[b-epxaujg0ue] {
    position: relative;
}

.hk-grid-row-current > :first-child[b-epxaujg0ue]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--bs-primary);
}

/* Group header rows: the sub-section head's grey, so a band reads as the same rank as an HkSection Plain header
   and stands clear of the tinted ground (design.md §12: no third grey). */
.hk-grid-group > td[b-epxaujg0ue] {
    background: var(--hk-n-300);
    font-weight: 600;
}

.hk-grid-group-count[b-epxaujg0ue] {
    margin-left: 0.4rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.hk-grid-group-toggle[b-epxaujg0ue] {
    background: none;
    border: 0;
    padding: 0 0.4rem 0 0;
    color: var(--bs-secondary-color);
    cursor: pointer;
    line-height: 1;
}

.hk-grid-expand[b-epxaujg0ue] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bs-secondary-color);
    cursor: pointer;
    line-height: 1;
}

/* Detail (hierarchy) rows. */
.hk-grid-detail > td[b-epxaujg0ue] {
    background: var(--bs-tertiary-bg);
}

/* Footer / totals row. */
.hk-grid-footer td[b-epxaujg0ue] {
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    border-top: 2px solid var(--bs-border-color);
}

.hk-grid-state[b-epxaujg0ue] {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 1.75rem 1rem;
}

/* The pager's chrome lives in HkPager.razor.css, with the markup it styles. */

/* Capped-height mode (MaxHeight): the body scrolls under a sticky header. */
.hk-grid-scroll[b-epxaujg0ue] {
    overflow-y: auto;
}

/* The sticky header keeps the header row's own ground (the table's raised surface, base.css §8), so a capped
   grid's header matches an uncapped grid's on the same tab. */
.hk-grid-scroll thead th[b-epxaujg0ue] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--hk-surface-raised);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Click-selection rows: suppress text selection so Shift+click ranges don't highlight text. */
.hk-grid-row-clickselect[b-epxaujg0ue] {
    user-select: none;
}

/* Drag-drop reordering. The grip initiates the drag (hk-grid.js); indicator classes are toggled there. */
.hk-grid-drag-handle[b-epxaujg0ue] {
    color: var(--bs-secondary-color);
    cursor: grab;
    touch-action: none;
}

.hk-grid-row-dragging[b-epxaujg0ue] {
    opacity: 0.4;
}

.hk-grid-drop-above > td[b-epxaujg0ue] {
    box-shadow: inset 0 2px 0 var(--bs-primary);
}

.hk-grid-drop-below > td[b-epxaujg0ue] {
    box-shadow: inset 0 -2px 0 var(--bs-primary);
}

/* A row while its columns render their EditTemplates. */
.hk-grid-row-editing[b-epxaujg0ue] {
    background: var(--bs-warning-bg-subtle);
}
/* /Components/Shared/HkGrid/HkPager.razor.rz.scp.css */
/* The pager's own chrome, moved here from HkGrid.razor.css when the order warnings started using it:
   CSS isolation scopes a rule to the component that declares it, so while these lived in the grid the
   hand-written copy of this markup rendered unstyled. */
.hk-grid-pager[b-he6xfaofll] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* The current page carries the brand; the neutral .active gray read as merely
   hovered, so the pager gave no answer to "where am I". */
.hk-grid-pager .btn.active[b-he6xfaofll] {
    color: var(--hk-on-primary);
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    z-index: 1;
}

.hk-grid-pageinfo[b-he6xfaofll] {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Pager ellipsis between numbered page buttons. */
.hk-grid-ellipsis[b-he6xfaofll] {
    align-self: center;
    padding: 0 0.25rem;
    color: var(--bs-secondary-color);
}
/* /Components/Shared/HkLifecycle/HkLifecycle.razor.rz.scp.css */
/* Dots joined by hairlines. Layout (flex, wrap, gaps, colours, weights) is Bootstrap utilities in the
   markup; only the dots and their connectors need rules, because no utility draws a connected step list. */

.hk-lifecycle-step[b-rmtg90ppp1] {
    gap: 0.375rem;
}

/* The connector to the previous step. */
.hk-lifecycle-step + .hk-lifecycle-step[b-rmtg90ppp1]::before {
    content: "";
    width: 1rem;
    height: 1px;
    margin: 0 0.375rem;
    background: var(--bs-border-color);
}

.hk-lifecycle-step.is-done + .hk-lifecycle-step[b-rmtg90ppp1]::before {
    background: var(--bs-primary);
}

.hk-lifecycle-dot[b-rmtg90ppp1] {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.hk-lifecycle-step.is-done .hk-lifecycle-dot[b-rmtg90ppp1] {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}

.hk-lifecycle-step.is-current .hk-lifecycle-dot[b-rmtg90ppp1] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}
/* /Components/Shared/HkModal/HkModal.razor.rz.scp.css */
.hk-modal[b-u68wztr474] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    display: flex;
    flex-direction: column;
    width: min(var(--hk-modal-w, 32rem), 94vw);
    max-height: 85vh;
    background: var(--hk-surface-raised);
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: var(--hk-shadow-lg);
    outline: none;
    /* The body's ground differs from the panel's, so it has to be cut to the rounded corners — without
       this the grey squares off the bottom of a dialog that has no footer. */
    overflow: hidden;
}

.hk-modal-sm[b-u68wztr474] { --hk-modal-w: 24rem; }
.hk-modal-md[b-u68wztr474] { --hk-modal-w: 32rem; }
.hk-modal-lg[b-u68wztr474] { --hk-modal-w: 52rem; }
.hk-modal-xl[b-u68wztr474] { --hk-modal-w: 71rem; }

/* Full-height panel: the body becomes the flex child that absorbs the remaining space. */
.hk-modal-fill[b-u68wztr474] {
    height: 85vh;
}

.hk-modal-fill .hk-modal-body[b-u68wztr474] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Head and foot are the dialog's own chrome and stay on the raised ground; the body between them is the
   ground the user works on, the same tint a section body uses (design.md §12: two grounds, no third grey).
   The tint alone is a faint step, so a full-strength line does the separating — n-300, the sub-section
   header's weight, not the n-200 hairline a field or a table draws with. */
.hk-modal-head[b-u68wztr474] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--hk-surface-raised);
    border-bottom: 1px solid var(--hk-n-300);
}

.hk-modal-title[b-u68wztr474] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.hk-modal-body[b-u68wztr474] {
    padding: 1.25rem;
    overflow: auto;
    background: var(--hk-surface-sunken);
}

.hk-modal-foot[b-u68wztr474] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--hk-surface-raised);
    border-top: 1px solid var(--hk-n-300);
}
/* /Components/Shared/HkModal/HkPromptDialog.razor.rz.scp.css */
/* The prompt's label wraps its own input, so it has to stack them — otherwise the
   caption and the field sit side by side on one line. */

.hk-prompt-field[b-1y8ug04bqq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.hk-prompt-field > span[b-1y8ug04bqq] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hk-n-600);
}

.hk-prompt-error[b-1y8ug04bqq] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}
/* /Components/Shared/HkPageAlerts/HkPageAlerts.razor.rz.scp.css */
/* Pinned to the window under the topbar (--hk-sticky-top is the topbar's height plus its hairline; a layout
   without one leaves it at 0). Above the sticky rail and the topbar, and above a dialog, since the answer to a
   button pressed in a dialog is worth seeing. */
.hk-page-alerts[b-g7461sjsxi] {
    position: fixed;
    top: calc(var(--hk-sticky-top, 0px) + 0.75rem);
    right: 0.75rem;
    z-index: 1090;
    width: min(26rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - var(--hk-sticky-top, 0px) - 1.5rem);
    overflow-y: auto;
    /* The strip between and around the alerts must not swallow clicks meant for the page behind it. */
    pointer-events: none;
}

.hk-page-alerts .alert[b-g7461sjsxi] {
    pointer-events: auto;
}
/* /Components/Shared/HkPreflight/HkPreflightDetailsFrame.razor.rz.scp.css */
/* The detail block's frame. hk-preflight-details.js sets the height from the content on load; the starting
   height is what shows before that (or without the script), and the cap is where it starts to scroll inside. */
.hk-preflight-details-frame[b-9zfg6wz2ae] {
    display: block;
    width: 100%;
    height: 6rem;
    max-height: 24rem;
    margin-top: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--hk-surface-raised);
}
/* /Components/Shared/HkRecordEditor/HkRecordEditor.razor.rz.scp.css */
.hk-record-editor[b-r5wtmax28k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hk-record-editor-head[b-r5wtmax28k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.hk-record-editor-status[b-r5wtmax28k] {
    margin-top: 0.25rem;
}

/* Keeps Save/Cancel reachable on long forms without scrolling to the bottom. */
.hk-record-editor-foot[b-r5wtmax28k] {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}
/* /Components/Shared/HkRules/HkRuleCollectionEditor.razor.rz.scp.css */
/* The rule row's own column widths. Utilities cannot express them: each control is capped to what its
   content needs so a row stays readable, and the row wraps instead of scrolling on a phone. */

.hk-rules-type[b-gk1m4dfudf] {
    max-width: 8rem;
}

.hk-rules-variable[b-gk1m4dfudf],
.hk-rules-value[b-gk1m4dfudf] {
    max-width: 12rem;
}

.hk-rules-operator[b-gk1m4dfudf] {
    max-width: 11rem;
}

.hk-rules-join[b-gk1m4dfudf] {
    max-width: 6rem;
}

.hk-rules-expression[b-gk1m4dfudf] {
    min-width: 16rem;
}
/* /Components/Shared/HkScriptDialog/HkScriptDialog.razor.rz.scp.css */
/* Editor on the left, variable browser on the right; stacks on narrow screens. */
.hk-script-dialog[b-g3jl0bm731] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1rem;
}

@media (max-width: 62rem) {
    .hk-script-dialog[b-g3jl0bm731] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hk-script-variables[b-g3jl0bm731] {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
    font-size: 0.8125rem;
}

.hk-script-variables-title[b-g3jl0bm731] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.hk-script-variable[b-g3jl0bm731] {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: 0.25rem 0;
}

.hk-script-variable-head[b-g3jl0bm731] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Click-to-insert names rendered as links, as in the WebForms browser. */
.hk-script-insert[b-g3jl0bm731] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bs-link-color);
    cursor: pointer;
    font-weight: 600;
}

.hk-script-insert:hover[b-g3jl0bm731] {
    text-decoration: underline;
}

.hk-script-type[b-g3jl0bm731] {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hk-script-expand[b-g3jl0bm731] {
    background: none;
    border: 0;
    padding: 0;
    margin-left: auto;
    color: var(--bs-secondary-color);
    cursor: pointer;
    line-height: 1;
}

.hk-script-member-group[b-g3jl0bm731] {
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin: 0.25rem 0 0.1rem;
}

.hk-script-member[b-g3jl0bm731] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0.1rem 0.25rem;
    text-align: start;
    cursor: pointer;
    border-radius: var(--bs-border-radius-sm);
}

.hk-script-member:hover[b-g3jl0bm731] {
    background: var(--bs-tertiary-bg);
}

.hk-script-member-name[b-g3jl0bm731] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/HkSection/HkSection.razor.rz.scp.css */
/* The details/summary mechanics only; the card chrome is the shared .hk-order-section family (base.css §7). */

.hk-section-head[b-ybk149a2y4] {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.hk-section-head[b-ybk149a2y4]::-webkit-details-marker {
    display: none;
}

.hk-section-head[b-ybk149a2y4]::marker {
    content: "";
}

/* A shade lighter on hover — derived from the primary so it follows tenant branding. */
.hk-order-section-head:hover:not(.hk-section-head-static)[b-ybk149a2y4] {
    background: color-mix(in srgb, var(--bs-primary) 88%, white);
}

/* A non-collapsible section's header is not a control. */
.hk-section-head-static[b-ybk149a2y4] {
    cursor: default;
    user-select: auto;
}

/* The heading inherits the head's micro-caps treatment instead of the document's heading scale. */
.hk-section-heading[b-ybk149a2y4] {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.hk-section-summary[b-ybk149a2y4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-section-caret[b-ybk149a2y4] {
    margin-left: auto;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.82;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hk-section[open] > .hk-section-head .hk-section-caret[b-ybk149a2y4] {
    transform: rotate(180deg);
}

/* ── VerticalTitle: the band on the right edge ──────────────────────────────
   The same band turned on its side: it stands along the card's right edge and the title reads downwards,
   so the card spends its whole height on the body. The head stays first in the DOM, so the title is still
   read before the content; only the visual order moves it to the right. */
.hk-section-vertical[b-ybk149a2y4] {
    display: flex;
}

.hk-section-vertical > .hk-section-head[b-ybk149a2y4] {
    order: 1;
    flex-shrink: 0;
    writing-mode: vertical-rl;
}

.hk-section-vertical > .hk-order-section-head[b-ybk149a2y4] {
    padding: 0.875rem 0.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--bs-primary);
}

.hk-section-vertical > .hk-order-section-body[b-ybk149a2y4],
.hk-section-vertical > .hk-section-plain-body[b-ybk149a2y4] {
    flex: 1;
    min-width: 0;
}

/* ── Plain: the nested group ─────────────────────────────────────────────────
   A disclosure row that reads as something to click: a grey bar with the chevron first, as a disclosure
   control is expected to look, and a framed body under it so the fields inside are visibly enclosed. It
   is a card of its own, one rank below the section card and drawn in neutrals rather than the brand.
   Sits inside a section body or a dialog; in a form grid the host gives it .hk-form-span so it takes the
   whole row. */
.hk-section-plain[b-ybk149a2y4] {
    margin: 0;
}

/* A grey band, not a lighter fill of the brand. Two primary-filled bars stacked — the card's and this one —
   read as two sections of equal rank rather than a group inside a section, and the tenant colour twice
   over crowds the fields it is supposed to be introducing. Grey steps the level down without competing:
   the n-300 fill is three steps above the pale ground it sits on, which is what makes it read as a header
   rather than as a slightly tinted strip, and the emphasis colour on it clears AA several times over. */
.hk-section-plain-head[b-ybk149a2y4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color);
    background: var(--hk-n-300);
    border: 1px solid var(--hk-n-300);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hk-section-plain-head:not(.hk-section-head-static):hover[b-ybk149a2y4] {
    background: var(--hk-n-400);
    border-color: var(--hk-n-400);
}

/* Closed, the head is the whole control and keeps all four corners. Only a <details> closes: a static
   sub-section has no open attribute either, and matching it gave its always-open head round bottom corners. */
details.hk-section-plain:not([open]) > .hk-section-plain-head[b-ybk149a2y4] {
    border-radius: var(--bs-border-radius);
}

.hk-section-plain-head .hk-section-summary[b-ybk149a2y4] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
}

/* Chevron first, pointing right when closed and down when open — the disclosure convention. */
.hk-section-plain-head .hk-section-caret[b-ybk149a2y4] {
    order: -1;
    margin-left: 0;
    opacity: 1;
    color: inherit;
    transform: rotate(-90deg);
}

.hk-section-plain[open] > .hk-section-plain-head .hk-section-caret[b-ybk149a2y4] {
    transform: rotate(0deg);
}

/* The body is framed, so the group reads as one enclosed thing rather than as fields that happen to
   follow a heading. It continues the head's box — same width, no line between them, the bottom corners
   rounded — on the app's one tinted ground, the same grey its parent section body uses: a group of fields
   is still fields, and lifting it to white would have said it was a surface of its own. The frame and the
   header do the separating instead of a change of ground. */
.hk-section-plain-body[b-ybk149a2y4] {
    padding: 0.75rem;
    background: var(--hk-surface-sunken);
    border: 1px solid var(--hk-n-300);
    border-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.hk-section-plain-body > * + *[b-ybk149a2y4] {
    margin-top: 0.75rem;
}

/* The sub-section with VerticalTitle: the grey head stands on the right, so the frame's open side and the
   rounded corners move with it. */
.hk-section-plain.hk-section-vertical > .hk-section-plain-head[b-ybk149a2y4] {
    padding: 0.625rem 0.375rem;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.hk-section-plain.hk-section-vertical > .hk-section-plain-body[b-ybk149a2y4] {
    border-top: 1px solid var(--hk-n-300);
    border-right: 0;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}
/* /Components/Shared/HkSection/HkSectionNav.razor.rz.scp.css */
/* The section navigation: a row of text links on the white page, the two toggles at its right end. */

.hk-section-nav[b-ea2p8czcq4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

/* Read like the editor's tabs (base.css §3, .nav-tabs) — the body's quiet text, darker on hover — since the
   row does a tab's job on a page too long for tabs. */
.hk-section-nav-links[b-ea2p8czcq4] {
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
    --bs-nav-link-font-weight: 500;
    --bs-nav-link-padding-x: 0.625rem;
    --bs-nav-link-padding-y: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* The first link starts flush with the sections under it. */
.hk-section-nav-links > .nav-item:first-child > .nav-link[b-ea2p8czcq4] {
    padding-left: 0;
}

.hk-section-nav-count[b-ea2p8czcq4] {
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-tertiary-color);
}

.hk-section-nav-toggles[b-ea2p8czcq4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}
/* /Components/Shared/HkTimeline/HkTimeline.razor.rz.scp.css */
/*
    HkTimeline.

    One scroll port holds the whole board; the resource column is sticky-left and the two-row time header
    sticky-top, so a planner can scroll a week sideways and never lose either. Everything below the header
    is drawn from CSS variables the component sets — --hk-tl-width (the timeline's full length),
    --hk-tl-grid (the axis step) and --hk-tl-day — which is what makes zoom a single number rather than a
    re-layout.

    Colour carries category, the left stripe carries state. Trying to say both with one fill is what makes
    a dense board unreadable.

    The drag preview (.hk-tl-preview) and badge (.hk-tl-badge) are created by hk-planning-drag.js, the
    controller both planning boards share, which copies the component's CSS-isolation scope attribute onto
    them — that is why they can be styled from this scoped file at all.
*/

.hk-tl[b-9vuacqw1j1] {
    --hk-tl-label-w: 13rem;
    --hk-tl-line: var(--hk-n-200);
    --hk-tl-line-strong: var(--hk-n-300);

    position: relative;
    overflow: auto;
    max-height: 72vh;
    background: var(--hk-surface-raised);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overscroll-behavior-x: contain;
}

.hk-tl.is-dragging[b-9vuacqw1j1] {
    cursor: grabbing;
    user-select: none;
}

.hk-tl-inner[b-9vuacqw1j1] {
    width: max-content;
    min-width: 100%;
}

/* ── the two-row header ────────────────────────────────────────────────────── */

.hk-tl-head[b-9vuacqw1j1] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    background: var(--hk-surface-sunken);
    border-bottom: 1px solid var(--hk-tl-line-strong);
}

.hk-tl-axis[b-9vuacqw1j1] {
    position: relative;
    flex: 0 0 auto;
    width: var(--hk-tl-width);
}

.hk-tl-days[b-9vuacqw1j1] {
    position: relative;
    height: 1.5rem;
}

.hk-tl-day[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-left: 1px solid var(--hk-tl-line-strong);
}

/* Info blue, matching HkCalendar: the brand slate reads grey (design.md §14) and green is the blocks'
   ready-to-start. The accent is left to the now line, so orange means one thing on either board. */
.hk-tl-day.is-today[b-9vuacqw1j1] {
    background: color-mix(in srgb, var(--bs-info) 12%, transparent);
}

.hk-tl-day-label[b-9vuacqw1j1] {
    padding-left: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 650;
    white-space: nowrap;
    color: var(--hk-n-700);
}

.hk-tl-day.is-today .hk-tl-day-label[b-9vuacqw1j1] {
    color: var(--bs-info-text-emphasis);
}

.hk-tl-hours[b-9vuacqw1j1] {
    position: relative;
    height: 1.25rem;
    border-top: 1px solid var(--hk-tl-line);
}

.hk-tl-hour[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--hk-tl-line);
}

.hk-tl-hour-label[b-9vuacqw1j1] {
    display: block;
    padding: 0.25rem 0 0 0.25rem;
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

/* ── resource column ──────────────────────────────────────────────────────── */

.hk-tl-label[b-9vuacqw1j1] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    gap: 0.375rem;
    align-items: center;
    width: var(--hk-tl-label-w);
    padding: 0.25rem 0.5rem;
    background: var(--hk-surface-raised);
    border-right: 1px solid var(--hk-tl-line-strong);
}

.hk-tl-corner[b-9vuacqw1j1] {
    z-index: 4;
    align-self: stretch;
    background: var(--hk-surface-sunken);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hk-n-600);
}

.hk-tl-label-text[b-9vuacqw1j1] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-tl-label-sub[b-9vuacqw1j1] {
    font-size: 0.6875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* The per-row lane toggle: "+7" when collapsed, "−" when open. */
.hk-tl-more[b-9vuacqw1j1] {
    margin-left: auto;
    padding: 0 0.3125rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    color: var(--bs-secondary-color);
    background: var(--hk-n-100);
    border: 1px solid var(--hk-tl-line);
    border-radius: 999px;
    cursor: pointer;
}

.hk-tl-more:hover[b-9vuacqw1j1] {
    color: var(--bs-primary);
    border-color: var(--hk-focus-border-color);
}

/* ── rows and the background layer ────────────────────────────────────────── */

.hk-tl-rows[b-9vuacqw1j1] {
    position: relative;
}

.hk-tl-bands[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--hk-tl-label-w);
    width: var(--hk-tl-width);
    pointer-events: none;
    /* Gridlines cost no DOM: one repeating gradient, sized off --hk-tl-grid — the axis step, so the body
       always rules at the same rhythm the header labels. */
    background-image: repeating-linear-gradient(to right,
        var(--hk-tl-line) 0 1px,
        transparent 1px var(--hk-tl-grid));
}

/* Day boundaries, drawn heavier than the step lines so a week still reads as days. Only applied while days
   are wide enough to tell apart — the component decides, and drops the class when they are not. */
.hk-tl-bands.is-day-grid[b-9vuacqw1j1] {
    background-image:
        repeating-linear-gradient(to right,
            var(--hk-tl-line-strong) 0 1px,
            transparent 1px var(--hk-tl-day)),
        repeating-linear-gradient(to right,
            var(--hk-tl-line) 0 1px,
            transparent 1px var(--hk-tl-grid));
}

.hk-tl-band[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
}

.hk-tl-band.is-nonworking[b-9vuacqw1j1] {
    background: rgba(27, 27, 27, 0.045);
}

/* A closed day reads differently from "outside working hours" — same weight, different texture. */
.hk-tl-band.is-holiday[b-9vuacqw1j1] {
    background: repeating-linear-gradient(135deg,
        rgba(192, 68, 47, 0.10) 0 6px,
        rgba(192, 68, 47, 0.04) 6px 12px);
}

/* Today, tinted through the body so the header's mark continues down the column. The calendar drops its
   equivalent — seven columns are all on screen, so the heading is enough — but this board scrolls
   sideways across weeks, and the band is how today is found again after scrolling away from it. */
.hk-tl-today-band[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--bs-info) 5%, transparent);
}

.hk-tl-now[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--hk-accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.hk-tl-row[b-9vuacqw1j1] {
    position: relative;
    z-index: 1;
    display: flex;
    border-bottom: 1px solid var(--hk-tl-line);
}

.hk-tl-row:last-child[b-9vuacqw1j1] {
    border-bottom: 0;
}

.hk-tl-track[b-9vuacqw1j1] {
    position: relative;
    flex: 0 0 auto;
    width: var(--hk-tl-width);
}

/* ── bars ─────────────────────────────────────────────────────────────────── */

.hk-tl-bar[b-9vuacqw1j1] {
    --hk-tl-fill: var(--bs-info-bg-subtle);
    --hk-tl-edge: var(--bs-info-border-subtle);
    --hk-tl-state: var(--hk-n-400);

    position: absolute;
    display: flex;
    align-items: stretch;
    height: calc(var(--hk-tl-lane) - 5px);
    margin-top: 4px;
    padding: 0;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: left;
    color: var(--hk-n-800);
    background: var(--hk-tl-fill);
    border: 1px solid var(--hk-tl-edge);
    border-left: 3px solid var(--hk-tl-state);
    border-radius: var(--bs-border-radius-sm);
    cursor: grab;
    /* Horizontal pointer travel is a drag; vertical travel stays the page's to scroll with. */
    touch-action: pan-y;
    /* Held here rather than by cancelling pointerdown: cancelling it would also suppress the focus the
       press gives the bar. A bar's label is not selectable text, so nothing is lost. */
    user-select: none;
}

/* A bar that cannot be dragged must not offer the hand. It is still clickable, so it gets the pointer. */
.hk-tl-bar[data-tl-movable="false"][data-tl-resizable="false"][b-9vuacqw1j1] {
    cursor: pointer;
}

.hk-tl-bar:hover[b-9vuacqw1j1] {
    box-shadow: var(--hk-shadow-sm);
    filter: brightness(0.98);
}

.hk-tl-bar:focus-visible[b-9vuacqw1j1] {
    outline: 0;
    box-shadow: var(--hk-focus-ring);
}

/* Three sides, never the fourth: `border-color` would take the state stripe with it, and being picked is
   not a state. The inset ring sits inside the border, so it leaves the stripe alone too. */
.hk-tl-bar.is-selected[b-9vuacqw1j1] {
    border-top-color: var(--bs-primary);
    border-right-color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

/* Category — what kind of moment this is. */
.hk-tl-bar.is-priority[b-9vuacqw1j1] {
    --hk-tl-fill: var(--bs-success-bg-subtle);
    --hk-tl-edge: var(--bs-success-border-subtle);
}

.hk-tl-bar.is-group[b-9vuacqw1j1] {
    --hk-tl-fill: color-mix(in srgb, var(--hk-sequence) 14%, white);
    --hk-tl-edge: color-mix(in srgb, var(--hk-sequence) 34%, white);
}

.hk-tl-bar.is-custom[b-9vuacqw1j1] {
    --hk-tl-fill: var(--hk-n-100);
    --hk-tl-edge: var(--hk-n-300);
}

.hk-tl-bar.is-transport[b-9vuacqw1j1] {
    --hk-tl-fill: var(--bs-danger-bg-subtle);
    --hk-tl-edge: var(--bs-danger-border-subtle);
}

/* State — the left stripe, readable independently of the fill. The scale is the status badge's, so a
   moment reads the same on the board as in the information panel beside it: green is ready to start,
   not finished, and finished is the quiet grey of something needing no further attention. */
.hk-tl-bar.is-notstarted[b-9vuacqw1j1] { --hk-tl-state: var(--hk-n-400); }
.hk-tl-bar.is-started[b-9vuacqw1j1]    { --hk-tl-state: var(--bs-warning); }
.hk-tl-bar.is-paused[b-9vuacqw1j1]     { --hk-tl-state: var(--bs-warning); }
.hk-tl-bar.is-complete[b-9vuacqw1j1]   { --hk-tl-state: var(--bs-secondary-color); }
.hk-tl-bar.is-canceled[b-9vuacqw1j1]   { --hk-tl-state: var(--bs-danger); }

/* Everything it waits for is done — the one thing a planner scans for, so it takes the stripe rather than
   an outline of its own. Last, because it stands in for the not-started it always comes with. */
.hk-tl-bar.is-ready[b-9vuacqw1j1]      { --hk-tl-state: var(--bs-success); }

.hk-tl-bar.is-canceled .hk-tl-bar-label[b-9vuacqw1j1] {
    text-decoration: line-through;
}

.hk-tl-bar-body[b-9vuacqw1j1] {
    display: flex;
    flex: 1 1 auto;
    gap: 0.25rem;
    align-items: baseline;
    min-width: 0;
    padding: 0 0.3125rem;
    overflow: hidden;
}

.hk-tl-bar-label[b-9vuacqw1j1] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-tl-bar-sub[b-9vuacqw1j1] {
    overflow: hidden;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Resize grips: wide enough to hit, visible only while the bar is hovered.
   They are only rendered on a bar wide enough to hold two of them plus a middle to grab — the component
   decides. On a short bar they would otherwise cover the entire surface and every drag would resize a
   moment the planner meant to move. */
.hk-tl-handle[b-9vuacqw1j1] {
    flex: 0 0 8px;
    cursor: ew-resize;
    background: transparent;
}

.hk-tl-bar:hover .hk-tl-handle[b-9vuacqw1j1] {
    background: linear-gradient(var(--hk-tl-edge), var(--hk-tl-edge)) center / 2px 60% no-repeat;
}

/* Everything that is not the chain being followed. Dimming rather than highlighting keeps the lit bars in
   their own status colours, which is the information the planner still needs while following the chain. */
/* Enough to recede, not enough to disappear: the rest of the plan is still what the lit chain has to be
   read against, so a planner following one job must be able to see what it is being fitted around. */
.hk-tl-bar.is-dimmed[b-9vuacqw1j1] {
    opacity: 0.45;
}

.hk-tl-bar.is-dimmed:hover[b-9vuacqw1j1],
.hk-tl-bar.is-dimmed:focus-visible[b-9vuacqw1j1] {
    opacity: 0.85;
}

/* ── the gesture, drawn ───────────────────────────────────────────────────
   The source bar never moves: it dims in place while the preview carries the requested time. After the
   drop the preview stays, pulsing, until the reload answers — so the board never flashes back to the
   pre-drag layout while the engine is replanning. */

.hk-tl-bar.is-drag-source[b-9vuacqw1j1],
.hk-tl-bar.is-pending[b-9vuacqw1j1],
.hk-tl-bar.is-pending-source[b-9vuacqw1j1] {
    opacity: 0.35;
}

/* Positioned by the controller from the source bar's offsetTop, which already includes the bar's own
   margin — so the preview itself must carry none. */
.hk-tl-preview[b-9vuacqw1j1] {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    height: calc(var(--hk-tl-lane) - 5px);
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--bs-primary) 14%, white);
    border: 1px dashed var(--bs-primary);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--hk-shadow-md);
}

.hk-tl-preview-label[b-9vuacqw1j1] {
    padding: 0 0.3125rem;
    overflow: hidden;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--hk-n-800);
}

.hk-tl-preview.is-pending[b-9vuacqw1j1] {
    animation: hk-tl-pending-b-9vuacqw1j1 1.2s ease-in-out infinite;
}

@keyframes hk-tl-pending-b-9vuacqw1j1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* The time under the pointer, told exactly. Fixed-positioned by the controller. */
.hk-tl-badge[b-9vuacqw1j1] {
    position: fixed;
    z-index: 1060;
    padding: 0.125rem 0.4375rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    color: var(--hk-n-0);
    background: var(--hk-n-800);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--hk-shadow-md);
}

/* ── load lane ────────────────────────────────────────────────────────────
   Each resource's days drawn as a fuel gauge on the same axis as its bars, so "is Tuesday full" is
   answered without leaving the row. Empty days stay blank — an unbooked machine should read as quiet. */

.hk-tl-load[b-9vuacqw1j1] {
    position: absolute;
    inset-inline: 0;
    bottom: 1px;
    height: 6px;
}

.hk-tl-load-day[b-9vuacqw1j1] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    border-inline-start: 1px solid var(--hk-n-0);
}

.hk-tl-load-fill[b-9vuacqw1j1] {
    background: color-mix(in srgb, var(--bs-primary) 45%, white);
    border-radius: 1px;
}

.hk-tl-load-day.is-tight .hk-tl-load-fill[b-9vuacqw1j1] {
    background: var(--bs-warning);
}

/* Over capacity — including any work at all on a closed day. The one state worth interrupting for. */
.hk-tl-load-day.is-over .hk-tl-load-fill[b-9vuacqw1j1] {
    background: var(--bs-danger);
}

.hk-tl-load-day.is-closed .hk-tl-load-fill[b-9vuacqw1j1] {
    background: var(--hk-n-300);
}

.hk-tl-empty[b-9vuacqw1j1] {
    padding: 1.25rem;
    color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: no-preference) {
    .hk-tl-bar[b-9vuacqw1j1] {
        transition: box-shadow 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hk-tl-preview.is-pending[b-9vuacqw1j1] {
        animation: none;
        opacity: 0.7;
    }
}
/* /Components/Shared/HkTree/HkTree.razor.rz.scp.css */
/* Reusable tree view. Theme-aware via Bootstrap CSS variables; depth indents through the
   --hk-tree-depth custom property each row carries. */

.hk-tree[b-ih753dls0i] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hk-tree-row[b-ih753dls0i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    padding-inline-start: calc(0.5rem + var(--hk-tree-depth) * 1.1rem);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    user-select: none;
}

/* One step past the section body's own ground (base.css §7) — a tree renders inside an HkSection (the
   customer card's Approvers), where the sunken neutral is what the row already sits on, so the hover has
   to go further to be a hover at all. Still subtle enough on white, where the tree also appears. */
.hk-tree-row:hover[b-ih753dls0i] {
    background: var(--hk-n-100);
}

.hk-tree-row-selected[b-ih753dls0i],
.hk-tree-row-selected:hover[b-ih753dls0i] {
    background: var(--bs-primary-bg-subtle);
    font-weight: 600;
}

.hk-tree-row-disabled[b-ih753dls0i] {
    color: var(--bs-secondary-color);
    cursor: default;
}

.hk-tree-row-disabled:hover[b-ih753dls0i] {
    background: none;
}

/* Keyboard focus ring only — mouse users keep the plain rows. */
.hk-tree-row:focus[b-ih753dls0i] {
    outline: none;
}

.hk-tree-row:focus-visible[b-ih753dls0i] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Fixed-width toggle slot so leaf labels align with expandable siblings. */
.hk-tree-toggle[b-ih753dls0i] {
    flex: none;
    width: 1rem;
    display: inline-flex;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.hk-tree-icon[b-ih753dls0i] {
    flex: none;
    color: var(--bs-secondary-color);
}

.hk-tree-label[b-ih753dls0i] {
    min-width: 0;
}

/* Drag-drop indicators (classes applied by hk-tree.js during a drag). */
.hk-tree-row-dragging[b-ih753dls0i] {
    opacity: 0.5;
}

.hk-tree-drop-before[b-ih753dls0i] {
    box-shadow: inset 0 2px 0 var(--bs-primary);
}

.hk-tree-drop-after[b-ih753dls0i] {
    box-shadow: inset 0 -2px 0 var(--bs-primary);
}

.hk-tree-drop-into[b-ih753dls0i] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
}
/* /Components/Shop/CatalogListing.razor.rz.scp.css */
/* The list grid: the WebForms {layout}-object-list.{mode}-mode columns — portrait compact 3/4/5, normal 2/3/4,
   wide 1/2/3 across the small/medium/large breakpoints; landscape and list tiles are wider, so fewer per row. */
.hk-catalog-list[b-i0cpucg4vo] {
    display: grid;
    gap: 1.25rem 1rem;
    align-items: start;
}

.hk-catalog-list-portrait.hk-catalog-compact[b-i0cpucg4vo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-catalog-list-portrait.hk-catalog-normal[b-i0cpucg4vo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-catalog-list-portrait.hk-catalog-wide[b-i0cpucg4vo] { grid-template-columns: minmax(0, 1fr); }
.hk-catalog-list-landscape[b-i0cpucg4vo] { grid-template-columns: minmax(0, 1fr); }
.hk-catalog-list-list[b-i0cpucg4vo] { grid-template-columns: minmax(0, 1fr); gap: 0; }

@media (min-width: 768px) {
    .hk-catalog-list-portrait.hk-catalog-compact[b-i0cpucg4vo] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hk-catalog-list-portrait.hk-catalog-normal[b-i0cpucg4vo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hk-catalog-list-portrait.hk-catalog-wide[b-i0cpucg4vo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hk-catalog-list-landscape.hk-catalog-compact[b-i0cpucg4vo],
    .hk-catalog-list-landscape.hk-catalog-normal[b-i0cpucg4vo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .hk-catalog-list-portrait.hk-catalog-compact[b-i0cpucg4vo] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .hk-catalog-list-portrait.hk-catalog-normal[b-i0cpucg4vo] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hk-catalog-list-portrait.hk-catalog-wide[b-i0cpucg4vo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hk-catalog-list-landscape.hk-catalog-compact[b-i0cpucg4vo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* /Components/Shop/CatalogTileView.razor.rz.scp.css */
/* One tile: thumbnail, data, controls. Portrait stacks them; landscape and list put the thumbnail beside the text,
   the way the WebForms TemplateLandscape / TemplateList controls did. */
.hk-catalog-tile[b-9bjdr7387u] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.hk-catalog-tile-landscape[b-9bjdr7387u],
.hk-catalog-tile-list[b-9bjdr7387u] {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
    grid-template-areas: "thumb data" "thumb controls";
    column-gap: 1rem;
}

.hk-catalog-tile-list[b-9bjdr7387u] {
    grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr) auto;
    grid-template-areas: "thumb data controls";
    padding: .75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.hk-catalog-tile-landscape > .hk-catalog-thumb[b-9bjdr7387u],
.hk-catalog-tile-list > .hk-catalog-thumb[b-9bjdr7387u] { grid-area: thumb; }
.hk-catalog-tile-landscape > .hk-catalog-data[b-9bjdr7387u],
.hk-catalog-tile-list > .hk-catalog-data[b-9bjdr7387u] { grid-area: data; }
.hk-catalog-tile-landscape > .hk-catalog-tile-controls[b-9bjdr7387u],
.hk-catalog-tile-list > .hk-catalog-tile-controls[b-9bjdr7387u] { grid-area: controls; }

.hk-catalog-thumb[b-9bjdr7387u] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.hk-catalog-thumb a[b-9bjdr7387u],
.hk-catalog-thumb-button[b-9bjdr7387u] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.hk-catalog-thumb-img[b-9bjdr7387u] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.hk-catalog-thumb a:hover .hk-catalog-thumb-img[b-9bjdr7387u],
.hk-catalog-thumb-button:hover .hk-catalog-thumb-img[b-9bjdr7387u] {
    opacity: .9;
}

.hk-catalog-name[b-9bjdr7387u] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hk-catalog-name a[b-9bjdr7387u] { text-decoration: none; }
.hk-catalog-name a:hover[b-9bjdr7387u] { text-decoration: underline; }

/* Properties: one per row on small screens, the list control's number per row from medium up. */
.hk-catalog-properties[b-9bjdr7387u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem .75rem;
    font-size: .875rem;
}

@media (min-width: 768px) {
    .hk-catalog-properties[b-9bjdr7387u] { grid-template-columns: repeat(var(--hk-properties-columns, 1), minmax(0, 1fr)); }
}

.hk-catalog-property-name[b-9bjdr7387u] {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.hk-catalog-property-value[b-9bjdr7387u] {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.hk-catalog-grouping .form-select[b-9bjdr7387u] { max-width: 100%; }

.hk-catalog-tile-controls[b-9bjdr7387u] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: auto;
}

.hk-catalog-quantity[b-9bjdr7387u] { max-width: 9rem; }

/* The object's own page: the view control's two columns, thumbnail left, everything else right. */
.hk-catalog-tile-view[b-9bjdr7387u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.hk-catalog-tile-view > .hk-catalog-thumb[b-9bjdr7387u] {
    flex-direction: column;
    align-items: stretch;
    padding: .25rem;
}

.hk-catalog-tile-view .hk-catalog-name[b-9bjdr7387u] { font-size: 1.25rem; }

@media (min-width: 768px) {
    .hk-catalog-tile-view[b-9bjdr7387u] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "thumb data" "thumb controls";
        align-items: start;
    }

    .hk-catalog-tile-view > .hk-catalog-thumb[b-9bjdr7387u] { grid-area: thumb; }
    .hk-catalog-tile-view > .hk-catalog-data[b-9bjdr7387u] { grid-area: data; }
    .hk-catalog-tile-view > .hk-catalog-tile-controls[b-9bjdr7387u] { grid-area: controls; margin-top: 0; }
}

/* The additional thumbnails under the large one: dimmed until chosen. */
.hk-catalog-thumbs[b-9bjdr7387u] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding-top: .25rem;
}

.hk-catalog-thumb-small[b-9bjdr7387u] {
    width: 20%;
    max-width: 6rem;
    cursor: pointer;
    opacity: .5;
    transition: opacity .3s;
    border: 1px solid var(--bs-border-color);
}

.hk-catalog-thumb-small:hover[b-9bjdr7387u],
.hk-catalog-thumb-small.active[b-9bjdr7387u] { opacity: 1; }