/* Shared document category navigation. The icon-field appearance is opt-in. */

html .vario-document-category-tab-stack[data-vario-category-tabs-appearance="icon-field"],
html[data-vario-theme] .vario-document-category-tab-stack[data-vario-category-tabs-appearance="icon-field"] {
    --vario-document-tabs-main-row-height: var(--vario-size-document-category-icon-field-row-height) !important;
}

html .vario-document-category-tab-stack[data-vario-category-tabs-appearance="icon-field"][data-vario-category-tabs-density="compact"],
html[data-vario-theme] .vario-document-category-tab-stack[data-vario-category-tabs-appearance="icon-field"][data-vario-category-tabs-density="compact"] {
    --vario-document-tabs-main-row-height: var(--vario-size-document-category-icon-field-compact-row-height) !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"][data-vario-category-tabs-density="compact"],
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"][data-vario-category-tabs-density="compact"] {
    --vario-size-document-category-icon-field-row-height: var(--vario-size-document-category-icon-field-compact-row-height);
    --vario-size-document-category-icon-field-tab-height: var(--vario-size-document-category-icon-field-compact-tab-height);
    --vario-size-document-category-icon-field-icon-height: var(--vario-size-document-category-icon-field-compact-icon-height);
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"],
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--vario-size-document-category-icon-field-row-height) !important;
    min-height: var(--vario-size-document-category-icon-field-row-height) !important;
    max-height: var(--vario-size-document-category-icon-field-row-height) !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vario-component-rail-border) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--vario-component-rail-bg) !important;
    box-shadow: var(--vario-module-command-rail-raised-shadow) !important;
    box-sizing: border-box !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"][data-vario-has-actions="true"],
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"][data-vario-has-actions="true"] {
    overflow: visible !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-list,
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-list {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: var(--vario-size-document-category-icon-field-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-list::-webkit-scrollbar,
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-actions,
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-actions {
    position: relative !important;
    z-index: var(--vario-layer-module-action-trigger) !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    min-width: 0 !important;
    margin-inline-start: var(--vario-space-8) !important;
    overflow: visible !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    height: var(--vario-size-document-category-icon-field-tab-height) !important;
    min-height: var(--vario-size-document-category-icon-field-tab-height) !important;
    max-height: var(--vario-size-document-category-icon-field-tab-height) !important;
    min-width: max-content !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-color-border-field) !important;
    border-radius: 5px !important;
    background: var(--vario-color-surface-card) !important;
    color: var(--vario-color-text-muted) !important;
    box-shadow: 0 1px 2px rgba(6, 36, 68, 0.07) !important;
    font: 600 11px/16px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab::before,
html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab::after,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab::before,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab::after {
    display: none !important;
    content: none !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 var(--vario-size-document-category-icon-field-icon-width) !important;
    width: var(--vario-size-document-category-icon-field-icon-width) !important;
    height: var(--vario-size-document-category-icon-field-icon-height) !important;
    border-right: 1px solid var(--vario-color-border-field) !important;
    border-radius: 4px 0 0 4px !important;
    background: var(--vario-color-surface-muted) !important;
    color: var(--vario-color-text-muted) !important;
    box-sizing: border-box !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon .nav-icon,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon .nav-icon {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
    stroke-width: 2 !important;
}

html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-label,
html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: var(--vario-size-document-category-icon-field-icon-height) !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab.active,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab.active {
    border-color: color-mix(in srgb, var(--vario-list-accent) 45%, var(--vario-color-border-field)) !important;
    background: var(--vario-color-info-50) !important;
    color: var(--vario-list-accent) !important;
    box-shadow: 0 1px 2px rgba(6, 36, 68, 0.08) !important;
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab.active .vario-document-category-tab-icon,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab.active .vario-document-category-tab-icon {
    border-right-color: var(--vario-list-accent) !important;
    background: var(--vario-list-accent) !important;
    color: var(--vario-color-text-on-primary) !important;
}

@media (hover: hover) {
    html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:hover,
    html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:hover {
        border-color: color-mix(in srgb, var(--vario-list-accent) 45%, var(--vario-color-border-field)) !important;
        box-shadow: var(--vario-shadow-button-hover) !important;
    }

    html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:active:hover,
    html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:active:hover {
        box-shadow: var(--vario-shadow-button-pressed) !important;
        transition-duration: var(--vario-motion-button-press-duration) !important;
    }
}

html .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:focus-visible,
html[data-vario-theme] .vario-document-category-tabs[data-vario-component="VarioDocumentCategoryTabs"][data-vario-component-contract="document-category-tabs-v1"][data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: 1px !important;
}

@media (max-width: 1450px) {
    html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-label,
    html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-label {
        padding-inline: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab,
    html .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon,
    html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab,
    html[data-vario-theme] .vario-document-category-tabs[data-vario-category-tabs-appearance="icon-field"] .vario-document-category-tab-icon {
        transition-duration: 0.01ms !important;
    }
}

/* Configuration uses the same category component as operational modules. */
html .vario-admin-navigation-stack,
html[data-vario-theme] .vario-admin-navigation-stack {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    margin: 4px 10px 8px !important;
    overflow: visible !important;
    border: 1px solid var(--vario-component-rail-border) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--vario-component-document-subcategory-row-bg) !important;
    box-shadow: var(--vario-shadow-card) !important;
    box-sizing: border-box !important;
}

html .vario-admin-navigation-stack > .vario-document-category-tabs,
html[data-vario-theme] .vario-admin-navigation-stack > .vario-document-category-tabs {
    flex: 0 0 var(--vario-document-tabs-main-row-height) !important;
}

html .vario-admin-navigation-stack > .vario-sales-document-subtype-tabs,
html[data-vario-theme] .vario-admin-navigation-stack > .vario-sales-document-subtype-tabs {
    display: flex !important;
    flex: 0 0 var(--vario-size-document-subcategory-compact-row-height) !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--vario-size-document-subcategory-compact-row-height) !important;
    min-height: var(--vario-size-document-subcategory-compact-row-height) !important;
    padding: 0 10px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vario-component-document-subcategory-segment-border) !important;
    background: var(--vario-component-document-subcategory-row-bg) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}

html .vario-admin-navigation-stack > .vario-sales-document-subtype-tabs::-webkit-scrollbar,
html[data-vario-theme] .vario-admin-navigation-stack > .vario-sales-document-subtype-tabs::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}