/* Shared application sidebar, variant 2: semantic palette and interaction. */
/* Force the new VarioERP sidebar palette; colors come from shared theme tokens. */

html .vario-win-shell .vario-win-nav,
html[data-vario-theme] .vario-win-shell .vario-win-nav,
html .vario-win-shell .vario-win-brand,
html[data-vario-theme] .vario-win-shell .vario-win-brand,
html .vario-win-shell .vario-win-tree,
html[data-vario-theme] .vario-win-shell .vario-win-tree,
html .vario-win-shell .nav-scrollable,
html[data-vario-theme] .vario-win-shell .nav-scrollable {
    color: var(--vario-sidebar-foreground) !important;
    background: var(--vario-sidebar-background) !important;
    background-image: none !important;
}

html .vario-win-shell .vario-win-nav,
html[data-vario-theme] .vario-win-shell .vario-win-nav {
    border-right: 1px solid var(--vario-sidebar-border) !important;
}

html .vario-win-shell .vario-win-brand,
html[data-vario-theme] .vario-win-shell .vario-win-brand {
    border-bottom: 1px solid var(--vario-sidebar-border) !important;
}

html .vario-win-shell .vario-win-brand a,
html[data-vario-theme] .vario-win-shell .vario-win-brand a,
html .vario-win-shell .vario-brand-name,
html[data-vario-theme] .vario-win-shell .vario-brand-name {
    color: var(--vario-sidebar-foreground) !important;
}

html .vario-win-shell .vario-brand-mark,
html[data-vario-theme] .vario-win-shell .vario-brand-mark {
    background-color: transparent !important;
    background-image: url("/icons/varioerp/varioerp-logo-mark.svg") !important;
    filter: none !important;
}

html .vario-win-shell .vario-sidebar-item,
html[data-vario-theme] .vario-win-shell .vario-sidebar-item,
html .vario-win-shell .vario-sidebar-group-link,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-link,
html .vario-win-shell .vario-sidebar-group-toggle,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle,
html .vario-win-shell .vario-sidebar-collapsed-module-trigger,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger,
html .vario-win-shell .vario-nav-bottom-button,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button {
    color: var(--vario-sidebar-foreground) !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transition:
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        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),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-win-shell .vario-sidebar-row > .vario-sidebar-item:hover:not(.active),
html[data-vario-theme] .vario-win-shell .vario-sidebar-row > .vario-sidebar-item:hover:not(.active),
html .vario-win-shell .vario-sidebar-main-row:not(.active):hover,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row:not(.active):hover,
html .vario-win-shell .vario-sidebar-group-toggle:hover,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle:hover,
html .vario-win-shell .vario-nav-bottom-button:hover,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button:hover {
    color: var(--vario-sidebar-foreground) !important;
    background-color: var(--vario-sidebar-hover) !important;
}

html .vario-win-shell .vario-sidebar-row > .vario-sidebar-item.active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-row > .vario-sidebar-item.active,
html .vario-win-shell .vario-sidebar-main-row.active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row.active,
html .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"]),
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"]),
html .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row,
html[data-vario-theme] .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row {
    color: var(--vario-sidebar-active-foreground) !important;
    background: var(--vario-sidebar-active-background) !important;
    border-color: var(--vario-sidebar-active-border) !important;
    box-shadow: none !important;
}

html .vario-win-shell .vario-sidebar-row > .vario-sidebar-item.active::before,
html[data-vario-theme] .vario-win-shell .vario-sidebar-row > .vario-sidebar-item.active::before,
html .vario-win-shell .vario-sidebar-main-row.active::before,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row.active::before,
html .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"])::before,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"])::before,
html .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row::before,
html[data-vario-theme] .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row::before {
    position: absolute !important;
    top: 7px !important;
    bottom: 7px !important;
    left: -1px !important;
    width: 3px !important;
    border-radius: 0 2px 2px 0 !important;
    background: var(--vario-sidebar-accent) !important;
    content: "" !important;
    pointer-events: none !important;
}

html .vario-win-shell .vario-sidebar-main-row.active:hover,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row.active:hover,
html .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"]):hover,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row:has(.vario-sidebar-collapsed-module-trigger[aria-expanded="true"]):hover,
html .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row:hover,
html[data-vario-theme] .vario-win-shell .vario-sidebar-operational-group.active > .vario-sidebar-main-row:hover {
    color: var(--vario-sidebar-active-foreground) !important;
    background: var(--vario-sidebar-active-background) !important;
}

html .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item,
html[data-vario-theme] .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item {
    color: var(--vario-sidebar-muted) !important;
}

html .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item:hover:not(.active),
html[data-vario-theme] .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item:hover:not(.active) {
    color: var(--vario-sidebar-foreground) !important;
    background: var(--vario-sidebar-hover) !important;
}

html .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item.active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item.active {
    color: var(--vario-sidebar-accent) !important;
    background: var(--vario-sidebar-child-active-background) !important;
    border-color: transparent !important;
    font-weight: 600 !important;
}

html .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item.active::before,
html[data-vario-theme] .vario-win-shell .vario-sidebar-subtree .vario-sidebar-item.active::before {
    content: none !important;
}

html .vario-win-shell .vario-sidebar-item .nav-icon,
html[data-vario-theme] .vario-win-shell .vario-sidebar-item .nav-icon,
html .vario-win-shell .vario-sidebar-group-toggle .nav-icon,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle .nav-icon,
html .vario-win-shell .vario-sidebar-collapsed-module-trigger .nav-icon,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger .nav-icon,
html .vario-win-shell .vario-nav-bottom-button .nav-icon,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button .nav-icon {
    color: currentColor !important;
    stroke: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    fill: none !important;
}

html .vario-win-shell .vario-nav-bottom,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom {
    border-top: 1px solid var(--vario-sidebar-border) !important;
}

html .vario-win-shell .vario-nav-bottom-button,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button {
    color: var(--vario-sidebar-muted) !important;
}

html .vario-win-shell .vario-sidebar-item:active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-item:active,
html .vario-win-shell .vario-sidebar-group-toggle:active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle:active,
html .vario-win-shell .vario-sidebar-collapsed-module-trigger:active,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger:active,
html .vario-win-shell .vario-nav-bottom-button:active,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button:active {
    box-shadow: inset 0 2px 4px var(--vario-sidebar-press-shadow) !important;
    transition-duration: var(--vario-motion-button-press-duration) !important;
}

html .vario-win-shell .vario-sidebar-item:focus-visible,
html[data-vario-theme] .vario-win-shell .vario-sidebar-item:focus-visible,
html .vario-win-shell .vario-sidebar-group-toggle:focus-visible,
html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle:focus-visible,
html .vario-win-shell .vario-sidebar-collapsed-module-trigger:focus-visible,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger:focus-visible,
html .vario-win-shell .vario-nav-bottom-button:focus-visible,
html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button:focus-visible,
.vario-sidebar-mobile-toggle:focus-visible {
    outline: 2px solid var(--vario-sidebar-accent) !important;
    outline-offset: -2px !important;
}

html .vario-win-shell .vario-sidebar-collapsed-module-indicator,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-indicator {
    color: var(--vario-component-collapsed-module-segment-icon) !important;
    background: var(--vario-component-collapsed-module-segment-bg) !important;
    border-left-color: var(--vario-component-collapsed-module-segment-border) !important;
}

html .vario-win-shell .vario-sidebar-main-row.active .vario-sidebar-collapsed-module-indicator,
html[data-vario-theme] .vario-win-shell .vario-sidebar-main-row.active .vario-sidebar-collapsed-module-indicator,
html .vario-win-shell .vario-sidebar-collapsed-module-trigger[aria-expanded="true"] .vario-sidebar-collapsed-module-indicator,
html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger[aria-expanded="true"] .vario-sidebar-collapsed-module-indicator {
    color: var(--vario-component-collapsed-module-segment-active-icon) !important;
    background: var(--vario-component-collapsed-module-segment-active-bg) !important;
    border-left-color: var(--vario-component-collapsed-module-segment-active-border) !important;
}

.vario-sidebar-collapsed-module-menu {
    color: var(--vario-component-collapsed-module-menu-text);
    background: var(--vario-component-collapsed-module-menu-bg);
    border-color: var(--vario-component-collapsed-module-menu-border);
    box-shadow: var(--vario-menu-shadow);
}

.vario-sidebar-collapsed-module-menu-header {
    color: var(--vario-component-collapsed-module-menu-text);
    background: var(--vario-component-collapsed-module-menu-header-bg);
    border-bottom-color: var(--vario-component-collapsed-module-menu-border);
}

.vario-sidebar-collapsed-module-menu-header > .nav-icon {
    color: var(--vario-color-primary-600);
}

.vario-sidebar-collapsed-module-menu-heading span,
.vario-sidebar-collapsed-module-option-label small,
.vario-sidebar-collapsed-module-menu-footer {
    color: var(--vario-component-collapsed-module-menu-muted);
}

.vario-sidebar-collapsed-module-menu-close {
    color: var(--vario-component-collapsed-module-menu-muted);
    background: var(--vario-component-collapsed-module-menu-bg);
    border-color: var(--vario-component-collapsed-module-menu-border);
    box-shadow: none;
}

.vario-sidebar-collapsed-module-menu-close:hover {
    color: var(--vario-component-collapsed-module-menu-text);
    background: var(--vario-component-collapsed-module-menu-hover-bg);
}

.vario-sidebar-collapsed-module-option {
    color: var(--vario-component-collapsed-module-menu-text);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.vario-sidebar-collapsed-module-option:hover {
    color: var(--vario-component-collapsed-module-menu-text);
    background: var(--vario-component-collapsed-module-menu-hover-bg);
    border-color: var(--vario-component-collapsed-module-menu-border);
}

.vario-sidebar-collapsed-module-option.active {
    color: var(--vario-component-collapsed-module-menu-active-text);
    background: var(--vario-component-collapsed-module-menu-active-bg);
    border-color: var(--vario-component-collapsed-module-menu-active-border);
}

.vario-sidebar-collapsed-module-option.active .vario-sidebar-collapsed-module-option-label small {
    color: var(--vario-component-collapsed-module-menu-muted);
}

.vario-sidebar-collapsed-module-option > .nav-icon {
    color: var(--vario-component-collapsed-module-menu-muted);
}

.vario-sidebar-collapsed-module-option.active > .nav-icon,
.vario-sidebar-collapsed-module-option-check {
    color: var(--vario-component-collapsed-module-menu-active-text);
}

.vario-sidebar-collapsed-module-menu-footer {
    border-top-color: var(--vario-component-collapsed-module-menu-border);
}

.vario-sidebar-collapsed-module-menu-close,
.vario-sidebar-collapsed-module-option {
    transition:
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        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),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing);
}

.vario-sidebar-collapsed-module-menu-close:active,
.vario-sidebar-collapsed-module-option:active {
    box-shadow: var(--vario-shadow-button-pressed);
    transition-duration: var(--vario-motion-button-press-duration);
}

.vario-sidebar-collapsed-module-menu-close:focus-visible,
.vario-sidebar-collapsed-module-option:focus-visible {
    outline: 2px solid var(--vario-color-focus-ring);
    outline-offset: -2px;
}

@media (max-width: 860px) {
    html .vario-win-shell[data-vario-mobile-nav-open="true"] .vario-win-nav,
    html[data-vario-theme] .vario-win-shell[data-vario-mobile-nav-open="true"] .vario-win-nav {
        box-shadow: 5px 0 18px rgba(8, 24, 43, 0.20) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html .vario-win-shell .vario-sidebar-item,
    html[data-vario-theme] .vario-win-shell .vario-sidebar-item,
    html .vario-win-shell .vario-sidebar-group-toggle,
    html[data-vario-theme] .vario-win-shell .vario-sidebar-group-toggle,
    html .vario-win-shell .vario-sidebar-collapsed-module-trigger,
    html[data-vario-theme] .vario-win-shell .vario-sidebar-collapsed-module-trigger,
    html .vario-win-shell .vario-nav-bottom-button,
    html[data-vario-theme] .vario-win-shell .vario-nav-bottom-button {
        transition: none !important;
    }
}

.vario-order-action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0;
}

.vario-order-action-header>div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.vario-order-breadcrumb {
    flex-basis: 100%;
    color: #6b7788;
    font-size: 0.78rem;
    font-weight: 650;
}

.vario-order-action-header h1 {
    margin: 0;
    color: #111827;
    font-size: 1.42rem;
    font-weight: 850;
    line-height: 1.1;
}

.vario-order-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.vario-order-status.green {
    color: #168052;
    background: #e8f8f0;
}

.vario-order-status.blue {
    color: #1769e0;
    background: #eaf2ff;
}

.vario-order-status.orange {
    color: #9a6a00;
    background: #fff4cf;
}

.vario-order-status.red {
    color: #c82245;
    background: #fff0f4;
}

.vario-order-status.gray {
    color: #596579;
    background: #f0f3f7;
}

.vario-order-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.vario-order-actions .btn {
    min-height: 38px;
    padding-inline: 18px;
}