/* ============================================================
   Стили для модуля forms (админ-интерфейс)
   ============================================================ */

/* Поднимаем модалку выше ресайз-хендлеров */
#fieldModal, #editValueModal {
    z-index: 100050 !important;
}
#fieldModal .modal-backdrop, #editValueModal .modal-backdrop {
    z-index: 100049 !important;
}

/* Админ-режим: flex с зонами по краям, без переноса на уровне строки */
.form-columns {
    display: flex;
    flex-wrap: nowrap;     /* зоны «слева»/«справа» всегда в одной строке */
    gap: 20px;
    align-items: stretch;
    padding-bottom: 5px;
}

/* Внутренний контейнер колонок — занимает всё место между зонами,
   сами колонки внутри могут переноситься */
.form-columns-inner {
    flex: 1 1 0;
    min-width: 0;          /* позволяет схлопнуться при узком окне */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.form-column {
    box-sizing: border-box;
    /* Колонка тянется на всё место между зонами «Перетащите сюда…» — так
       же, как у гостя, где .form-grid раскладывает колонки через
       repeat(auto-fit, minmax(280px, 1fr)). Без flex-grow колонка была
       шириной по содержимому, и форма в админке выглядела иначе, чем на
       сайте (плюс проценты data-column-span у полей считались от этой
       «сжатой» ширины).
       Колонки делят место поровну (база 0, как 1fr у гостя). Порог
       переноса намеренно ниже гостевых 280px: в админке в той же строке
       ещё две зоны по 120px с отступами, и с базой 280px правая зона
       уезжала на отдельную строку уже при трёх колонках в форме шириной
       1200px. min_width из стиля колонки (инлайн) этот порог перекрывает. */
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    flex-wrap: wrap;       /* перенос: поля 50%+50% становятся рядом */
    flex-direction: row;   /* горизонтальный поток, как в гостевом режиме */
    gap: 0;                /* зазор задаём через margin-bottom на .field-wrapper */
    align-items: flex-start;
    transition: border-color 0.2s, background 0.2s;
}
.form-column.drag-over {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.field-wrapper {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 15px;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-bottom: 8px;
    /* Вертикальное центрирование содержимого */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.field-wrapper > .form-group {
    width: 100%;
}
.field-wrapper[data-column-span="1"] { width: 8.333%; }
.field-wrapper[data-column-span="2"] { width: 16.666%; }
.field-wrapper[data-column-span="3"] { width: 25%; }
.field-wrapper[data-column-span="4"] { width: 33.333%; }
.field-wrapper[data-column-span="5"] { width: 41.666%; }
.field-wrapper[data-column-span="6"] { width: 50%; }
.field-wrapper[data-column-span="7"] { width: 58.333%; }
.field-wrapper[data-column-span="8"] { width: 66.666%; }
.field-wrapper[data-column-span="9"] { width: 75%; }
.field-wrapper[data-column-span="10"] { width: 83.333%; }
.field-wrapper[data-column-span="11"] { width: 91.666%; }
.field-wrapper[data-column-span="12"] { width: 100%; }

/* Админ-контролы */
.field-admin-controls {
    position: absolute;
    top: -12px;
    right: 8px;
    display: none;
    gap: 4px;
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 3px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 25;           /* выше resize-handle (.fw-rh z-index:10) */
    border: 1px solid #ccc;
}
.field-wrapper.admin-mode:hover .field-admin-controls {
    display: flex;
}
.field-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 14px;
    color: #6c757d;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.field-control-btn:hover {
    background: #e0e0e0;
}
.field-drag-handle {
    cursor: grab;
}
.btn-edit-field { color: #0d6efd; }
.btn-delete-field { color: #dc3545; }
.btn-move-col { color: #6c757d; }

.drop-zone-left,
.drop-zone-right {
    flex: 0 0 120px;
    flex-shrink: 0;     /* не сжиматься при узком экране */
    min-height: 200px;
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.85rem;
    text-align: center;
    background: #f8f9fa;
    transition: border-color 0.2s, background 0.2s;
}
/* Правая зона всегда в конце строки — flex-wrap:nowrap на родителе
   уже гарантирует это, но margin-left: auto оставляем как страховку */
.drop-zone-right {
    margin-left: auto;
    flex-shrink: 0;
}

.drop-zone-left.drag-over,
.drop-zone-right.drag-over {
    border-color: #0d6efd;
    background: #e7f1ff;
    color: #0d6efd;
    border: 4px dashed #0d6efd;
}

.drop-zone-left.drag-over span,
.drop-zone-right.drag-over span {
    display: none;
}

/* Тёмная тема для админ-режима */
body.theme-dark .form-column {
    background: #2a2a2a;
    border-color: #444;
}
body.theme-dark .form-column.drag-over {
    background: #1a2a3a;
    border-color: #0d6efd;
}
body.theme-dark .field-wrapper {
    background: #333;
    border-color: #555;
}
body.theme-dark .field-wrapper.admin-mode:hover {
    background: #3a3a3a;
    border-color: #777;
}
body.theme-dark .field-admin-controls {
    background: rgba(40,40,40,0.95);
    border-color: #555;
}
body.theme-dark .field-control-btn {
    background: #444;
    border-color: #666;
    color: #e0e0e0;
}
body.theme-dark .field-control-btn:hover {
    background: #555;
}
body.theme-dark .drop-zone-left,
body.theme-dark .drop-zone-right {
    background: #2a2a2a;
    border-color: #555;
    color: #888;
}
body.theme-dark .drop-zone-left.drag-over,
body.theme-dark .drop-zone-right.drag-over {
    border-color: #0d6efd;
    background: #1a2a3a;
    color: #6ea8fe;
}

/* Стили для списка значений */
#values-list .list-group-item {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#values-list .value-drag-handle {
    cursor: grab;
    margin-right: 8px;
    color: #6c757d;
    user-select: none;
}
#values-list .value-drag-handle:hover {
    color: #333;
}
#values-list .btn-sm {
    padding: 0 6px;
    font-size: 12px;
}

/* Скрываем админ-контролы и хэндлеры при активном редактировании */
.field-wrapper.editing .field-admin-controls {
    display: none !important;
}
.field-wrapper.editing .resize-handle,
.field-wrapper.editing .resize-handle-padding,
.field-wrapper.editing .padding-outline {
    display: none !important;
}

/* ============================================================
   ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ РЕДАКТИРУЕМЫХ ТЕКСТОВ
   Подчёркивание только при наведении ИЛИ при активном редактировании
   ============================================================ */

/* Базовое состояние – без подчёркивания */
.editable-text {
    cursor: pointer;
    text-decoration: none;
}
/* При наведении – пунктирное подчёркивание */
.editable-text:hover {
    text-decoration: underline dotted #0d6efd;
    text-underline-offset: 2px;
}
/* В режиме редактирования (класс .editing добавляется JS) */
.editable-text.editing {
    cursor: text;
    text-decoration: underline dotted #0d6efd;
    text-underline-offset: 2px;
    outline: none !important;
    background: transparent !important;
}

/* Тёмная тема */
body.theme-dark .editable-text {
    color: #e0e0e0;
}
body.theme-dark .editable-text:hover {
    text-decoration-color: #6ea8fe;
}
body.theme-dark .editable-text.editing {
    text-decoration-color: #6ea8fe;
}
/* ============================================================
   ПОЛЕ «КАЛЬКУЛЯТОР»
   forms.css подключается и гостю (loadModuleAssets в index.php),
   поэтому стиль поля результата живёт здесь же.
   ============================================================ */
.form-calc-result[readonly] {
    background-color: #f8f9fa;
    font-weight: 600;
    cursor: default;
}
.form-calc-error {
    white-space: pre-line;
}
body.theme-dark .form-calc-result[readonly] {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

/* ===== Единица измерения поля (renderUniversalField) =====
   У полей ввода и списка — приставка справа (.input-group-text),
   у кнопок/радио/чекбоксов — после текста варианта. */
.form-field-unit {
    white-space: nowrap;
    line-height: 1.5;   /* предотвращает растяжение badge если глобальный line-height > 1.5 */
}
.form-field-unit-inline {
    white-space: nowrap;
    opacity: 0.75;
}
body.theme-dark .form-field-unit {
    background-color: #3a3a3a;
    border-color: #555;
    color: #ddd;
}

/* Окно настройки поля: формула */
.calc-field-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.calc-field-chips__title {
    font-size: 12px;
    color: #6c757d;
    margin-right: 2px;
}
.calc-field-chip {
    padding: 0 6px;
    font-size: 12px;
}
.calc-formula-input {
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
}
/* Предупреждений бывает несколько — каждое с новой строки */
.calc-formula-status {
    white-space: pre-line;
    min-height: 1.2em;
}
.calc-formula-status--ok { color: #198754; }
.calc-formula-status--warning { color: #997404; }
.calc-formula-status--error { color: #dc3545; }
.calc-formula-status--muted { color: #6c757d; }
.calc-formula-help summary {
    cursor: pointer;
    color: #0d6efd;
}
.calc-formula-help__example {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 6px 0;
    font-size: 12px;
    white-space: pre;
    overflow-x: auto;
}
body.theme-dark .calc-formula-help__example {
    background: #2a2a2a;
    border-color: #444;
}

/* ============================================================
   БЛОКИ КЛОНИРОВАНИЯ (block_start / block_end / block_clone)
   ============================================================ */

/* Маркер «Начало блока» и «Конец блока» в режиме редактора */
.form-block-marker {
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: #495057;
    background: var(--site-attention-bg, #fdebe1);
    border: 1px dashed var(--site-attention-border-strong, #e8956b);
    margin: 2px 0;
}
.form-block-start { border-color: #0d6efd; background: #e7f1ff; color: #0d6efd; }
.form-block-end   { border-color: #6c757d; background: #f8f9fa; color: #6c757d; }
.form-block-marker-label { font-weight: 600; font-size: 0.78rem; }

/* Клонируемый блок (гость: видимая группа полей) */
.form-clone-block {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    position: relative;
    background: #fdfdfd;
}
.form-clone-block + .form-clone-block { margin-top: 6px; }
.form-block-remove-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.form-block-remove-btn:hover { color: #a71d2a; }
.form-blocks-container { margin-bottom: 4px; }

/* Кнопка «Добавить позицию» */
.form-block-clone-btn-wrap { margin: 4px 0; }
/* Пунктир — только пока у кнопки нет своего стиля блока. !important тут
   стоять НЕ должен: он перебивал инлайновый стиль из блока form-button,
   и рамка, заданная админом в редакторе стилей, молча не применялась
   (кнопка оставалась пунктирной при любых настройках). */
.btn-add-block { border-style: dashed; }

/* Тёмная тема */
body.theme-dark .form-clone-block {
    border-color: #444;
    background: #2a2a2a;
}
body.theme-dark .form-block-marker {
    color: #adb5bd;
}
body.theme-dark .form-block-start { background: #1a2a3a; color: #6ea8fe; border-color: #6ea8fe; }
body.theme-dark .form-block-end   { background: #2a2a2a; color: #adb5bd; border-color: #555; }

/* ============================================================
   ПОЛЯ СКРЫТЫЕ ПО УМОЛЧАНИЮ (is_hidden = 1)
   В режиме редактора — видны, но выделены серым
   ============================================================ */
.field-wrapper.field-is-hidden-default {
    opacity: 0.55;
    border-style: dashed;
}
.field-wrapper.field-is-hidden-default::after {
    content: attr(data-hidden-label);
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 0.7rem;
    color: #6c757d;
    pointer-events: none;
}
/* Иконка глазика в панели контролов */
.btn-toggle-hidden { color: #6c757d; }
.btn-toggle-hidden:hover { color: #0d6efd; }

/* ============================================================
   СТРОКА ДЕЙСТВИЯ ПРИ ЗНАЧЕНИИ (цепочка 🔗)
   ============================================================ */
.value-action-row {
    padding: 4px 0 2px 22px;
}
.value-action-input {
    font-size: 0.78rem;
}
#values-list .list-group-item {
    padding: 6px 12px;
}

/* ============================================================
   ЮНИТ (₽, шт. и т.п.) — не даём растягивать выше высоты инпута.
   Bootstrap .input-group по умолчанию align-items:stretch — из-за
   margin-bottom у инпута flex-контейнер становится 46px, и span
   растягивается до 46px при инпуте 38px. Исправляем через
   align-items:center + сброс margin у инпута внутри группы.
   ============================================================ */
.form-field-unit-group {
    flex-wrap: nowrap;      /* не переносить инпут + суффикс на разные строки */
    align-items: center;    /* unit-span по высоте = инпуту, не растягивается */
}
.form-field-unit-group > input,
.form-field-unit-group > select {
    margin-bottom: 0 !important;  /* убираем отступ, раздувающий flex-контейнер до 46px */
}
.form-field-unit-group > .form-field-unit {
    flex-shrink: 0;
}

/* ============================================================
   ВИЗУАЛЬНАЯ ГРУППИРОВКА БЛОКОВ В РЕЖИМЕ РЕДАКТОРА
   PHP-шаблон добавляет классы field-in-block / field-block-start /
   field-block-end к .field-wrapper, чтобы показать группировку
   без изменения DOM-структуры (не ломая Sortable.js).
   ============================================================ */
.admin-block-group {
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 4px 0;
    background: rgba(13, 110, 253, 0.03);
}
body.theme-dark .admin-block-group {
    border-color: #6ea8fe;
    background: rgba(110, 168, 254, 0.05);
}

/* Поля внутри form-block — без отдельного визуального маркера;
   блок целиком подсвечивается через JS-оверлей (.form-block-hover-outline) */
.field-wrapper.field-in-block {
    /* border-left убран — подсветка блока делается JS-оверлеем */
}
/* block_start / block_end — виртуальные поля-маркеры, без рамок и отступов */

/* -------------------------------------------------------------------
   JS-ОВЕРЛЕЙ подсветки блока (.form-block-hover-outline)
   Создаётся в forms.js и накладывается поверх группы field-in-block.
   Имитирует block-hover outline, как у content/page-content блоков.
   ------------------------------------------------------------------- */
#form-block-hover-outline {
    position: fixed;
    pointer-events: none;
    z-index: 9998;                         /* ниже модалок, выше контента */
    border: 1px dashed #0d6efd;
    border-radius: 6px;
    display: none;
    background: transparent;
}
body.theme-dark #form-block-hover-outline {
    border-color: #6ea8fe;
}

/* -------------------------------------------------------------------
   ⚙ КНОПКА form-block — появляется в верхнем левом углу при наведении
   на группу (JS добавляет .block-group-hover к .field-block-start)
   ------------------------------------------------------------------- */
.field-wrapper.field-block-start > .style-edit-btn[data-block="form-block"] {
    display: none;
}
.field-wrapper.field-block-start.block-group-hover > .style-edit-btn[data-block="form-block"] {
    display: block !important;
    position: absolute !important;
    top: -15px !important;
    left: -15px !important;
    right: auto !important;
    bottom: auto !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    text-align: center !important;
    background: #3498db !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    z-index: 10005 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.field-wrapper.field-block-start.block-group-hover > .style-edit-btn[data-block="form-block"]:hover {
    background: #2980b9 !important;
    transform: scale(1.1) !important;
}

/* Подавляем block-hover у form-column пока активен form_block */
.form-column.form-block-active.block-hover {
    outline: none !important;
}
.form-column.form-block-active.block-hover > .style-edit-btn {
    display: none !important;
}
/* padding-outline (resize-handle-padding) тоже скрываем — его opacity ставит JS */
.form-column.form-block-active > .resize-handle-padding {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   ХЭНДЛЕРЫ РЕСАЙЗА FIELD-WRAPPER (admin mode)
   ============================================================ */
.fw-rh {
    position: absolute;
    background: #0d6efd;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 10;
    border-radius: 2px;
}
.field-wrapper.admin-mode:hover .fw-rh,
.field-wrapper.admin-mode.fw-resizing .fw-rh { opacity: 0.35; }
.fw-rh:hover, .fw-rh.active                  { opacity: 0.85 !important; }
.fw-rh-right  { right: -2px; top: 15%; bottom: 15%; width: 4px; cursor: col-resize; }
.fw-rh-top    { top: -2px; left: 15%; right: 15%; height: 4px; cursor: ns-resize; }
.fw-rh-bottom { bottom: -2px; left: 15%; right: 15%; height: 4px; cursor: ns-resize; }
.fw-resize-tooltip {
    position: fixed; pointer-events: none; z-index: 9999;
    background: rgba(0,0,0,.7); color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}

/* ============================================================
   КНОПКА ДЕЙСТВИЯ (display_type='button')
   Вся зона .field-wrapper является кнопкой
   ============================================================ */
.form-action-label {
    font-weight: 500;
    text-align: center;
    padding: 4px 0;
    cursor: inherit;
    user-select: none;
}
/* Гостевой режим: field-wrapper с button-типом кликабелен */
.form-grid-column .field-wrapper[data-action-type="button"] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Вид кнопки (заливка, скругление, отступы) задаёт блок стилей
   form_button — он приходит инлайном и перебивает правила выше.
   Здесь остаётся только то, что стилями блока не выражается. */

/* Ручки ресайза на кнопке.
   .fw-rh залиты #0d6efd — ровно тем же синим, что и базовый стиль
   form_button. На кнопке они становились невидимыми, и выглядело это как
   «у поля нет хэндлеров ресайза», хотя в разметке они были. Поверх кнопки
   рисуем их белыми с тёмной обводкой: так они читаются на заливке любого
   цвета, включая белую. */
.field-wrapper.admin-mode[data-block="form-button"] .fw-rh {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.field-wrapper.admin-mode[data-block="form-button"]:hover .fw-rh,
.field-wrapper.admin-mode[data-block="form-button"].fw-resizing .fw-rh {
    opacity: 0.95;
}
.form-action-btn--busy {
    opacity: 0.6;
    pointer-events: none;
}
/* Ответ на отправку. Лежит ПОД формой и вне её: правило «Скрыть форму»
   прячет <form> целиком. Пустой контейнер места не занимает. */
.form-submit-message:empty {
    display: none;
}
.form-submit-message {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: pre-line;
}
.form-submit-message--ok {
    background: #e8f5e9;
    border-color: #c8e6c9;
    color: #1b5e20;
}
.form-submit-message--error {
    background: #fdecea;
    border-color: #f5c6cb;
    color: #842029;
}
body.theme-dark .form-submit-message--ok {
    background: #1e3a24;
    border-color: #2e5c37;
    color: #c8e6c9;
}
body.theme-dark .form-submit-message--error {
    background: #3a1e21;
    border-color: #5c2e33;
    color: #f5c6cb;
}
.form-grid-column .field-wrapper[data-action-type="button"]:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    position: relative;
    z-index: 1;
}

/* ============================================================
   КЛОНИРОВАНИЕ БЛОКОВ (display_type='block_clone')
   ============================================================ */

/* Кнопка «Добавить позицию» */
.form-block-add-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 8px 0 4px;
    box-sizing: border-box;
}
/* Ширина по умолчанию — во всю колонку. Цвет, рамку и заливку задаёт
   стиль блока form-button инлайном и перебивает эти правила; они остаются
   запасным видом для кнопки без настроенного стиля. */
.form-grid-column .form-block-add-wrap .btn-add-block {
    width: 100%;
    border-style: dashed;
    color: #6c757d;
}
.form-grid-column .form-block-add-wrap .btn-add-block:hover {
    border-style: solid;
    color: #495057;
    background: #f8f9fa;
}

/* Блок-клон: появление */
.form-block.form-block-clone {
    position: relative;
    animation: form-block-appear 0.2s ease;
}
@keyframes form-block-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Строка с кнопкой удаления клона */
.form-block-delete-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.form-block-delete-wrap .btn-delete-block {
    font-size: 12px;
    padding: 2px 8px;
    opacity: 0.7;
}
.form-block-delete-wrap .btn-delete-block:hover {
    opacity: 1;
}

/* ================================================================
   ПРОЗРАЧНОСТЬ ПЛЕЙСХОЛДЕРОВ — задаётся только в css/style.css.
   Здесь раньше стояло своё 0.22 !important: оно действовало лишь на
   страницах с формами и перебивало там даже окно редактирования
   стилей, поэтому подсказки на сайте выглядели по-разному. Своё
   значение opacity сюда не возвращать (2026-09-16).
   ================================================================ */
body.theme-dark .form-control::placeholder,
body.theme-dark .form-select::placeholder {
    color: inherit !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: inherit !important;
}


/* ======================================================================
   СТАТИЧЕСКИЕ ПОЛЯ (2026-09-12, вернулось 2026-09-15)

   .field-type-static — типы, которые ничего не спрашивают, а только
   показывают (изображение, заголовок, текст). Цвет в списке типов нужен
   прежде всего чтобы «Показать изображение» не путали с соседним по
   смыслу «Изображение (загрузка)»: названия похожи, смысл обратный.
   option окрашивается не во всех браузерах (Safari игнорирует color у
   option), поэтому это подсказка, а не единственный признак.
   ====================================================================== */
.form-select option.field-type-static,
select option.field-type-static {
    color: #0a7d3f;
}

.form-static-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Пустая картинка видна только администратору — иначе на странице
   оставалась бы дыра без объяснения, почему. */
.form-static-image-empty {
    padding: 12px;
    border: 1px dashed #adb5bd;
    border-radius: 6px;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
}

body.theme-dark .form-select option.field-type-static,
body.theme-dark select option.field-type-static {
    color: #75b798;
}

body.theme-dark .form-static-image-empty {
    border-color: #555;
    color: #888;
}