/* =========================================================
   Container principal do Editor
   ========================================================= */

.text-editor-container {
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  padding: 16px;
  box-sizing: border-box;
}

/* =========================================================
   Toolbar do Quill (VERSÃO NOVA)
   ========================================================= */

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  margin-bottom: 0;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #f9fafb;
  box-sizing: border-box;
}

/* Grupos de botões */
.editor-toolbar .ql-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Separadores visuais */
.editor-toolbar .ql-separator {
  width: 1px;
  background: #e0e0e0;
  margin: 0 4px;
}

/* Botões customizados (A+/A-, HR, etc) */
.editor-toolbar .toolbar-btn {
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

/* Botões padrão do Quill */
.editor-toolbar button {
  border-radius: 6px;
}

/* Selects (header, cores, fundo) */
.editor-toolbar select {
  height: 34px;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Ajuste fino do picker de header */
.ql-toolbar .ql-picker.ql-header {
  height: 34px;
}
.ql-toolbar .ql-picker.ql-header .ql-picker-label {
  line-height: 34px;
}

/* =========================================================
   Editor Quill
   ========================================================= */

.ql-toolbar {
  border-radius: 10px 10px 0 0;
}

#editor {
  min-height: 400px;
  background: #ffffff;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
}

#editor { margin-top: 0; }

/* =========================================================
   Estilos de Conteúdo
   ========================================================= */

/* Código */
.ql-editor pre {
  background: #1e1e1e;
  color: #f1f1f1;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9rem;
}

/* Blockquote */
.ql-editor blockquote {
  position: relative;
  border-left: 5px solid #0077b6;
  padding: 10px 14px 10px 44px;
  margin: 14px 0;
  background: rgba(0,119,182,0.03);
  color: #444;
  font-style: italic;
}

.ql-editor blockquote::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: 6px;
  font-size: 28px;
  color: rgba(0,0,0,0.08);
  line-height: 1;
}

/* Linha horizontal */
.ql-editor hr {
  border: none;
  border-top: 2px dashed #ccc;
  margin: 20px 0;
}

/* Vídeo YouTube (Quill preview) */
.ql-editor iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 0;
}

/* Cabeçalhos */
.ql-editor h1 { font-size: 2em; }
.ql-editor h2 { font-size: 1.7em; }
.ql-editor h3 { font-size: 1.4em; }

/* Imagens */
.ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* =========================================================
   Responsividade
   ========================================================= */

@media (max-width: 768px) {
  .editor-toolbar {
    gap: 4px;
  }

  .editor-toolbar .ql-separator {
    display: none;
  }
}

/* Toolbar buttons: white background with subtle gray shadow; hover slightly darker */
.editor-toolbar button,
.editor-toolbar .file-upload,
.editor-toolbar .btn-secondary,
.toolbar-btn {
  background: #ffffff;
  color: #6b6b6b; /* label gray */
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.editor-toolbar button:hover,
.editor-toolbar .file-upload:hover,
.editor-toolbar .btn-secondary:hover,
.toolbar-btn:hover {
  background: #ececec; /* slightly darker gray on hover */
}

/* Ensure the file input is hidden and clicking the label acts like a button */
.file-upload input { display: none !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; position: absolute; }
.file-upload { position: relative; }

/* Make smaller controls (A+/A-, indent arrows) match style but slightly smaller */
.editor-toolbar .toolbar-btn { padding: 6px 10px; border-radius: 6px; font-weight: 600; }

/* Ensure export secondary button uses same blue */
.btn-secondary { background: transparent; color: #6b6b6b; }

/* Accessibility focus */
.editor-toolbar button:focus,
.editor-toolbar .file-upload:focus,
.editor-toolbar .btn-secondary:focus,
.toolbar-btn:focus { outline: 3px solid rgba(0,0,0,0.08); }

/* small note next to Export button */
.editor-toolbar .export-note {
  font-size: 12px;
  color: #6b6b6b;
  margin-left: 8px;
}

/* Default editor font: system sans-serif (Google Fonts disabled) */
.ql-editor {
  font-family: Arial, Helvetica, sans-serif;
}

/* Font classes used by Quill (system fonts only) */
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-helvetica { font-family: Helvetica, Arial, sans-serif; }
.ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif; }
.ql-font-georgia { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-courier-new { font-family: 'Courier New', Courier, monospace; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
.ql-font-trebuchet-ms { font-family: 'Trebuchet MS', Helvetica, sans-serif; }
.ql-font-lucida-console { font-family: 'Lucida Console', Monaco, monospace; }
.ql-font-monaco { font-family: Monaco, 'Courier New', monospace; }