/**
 * Enhanced HTML Block Styles
 */

/* Editor Mode Tabs */
.enhanced-html-block-editor .editor-mode-tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
}

.enhanced-html-block-editor .editor-mode-tabs .tab {
    flex: 1;
    padding: 10px 15px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    margin-right: 5px;
    font-weight: 500;
    color: #555;
}

.enhanced-html-block-editor .editor-mode-tabs .tab:last-child {
    margin-right: 0;
}

.enhanced-html-block-editor .editor-mode-tabs .tab:hover {
    background: #e8e8e8;
}

.enhanced-html-block-editor .editor-mode-tabs .tab.active {
    background: #fff;
    border-bottom: 2px solid #fff;
    position: relative;
    top: 2px;
    color: #0073aa;
    font-weight: 600;
}

/* Source Editor */
.enhanced-html-block-editor .enhanced-html-source {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    color: #333;
    width: 100%;
    min-height: 400px;
    resize: vertical;
}

.enhanced-html-block-editor .enhanced-html-source:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
    background: #fff;
}

/* Visual Editor Container */
.enhanced-html-block-editor .enhanced-html-visual {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* TinyMCE Overrides for Visual Mode */
.enhanced-html-block-editor .mce-tinymce {
    border: none !important;
}

.enhanced-html-block-editor .mce-container,
.enhanced-html-block-editor .mce-container *,
.enhanced-html-block-editor .mce-widget,
.enhanced-html-block-editor .mce-widget * {
    box-sizing: border-box;
}

/* Modal Styles */
.enhanced-html-modal .components-modal__content {
    padding: 20px;
}

.enhanced-html-modal .components-text-control__input {
    width: 100%;
}

.enhanced-html-modal .components-checkbox-control {
    margin-top: 15px;
}

/* Regex Tips Box */
.enhanced-html-modal code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 12px;
    color: #d63384;
}

/* Inspector Controls */
.components-panel__body .components-button-group {
    width: 100%;
    margin-top: 10px;
}

.components-panel__body .components-button-group .components-button {
    flex: 1;
    justify-content: center;
}

/* Block Toolbar */
.enhanced-html-block-editor .block-editor-block-toolbar .components-toolbar-group {
    border-right: 1px solid #ddd;
    padding-right: 6px;
    margin-right: 6px;
}

/* Preview Mode Styles */
.enhanced-html-block-preview {
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-height: 100px;
}

/* CodeMirror Integration (if used) */
.enhanced-html-block-editor .CodeMirror {
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.enhanced-html-block-editor .CodeMirror-focused {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .enhanced-html-block-editor .editor-mode-tabs .tab {
        padding: 8px 10px;
        font-size: 14px;
    }
    
    .enhanced-html-block-editor .enhanced-html-source {
        font-size: 13px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body.is-dark-theme .enhanced-html-block-editor .enhanced-html-source {
        background: #1e1e1e;
        color: #e0e0e0;
        border-color: #444;
    }
    
    body.is-dark-theme .enhanced-html-block-editor .editor-mode-tabs .tab {
        background: #2a2a2a;
        color: #ccc;
        border-color: #444;
    }
    
    body.is-dark-theme .enhanced-html-block-editor .editor-mode-tabs .tab.active {
        background: #1e1e1e;
        color: #4fc3f7;
    }
}