/* ==========================================================================
   🎨 SuraqHub Form.io Builder Enterprise Styles (Light & Dark Theme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Общий контейнер конструктора и боковая панель палитры
   -------------------------------------------------------------------------- */
.suraqhub-builder-workspace {
    padding: 1.5rem !important;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

body.dark .suraqhub-builder-workspace,
html.dark .suraqhub-builder-workspace {
    background-color: #0b132b !important;
    border: 1px solid #1e293b !important;
}

/* Поиск по компонентам в сайдбаре */
.formio-builder-sidebar input[type="search"],
.formio-builder-sidebar input.form-control,
.form-builder-panel input {
    border-radius: 8px !important;
    font-size: 0.85rem !important;
}

body.dark .formio-builder-sidebar input,
html.dark .formio-builder-sidebar input {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

body.dark .formio-builder-sidebar input::placeholder,
html.dark .formio-builder-sidebar input::placeholder {
    color: #64748b !important;
}

/* Группы компонентов (аккордеон) */
.form-builder-panel {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden;
}

body.dark .form-builder-panel,
html.dark .form-builder-panel {
    background-color: #172033 !important;
    border-color: #334155 !important;
}

.builder-group-button,
#builder .builder-group-button {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.65rem 0.85rem !important;
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-shadow: none !important;
}

body.dark .builder-group-button,
html.dark .builder-group-button {
    background-color: #172033 !important;
    color: #f1f5f9 !important;
    border: none !important;
}

body.dark .builder-group-button:hover,
html.dark .builder-group-button:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

/* Кнопки компонентов в палитре (drag-copy).
   Селектор .builder-sidebar .formcomponent — реальный DOM formio 5.5.2:
   span.btn.formcomponent.drag-copy внутри div.builder-sidebar[ref=sidebar-container] */
.builder-sidebar .formcomponent:not(.gu-hide),
.formcomponent.drag-copy:not(.gu-hide),
.formio-builder-components .formcomponent:not(.gu-hide) {
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 0.45rem 0.75rem !important;
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: grab !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
}

body.dark .builder-sidebar .formcomponent:not(.gu-hide),
body.dark .formcomponent.drag-copy:not(.gu-hide),
html.dark .builder-sidebar .formcomponent:not(.gu-hide),
html.dark .formcomponent.drag-copy:not(.gu-hide) {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
}

body.dark .builder-sidebar .formcomponent:not(.gu-hide):hover,
body.dark .formcomponent.drag-copy:not(.gu-hide):hover,
html.dark .builder-sidebar .formcomponent:not(.gu-hide):hover,
html.dark .formcomponent.drag-copy:not(.gu-hide):hover {
    background-color: #2563eb !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px);
}

.builder-sidebar .formcomponent i,
.formcomponent.drag-copy i {
    flex: 0 0 auto !important;
    margin-right: 8px !important;
    font-size: 0.85rem !important;
}

body.dark .builder-sidebar .formcomponent i,
body.dark .formcomponent.drag-copy i,
html.dark .builder-sidebar .formcomponent i,
html.dark .formcomponent.drag-copy i {
    color: #60a5fa !important;
}

body.dark .builder-sidebar .formcomponent:hover i,
body.dark .formcomponent.drag-copy:hover i,
html.dark .builder-sidebar .formcomponent:hover i,
html.dark .formcomponent.drag-copy:hover i {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. Рабочая область формы (Drop Zone)
   -------------------------------------------------------------------------- */
.suraqhub-builder-workspace .formio-builder-form {
    background: #ffffff !important;
    border: 2px solid #2563eb !important;
    border-radius: 12px !important;
    padding: 1.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 
                0 4px 6px -2px rgba(0, 0, 0, 0.02), 
                0 0 0 4px rgba(37, 99, 235, 0.06) !important;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out !important;
}

body.dark .suraqhub-builder-workspace .formio-builder-form,
html.dark .suraqhub-builder-workspace .formio-builder-form {
    background: #111827 !important;
    border: 2px solid #2563eb !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 
                0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* --------------------------------------------------------------------------
   3. Пустые зоны сброса (Заглушки)
   -------------------------------------------------------------------------- */
.suraqhub-builder-workspace .drag-and-drop-paragraph,
.suraqhub-builder-workspace .drag-and-drop-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    box-sizing: border-box;
    margin: 0 !important;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.suraqhub-builder-workspace .drag-and-drop-paragraph.hidden,
.suraqhub-builder-workspace .drag-and-drop-paragraph[style*="display: none"],
.suraqhub-builder-workspace .drag-and-drop-alert.hidden,
.suraqhub-builder-workspace .drag-and-drop-alert[style*="display: none"] {
    display: none !important;
}

/* 1-й уровень (корень формы) */
.suraqhub-builder-workspace > .builder-components > .drag-and-drop-paragraph,
.suraqhub-builder-workspace > .builder-components > .drag-and-drop-alert,
.suraqhub-builder-workspace .builder-components.drag-container > .drag-and-drop-alert {
    min-height: 120px;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #475569;
}

body.dark .suraqhub-builder-workspace > .builder-components > .drag-and-drop-paragraph,
html.dark .suraqhub-builder-workspace > .builder-components > .drag-and-drop-paragraph,
body.dark .suraqhub-builder-workspace .builder-components.drag-container > .drag-and-drop-alert,
html.dark .suraqhub-builder-workspace .builder-components.drag-container > .drag-and-drop-alert {
    background-color: rgba(23, 32, 51, 0.6) !important;
    border: 2px dashed #475569 !important;
    color: #94a3b8 !important;
}

/* 2-й уровень */
.suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-paragraph,
.suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-alert {
    min-height: 65px;
    background-color: transparent;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #64748b;
}

body.dark .suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-paragraph,
html.dark .suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-paragraph,
body.dark .suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-alert,
html.dark .suraqhub-builder-workspace .builder-component > .builder-components > .drag-and-drop-alert {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* 3-й уровень и глубже */
.suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-paragraph,
.suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-alert {
    min-height: 45px;
    background-color: transparent;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #94a3b8;
}

body.dark .suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-paragraph,
html.dark .suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-paragraph,
body.dark .suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-alert,
html.dark .suraqhub-builder-workspace .builder-component .builder-component .drag-and-drop-alert {
    border-color: #334155 !important;
    color: #64748b !important;
}

/* Drag Over */
.suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-paragraph,
.suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-paragraph,
.suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-alert,
.suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-alert,
.suraqhub-builder-workspace .drag-and-drop-paragraph.dragover,
.suraqhub-builder-workspace .drag-and-drop-paragraph.gu-over,
.suraqhub-builder-workspace .drag-and-drop-alert.dragover,
.suraqhub-builder-workspace .drag-and-drop-alert.gu-over {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

body.dark .suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-paragraph,
body.dark .suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-paragraph,
body.dark .suraqhub-builder-workspace .drag-and-drop-paragraph.dragover,
body.dark .suraqhub-builder-workspace .drag-and-drop-paragraph.gu-over,
html.dark .suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-paragraph,
html.dark .suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-paragraph,
html.dark .suraqhub-builder-workspace .drag-and-drop-paragraph.dragover,
html.dark .suraqhub-builder-workspace .drag-and-drop-paragraph.gu-over,
body.dark .suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-alert,
body.dark .suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-alert,
body.dark .suraqhub-builder-workspace .drag-and-drop-alert.dragover,
body.dark .suraqhub-builder-workspace .drag-and-drop-alert.gu-over,
html.dark .suraqhub-builder-workspace .builder-components.gu-over > .drag-and-drop-alert,
html.dark .suraqhub-builder-workspace .builder-components.dragover > .drag-and-drop-alert,
html.dark .suraqhub-builder-workspace .drag-and-drop-alert.dragover,
html.dark .suraqhub-builder-workspace .drag-and-drop-alert.gu-over {
    border-color: #3b82f6 !important;
    background-color: rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
    color: #bfdbfe !important;
}

/* --------------------------------------------------------------------------
   4. Карточки компонентов внутри рабочей области
   -------------------------------------------------------------------------- */
.suraqhub-builder-workspace .builder-component {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    position: relative;
}

.suraqhub-builder-workspace .builder-component:hover {
    border-color: #94a3b8 !important;
}

body.dark .suraqhub-builder-workspace .builder-component:hover,
html.dark .suraqhub-builder-workspace .builder-component:hover {
    border-color: #475569 !important;
}

.suraqhub-builder-workspace .builder-component.active,
.suraqhub-builder-workspace .builder-component.formio-component-active {
    border-color: #2563eb !important;
    box-shadow: inset 0 0 0 2px #2563eb, 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

body.dark .suraqhub-builder-workspace .builder-component.active,
body.dark .suraqhub-builder-workspace .builder-component.formio-component-active,
html.dark .suraqhub-builder-workspace .builder-component.active,
html.dark .suraqhub-builder-workspace .builder-component.formio-component-active {
    border-color: #3b82f6 !important;
    box-shadow: inset 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.25) !important;
}

/* --------------------------------------------------------------------------
   5. Управляющие кнопки компонента (Edit, Copy, Delete, JSON, Move, Paste)
   -------------------------------------------------------------------------- */
.suraqhub-builder-workspace .component-btn-group {
    z-index: 25;
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0.95;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .suraqhub-builder-workspace .component-btn-group {
        opacity: 0.65;
    }
    .suraqhub-builder-workspace .builder-component:hover > .component-btn-group,
    .suraqhub-builder-workspace .builder-component:focus-within > .component-btn-group,
    .suraqhub-builder-workspace .component-btn-group:hover {
        opacity: 1;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    }
}

.suraqhub-builder-workspace .component-btn-group .btn-xxs,
.suraqhub-builder-workspace .component-settings-button {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease !important;
}

.suraqhub-builder-workspace .component-btn-group .btn-xxs:hover,
.suraqhub-builder-workspace .component-settings-button:hover {
    transform: translateY(-1px) scale(1.08);
    filter: brightness(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Цветовая дифференциация всех 6 кнопок действий */
.suraqhub-builder-workspace .component-settings-button-remove {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.suraqhub-builder-workspace .component-settings-button-copy {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.suraqhub-builder-workspace .component-settings-button-paste {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.suraqhub-builder-workspace .component-settings-button-edit-json {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

.suraqhub-builder-workspace .component-settings-button-move {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    cursor: move !important;
}

.suraqhub-builder-workspace .component-settings-button-edit {
    background-color: #64748b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

.suraqhub-builder-workspace .component-settings-button i,
.suraqhub-builder-workspace .component-settings-button svg {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
}

.suraqhub-builder-workspace .component-settings-button-remove i::before {
    content: "\f5de" !important; /* bi-trash */
}

.suraqhub-builder-workspace .component-settings-button-copy i::before {
    content: "\f759" !important; /* bi-copy */
}

.suraqhub-builder-workspace .component-settings-button-paste i::before {
    content: "\f28e" !important; /* bi-clipboard-plus */
}

.suraqhub-builder-workspace .component-settings-button-edit-json i::before {
    content: "\f2c6" !important; /* bi-code-slash */
}

.suraqhub-builder-workspace .component-settings-button-move i::before {
    content: "\f14e" !important; /* bi-arrows-move */
}

.suraqhub-builder-workspace .component-settings-button-edit i::before {
    content: "\f3e5" !important; /* bi-gear */
}

/* --------------------------------------------------------------------------
   6. Фантом Dragula при переносе
   -------------------------------------------------------------------------- */
.gu-mirror.builder-component,
.gu-mirror.btn,
.gu-mirror {
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
    background: #1e293b !important;
    color: #ffffff !important;
    opacity: 0.9 !important;
    border-radius: 8px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    transition: none !important;
}

.gu-mirror * {
    pointer-events: none !important;
}

/* Принудительное скрытие при вычислении целевого контейнера в Dragula */
.gu-hide,
.gu-mirror.gu-hide,
.formcomponent.drag-copy.gu-hide,
.formcomponent.gu-hide,
body.dark .formcomponent.drag-copy.gu-hide,
html.dark .formcomponent.drag-copy.gu-hide,
body.dark .gu-mirror.gu-hide,
html.dark .gu-mirror.gu-hide {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. Модальное окно редактирования настроек компонента (Form.io Dialog)
   -------------------------------------------------------------------------- */
.formio-dialog {
    z-index: 1060 !important;
}

.formio-dialog-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
}

/* Темная тема для тела диалога */
body.dark .formio-dialog-content,
body.dark .formio-dialog-theme-default .formio-dialog-content,
body.dark .formio-dialog-body,
html.dark .formio-dialog-content,
html.dark .formio-dialog-theme-default .formio-dialog-content,
html.dark .formio-dialog-body {
    background: #111827 !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Заголовки модального окна */
body.dark .formio-dialog-title,
body.dark .formio-dialog-content h3,
body.dark .formio-dialog-content h4,
body.dark .formio-dialog-content .card-title,
html.dark .formio-dialog-title,
html.dark .formio-dialog-content h3,
html.dark .formio-dialog-content h4,
html.dark .formio-dialog-content .card-title {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

/* Кнопка закрытия (крестик) */
body.dark .formio-dialog-close,
html.dark .formio-dialog-close {
    color: #94a3b8 !important;
    opacity: 0.8 !important;
}

body.dark .formio-dialog-close:hover,
html.dark .formio-dialog-close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Вкладки настроек (Tabs) */
body.dark .component-edit-tabs .nav-tabs,
html.dark .component-edit-tabs .nav-tabs {
    border-bottom: 1px solid #334155 !important;
    margin-bottom: 1rem !important;
}

body.dark .component-edit-tabs .nav-tabs .nav-link,
html.dark .component-edit-tabs .nav-tabs .nav-link {
    color: #94a3b8 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.85rem !important;
}

body.dark .component-edit-tabs .nav-tabs .nav-link:hover,
html.dark .component-edit-tabs .nav-tabs .nav-link:hover {
    color: #f8fafc !important;
    border-color: #475569 !important;
}

body.dark .component-edit-tabs .nav-tabs .nav-link.active,
html.dark .component-edit-tabs .nav-tabs .nav-link.active {
    color: #60a5fa !important;
    background-color: #1e293b !important;
    border-color: #334155 #334155 transparent !important;
    font-weight: 600 !important;
}

/* Лейблы и чекбоксы в диалоге */
body.dark .formio-dialog-content label,
body.dark .formio-dialog-content .col-form-label,
body.dark .formio-dialog-content .form-check-label,
html.dark .formio-dialog-content label,
html.dark .formio-dialog-content .col-form-label,
html.dark .formio-dialog-content .form-check-label {
    color: #cbd5e1 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

body.dark .formio-dialog-content .form-control,
body.dark .formio-dialog-content .custom-select,
body.dark .formio-dialog-content select,
html.dark .formio-dialog-content .form-control,
html.dark .formio-dialog-content .custom-select,
html.dark .formio-dialog-content select {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Редактор Ace (Описание, всплывающие подсказки, JSON, Logic) */
body.dark .formio-dialog-content .ace_editor,
body.dark .formio-dialog-content .ace_editor.ace-tm,
body.dark .ace_editor.formio-editor,
html.dark .formio-dialog-content .ace_editor,
html.dark .formio-dialog-content .ace_editor.ace-tm,
html.dark .ace_editor.formio-editor {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
}

body.dark .formio-dialog-content .ace_gutter,
html.dark .formio-dialog-content .ace_gutter {
    background-color: #172033 !important;
    color: #64748b !important;
    border-right: 1px solid #334155 !important;
}

body.dark .formio-dialog-content .ace_gutter-cell,
html.dark .formio-dialog-content .ace_gutter-cell {
    color: #64748b !important;
}

body.dark .formio-dialog-content .ace_cursor,
html.dark .formio-dialog-content .ace_cursor {
    color: #f8fafc !important;
    border-left: 2px solid #60a5fa !important;
}

body.dark .formio-dialog-content .ace_line,
html.dark .formio-dialog-content .ace_line {
    color: #f1f5f9 !important;
}

body.dark .formio-dialog-content .ace_active-line,
html.dark .formio-dialog-content .ace_active-line {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark .formio-dialog-content .ace_selection,
html.dark .formio-dialog-content .ace_selection {
    background-color: rgba(59, 130, 246, 0.35) !important;
}

body.dark .formio-dialog-content .ace_scroller,
body.dark .formio-dialog-content .ace_content,
html.dark .formio-dialog-content .ace_scroller,
html.dark .formio-dialog-content .ace_content {
    background-color: #0f172a !important;
}

/* Правая колонка: панель предпросмотра (Preview Panel) */
body.dark .formio-dialog-content .preview-panel,
body.dark .formio-dialog-content .component-preview,
body.dark .formio-dialog-content .preview-panel .card-body,
body.dark .formio-dialog-content .preview-panel .card-header,
html.dark .formio-dialog-content .preview-panel,
html.dark .formio-dialog-content .component-preview,
html.dark .formio-dialog-content .preview-panel .card-body,
html.dark .formio-dialog-content .preview-panel .card-header {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
}

body.dark .formio-dialog-content .formio-settings-help,
body.dark .formio-dialog-content .bg-light.formio-settings-help,
html.dark .formio-dialog-content .formio-settings-help,
html.dark .formio-dialog-content .bg-light.formio-settings-help {
    background-color: #172033 !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
}

/* Кнопки действий в модальном окне */
body.dark .formio-dialog-content button[ref="saveButton"],
body.dark .formio-dialog-content .btn-success,
html.dark .formio-dialog-content button[ref="saveButton"],
html.dark .formio-dialog-content .btn-success {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

body.dark .formio-dialog-content button[ref="cancelButton"],
body.dark .formio-dialog-content .btn-secondary,
html.dark .formio-dialog-content button[ref="cancelButton"],
html.dark .formio-dialog-content .btn-secondary {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

body.dark .formio-dialog-content button[ref="removeButton"],
body.dark .formio-dialog-content .btn-danger,
html.dark .formio-dialog-content button[ref="removeButton"],
html.dark .formio-dialog-content .btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

body.dark .formio-dialog-content button[ref="previewButton"],
body.dark .formio-dialog-content .btn-primary,
html.dark .formio-dialog-content button[ref="previewButton"],
html.dark .formio-dialog-content .btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   8. Управление отображением элементов в зависимости от Продвинутого режима
   -------------------------------------------------------------------------- */
body:not(.builder-advanced) .component-settings-button-edit-json,
body:not(.builder-advanced) div[ref="editJson"],
html:not(.builder-advanced) .component-settings-button-edit-json,
html:not(.builder-advanced) div[ref="editJson"] {
    display: none !important;
}

/* Скрытие табов расширенной логики, JSON, PDF и API в модальных окнах компонентов при выключенном режиме */
body:not(.builder-advanced) .formio-dialog .nav-tabs .nav-item a[href*="logic"],
body:not(.builder-advanced) .formio-dialog .nav-tabs .nav-item a[href*="pdf"],
body:not(.builder-advanced) .formio-dialog .nav-tabs .nav-item a[href*="json"],
body:not(.builder-advanced) .formio-dialog .nav-tabs .nav-item a[href*="api"],
body:not(.builder-advanced) .formio-dialog .tab-pane[id*="logic"],
body:not(.builder-advanced) .formio-dialog .tab-pane[id*="pdf"],
body:not(.builder-advanced) .formio-dialog .tab-pane[id*="json"],
body:not(.builder-advanced) .formio-dialog .tab-pane[id*="api"],
body:not(.builder-advanced) .formio-dialog [ref="custom"],
body:not(.builder-advanced) .formio-dialog [ref="customValidation"],
body:not(.builder-advanced) .formio-dialog [ref="calculatedValue"],
body:not(.builder-advanced) .formio-dialog [ref="jsonLogic"],
body:not(.builder-advanced) .formio-dialog .formio-component-custom,
body:not(.builder-advanced) .formio-dialog .formio-component-customValidation,
body:not(.builder-advanced) .formio-dialog .formio-component-calculatedValue,
body:not(.builder-advanced) .formio-dialog .formio-component-jsonLogic {
    display: none !important;
}

/* --------------------------------------------------------------------------
   9. Стилизация заголовков страниц многостраничной формы (Wizard Tabs)
   -------------------------------------------------------------------------- */
#builder ol.breadcrumb,
.formio-builder-wizard ol.breadcrumb,
.suraqhub-builder-workspace ol.breadcrumb,
ol.breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0.75rem 0 1.25rem 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
}

#builder ol.breadcrumb li,
.formio-builder-wizard ol.breadcrumb li,
.suraqhub-builder-workspace ol.breadcrumb li,
ol.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#builder ol.breadcrumb li::before,
.formio-builder-wizard ol.breadcrumb li::before,
.suraqhub-builder-workspace ol.breadcrumb li::before,
ol.breadcrumb li::before {
    display: none !important;
    content: none !important;
}

/* Сами плашки страниц визарда */
#builder .wizard-page-label,
.formio-builder-wizard .wizard-page-label,
.suraqhub-builder-workspace .wizard-page-label,
.wizard-page-label,
span[ref="gotoPage"],
span[ref="addPage"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0.45rem 1.15rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 9999px !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    line-height: 1.2 !important;
}

/* Неактивная страница */
#builder span[ref="gotoPage"]:not(.bg-primary),
.suraqhub-builder-workspace span[ref="gotoPage"]:not(.bg-primary),
.wizard-page-label.bg-info,
.wizard-page-label:not(.bg-primary):not(.bg-success) {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#builder span[ref="gotoPage"]:not(.bg-primary):hover,
.suraqhub-builder-workspace span[ref="gotoPage"]:not(.bg-primary):hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Активная страница */
#builder span[ref="gotoPage"].bg-primary,
.suraqhub-builder-workspace span[ref="gotoPage"].bg-primary,
.wizard-page-label.bg-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

/* Кнопка добавления страницы (+ СТРАНИЦА) */
#builder span[ref="addPage"],
.suraqhub-builder-workspace span[ref="addPage"],
.wizard-add-page .wizard-page-label,
.wizard-page-label.bg-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px dashed #10b981 !important;
    box-shadow: none !important;
}

#builder span[ref="addPage"]:hover,
.suraqhub-builder-workspace span[ref="addPage"]:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-style: solid !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Dark theme для Wizard Tabs */
body.dark #builder span[ref="gotoPage"]:not(.bg-primary),
body.dark .suraqhub-builder-workspace span[ref="gotoPage"]:not(.bg-primary),
body.dark .wizard-page-label.bg-info,
body.dark .wizard-page-label:not(.bg-primary):not(.bg-success),
html.dark #builder span[ref="gotoPage"]:not(.bg-primary),
html.dark .suraqhub-builder-workspace span[ref="gotoPage"]:not(.bg-primary),
html.dark .wizard-page-label.bg-info,
html.dark .wizard-page-label:not(.bg-primary):not(.bg-success) {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

body.dark #builder span[ref="gotoPage"]:not(.bg-primary):hover,
html.dark #builder span[ref="gotoPage"]:not(.bg-primary):hover {
    background-color: #263449 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

body.dark #builder span[ref="gotoPage"].bg-primary,
body.dark .suraqhub-builder-workspace span[ref="gotoPage"].bg-primary,
body.dark .wizard-page-label.bg-primary,
html.dark #builder span[ref="gotoPage"].bg-primary,
html.dark .suraqhub-builder-workspace span[ref="gotoPage"].bg-primary,
html.dark .wizard-page-label.bg-primary {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
}

body.dark #builder span[ref="addPage"],
body.dark .suraqhub-builder-workspace span[ref="addPage"],
body.dark .wizard-add-page .wizard-page-label,
body.dark .wizard-page-label.bg-success,
html.dark #builder span[ref="addPage"],
html.dark .suraqhub-builder-workspace span[ref="addPage"],
html.dark .wizard-add-page .wizard-page-label,
html.dark .wizard-page-label.bg-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px dashed #059669 !important;
}

body.dark #builder span[ref="addPage"]:hover,
html.dark #builder span[ref="addPage"]:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-style: solid !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

/* --------------------------------------------------------------------------
   10. Стилизация выпадающих списков Choices.js (Select Dropdowns) в темной теме
   -------------------------------------------------------------------------- */
body.dark .choices__inner,
html.dark .choices__inner {
    background-color: #172033 !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    border-radius: 6px !important;
}

body.dark .choices__input,
html.dark .choices__input {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155 !important;
}

body.dark .choices__input::placeholder,
html.dark .choices__input::placeholder {
    color: #94a3b8 !important;
}

body.dark .choices__list--dropdown,
body.dark .choices__list[aria-expanded],
html.dark .choices__list--dropdown,
html.dark .choices__list[aria-expanded] {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    border-radius: 6px !important;
    color: #f8fafc !important;
    z-index: 10005 !important;
}

body.dark .choices__list--dropdown .choices__item,
body.dark .choices__list[aria-expanded] .choices__item,
html.dark .choices__list--dropdown .choices__item,
html.dark .choices__list[aria-expanded] .choices__item {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
html.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body.dark .choices[data-type*="select-one"]::after,
html.dark .choices[data-type*="select-one"]::after {
    border-color: #94a3b8 transparent transparent transparent !important;
}

body.dark .choices[data-type*="select-one"].is-open::after,
html.dark .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   11. Стилизация компонента «Подпись» (Signature)
   -------------------------------------------------------------------------- */
.formio-component-signature .signature-pad-body {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.formio-component-signature .signature-pad-canvas {
    background-color: #ffffff !important;
    display: block !important;
    width: 100% !important;
}

.formio-component-signature .signature-pad-actions {
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.formio-component-signature .signature-pad-actions .btn {
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

/* Dark theme для Signature */
body.dark .formio-component-signature .signature-pad-body,
html.dark .formio-component-signature .signature-pad-body {
    border-color: #334155 !important;
    background-color: #0f172a !important;
}

body.dark .formio-component-signature .signature-pad-canvas,
html.dark .formio-component-signature .signature-pad-canvas {
    background-color: #0f172a !important;
}

body.dark .formio-component-signature .signature-pad-actions .btn,
html.dark .formio-component-signature .signature-pad-actions .btn {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark .formio-component-signature .signature-pad-actions .btn:hover,
html.dark .formio-component-signature .signature-pad-actions .btn:hover {
    background-color: #263449 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   12. Скрытие вертикальной линии (Print Margin) в Ace Editor
   -------------------------------------------------------------------------- */
.ace_print-margin,
.ace_editor .ace_print-margin {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   13. Стилизация EditGrid, DataMap и кнопок действий внутри диалога настроек
   -------------------------------------------------------------------------- */
.formio-dialog-content .editgrid-actions .btn,
.formio-dialog-content .formio-component-editgrid .btn-primary,
.formio-dialog-content .formio-component-datamap .btn-primary {
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.75rem !important;
}

/* Кнопка сохранения логики/действия внутри editgrid */
.formio-dialog-content .editgrid-actions .btn-primary,
.formio-dialog-content .editgrid-actions button[ref="saveRow"] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* Кнопка отмены внутри editgrid */
.formio-dialog-content .editgrid-actions .btn-danger,
.formio-dialog-content .editgrid-actions button[ref="cancelRow"],
.formio-dialog-content .editgrid-actions .btn-secondary {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

.formio-dialog-content .editgrid-actions .btn-danger:hover,
.formio-dialog-content .editgrid-actions button[ref="cancelRow"]:hover {
    background-color: #334155 !important;
    border-color: #334155 !important;
}

/* DataMap таблицы (Ключ - Значение) */
.formio-dialog-content .formio-component-datamap th {
    font-size: 0.78rem !important;
    letter-spacing: 0.05em;
    font-weight: 600 !important;
    color: #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.5rem 0.65rem !important;
}

body.dark .formio-dialog-content .formio-component-datamap th,
html.dark .formio-dialog-content .formio-component-datamap th {
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

.formio-dialog-content .formio-component-datamap td {
    padding: 0.4rem 0.65rem !important;
    vertical-align: middle !important;
}