/* Shared, opt-in content variants for the document preview in a list bottom panel. */

/* Navigation-side icon metrics must not leak into the document preview.
   These are the established metrics that the former broad shell selector
   supplied to document-preview headings and top navigation. Deliberately
   limit them to the shared preview component, leaving compact toolbar and
   table glyphs to their more specific local rules below. */
html .vario-list-document-preview-pane[data-vario-preview-navigation="top"] [data-vario-component-part="tabs"] > button > .nav-icon,
html[data-vario-theme] .vario-list-document-preview-pane[data-vario-preview-navigation="top"] [data-vario-component-part="tabs"] > button > .nav-icon,
html .vario-list-document-preview-pane .vario-list-preview-section > h3 > .nav-icon,
html[data-vario-theme] .vario-list-document-preview-pane .vario-list-preview-section > h3 > .nav-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    opacity: 1 !important;
    shape-rendering: geometricPrecision !important;
}

html .vario-document-preview-tab-panel,
html[data-vario-theme] .vario-document-preview-tab-panel {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html .vario-document-preview-tab-panel:has(> .vario-document-preview-supplemental-section),
html[data-vario-theme] .vario-document-preview-tab-panel:has(> .vario-document-preview-supplemental-section) {
    overflow-y: auto !important;
}

/* In the simultaneous register workspace the preview body is height-bound.
   Keep long values and compact basic-section grids reachable without changing
   the dedicated inner scrolling owned by line/settlement tables. */
html .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-preview-tab-panel,
html[data-vario-theme] .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] .vario-document-preview-tab-panel {
    overflow-y: auto !important;
}

/* Table-based preview sections own their scrolling inside VarioListGrid. Keep
   the surrounding register preview neutral so its padding and scrollbars do
   not consume more room than the document rows themselves. */
html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-list-preview-body:has(> .vario-document-preview-tab-panel > .vario-document-preview-table-section),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-list-preview-body:has(> .vario-document-preview-tab-panel > .vario-document-preview-table-section) {
    padding: 0 !important;
    overflow: hidden !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-tab-panel:has(> .vario-document-preview-table-section),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-tab-panel:has(> .vario-document-preview-table-section) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    overflow: hidden !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-tab-panel:has(> .vario-document-preview-table-section):has(> .vario-document-preview-supplemental-section),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-tab-panel:has(> .vario-document-preview-table-section):has(> .vario-document-preview-supplemental-section) {
    grid-template-rows: minmax(0, 1fr) auto !important;
}

html .vario-document-preview-supplemental-section,
html[data-vario-theme] .vario-document-preview-supplemental-section {
    min-height: 34px !important;
    margin: 0 10px 8px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--vario-list-border-soft) !important;
    border-radius: var(--vario-radius-xs) !important;
    background: var(--vario-color-surface-subtle) !important;
    color: var(--vario-color-text-strong) !important;
    box-sizing: border-box !important;
}

html .vario-document-preview-supplemental-section:not(:has(dl)),
html[data-vario-theme] .vario-document-preview-supplemental-section:not(:has(dl)) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html .vario-document-preview-supplemental-section > h3,
html[data-vario-theme] .vario-document-preview-supplemental-section > h3 {
    margin: 0 8px 0 0 !important;
    font: 700 11px/16px var(--vario-font-family-ui) !important;
}

html .vario-document-preview-supplemental-section:not(:has(dl)) > h3,
html[data-vario-theme] .vario-document-preview-supplemental-section:not(:has(dl)) > h3 {
    margin-right: auto !important;
}

html .vario-document-preview-table-section,
html[data-vario-theme] .vario-document-preview-table-section {
    display: grid !important;
    grid-template-rows: var(--vario-size-document-preview-toolbar-height) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-document-preview-table-section.vario-document-preview-settlements,
html[data-vario-theme] .vario-document-preview-table-section.vario-document-preview-settlements {
    grid-template-rows: var(--vario-size-document-preview-metrics-height) minmax(0, 1fr) var(--vario-size-document-preview-inner-footer-height) !important;
}

html .vario-document-preview-table-section.vario-document-preview-links:has(.vario-document-preview-inner-footer),
html[data-vario-theme] .vario-document-preview-table-section.vario-document-preview-links:has(.vario-document-preview-inner-footer) {
    grid-template-rows: var(--vario-size-document-preview-toolbar-height) minmax(0, 1fr) var(--vario-size-document-preview-inner-footer-height) !important;
}

html .vario-document-preview-toolbar,
html[data-vario-theme] .vario-document-preview-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    height: var(--vario-size-document-preview-toolbar-height) !important;
    padding: 2px 8px !important;
    border-bottom: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
    color: var(--vario-color-text-muted) !important;
    font: 600 10.5px/16px Inter, "Segoe UI", Arial, sans-serif !important;
    white-space: nowrap !important;
}

html .vario-document-preview-toolbar strong,
html[data-vario-theme] .vario-document-preview-toolbar strong {
    color: var(--vario-color-text-strong) !important;
    font-weight: 750 !important;
}

html .vario-document-preview-toolbar-spacer,
html[data-vario-theme] .vario-document-preview-toolbar-spacer {
    flex: 1 1 auto !important;
    min-width: 6px !important;
}

html .vario-document-preview-local-search,
html[data-vario-theme] .vario-document-preview-local-search {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) 20px !important;
    align-items: center !important;
    width: min(var(--vario-size-document-preview-local-search-width), 34vw) !important;
    height: var(--vario-size-document-preview-local-search-height) !important;
    min-width: 150px !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: var(--vario-radius-xs) !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-muted) !important;
}

html .vario-document-preview-local-search.is-active,
html[data-vario-theme] .vario-document-preview-local-search.is-active {
    border-color: var(--vario-color-primary-500) !important;
    background: var(--vario-color-info-50) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vario-list-accent) 13%, transparent) !important;
}

html .vario-document-preview-local-search > .nav-icon,
html[data-vario-theme] .vario-document-preview-local-search > .nav-icon {
    width: 12px !important;
    height: 12px !important;
    margin-left: 5px !important;
}

html .vario-document-preview-local-search input,
html[data-vario-theme] .vario-document-preview-local-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 20px !important;
    padding: 0 3px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--vario-color-text-strong) !important;
    font: 600 10.5px/20px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-document-preview-local-search button,
html[data-vario-theme] .vario-document-preview-local-search button {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vario-list-accent) !important;
}

html .vario-document-preview-local-search button .nav-icon,
html[data-vario-theme] .vario-document-preview-local-search button .nav-icon {
    width: 11px !important;
    height: 11px !important;
}

html .vario-document-preview-grid-pane,
html[data-vario-theme] .vario-document-preview-grid-pane,
html .vario-document-preview-grid-scroll,
html[data-vario-theme] .vario-document-preview-grid-scroll {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html .vario-document-preview-grid-pane,
html[data-vario-theme] .vario-document-preview-grid-pane {
    overflow: hidden !important;
}

html .vario-document-preview-grid-scroll,
html[data-vario-theme] .vario-document-preview-grid-scroll {
    overflow: auto !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] :is(.vario-document-preview-table-section, .vario-document-preview-grid-pane),
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] :is(.vario-document-preview-table-section, .vario-document-preview-grid-pane) {
    align-content: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll {
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--vario-color-border-field) transparent !important;
    overscroll-behavior: contain !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar-track,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

html body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar-thumb,
html[data-vario-theme] body .vario-list-bottom-panel[data-vario-component-contract="list-bottom-panel-v2"] [data-vario-component-contract="list-preview-pane-v2"] .vario-document-preview-grid-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    background: var(--vario-color-border-field) !important;
    background-clip: content-box !important;
}

html body .vario-document-preview-grid,
html[data-vario-theme] body .vario-document-preview-grid {
    width: 100% !important;
    min-width: 790px !important;
    table-layout: fixed !important;
}

html body .vario-document-preview-grid thead,
html[data-vario-theme] body .vario-document-preview-grid thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

html body .vario-document-preview-grid th,
html body .vario-document-preview-grid td,
html[data-vario-theme] body .vario-document-preview-grid th,
html[data-vario-theme] body .vario-document-preview-grid td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .vario-document-preview-grid tr.vario-grid-empty-message-row,
html[data-vario-theme] body .vario-document-preview-grid tr.vario-grid-empty-message-row,
html body .vario-document-preview-grid td.vario-grid-empty-row,
html[data-vario-theme] body .vario-document-preview-grid td.vario-grid-empty-row {
    height: 44px !important;
    min-height: 44px !important;
}

html body .vario-document-preview-grid td.vario-grid-empty-row,
html[data-vario-theme] body .vario-document-preview-grid td.vario-grid-empty-row {
    padding: 6px 10px !important;
    vertical-align: middle !important;
    text-align: center !important;
}

html .vario-document-preview-kind,
html[data-vario-theme] .vario-document-preview-kind {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html .vario-document-preview-kind .nav-icon,
html[data-vario-theme] .vario-document-preview-kind .nav-icon {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    color: var(--vario-list-accent) !important;
}

html .vario-document-preview-document-link,
html[data-vario-theme] .vario-document-preview-document-link,
html .vario-document-preview-text-action,
html[data-vario-theme] .vario-document-preview-text-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vario-list-accent) !important;
    font: inherit !important;
    font-weight: 750 !important;
    text-decoration: none !important;
}

html .vario-document-preview-document-link:hover,
html[data-vario-theme] .vario-document-preview-document-link:hover,
html .vario-document-preview-text-action:hover,
html[data-vario-theme] .vario-document-preview-text-action:hover {
    text-decoration: underline !important;
}

html .vario-document-preview-settlement-metrics,
html[data-vario-theme] .vario-document-preview-settlement-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(125px, 0.75fr)) minmax(190px, 1.35fr) !important;
    min-width: 0 !important;
    height: var(--vario-size-document-preview-metrics-height) !important;
    border-bottom: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
}

html .vario-document-preview-settlement-metrics > div,
html[data-vario-theme] .vario-document-preview-settlement-metrics > div {
    display: grid !important;
    align-content: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding: 5px 14px !important;
    border-right: 1px solid var(--vario-list-border-subtle) !important;
}

html .vario-document-preview-settlement-metrics > div:last-child,
html[data-vario-theme] .vario-document-preview-settlement-metrics > div:last-child {
    border-right: 0 !important;
}

html .vario-document-preview-settlement-metrics span,
html[data-vario-theme] .vario-document-preview-settlement-metrics span {
    color: var(--vario-color-text-muted) !important;
    font: 500 10px/13px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-document-preview-settlement-metrics strong,
html[data-vario-theme] .vario-document-preview-settlement-metrics strong {
    overflow: hidden !important;
    color: var(--vario-color-text-strong) !important;
    font: 750 12px/16px Inter, "Segoe UI", Arial, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .vario-document-preview-settlement-metrics strong.success,
html[data-vario-theme] .vario-document-preview-settlement-metrics strong.success {
    color: var(--vario-color-success-600) !important;
}

html .vario-document-preview-settlement-metrics strong.primary,
html[data-vario-theme] .vario-document-preview-settlement-metrics strong.primary {
    color: var(--vario-list-accent) !important;
}

html .vario-document-preview-progress,
html[data-vario-theme] .vario-document-preview-progress {
    width: 100% !important;
    height: 4px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    background: var(--vario-color-border-subtle) !important;
}

html .vario-document-preview-progress > span,
html[data-vario-theme] .vario-document-preview-progress > span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: var(--vario-list-accent) !important;
}

html .vario-document-preview-inner-footer,
html[data-vario-theme] .vario-document-preview-inner-footer {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    height: var(--vario-size-document-preview-inner-footer-height) !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border-top: 1px solid var(--vario-list-border-soft) !important;
    background: var(--vario-color-surface-subtle) !important;
    color: var(--vario-color-text-muted) !important;
    font: 600 10.5px/16px Inter, "Segoe UI", Arial, sans-serif !important;
    white-space: nowrap !important;
}

html .vario-document-preview-inner-footer .nav-icon,
html[data-vario-theme] .vario-document-preview-inner-footer .nav-icon {
    width: 12px !important;
    height: 12px !important;
    color: var(--vario-list-accent) !important;
}

html .vario-document-preview-history-layout,
html[data-vario-theme] .vario-document-preview-history-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(250px, 2fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html .vario-document-preview-history-column,
html[data-vario-theme] .vario-document-preview-history-column {
    display: grid !important;
    grid-template-rows: var(--vario-size-document-preview-toolbar-height) minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-right: 1px solid var(--vario-list-border-subtle) !important;
}

html .vario-document-preview-history-scroll,
html[data-vario-theme] .vario-document-preview-history-scroll {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}

html body .vario-document-preview-history-grid,
html[data-vario-theme] body .vario-document-preview-history-grid {
    min-width: 610px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-document-preview-history-grid .vario-document-history-grid,
html[data-vario-theme] .vario-document-preview-history-grid .vario-document-history-grid {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

html .vario-document-preview-history-grid thead,
html[data-vario-theme] .vario-document-preview-history-grid thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

html .vario-document-preview-history-grid th:nth-child(1),
html[data-vario-theme] .vario-document-preview-history-grid th:nth-child(1) { width: 126px !important; }
html .vario-document-preview-history-grid th:nth-child(2),
html[data-vario-theme] .vario-document-preview-history-grid th:nth-child(2) { width: 128px !important; }
html .vario-document-preview-history-grid th:nth-child(3),
html[data-vario-theme] .vario-document-preview-history-grid th:nth-child(3) { width: 150px !important; }

html .vario-document-preview-notes-column,
html[data-vario-theme] .vario-document-preview-notes-column {
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    background: var(--vario-color-surface-card) !important;
}

html .vario-document-preview-notes-column > section,
html[data-vario-theme] .vario-document-preview-notes-column > section {
    min-width: 0 !important;
    padding: 8px 12px !important;
    overflow: auto !important;
}

html .vario-document-preview-notes-column > section + section,
html[data-vario-theme] .vario-document-preview-notes-column > section + section {
    border-top: 1px solid var(--vario-list-border-subtle) !important;
}

html .vario-document-preview-notes-column header,
html[data-vario-theme] .vario-document-preview-notes-column header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    color: var(--vario-color-text-heading) !important;
    font: 750 11px/15px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-document-preview-notes-column header span,
html[data-vario-theme] .vario-document-preview-notes-column header span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html .vario-document-preview-notes-column header .nav-icon,
html[data-vario-theme] .vario-document-preview-notes-column header .nav-icon {
    width: 12px !important;
    height: 12px !important;
    color: var(--vario-list-accent) !important;
}

html .vario-document-preview-notes-column header small,
html[data-vario-theme] .vario-document-preview-notes-column header small {
    color: var(--vario-color-text-muted) !important;
    font: 500 9.5px/13px Inter, "Segoe UI", Arial, sans-serif !important;
}

html .vario-document-preview-notes-column p,
html[data-vario-theme] .vario-document-preview-notes-column p {
    margin: 6px 0 0 !important;
    color: var(--vario-color-text-strong) !important;
    font: 500 11px/16px Inter, "Segoe UI", Arial, sans-serif !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 1450px) {
    html body .vario-document-preview-five-sections[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button,
    html[data-vario-theme] body .vario-document-preview-five-sections[data-vario-preview-navigation="left"] [data-vario-component-part="tabs"] > button {
        gap: 6px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    html .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section,
    html[data-vario-theme] .vario-list-preview-pane[data-vario-preview-navigation="left"] .vario-list-preview-section {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html .vario-document-preview-toolbar,
    html[data-vario-theme] .vario-document-preview-toolbar {
        gap: 7px !important;
    }
}

@media (max-width: 980px) {
    html .vario-document-preview-history-layout,
    html[data-vario-theme] .vario-document-preview-history-layout {
        grid-template-columns: minmax(560px, 3fr) minmax(250px, 2fr) !important;
        overflow: auto !important;
    }

    html .vario-document-preview-settlement-metrics,
    html[data-vario-theme] .vario-document-preview-settlement-metrics {
        min-width: 690px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .vario-document-preview-progress > span,
    html[data-vario-theme] .vario-document-preview-progress > span {
        transition: none !important;
    }
}