/* Directory grids: stable sticky headers and automatic paging sentinel. */
html .vario-data-grid,
html[data-vario-theme] .vario-data-grid {
    --bs-table-cell-padding-y: 0.1rem;
    --bs-table-cell-padding-x: 0.28rem;
    color: var(--vario-text);
    background: var(--vario-grid-bg);
    border-collapse: separate !important;
    border-spacing: 0;
}

html .vario-data-grid thead,
html[data-vario-theme] .vario-data-grid thead {
    position: static !important;
}

html .vario-data-grid thead th,
html[data-vario-theme] .vario-data-grid thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    box-sizing: border-box;
    block-size: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    line-height: 1.08 !important;
    padding-top: 0.06rem !important;
    padding-bottom: 0.06rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background-clip: padding-box;
    transform: translateZ(0);
}

html .vario-data-grid thead th>*,
html[data-vario-theme] .vario-data-grid thead th>* {
    max-height: 18px !important;
    line-height: 1.08 !important;
}

html .vario-data-grid .vario-column-resize-handle,
html[data-vario-theme] .vario-data-grid .vario-column-resize-handle {
    top: 0 !important;
    bottom: 0 !important;
    height: 22px !important;
    max-height: 22px !important;
}

.vario-list-load-more {
    display: none !important;
}

.vario-toolbar-select {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    color: var(--vario-muted);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.vario-toolbar-select-label {
    text-transform: uppercase;
}

.vario-toolbar-select-icon {
    position: relative;
    width: 21px;
    height: 18px;
    border: 1px solid var(--vario-border-strong);
    border-radius: 3px;
    background:
        linear-gradient(to right, transparent 0 31%, var(--vario-border-soft) 31% 35%, transparent 35% 64%, var(--vario-border-soft) 64% 68%, transparent 68%),
        linear-gradient(to bottom, #fff 0 42%, #eef2f7 42% 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.vario-toolbar-select-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    top: -5px;
    height: 5px;
    border: 1px solid var(--vario-border-strong);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: #f8fafc;
}

.vario-toolbar-select-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.vario-toolbar-select .form-select {
    width: clamp(180px, 18vw, 270px);
    height: 28px;
    min-height: 28px;
    padding: 0.1rem 1.75rem 0.1rem 0.48rem;
    border-radius: var(--vario-control-radius);
    background-color: #fff;
    color: var(--vario-text);
    font-size: 0.76rem;
    line-height: 1.1;
    appearance: none;
}

.vario-toolbar-select-chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-55%);
    color: var(--vario-text-strong);
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
}

.vario-warehouse-context {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0 0 0.45rem;
}

.vario-warehouse-context-button {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.55rem;
    row-gap: 0.06rem;
    align-items: center;
    min-width: 320px;
    max-width: min(520px, 100%);
    padding: 0.36rem 0.55rem;
    border: 1px solid var(--vario-border-soft);
    border-radius: var(--vario-control-radius);
    background: #fff;
    color: var(--vario-text);
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.vario-warehouse-context-button span {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    height: 100%;
    border-right: 1px solid var(--vario-border-soft);
    padding-right: 0.5rem;
    color: var(--vario-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vario-warehouse-context-button strong {
    overflow: hidden;
    color: var(--vario-text-strong);
    font-size: 0.82rem;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-context-button small {
    color: var(--vario-muted);
    font-size: 0.71rem;
    line-height: 1.08;
}

.vario-warehouse-context-button:hover,
.vario-warehouse-context-button:focus-visible {
    border-color: var(--vario-border-strong);
    background: #fff;
}

.vario-warehouse-selector {
    position: absolute;
    top: calc(100% + 0.22rem);
    left: 0;
    z-index: 70;
    width: min(520px, calc(100vw - 2rem));
    padding: 0.55rem;
    border: 1px solid var(--vario-border-strong);
    border-radius: var(--vario-control-radius);
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.vario-warehouse-selector-header,
.vario-warehouse-selector-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vario-warehouse-selector-header {
    margin-bottom: 0.45rem;
}

.vario-warehouse-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.36rem;
    max-height: 220px;
    overflow: auto;
}

.vario-warehouse-chip {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 38px;
    padding: 0.34rem 0.42rem;
    border: 1px solid var(--vario-border-soft);
    border-radius: var(--vario-control-radius);
    background: #fff;
    cursor: pointer;
}

.vario-warehouse-chip input {
    flex: 0 0 auto;
}

.vario-warehouse-chip span {
    display: grid;
    min-width: 0;
}

.vario-warehouse-chip strong,
.vario-warehouse-chip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-chip strong {
    font-size: 0.78rem;
}

.vario-warehouse-chip small {
    color: var(--vario-muted);
    font-size: 0.7rem;
}

.vario-warehouse-selector-actions {
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.vario-active-warehouse-strip {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 24px;
    padding: 0.18rem 0.48rem;
    border-top: 1px solid var(--vario-border-strong);
    border-right: 1px solid var(--vario-border-soft);
    border-left: 1px solid var(--vario-border-soft);
    background: #f8fafc;
    color: var(--vario-muted);
    font-size: 0.73rem;
    line-height: 1.08;
}

.vario-active-warehouse-strip strong {
    overflow: hidden;
    color: var(--vario-text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
    gap: 0.75rem;
    align-items: start;
}

.vario-warehouse-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--vario-border-soft);
    background: #f8fafc;
}

.vario-warehouse-access-header div {
    display: grid;
    gap: 0.08rem;
}

.vario-warehouse-access-header strong {
    color: var(--vario-text-strong);
    font-size: 0.86rem;
}

.vario-warehouse-access-header span,
.vario-admin-subtext {
    display: block;
    color: var(--vario-muted);
    font-size: 0.72rem;
    line-height: 1.15;
}

.vario-admin-table tbody tr {
    cursor: pointer;
}

.vario-warehouse-access-panel .vario-admin-table tbody tr {
    cursor: default;
}

.vario-contractor-config {
    display: grid;
    gap: 0.75rem;
}

.vario-contractor-config-grid {
    display: grid;
    gap: 0.85rem;
}

.vario-contractor-config-section .vario-erp-section-header {
    align-items: center;
}

.vario-contractor-config-toolbar {
    display: grid;
    grid-template-columns: 110px minmax(240px, 420px);
    gap: 0.55rem;
    align-items: center;
    max-width: 560px;
    margin-bottom: 0.65rem;
}

.vario-contractor-config-toolbar .form-label {
    margin: 0;
    color: var(--vario-text-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.vario-contractor-config .vario-admin-table tbody tr {
    cursor: default;
}

.vario-contractor-config .vario-inline-check {
    min-height: 32px;
    margin: 0;
    padding: 0.36rem 0.55rem;
}

@media (max-width: 1100px) {
    .vario-warehouse-admin-grid {
        grid-template-columns: 1fr;
    }

    .vario-contractor-config-toolbar {
        grid-template-columns: 1fr;
    }
}

.vario-warehouse-summarybar {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.vario-warehouse-workspace {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 330px;
    gap: 0.5rem;
    min-height: 0;
}

.vario-warehouse-type-button {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    column-gap: 0.26rem;
    row-gap: 0.04rem;
    align-items: center;
    min-height: 32px;
    padding: 0.2rem 0.28rem 0.2rem 0.16rem;
    border: 1px solid transparent;
    border-radius: var(--vario-control-radius);
    background: transparent;
    color: var(--vario-text);
    text-align: left;
}

.vario-warehouse-type-button:hover,
.vario-warehouse-type-button.active {
    border-color: var(--vario-border-soft);
    background: #f8fafc;
}

.vario-warehouse-type-button.active {
    box-shadow: inset 2px 0 0 var(--vario-accent);
}

.vario-warehouse-type-icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid var(--vario-border-soft);
    border-radius: 4px;
    background: #fff;
    color: var(--vario-text-strong);
    font-size: 0.74rem;
    font-weight: 800;
}

.vario-warehouse-type-button strong {
    overflow: hidden;
    font-size: 0.73rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-type-button small {
    overflow: hidden;
    color: var(--vario-muted);
    font-size: 0.62rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-register-pane {
    min-width: 0;
    overflow: auto;
}

.vario-warehouse-reservation-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    padding: 0.28rem 0.4rem;
    background: color-mix(in srgb, var(--vario-accent) 6%, #ffffff);
    border: 1px solid var(--vario-border-soft);
    border-radius: 6px;
}

.vario-warehouse-reservation-status-tabs button {
    display: inline-flex;
    gap: 0.32rem;
    align-items: center;
    min-height: 24px;
    padding: 0.12rem 0.52rem;
    color: var(--vario-text);
    background: #fff;
    border: 1px solid var(--vario-border-soft);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.vario-warehouse-reservation-status-tabs button.active {
    color: #fff;
    background: var(--vario-accent);
    border-color: var(--vario-accent);
    box-shadow: 0 6px 14px rgba(13, 92, 199, 0.18);
}

.vario-warehouse-reservation-status-tabs strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 0.28rem;
    color: inherit;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 999px;
    font-size: 0.68rem;
}

.vario-warehouse-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.vario-list-document-button.danger {
    color: #a6252d;
    background: #fff;
    border-color: #f0b8bd;
}

.vario-list-document-button.danger:hover:not(:disabled),
.vario-list-document-button.danger:focus-visible:not(:disabled) {
    color: #fff;
    background: #c9363f;
    border-color: #c9363f;
}

.vario-warehouse-register-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 34px;
    padding: 0.34rem 0.5rem;
    border-top: 1px solid var(--vario-border-strong);
    border-right: 1px solid var(--vario-border-soft);
    border-left: 1px solid var(--vario-border-soft);
    background: #f8fafc;
}

.vario-warehouse-register-header div:first-child {
    display: grid;
    min-width: 0;
}

.vario-warehouse-register-header strong {
    overflow: hidden;
    color: var(--vario-text-strong);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-register-header span {
    color: var(--vario-muted);
    font-size: 0.7rem;
}

.vario-warehouse-details-pane {
    min-width: 0;
}

.vario-warehouse-details-title {
    display: grid;
    gap: 0.08rem;
    margin-bottom: 0.5rem;
}

.vario-warehouse-details-title span {
    color: var(--vario-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vario-warehouse-details-title strong {
    color: var(--vario-text-strong);
    font-size: 0.92rem;
}

.vario-warehouse-document-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.5rem;
    border: 1px solid var(--vario-border-soft);
    border-radius: var(--vario-control-radius);
    background: #fff;
}

.vario-warehouse-document-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--vario-border-soft);
    border-radius: 6px;
    background: #f8fafc;
    font-size: 1.1rem;
    font-weight: 800;
}

.vario-warehouse-document-card div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.vario-warehouse-document-card strong,
.vario-warehouse-document-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vario-warehouse-document-card small {
    color: var(--vario-muted);
}

.vario-warehouse-approval-box {
    display: grid;
    gap: 0.32rem;
    margin: 0.45rem 0;
    padding: 0.48rem;
    border: 1px solid color-mix(in srgb, var(--bs-waning) 55%, var(--vario-border-soft) 45%);
    border-radius: var(--vario-control-radius);
    background: color-mix(in srgb, #fff 78%, var(--bs-waning) 22%);
}

.vario-warehouse-approval-box span {
    color: var(--vario-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.vario-warehouse-approval-box strong {
    font-size: 0.76rem;
}

@media (max-width: 1280px) {
    .vario-warehouse-workspace {
        grid-template-columns: 138px minmax(0, 1fr);
    }

    .vario-warehouse-details-pane {
        grid-column: 1 / -1;
    }
}