/* Общие компоненты вне «Операций».
   Разгрузка и приёмка сюда не входят: нет голых .btn, .form-control и .modal-dialog.
   Старый класс экрана остаётся только для раскладки. */

/* Кнопки */

.wms-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--werp-space-8) + var(--werp-space-1));
    padding: 0 var(--werp-space-4);
    border: 1px solid var(--werp-color-primary);
    border-radius: var(--werp-radius-md);
    background: var(--werp-color-primary);
    box-shadow: none;
    color: var(--werp-color-text-inverse);
    gap: var(--werp-space-1-5);
    font-size: var(--werp-text-sm);
    font-weight: var(--werp-font-semibold);
    line-height: var(--werp-leading-tight);
    text-decoration: none;
    cursor: pointer;
}

.wms-btn:hover,
.wms-btn:focus {
    border-color: var(--werp-color-primary-hover);
    background: var(--werp-color-primary-hover);
    color: var(--werp-color-text-inverse);
    text-decoration: none;
}

.wms-btn:focus-visible {
    outline: var(--werp-focus-width) solid var(--werp-color-focus-ring);
    outline-offset: 2px;
}

.wms-btn--compact {
    height: var(--werp-space-8);
    padding: 0 var(--werp-space-4);
}

.modal .modal-footer .wms-btn,
.wms-account__footer .wms-btn {
    height: var(--werp-space-8);
    min-width: 5.5rem;
    padding: 0 var(--werp-space-4);
}

.wms-btn--link {
    border: 1px solid var(--werp-color-border);
    background: var(--werp-color-surface);
    color: var(--werp-color-text);
}

.wms-btn--link:hover,
.wms-btn--link:focus {
    border-color: var(--werp-color-border-strong);
    background: var(--werp-color-surface-muted);
    color: var(--werp-color-text);
}

.wms-btn--move {
    border-color: var(--werp-color-info);
    background: var(--werp-color-info);
    color: var(--werp-color-text-inverse);
}

.wms-btn--move:hover,
.wms-btn--move:focus {
    border-color: var(--werp-color-info-hover);
    background: var(--werp-color-info-hover);
    color: var(--werp-color-text-inverse);
}

/* Поля */

.wms-field:not(.ts-wrapper),
.ts-wrapper.wms-field > .ts-control {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: calc(var(--werp-space-8) + var(--werp-space-1));
    padding: var(--werp-space-1) var(--werp-space-3);
    border: 1px solid var(--werp-color-border);
    border-radius: var(--werp-radius-md);
    background: var(--werp-color-surface);
    box-shadow: none;
    color: var(--werp-color-text);
    font-size: var(--werp-text-md);
    line-height: var(--werp-leading-normal);
}

.ts-wrapper.wms-field > .ts-control {
    display: flex;
    align-items: center;
    padding-right: var(--werp-space-8);
}

textarea.wms-field:not(.ts-wrapper) {
    min-height: calc(var(--werp-space-10) * 2);
    padding: var(--werp-space-2) var(--werp-space-3);
    line-height: var(--werp-leading-relaxed);
    resize: vertical;
}

.wms-field:not(.ts-wrapper)::placeholder,
.ts-wrapper.wms-field > .ts-control input::placeholder,
.ts-wrapper.wms-field .item-placeholder {
    color: var(--werp-color-text-muted);
    font-weight: var(--werp-font-medium);
    opacity: 1;
}

.wms-field:not(.ts-wrapper):hover,
.ts-wrapper.wms-field:hover > .ts-control {
    border-color: var(--werp-color-border-strong);
    background-color: var(--werp-color-surface);
}

.wms-field:not(.ts-wrapper):focus,
.ts-wrapper.wms-field.focus > .ts-control,
.ts-wrapper.wms-field.dropdown-active > .ts-control {
    border-color: var(--werp-color-primary);
    background-color: var(--werp-color-surface);
    box-shadow: var(--werp-ring-primary);
    outline: 0;
}

.wms-field:not(.ts-wrapper):focus-visible {
    outline: var(--werp-focus-width) solid var(--werp-color-focus-ring);
    outline-offset: 2px;
}

.wms-field:not(.ts-wrapper).is-invalid,
.ts-wrapper.wms-field.is-invalid > .ts-control,
.ts-wrapper.wms-field > .ts-control.is-invalid {
    border-color: var(--werp-danger-500);
}

.wms-field:not(.ts-wrapper).is-invalid:focus,
.ts-wrapper.wms-field.is-invalid.focus > .ts-control,
.ts-wrapper.wms-field.is-invalid.dropdown-active > .ts-control {
    box-shadow: var(--werp-ring-danger);
}

/* Карточки */

.wms-card {
    border: 1px solid var(--werp-color-border);
    border-radius: var(--werp-radius-lg);
    background: var(--werp-color-surface);
}

.wms-card--dialog {
    width: min(28rem, 100%);
}

.wms-card--department {
    border-top: 3px solid var(--werp-color-primary);
}

.wms-card--group {
    border-top: 3px solid var(--werp-gray-400);
    background: var(--werp-gray-50);
}

.wms-card--employee {
    border-top: 3px solid var(--werp-color-info);
}

/* Пустые состояния */

.wms-empty {
    margin: 0;
    color: var(--werp-color-text-muted);
    font-size: var(--werp-text-base);
}

.wms-empty--inline {
    padding: var(--werp-space-2);
    font-size: var(--werp-text-sm);
}

/* Бейджи */

.wms-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--werp-space-0-5) var(--werp-space-2);
    border-radius: var(--werp-radius-pill);
    font-size: var(--werp-text-sm);
    font-weight: var(--werp-font-semibold);
    line-height: 1.4;
}

.wms-badge--success {
    background: var(--werp-color-primary-subtle);
    color: var(--werp-color-primary-hover);
}

.wms-badge--info {
    background: var(--werp-color-info-subtle);
    color: var(--werp-color-info-hover);
}

.wms-badge--warning {
    background: var(--werp-color-warning-subtle);
    color: var(--werp-color-warning-text);
}

.wms-badge--muted {
    background: var(--werp-gray-150);
    color: var(--werp-gray-700);
}

.wms-badge--danger {
    background: var(--werp-color-danger-subtle);
    color: var(--werp-color-danger);
}

.wms-badge--sm {
    padding: 0 var(--werp-space-1-5);
    font-size: var(--werp-text-2xs);
    line-height: var(--werp-leading-relaxed);
}

/* Модалки. Ширины 22/26/28rem и 80vw перенесены как есть: отдельных токенов нет.
   Модификатор бьёт общий max-width 36rem. Диалог принтера 60rem не трогается. */

.modal .modal-dialog.wms-modal--22 {
    width: min(22rem, calc(100vw - var(--werp-space-8)));
    max-width: 22rem;
}

.modal .modal-dialog.wms-modal--26 {
    max-width: 26rem;
}

.modal .modal-dialog.wms-modal--28 {
    max-width: 28rem;
}

.modal .modal-dialog.wms-modal--wide {
    width: 80vw;
    max-width: 80vw;
}