@layer properties, theme, base, components, utilities;

[data-platform-validation-field] [data-validation-error] {
    display: block;
    max-width: 100%;
    margin: 0;
    color: #9d2525;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

[data-platform-validation-field] [data-validation-error] > span + span {
    display: block;
}

[data-platform-validation-field]:not(.fi-fo-field-platform-validation-boolean) > .fi-fo-field-content-col > [data-validation-error] {
    margin-top: -1px;
}

.fi-fo-field-platform-validation-boolean {
    row-gap: 7px !important;
}

.fi-fo-field-platform-validation-boolean > [data-validation-error] {
    grid-column: 1 / -1;
}

.fi-input-wrp:has([data-platform-validation-invalid="true"]),
[data-platform-validation-frame-invalid="true"] {
    box-shadow: inset 0 0 0 1px #9d2525 !important;
}

@layer components {
    .fi-fo-table-repeater.fi-compact .fi-input-wrp[data-platform-validation-frame-invalid="true"] {
        box-shadow: inset 0 0 0 1px #9d2525 !important;
    }

    .fi-fo-table-repeater.fi-compact .fi-input-wrp[data-platform-validation-frame-invalid="true"]:focus-within {
        box-shadow: inset 0 0 0 1px #9d2525, 0 0 0 2px var(--primary-600, #d97706) !important;
    }
}

.fi-fo-file-upload .filepond--item[data-filepond-item-state$="invalid"] .filepond--file-status-main[data-platform-validation-duplicate-primary="true"] {
    visibility: hidden !important;
}

/* Отклонённая строка FilePond в форме импорта: компактная панель имеет
   фиксированную высоту, поэтому контрактный зазор 7px меряется от корня
   FilePond и достигается обычным потоком (общий отступ поля), без
   отрицательных margin, задвигающих сообщение под панель. */

.fi-input-wrp:has([data-platform-validation-invalid="true"]):focus-within {
    box-shadow: inset 0 0 0 1px #9d2525, 0 0 0 2px var(--primary-600, #d97706) !important;
}

input[type="checkbox"].fi-checkbox-input[data-platform-validation-invalid="true"] {
    background-color: #9d2525 !important;
    box-shadow: none !important;
    --tw-ring-color: transparent;
}

/* Общая ошибка группы чекбоксов относится ко всему набору: красную заливку
   получает каждый вариант набора, сообщение остаётся под группой. */
.fi-fo-checkbox-list[data-platform-validation-invalid="true"] input[type="checkbox"].fi-checkbox-input {
    background-color: #9d2525 !important;
    box-shadow: none !important;
    --tw-ring-color: transparent;
}

.fi-input-wrp:has([aria-invalid="true"]) {
    box-shadow: inset 0 0 0 1px #9d2525 !important;
}

.fi-input-wrp:has([aria-invalid="true"]):focus-within {
    box-shadow: inset 0 0 0 1px #9d2525, 0 0 0 2px var(--primary-600, #d97706) !important;
}

input[type="checkbox"].fi-checkbox-input[data-platform-validation-invalid="true"]:focus-visible {
    outline: 2px solid var(--primary-600, #d97706);
    outline-offset: 2px;
}

button.fi-toggle[data-platform-validation-invalid="true"] {
    background-color: #9d2525 !important;
}

.dark [data-platform-validation-field] [data-validation-error] {
    color: #f87171;
}

.dark .fi-input-wrp:has([data-platform-validation-invalid="true"]),
.dark [data-platform-validation-frame-invalid="true"] {
    box-shadow: inset 0 0 0 1px #f87171 !important;
}

@layer components {
    .dark .fi-fo-table-repeater.fi-compact .fi-input-wrp[data-platform-validation-frame-invalid="true"] {
        box-shadow: inset 0 0 0 1px #f87171 !important;
    }

    .dark .fi-fo-table-repeater.fi-compact .fi-input-wrp[data-platform-validation-frame-invalid="true"]:focus-within {
        box-shadow: inset 0 0 0 1px #f87171, 0 0 0 2px var(--primary-500, #f59e0b) !important;
    }
}

.dark .fi-input-wrp:has([data-platform-validation-invalid="true"]):focus-within {
    box-shadow: inset 0 0 0 1px #f87171, 0 0 0 2px var(--primary-500, #f59e0b) !important;
}

.dark input[type="checkbox"].fi-checkbox-input[data-platform-validation-invalid="true"] {
    background-color: #f87171 !important;
}

.dark .fi-fo-checkbox-list[data-platform-validation-invalid="true"] input[type="checkbox"].fi-checkbox-input {
    background-color: #f87171 !important;
}

.dark .fi-input-wrp:has([aria-invalid="true"]) {
    box-shadow: inset 0 0 0 1px #f87171 !important;
}

.dark .fi-input-wrp:has([aria-invalid="true"]):focus-within {
    box-shadow: inset 0 0 0 1px #f87171, 0 0 0 2px var(--primary-500, #f59e0b) !important;
}

.dark button.fi-toggle[data-platform-validation-invalid="true"] {
    background-color: #f87171 !important;
}