/* Quill Editor Overrides */

/* Reduce spacing between toolbar icon groups */
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px; /* Reduced from default */
}

.ql-toolbar.ql-snow .ql-formats:last-child {
    margin-right: 0;
}

/* Default (light mode) styles to match dark canvas theme */
.card.expanded .ql-toolbar {
    background: #ffffff !important;  /* Match card background */
    border-color: #ffffff !important;
}

.card.expanded .ql-toolbar button {
    color: #2D2D2D !important;
    box-shadow: none;
    padding: 1px;
}

.card.expanded .ql-toolbar button:hover {
    color: #000000 !important;
}

.card.expanded .ql-toolbar button.ql-active,
.card.expanded .ql-toolbar .ql-picker-label.ql-active,
.card.expanded .ql-toolbar .ql-picker-item.ql-selected {
    color: #5353ff !important;  /* Use theme blue */
}

.card.expanded .ql-toolbar .ql-stroke {
    stroke: #2D2D2D !important;
}

.card.expanded .ql-toolbar .ql-fill {
    fill: #2D2D2D !important;
}

.card.expanded .ql-toolbar .ql-picker {
    color: #2D2D2D !important;
}

.card.expanded .ql-editor {
    background: #ffffff !important;  /* Match category background */
    color: #2D2D2D !important;  /* Dark text color */
    caret-color: #2D2D2D;
}

.card.expanded .ql-container {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

/* Section editor styles */
.card-section .ql-toolbar {
    background: #191919 !important;
    border-color: #2a2a2a !important;
}

.card-section .ql-editor {
    background: #131313 !important;
    color: #f0f0f0 !important;
}

.card-section .ql-container {
    background: #131313 !important;
    border-color: #2a2a2a !important;
}

/* Dark mode button styling */
.ql-dark-mode {
    width: auto !important;
}

.ql-dark-mode svg {
    vertical-align: middle;
}

.ql-dark-mode.active svg {
    fill: currentColor;
}

/* Actual dark mode styles (even darker theme) */
.ql-toolbar.dark-mode {
    background: #2d2d2d !important;
    border-color: #444 !important;
}

.ql-toolbar.dark-mode button {
    color: #e0e0e0 !important;
}

.ql-toolbar.dark-mode button:hover {
    color: white !important;
}

.ql-toolbar.dark-mode button.ql-active,
.ql-toolbar.dark-mode .ql-picker-label.ql-active,
.ql-toolbar.dark-mode .ql-picker-item.ql-selected {
    color: #4a9eff !important;
}

.ql-toolbar.dark-mode .ql-stroke {
    stroke: #e0e0e0 !important;
}

.ql-toolbar.dark-mode .ql-fill {
    fill: #e0e0e0 !important;
}

.ql-toolbar.dark-mode .ql-picker {
    color: #e0e0e0 !important;
}

.ql-editor.dark-mode {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

.ql-editor.dark-mode::before {
    color: #999 !important;
}

.ql-container.ql-snow.dark-mode {
    border-color: #444 !important;
}

.editor-container.dark-mode {
    background: #1e1e1e !important;
}

/* Expanded card dark mode styles */
.card.expanded.dark-mode {
    background: #1a1a1a !important;
}

.expanded-card-content.dark-mode {
    background: #1a1a1a !important;
}

.expanded-card-header.dark-mode {
    background: #1a1a1a !important;
}

.expanded-card-main.dark-mode {
    background: #1a1a1a !important;
}

.expanded-card-header.dark-mode .card-title {
    color: #e0e0e0 !important;
}

/* Dark mode for sections */
.dark-mode .editor-section {
    background: #1a1a1a !important;
}

.dark-mode .bookmarks-section {
    background: #1a1a1a !important;
}

/* Dark mode for bookmark cards */
.dark-mode .bookmark-card {
    background: #2d2d2d !important;
    border-radius: 20px !important;
    color: #e0e0e0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.dark-mode .bookmark-title {
    color: #e0e0e0 !important;
}

.dark-mode .bookmark-description {
    color: #b0b0b0 !important;
}

.dark-mode .bookmark-url {
    color: #4a9eff !important;
}

.dark-mode .bookmark-date {
    color: #999 !important;
}

/* Rounded borders for Quill editor */
.ql-container {
    border: none !important;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.ql-toolbar.ql-snow {
    border: none !important;
    border-radius: 8px 8px 0 0;
    background: white;
}

/* Remove snow theme borders */
.ql-container.ql-snow {
    border: none !important;
}

/* Full rounded container when no toolbar */
.ql-container:first-child {
    border-radius: 8px;
}

/* Expanded card specific styling */
.card.expanded .ql-editor {
    min-height: 400px;
    padding: 5px 10px 10px 10px;
    font-size: 16px;
    line-height: 1.8;
    outline: none;
    margin-top: 2px; /* Changed from -11px to 2px to move editor 13px lower */
}

/* Remove focus outline */
.ql-editor:focus {
    outline: none;
}

/* Ensure placeholder is visible */
.ql-editor.ql-blank::before {
    color: #2D2D2D;
    opacity: 0.5;
    content: attr(data-placeholder);
    font-style: italic;
    position: absolute;
    pointer-events: none;
}

/* Remove double borders */
.ql-snow.ql-toolbar + .ql-container.ql-snow {
    border-top: 0;
}

/* Scrollbar styling */
.ql-editor {
    overflow-y: auto;
}

.ql-editor::-webkit-scrollbar {
    width: 8px;
}

.ql-editor::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.ql-editor::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Quill placeholder behavior */
.ql-editor.ql-blank::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 10px;
    top: 8px; /* Changed from -5px to 8px to match the 13px editor shift */
    color: #2D2D2D;
    opacity: 0.5;
    pointer-events: none;
    font-style: normal;
}

.ql-editor:focus.ql-blank::before {
    display: none;
}