/* Enhanced RichEditor Styles for Notes */

/* Image Resizing Styles */
.tiptap img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tiptap img:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: scale(1.01);
}

.tiptap img.ProseMirror-selectednode {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

/* Image resize handles */
.tiptap .image-resizer {
    position: relative;
    display: inline-block;
}

.tiptap .image-resizer img {
    display: block;
}

.tiptap .image-resizer .resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.2s;
}

.tiptap .image-resizer:hover .resize-handle,
.tiptap .image-resizer.resizing .resize-handle {
    opacity: 1;
}

.tiptap .image-resizer .resize-handle.nw {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.tiptap .image-resizer .resize-handle.ne {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.tiptap .image-resizer .resize-handle.sw {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.tiptap .image-resizer .resize-handle.se {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

/* Color picker enhancements */
.tiptap mark {
    padding: 2px 4px;
    border-radius: 3px;
}

.tiptap span[style*="color"] {
    padding: 0 2px;
}

/* Better color visibility in editor - Fixed for Better Layout */
.tiptap {
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
}

/* Colorful text examples - predefined color classes */
.text-red {
    color: #ef4444 !important;
}

.text-blue {
    color: #3b82f6 !important;
}

.text-green {
    color: #10b981 !important;
}

.text-yellow {
    color: #f59e0b !important;
}

.text-purple {
    color: #8b5cf6 !important;
}

.text-pink {
    color: #ec4899 !important;
}

.text-orange {
    color: #f97316 !important;
}

.text-teal {
    color: #14b8a6 !important;
}

.bg-red {
    background-color: #fef2f2 !important;
}

.bg-blue {
    background-color: #eff6ff !important;
}

.bg-green {
    background-color: #f0fdf4 !important;
}

.bg-yellow {
    background-color: #fefce8 !important;
}

.bg-purple {
    background-color: #faf5ff !important;
}

.bg-pink {
    background-color: #fdf2f8 !important;
}

.bg-orange {
    background-color: #fff7ed !important;
}

.bg-teal {
    background-color: #f0fdfa !important;
}

/* Image size presets */
.img-small {
    max-width: 200px !important;
}

.img-medium {
    max-width: 400px !important;
}

.img-large {
    max-width: 600px !important;
}

.img-full {
    max-width: 100% !important;
}

/* Image alignment */
.img-left {
    float: left;
    margin: 0 16px 16px 0;
}

.img-right {
    float: right;
    margin: 0 0 16px 16px;
}

.img-center {
    display: block;
    margin: 16px auto;
}
/* List Styles */
.tiptap ul {
    list-style-type: disc !important;
    padding-left: 1.5em !important;
    margin: 1em 0 !important;
}

.tiptap ol {
    list-style-type: decimal !important;
    padding-left: 1.5em !important;
    margin: 1em 0 !important;
}

.tiptap li {
    margin-bottom: 0.5em !important;
}

/* Code Block Styles */
.tiptap pre {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    margin: 1em 0 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.tiptap code {
    background-color: rgba(97, 97, 97, 0.1);
    color: #d63384;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.tiptap pre code {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}