/* /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/CorporateGroups/CorporateGroupsView.razor.rz.scp.css */
.hk-cgroups[b-ae52jdoqns] {
    max-width: 56rem;
}

.hk-cgroups-list[b-ae52jdoqns] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hk-cgroups-group[b-ae52jdoqns] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.hk-cgroups-head[b-ae52jdoqns] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.hk-cgroups-member[b-ae52jdoqns] {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem 0.375rem 2rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}
/* /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/MediaBank/MediaBankView.razor.rz.scp.css */
.hk-mb[b-0m8x84udlv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hk-mb-section[b-0m8x84udlv] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hk-n-200, #e4e7eb);
    border-radius: 0.5rem;
    background: var(--hk-surface-raised, #fff);
    overflow: hidden;
}

.hk-mb-toolbar[b-0m8x84udlv] {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    border-bottom: 1px solid var(--hk-n-200, #e4e7eb);
}

.hk-mb-group[b-0m8x84udlv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.hk-mb-group + .hk-mb-group[b-0m8x84udlv] {
    padding-left: 0.5rem;
    border-left: 1px solid var(--hk-n-200, #e4e7eb);
}

.hk-mb-search[b-0m8x84udlv] {
    width: 14rem;
}

.hk-mb-body[b-0m8x84udlv] {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 4fr;
    height: 32rem;
    min-height: 0;
}

.hk-mb-body-containers[b-0m8x84udlv] {
    height: 22rem;
}

.hk-mb-tree[b-0m8x84udlv] {
    min-height: 0;
    overflow: auto;
    padding: 0.5rem 0.25rem;
    border-right: 1px solid var(--hk-n-200, #e4e7eb);
}

.hk-mb-objects[b-0m8x84udlv] {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .hk-mb-body[b-0m8x84udlv] {
        grid-template-columns: 1fr;
        grid-template-rows: 10rem 1fr;
        height: auto;
        min-height: 28rem;
    }

    .hk-mb-tree[b-0m8x84udlv] {
        border-right: 0;
        border-bottom: 1px solid var(--hk-n-200, #e4e7eb);
    }

    .hk-mb-group + .hk-mb-group[b-0m8x84udlv] {
        padding-left: 0;
        border-left: 0;
    }
}
/* /Components/Admin/MediaBank/MediaObjectGallery.razor.rz.scp.css */
.hk-mb-gallery-wrap[b-m6lhavamvw] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.hk-mb-gallery[b-m6lhavamvw] {
    flex: 1 1 auto;
    min-height: 0;
    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, #e4e7eb);
    border-radius: 0.375rem;
    background: var(--hk-surface-raised, #fff);
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

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

.hk-mb-tile:focus-visible[b-m6lhavamvw] {
    outline: none;
    box-shadow: var(--hk-focus-ring, 0 0 0 0.15rem rgba(13, 110, 253, 0.35));
}

.hk-mb-tile-selected[b-m6lhavamvw],
.hk-mb-tile-selected:hover[b-m6lhavamvw] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.07);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

.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-n-50, #f6f7f9);
}

.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, #8a94a1);
}

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

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

.hk-mb-meta-row[b-m6lhavamvw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

@media (max-width: 767.98px) {
    .hk-mb-meta[b-m6lhavamvw] {
        grid-template-columns: 1fr;
    }
}
/* /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 (site.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 (site.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/Planning/ProductionPresetsView.razor.rz.scp.css */
.hk-preset-picklist[b-vpuigt9afj] {
    max-height: 14rem;
    overflow-y: auto;
    background: var(--bs-body-bg);
}
/* /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/Smtp/SmtpSettingsView.razor.rz.scp.css */
.hk-smtp[b-xl8fq85bdf] {
    max-width: 72rem;
}
/* /Components/Admin/SystemSettings/SystemSettingsView.razor.rz.scp.css */
.hk-sysadmin[b-lhxus1bpv7] {
    max-width: 64rem;
}

.hk-sysadmin-list dt[b-lhxus1bpv7] {
    font-weight: 500;
    color: var(--bs-secondary-color);
}
/* /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);
}

.browse-wrapper[b-az7zqw4xa2] {
	display: flex;
	flex-direction: column;
	/* MainLayout: 4rem topbar + 1.25rem content padding top and bottom */
	height: calc(100vh - 6.5rem);
	overflow: hidden;
}

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

.tree-panel[b-az7zqw4xa2] {
	width: 220px;
	min-width: 160px;
	max-width: 350px;
	overflow-y: auto;
	background-color: var(--color-bg-secondary);
	border-right: 1px solid var(--color-border);
}

.file-panel[b-az7zqw4xa2] {
	min-width: 0;
	min-height: 0;
	background-color: var(--hk-surface-sunken);
}

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

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

/* The strip under the file panel: selection count and paste/copy status. */
.status-bar[b-az7zqw4xa2] {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-text-muted);
	background: var(--color-bg-secondary);
}

/* 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;
}

[b-l8oj8nwrn7] .table-striped > tbody > tr.table-active > td,
[b-l8oj8nwrn7] .table-hover > tbody > tr.table-active:hover > td,
[b-l8oj8nwrn7] .table > tbody > tr.table-active > td {
	background-color: var(--bs-primary-bg-subtle) !important;
}

[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;
}
/* /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;
	gap: 4px;
	margin-bottom: 4px;
	align-items: center;
}

.filter-input[b-cayrfud6ma] {
	flex: 1;
	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 */
.metadata-panel[b-yw050fkf5m] {
	background-color: var(--color-bg);
}

.file-info-section[b-yw050fkf5m] {
	background-color: var(--color-bg-secondary);
}

.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-list[b-yw050fkf5m] {
	flex: 1;
}

.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 site.css. */

/* The tenant card doubles as the module switcher's toggle: a button styled as the shared card (as in OrderAdminLayout). */
.hk-adm-switch[b-j1hd05zr4h] {
    margin: 0.75rem;
}

.hk-adm-tenant-toggle[b-j1hd05zr4h] {
    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: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* On the dark rail (site.css §1 --hk-sidebar-*) the lift is a brighter wash, not a shadow. */
.hk-adm-tenant-toggle:hover[b-j1hd05zr4h] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-muted);
    transform: translateY(-1px);
}

.hk-adm-tenant-toggle:active[b-j1hd05zr4h] {
    transform: translateY(0) scale(0.99);
}

.hk-adm-tenant-toggle[aria-expanded="true"][b-j1hd05zr4h] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-muted);
}

.hk-adm-tenant-mark[b-j1hd05zr4h] {
    font-size: 1rem;
}

.hk-adm-tenant-info[b-j1hd05zr4h] {
    flex: 1;
}

.hk-adm-tenant-caret[b-j1hd05zr4h] {
    color: var(--hk-sidebar-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
    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-adm-tenant-toggle[aria-expanded="true"] .hk-adm-tenant-caret[b-j1hd05zr4h] {
    transform: rotate(180deg);
}

.hk-adm-switch-menu[b-j1hd05zr4h] {
    width: 100%;
    min-width: 14rem;
}

/* Bootstrap shows the 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. */
.hk-adm-switch-menu.show[b-j1hd05zr4h] {
    animation: hk-adm-menu-in-b-j1hd05zr4h 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.hk-adm-switch-menu .dropdown-item[b-j1hd05zr4h] {
    font-size: 0.8125rem;
}

.hk-adm-switch-menu .dropdown-item.active[b-j1hd05zr4h] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}

.hk-adm-switch-menu .dropdown-item i[b-j1hd05zr4h] {
    color: var(--bs-secondary-color);
}

/* The way back fills the row; the language switch keeps its own width at the end. */
.hk-adm-foot[b-j1hd05zr4h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hk-adm-foot-back[b-j1hd05zr4h] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hk-sidebar-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    padding: 0.25rem;
}

.hk-adm-foot-back:hover[b-j1hd05zr4h] {
    color: var(--hk-sidebar-text-strong);
}

/* 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 (site.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/ModuleLanguageSwitch.razor.rz.scp.css */
.hk-lang-flag[b-5pc0zd3tx0] {
    height: 0.875rem;
    width: auto;
    vertical-align: -0.0625rem;
}

/* The toggle sits on the dark rail, so it reads the rail's tokens (site.css §1 --hk-sidebar-*), like the logout link
   beside it: quiet until hovered or open, then the same brighter wash as the tenant card. */
.hk-lang-toggle[b-5pc0zd3tx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--hk-sidebar-muted);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hk-lang-toggle:hover[b-5pc0zd3tx0],
.hk-lang-toggle[aria-expanded="true"][b-5pc0zd3tx0] {
    background: var(--hk-sidebar-active);
    color: var(--hk-sidebar-text-strong);
}

.hk-lang-toggle[aria-expanded="true"][b-5pc0zd3tx0] {
    border-color: var(--hk-sidebar-muted);
}

/* design.md §11: a 44 px tap target where the pointer is a finger. */
@media (pointer: coarse) {
    .hk-lang-toggle[b-5pc0zd3tx0] {
        min-width: 2.75rem;
        height: 2.75rem;
    }
}

.hk-lang-caret[b-5pc0zd3tx0] {
    font-size: 0.75rem;
}

.hk-lang-menu[b-5pc0zd3tx0] {
    min-width: 12rem;
}

/* The same entries as the module switcher's menu (OrderAdminLayout, AdminLayout). */
.hk-lang-menu .dropdown-item[b-5pc0zd3tx0] {
    font-size: 0.8125rem;
}

.hk-lang-menu .dropdown-item.active[b-5pc0zd3tx0] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}

.hk-lang-menu .dropdown-item i[b-5pc0zd3tx0] {
    color: var(--bs-secondary-color);
}

/* The switcher's entrance, mirrored: this menu opens upward, so it rises into place. It moves the `translate`
   property, not `transform`, because Popper positions the menu through an inline transform. */
.hk-lang-menu.show[b-5pc0zd3tx0] {
    animation: hk-lang-menu-in-b-5pc0zd3tx0 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes hk-lang-menu-in-b-5pc0zd3tx0 {
    from {
        opacity: 0;
        translate: 0 0.375rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}
/* /Components/Layout/OrderAdminLayout.razor.rz.scp.css */
/* Module-specific content; shared shell geometry lives in site.css. */

.hk-oa-tenant-mark[b-kj35aai4sx] {
    font-weight: 700;
    font-size: 0.875rem;
}

.hk-oa-foot[b-kj35aai4sx] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* The rail's tokens (site.css §1): the foot sits on the same dark ground as the navigation. */
.hk-oa-avatar[b-kj35aai4sx] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hk-sidebar-active);
    color: var(--hk-sidebar-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.hk-oa-foot-info[b-kj35aai4sx] {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.hk-oa-foot-sub[b-kj35aai4sx] {
    display: block;
    color: var(--hk-sidebar-muted);
    font-size: 0.75rem; /* 12px floor for informative text */
}

.hk-oa-foot-logout[b-kj35aai4sx] {
    color: var(--hk-sidebar-muted);
    font-size: 1rem;
    text-decoration: none;
    padding: 0.25rem;
}

.hk-oa-foot-logout:hover[b-kj35aai4sx] {
    color: var(--hk-sidebar-text-strong);
}

/* The tenant card doubles as the module switcher's toggle: a button styled as the shared card. */
.hk-oa-switch[b-kj35aai4sx] {
    margin: 0.75rem;
}

.hk-oa-tenant-toggle[b-kj35aai4sx] {
    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: border-color 0.15s ease, box-shadow 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-oa-tenant-toggle:hover[b-kj35aai4sx] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-muted);
    transform: translateY(-1px);
}

.hk-oa-tenant-toggle:active[b-kj35aai4sx] {
    transform: translateY(0) scale(0.99);
}

.hk-oa-tenant-toggle[aria-expanded="true"][b-kj35aai4sx] {
    background: var(--hk-sidebar-active);
    border-color: var(--hk-sidebar-muted);
}

.hk-oa-tenant-info[b-kj35aai4sx] {
    flex: 1;
}

.hk-oa-tenant-caret[b-kj35aai4sx] {
    color: var(--hk-sidebar-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
    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-oa-tenant-toggle[aria-expanded="true"] .hk-oa-tenant-caret[b-kj35aai4sx] {
    transform: rotate(180deg);
}

.hk-oa-switch-menu[b-kj35aai4sx] {
    width: 100%;
    min-width: 14rem;
}

/* Bootstrap shows the 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. */
.hk-oa-switch-menu.show[b-kj35aai4sx] {
    animation: hk-oa-menu-in-b-kj35aai4sx 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.hk-oa-switch-menu .dropdown-item[b-kj35aai4sx] {
    font-size: 0.8125rem;
}

.hk-oa-switch-menu .dropdown-item.active[b-kj35aai4sx] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}

.hk-oa-switch-menu .dropdown-item i[b-kj35aai4sx] {
    color: var(--bs-secondary-color);
}
/* /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 (site.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/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 (site.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 (site.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 (site.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;
}

/* The detail block is foreign HTML in a sandboxed frame, so it gets a fixed box and scrolls inside it. */
.hk-pfl-details[b-kv1m2nxd1f] {
    width: 100%;
    height: 14rem;
    margin-top: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--hk-surface-raised);
}
/* /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 (site.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-mandatory[b-j92yodnqd9] {
    color: var(--bs-danger);
}

.hk-route-result ul[b-j92yodnqd9] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.hk-route-error[b-j92yodnqd9] {
    font-size: 0.8125rem;
    color: var(--bs-danger);
}
/* /Components/Orders/Dialogs/ScriptVariablesDialog.razor.rz.scp.css */
/* The routing script-variable read-out. */

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

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

.hk-vars-table[b-n6393c61pb] {
    font-size: 0.8125rem;
}

/* A long value must not push the dialog wider than it is. */
.hk-vars-table td:last-child[b-n6393c61pb] {
    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 (site.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 (site.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 (site.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 (site.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/site.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 (site.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 (site.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 (site.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);
}

/* 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 site.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 (site.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: site.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 (site.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/JobProcessings.razor.rz.scp.css */
/* Job screen — the Processings section. */

.hk-jpr-message[b-tyfo1u9a5n] {
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-danger);
}
/* /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/site.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/site.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 */
/* Order-admin overview data section. The KPI tiles are Bootstrap cards, the blocks static HkSection
   cards and the table an HkGrid, all laid out with utilities. The local rules are the ones no utility
   expresses: the icon chip's box, the ratio bar's height, and the brand edge a linked tile earns on
   hover so the operator can tell it from the static tiles beside it. */

.hk-oa-chip[b-80udex02ln] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
}

.hk-oa-bar[b-80udex02ln] {
    height: 0.375rem;
}

.hk-oa-card-link:hover[b-80udex02ln] {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: var(--hk-shadow-md);
}
/* /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 (site.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/Pages/Admin/Landing.razor.rz.scp.css */
.hk-adm-landing-title[b-blm673v1qq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hk-adm-landing-row[b-blm673v1qq] {
    max-width: 72rem;
}

.hk-adm-sysinfo dt[b-blm673v1qq] {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.hk-adm-build[b-blm673v1qq] {
    font-size: 0.8125rem;
    white-space: pre-wrap;
}
/* /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. A package is a block of fields: a hairline between packages, its number and remove command on
   one line. */
.hk-cd-detail[b-mansntviu4]  .hk-cd-package {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-package + .hk-cd-package {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.hk-cd-detail[b-mansntviu4]  .hk-cd-package-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: none;
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* 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;
}
/* /Components/Pages/Orders/IncomingDelivery.razor.rz.scp.css */
/* 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;
}
/* /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/site.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 (site.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
   (site.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 site.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. */
.hk-pp-process .btn[b-r4q9k9ofau] {
    --bs-btn-font-weight: 400;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    vertical-align: baseline;
}

/* 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
   (site.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 site.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. */
/* site.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;
}
/* /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/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/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 site.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/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
   site.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: site.css §8 paints .hk-grid-row-selected
   for HkGrid and the hand-written tables alike, through Bootstrap's own table-state variable. */

/* 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, site.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/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 (site.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: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. */
.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. After the Plain rules, which a static section always matches as closed. */
.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 (site.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(20, 28, 34, 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 (site.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; }