/* Custom styles for enhanced Quill editor */

/* Font families */
.ql-font-arial {
  font-family: Arial, sans-serif;
}
.ql-font-courier {
  font-family: "Courier New", Courier, monospace;
}
.ql-font-garamond {
  font-family: Garamond, serif;
}
.ql-font-georgia {
  font-family: Georgia, serif;
}
.ql-font-tahoma {
  font-family: Tahoma, Geneva, sans-serif;
}
.ql-font-times-new-roman {
  font-family: "Times New Roman", Times, serif;
}
.ql-font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}
.ql-font-roboto {
  font-family: "Roboto", sans-serif;
}

/* Text alignment */
.ql-align-center {
  text-align: center;
}
.ql-align-right {
  text-align: right;
}
.ql-align-justify {
  text-align: justify;
}

/* Image styling */
.ql-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

/* Code block enhancement */
.ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
  border-radius: var(--border-radius-md);
  padding: 15px;
  font-family: "Courier New", Courier, monospace;
  margin: 15px 0;
}

/* Blockquote styling */
.ql-editor blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 16px;
  margin: 15px 0;
  color: #555;
}

/* Better list styling */
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}

.ql-editor li {
  margin-bottom: 0.5em;
}

.ql-editor li > .ql-ui {
  display: inline-block;
}

/* Mobile responsiveness for toolbar */
@media (max-width: 480px) {
  .ql-snow .ql-toolbar {
    flex-wrap: wrap;
    padding: 4px;
  }

  .ql-toolbar button {
    margin: 1px;
  }
}

/* Extra small screens like iPhone 4 */
@media (max-width: 320px) {
  .ql-snow .ql-toolbar {
    padding: 2px;
  }

  .ql-toolbar button {
    transform: scale(0.9);
    margin: 0;
  }

  .ql-formats {
    margin-right: 4px !important;
  }
}

/* Editor tools styling - add to styles.css */
.editor-tools {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.theme-button {
  background-color: var(
    --primary-color
  ); /* Changed from var(--primary-light) */
  flex: 1;
}

#create-note-btn {
  flex: 2;
}

@media (max-width: 480px) {
  .editor-tools {
    flex-direction: column;
  }

  .theme-button,
  #create-note-btn {
    width: 100%;
  }
}

/* Bubble theme enhancements */
.ql-bubble .ql-editor {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  min-height: 250px;
  background-color: var(--card-background);
  box-shadow: var(--shadow-sm);
}

/* Add special handling for embedded content */
.ql-editor iframe,
.ql-editor video {
  max-width: 100%;
  border: none;
  border-radius: var(--border-radius-sm);
  margin: var(--spacing-sm) 0;
}

/* Custom tooltip for image clicks */
.image-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
}