/* Form Styles - block layout so form-groups and actions stack on new rows */
.form-group {
    width: 100%;
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.form-select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    color: #6c757d;
}

.form-check {
    display: block;
    margin-bottom: 1rem;
}

.form-check-label {
    margin-left: 0.5rem;
}

.form-check-input {
    position: relative;
    margin-right: 0.5rem;
}

/* Error states */
.has-error .form-control,
.has-error .form-select {
    border-color: #dc3545;
}

.has-error .form-text {
    color: #dc3545;
}

/* Success states */
.has-success .form-control,
.has-success .form-select {
    border-color: #28a745;
}

.has-success .form-text {
    color: #28a745;
}

/* Button colors inherited from base.css - green scheme, single-line text */
.btn-success {
    background: var(--btn-default-bg);
    color: var(--btn-default-text);
    border-color: var(--btn-default-bg);
}

.btn-success:hover,
.btn-success:focus-visible,
.btn-success:active {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
    color: var(--btn-hover-text);
}

/* Form layout */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* Form validation */
.form-validation {
    position: relative;
}

.form-validation .form-control {
    padding-right: 2.5rem;
}

.form-validation .form-control-feedback {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    pointer-events: none;
}

/* Form actions - always on new row */
.form-actions {
    margin-top: 2rem;
    text-align: right;
    clear: both;
}

/* Form groups */
.form-group-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
}

/* Form sizes */
.form-control-lg {
    padding: 0.75rem;
    font-size: 1.25rem;
}

.form-control-sm {
    padding: 0.25rem;
    font-size: 0.875rem;
}

/* Relationship / Post Object UX */
.relationship-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.relationship-search-input {
    font-size: 0.85rem;
}
.relationship-selected {
    display: none;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.15rem;
}
.relationship-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    background: #eef3ff;
    font-size: 0.75rem;
}
.relationship-chip-remove {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

/* Field type wrappers (editor UX, ACF/PrimeVue-style) */
.field-type-wysiwyg .form-control.wysiwyg-textarea {
    min-height: 200px;
    resize: vertical;
}
.field-type-image .form-control,
.field-type-gallery .form-control {
    max-width: 20em;
}
.field-type-relationship select[multiple],
.field-type-post_object select {
    min-height: 120px;
}
.required-asterisk { color: var(--error-text, #c00); }

/* Utility: Accordion (collapsible section header) */
.form-group-accordion {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}
.field-accordion-header {
    padding: 0.5rem 0.75rem;
    background: var(--surface, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-weight: 600;
}
.field-accordion-icon {
    margin-right: 0.5rem;
    color: var(--text-muted, #6c757d);
}
.field-accordion-hint { margin: 0.25rem 0 0; font-weight: normal; }

/* Utility: Tab (section label) */
.form-group-tab {
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--primary-color, #2d8016);
}
.field-tab-label {
    font-weight: 600;
    font-size: 1rem;
}
.form-group-message .field-message-text {
    padding: 0.75rem;
    background: var(--surface, #f8f9fa);
    border-radius: 4px;
    border-left: 3px solid var(--primary-color, #2d8016);
}
.field-divider { margin: 1.25rem 0; }

/* Field Builder: type hint in settings panel */
.field-type-hint .help-text {
    background: var(--surface, #f8f9fa) !important;
    border-left-color: var(--primary-color, #2d8016) !important;
}

/* PrimeVue field mounts (post edit) */
.pv-relation-root {
    width: 100%;
    max-width: 100%;
}
.pv-relation-root .p-multiselect,
.pv-relation-root .p-dropdown {
    width: 100%;
}

/* WYSIWYG (TinyMCE) – flexible height, resize handle bottom-right, theme consistency */
.field-type-wysiwyg .modular-wysiwyg-field {
    width: 100%;
    min-height: 220px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
}
/* Alleen bij focus: rand donkerder grijs, geen blauw */
.field-type-wysiwyg div.modular-wysiwyg-field.w-full:focus-within {
    border-color: #6b7280 !important;
    outline: none !important;
    box-shadow: none !important;
}
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area__iframe {
    min-height: 220px;
}
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-editor-container {
    min-height: 220px;
}
.field-type-wysiwyg .modular-wysiwyg-field .tox-tinymce {
    border-radius: var(--radius-sm, 4px);
    border: none !important;
}
.field-type-wysiwyg .modular-wysiwyg-field .tox-tinymce:focus-within {
    border: none !important;
    outline: none;
    box-shadow: none;
}
/* Binnenste focusrand (rond typveld in editor): grijs i.p.v. blauw */
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area,
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area:focus,
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area:focus-within,
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area.tox-edit-area--focused {
    border-color: #6b7280 !important;
    box-shadow: none !important;
}
.field-type-wysiwyg .modular-wysiwyg-field .tox .tox-edit-area__iframe {
    outline: none !important;
}

.w-full { width: 100%; }

/* Validation (field renderer) */
.help-text.text-danger {
    color: var(--error-text, #c00);
    font-size: 0.875rem;
}
.form-group.is-invalid .p-inputtext,
.form-group.is-invalid .p-inputnumber,
.form-group.is-invalid .p-dropdown {
    border-color: var(--error-border, #c00);
}