.app-shell { display: flex; flex-direction: column; height: 100vh; }
.app-workspace { display: flex; flex: 1; min-height: 0; }
/* Compact icons in the area menus, including Bootstrap and Telerik icons. */
.app-workspace .vertical-tree-menu .vertical-tree-menu__tree .k-treeview-leaf :is(.bi, .k-icon, .k-svg-icon) {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: 16px;
}
/* Align the root links Log and Historik without changing the review group's children. */
.app-workspace .vertical-tree-menu[aria-label="Gransk"] .k-treeview > .k-treeview-group > .k-treeview-item > .k-treeview-item-content:not(:has(> .k-treeview-toggle)) {
    padding-inline-start: max(0px, calc(var(--kendo-treeview-level, 0) * 10px - 10px));
}
/* Give the children of expanded menu items an additional five-pixel indent. */
.app-workspace .vertical-tree-menu__tree .k-treeview-group .k-treeview-group > .k-treeview-item > .k-treeview-item-content {
    padding-inline-start: calc(var(--kendo-treeview-level, 0) * 10px + 5px);
}
.app-content { flex: 1; min-width: 0; overflow: auto; }
main { padding: 24px; min-width: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; margin: 22px 0 12px; }
p { line-height: 1.5; }
.workspace-label, .subtle { color: var(--color-muted); font-size: .9rem; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.page-heading p { margin: 8px 0 0; color: var(--color-muted); }
.compact { margin-top: 24px; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; }
.summary-strip { display: flex; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; margin: 16px 0; }
.summary-strip > div { flex: 1; padding: 16px 20px; min-width: 150px; }
.summary-strip strong, .summary-strip span { display: block; }
.summary-strip strong { font-size: 1.6rem; color: var(--color-primary); }
.summary-strip span { color: var(--color-muted); font-size: .85rem; margin-top: 4px; }
.import-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: .9rem; }
input:not([type=checkbox]), select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--color-border-strong); border-radius: 5px; background: var(--color-surface); color: var(--color-ink); }
.inline-label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.file-label { min-height: 72px; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.filter-bar label:not(.inline-label) { min-width: 180px; max-width: 380px; flex: 1; }
.tab-link { text-decoration: none; padding: 10px 16px; color: var(--color-primary); border-radius: 5px; }
.tab-link.active { color: var(--color-on-primary); background: var(--color-primary); }
.catalog-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; height: calc(100vh - 260px); min-height: 450px; }
.assets-split { grid-template-columns: minmax(0, 1fr) 340px; }
.class-tree, .asset-grid, .catalog-grid { min-width: 0; min-height: 0; }
.detail-panel { overflow: auto; }
.detail-panel h2 { margin-bottom: 12px; overflow-wrap: anywhere; }
.job-grid { height: 390px; }
.list-tree { height: calc(100vh - 330px); min-height: 320px; margin: 16px 0; }
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.notice, .error-notice { border-radius: 5px; padding: 12px 16px; background: var(--color-primary-soft); }
.error-notice { color: var(--color-danger); background: #fff1f0; border: 1px solid #efc5c3; }
.review-label { color: #855200; background: #fff5d6; padding: 8px 10px; border-radius: 4px; }
.change-badge { display: inline-block; border-radius: 4px; padding: 4px 8px; font-size: .8rem; white-space: nowrap; }
.data-tree-list .change-badge { padding-block: 1px; line-height: 18px; }
.change-badge.keep { background: #e5f3ea; color: #235d3b; }
.change-badge.add { background: #fff2c8; color: #71530e; }
.change-badge.remove { background: #fde9e8; color: #9c302b; }
.change-badge.inactive { background: #edf0f1; color: #5d6d72; }
dt { color: var(--color-muted); font-size: .85rem; margin-top: 12px; }
dd { margin: 4px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.id-text { font-family: ui-monospace, monospace; font-size: .8rem; }
.history-entry { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--color-border); padding: 10px 0; font-size: .85rem; }
.history-entry time { color: var(--color-muted); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; background: #fff3cd; padding: 1rem; width: 100%; z-index: 20000; }
@media (max-width: 1200px) { .import-cards { grid-template-columns: 1fr; } .catalog-split, .assets-split { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 800px) { main { padding: 16px; } .catalog-split, .assets-split { display: flex; flex-direction: column; height: auto; } .class-tree, .asset-grid, .catalog-grid { height: 450px; } .detail-panel { max-height: none; } .workspace-label { display: none; } }
main:has(> .classifications-page) { padding: 0; height: 100%; }
main:has(> .properties-page) { padding: 0; height: 100%; }
main:has(> .lists-page) { padding: 0; height: 100%; }
.lists-page { height: 100%; min-height: 0; }
.lists-page .k-splitter { border: 0; }
.list-values-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.list-values-content { flex: 1; min-height: 0; min-width: 0; }
.list-selector { max-width: 220px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; }
.properties-page { height: 100%; min-height: 0; }
.properties-page .k-splitter { border: 0; }
.property-list-pane, .property-classification-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.property-list-content, .property-classification-editor { flex: 1; min-height: 0; min-width: 0; }
.property-classification-pane > .error-notice { margin: 0; padding: 8px 12px; }
.classifications-page { height: 100%; min-height: 0; }
.classifications-page .inline-label { margin: 0; white-space: nowrap; }

.classification-property-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.classification-property-editor { height: 100%; flex: 1; min-height: 0; min-width: 0; }
.classification-property-pane > .notice, .classification-property-pane > .error-notice { margin: 0; padding: 8px 12px; }
.classifications-page .k-splitter { border: 0; }

.classification-tree-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.classification-tree-content { flex: 1; min-height: 0; }
.classification-pane-heading { margin: 0; padding: 5px; font-size: 1rem; font-weight: 600; background: var(--kendo-color-surface, #fafafa); }
.classification-property-checkbox.k-button { width: 16px; min-width: 16px; height: 16px; padding: 0; vertical-align: middle; border: 1px solid var(--color-border); border-radius: 4px; }
[role="checkbox"][aria-checked="true"] > .classification-property-checkbox { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.classification-property-checkbox svg { width: 14px; height: 14px; }
.classification-status-button.k-button { width: 30px; height: 30px; padding: 4px; }
.classification-status-use.k-button { background: #e6f4ec; color: #237447; border-color: #a7d6b7; }
.classification-status-pending.k-button { background: #fff4cc; color: #8a6500; border-color: #e3c969; }
.classification-status-exclude.k-button { background: #fce8e8; color: #b12d2d; border-color: #e5aaaa; }
.classification-status-button.k-button:not(:disabled):hover { filter: brightness(.94); }
.login-shell { min-height: 100dvh; background: var(--color-background, #f4f7fa); }
.login-content { display: flex; justify-content: center; padding: clamp(36px, 10vh, 100px) 20px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; }
.login-card h1 { margin: 0 0 24px; font-size: 1.5rem; }
.login-card label { display: block; margin-top: 18px; }
.login-card input { width: 100%; box-sizing: border-box; margin-top: 6px; }
.login-card .remember-me { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; }
.login-card .remember-me input { width: auto; margin: 0; }
.login-submit { width: 100%; margin-top: 24px; padding: 10px 16px; border: 0; border-radius: 4px; color: #fff; background: var(--color-primary); cursor: pointer; font: inherit; }
.users-page { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }
.users-page .data-grid { flex: 1; min-height: 0; }
main:has(> .ai-usage-page) { padding: 0; height: 100%; }
.ai-usage-page { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }
.ai-usage-page .data-grid { flex: 1; min-height: 0; }
.history-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.history-page .data-grid { flex: 1; min-height: 0; }
.history-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.history-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.reviews-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.reviews-page .data-tree-list { flex: 1; min-height: 0; }
.review-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.classification-reviews { height: 100%; min-height: 0; }
a.review-count-link,
a.review-count-link:visited { color: #0d6efd; text-decoration: underline; white-space: nowrap; }
.review-form { display: flex; flex-direction: column; gap: 10px; }
.review-form input, .review-form textarea { padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; }

/* Reuse the object-page layout for all three asset panels. */
.assets-page { height: 100%; min-height: 0; overflow: hidden; --asset-inspection-color: var(--kendo-color-warning-subtle, #fff4cc); }
main:has(> .assets-page) { padding: 0; height: 100%; }
.assets-page > .k-splitter { border: 0; }
.asset-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }
.asset-pane-content { flex: 1; min-height: 0; overflow: hidden; }
.asset-pane--inactive .classification-property-editor { opacity: .5; }
.assets-page .asset-row-selected > td,
.assets-page .asset-classification-linked > td { background-color: var(--kendo-color-primary-subtle, #eaf3f7); }

.import-reset-action { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.import-reset-panel { margin-top: 20px; }
.import-reset-controls { display: flex; flex-wrap: wrap; gap: 12px; }

/* Telerik renders the modal outside the page's scoped CSS root. */
.list-suggestions-window .k-window-content { padding: 0; overflow: hidden; display: flex; }
.list-suggestions-window .k-window-title { white-space: normal; overflow-wrap: anywhere; }