/* Custom CSS for FormLayout editor full width - ONLY on FormLayout pages */

/* Target FormLayout resource pages specifically */
.filament-resource-form-layouts .filament-forms-rich-editor-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
}

.filament-resource-form-layouts .filament-forms-rich-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 400px !important;
}

/* Force full width on the editor container - only on FormLayout pages */
.filament-resource-form-layouts .filament-forms-rich-editor .tiptap-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* Force full width on the editor content - only on FormLayout pages */
.filament-resource-form-layouts .filament-forms-rich-editor .ProseMirror {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 400px !important;
    direction: ltr !important;
    text-align: left !important;
    font-family: 'Courier New', monospace !important;
}

/* Target grid columns ONLY within FormLayout forms */
.filament-resource-form-layouts .filament-forms-grid .fi-grid-col:has(.filament-forms-textarea),
.filament-resource-form-layouts .filament-forms-grid .fi-grid-col:has(.filament-forms-rich-editor) {
    --col-span-default: span 12 / span 12 !important;
    grid-column: span 12 !important;
}

/* Target specific FormLayout fields by name */
.filament-resource-form-layouts .fi-grid-col:has(textarea[name="html_template"]),
.filament-resource-form-layouts .fi-grid-col:has(textarea[name="css"]) {
    --col-span-default: span 12 / span 12 !important;
    grid-column: span 12 !important;
}

/* CSS editor specific styling - only on FormLayout pages */
.filament-resource-form-layouts .filament-forms-rich-editor[data-field="css"] .ProseMirror {
    font-family: 'Courier New', monospace !important;
    white-space: pre-wrap !important;
    font-size: 14px !important;
}