/**
 * Hugerte CSS - Estilos para integração com Webix
 * Baseado no projeto: https://github.com/hugerte/hugerte
 */

/* Estilos do container do editor */
.hugerte-container {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Estilos para integração com Webix */
.webix_hugerte_editor {
    border: none !important;
    border-radius: 0 !important;
}

.webix_hugerte_editor .mce-tinymce {
    border: none !important;
}

.webix_hugerte_editor .mce-toolbar {
    border-bottom: 1px solid #ddd !important;
    background: #f5f5f5 !important;
}

.webix_hugerte_editor .mce-btn {
    border-radius: 3px !important;
    margin: 1px !important;
}

.webix_hugerte_editor .mce-btn:hover {
    background: #e0e0e0 !important;
}

.webix_hugerte_editor .mce-btn.mce-active {
    background: #2196F3 !important;
    color: white !important;
}

/* Estilos do conteúdo do editor */
.webix_hugerte_editor .mce-edit-area {
    border: none !important;
}

.webix_hugerte_editor .mce-edit-area iframe {
    border: none !important;
}

/* Estilos para imagens no editor */
.webix_hugerte_editor .mce-content-body img {
    max-width: 100% !important;
    height: auto !important;
    border: 2px solid transparent !important;
    border-radius: 4px !important;
    padding: 5px !important;
    margin: 10px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.webix_hugerte_editor .mce-content-body img:hover {
    border-color: #4CAF50 !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3) !important;
}

.webix_hugerte_editor .mce-content-body img.selected {
    border-color: #2196F3 !important;
    border-width: 2px !important;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.4) !important;
}

/* Estilos para tabelas */
.webix_hugerte_editor .mce-content-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 10px 0 !important;
}

.webix_hugerte_editor .mce-content-body table td,
.webix_hugerte_editor .mce-content-body table th {
    border: 1px solid #ddd !important;
    padding: 8px !important;
    text-align: left !important;
}

.webix_hugerte_editor .mce-content-body table th {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
}

/* Estilos para links */
.webix_hugerte_editor .mce-content-body a {
    color: #2196F3 !important;
    text-decoration: underline !important;
}

.webix_hugerte_editor .mce-content-body a:hover {
    color: #1976D2 !important;
}

/* Estilos para listas */
.webix_hugerte_editor .mce-content-body ul,
.webix_hugerte_editor .mce-content-body ol {
    margin: 10px 0 !important;
    padding-left: 30px !important;
}

.webix_hugerte_editor .mce-content-body li {
    margin: 5px 0 !important;
}

/* Estilos para citações */
.webix_hugerte_editor .mce-content-body blockquote {
    border-left: 4px solid #2196F3 !important;
    margin: 10px 0 !important;
    padding: 10px 20px !important;
    background: #f5f5f5 !important;
    font-style: italic !important;
}

/* Estilos para código */
.webix_hugerte_editor .mce-content-body code {
    background: #f5f5f5 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Courier New', monospace !important;
}

.webix_hugerte_editor .mce-content-body pre {
    background: #f5f5f5 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
    font-family: 'Courier New', monospace !important;
}

/* Estilos para títulos */
.webix_hugerte_editor .mce-content-body h1,
.webix_hugerte_editor .mce-content-body h2,
.webix_hugerte_editor .mce-content-body h3,
.webix_hugerte_editor .mce-content-body h4,
.webix_hugerte_editor .mce-content-body h5,
.webix_hugerte_editor .mce-content-body h6 {
    margin: 20px 0 10px 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

.webix_hugerte_editor .mce-content-body h1 { font-size: 24px !important; }
.webix_hugerte_editor .mce-content-body h2 { font-size: 20px !important; }
.webix_hugerte_editor .mce-content-body h3 { font-size: 18px !important; }
.webix_hugerte_editor .mce-content-body h4 { font-size: 16px !important; }
.webix_hugerte_editor .mce-content-body h5 { font-size: 14px !important; }
.webix_hugerte_editor .mce-content-body h6 { font-size: 12px !important; }

/* Estilos para parágrafos */
.webix_hugerte_editor .mce-content-body p {
    margin: 10px 0 !important;
    line-height: 1.5 !important;
}

/* Estilos para o status bar */
.webix_hugerte_editor .mce-statusbar {
    border-top: 1px solid #ddd !important;
    background: #f5f5f5 !important;
    font-size: 12px !important;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .webix_hugerte_editor .mce-toolbar {
        flex-wrap: wrap !important;
    }
    
    .webix_hugerte_editor .mce-toolbar .mce-btn {
        margin: 1px !important;
    }
}

/* Estilos para modo fullscreen */
.webix_hugerte_editor .mce-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    background: white !important;
}

/* Estilos para diálogos */
.webix_hugerte_editor .mce-window {
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.webix_hugerte_editor .mce-window-head {
    background: #2196F3 !important;
    color: white !important;
    border-radius: 4px 4px 0 0 !important;
}

.webix_hugerte_editor .mce-window-head .mce-title {
    color: white !important;
}

/* Estilos para botões */
.webix_hugerte_editor .mce-primary {
    background: #2196F3 !important;
    color: white !important;
    border: none !important;
}

.webix_hugerte_editor .mce-primary:hover {
    background: #1976D2 !important;
}

/* Estilos para inputs */
.webix_hugerte_editor .mce-textbox {
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    padding: 5px !important;
}

.webix_hugerte_editor .mce-textbox:focus {
    border-color: #2196F3 !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.3) !important;
}

/* Estilos para combos */
.webix_hugerte_editor .mce-combobox {
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
}

.webix_hugerte_editor .mce-combobox:focus {
    border-color: #2196F3 !important;
    outline: none !important;
}

/* Estilos para acessibilidade */
.webix_hugerte_editor .mce-btn:focus {
    outline: 2px solid #2196F3 !important;
    outline-offset: 2px !important;
}

/* Estilos para loading */
.webix_hugerte_editor .mce-loading {
    position: relative !important;
}

.webix_hugerte_editor .mce-loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #2196F3 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}