/* ═══════════════════════════════════════════════════════════════════════════
   editor.css — Quill Rich Text Editor page styles
   All Quill Snow theme rules come from the CDN link in _Layout.cshtml.
   This file covers layout, custom toolbar elements, and status bar only.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Document title input ──────────────────────────────────────────────── */
#docTitle {
    font-size: 1.45rem;
    background: transparent;
}

#docTitle:focus {
    background: transparent;
    box-shadow: none;
    border-color: #0d6efd !important;
}

/* ── Editor card ────────────────────────────────────────────────────────── */
.qe-card {
    border-radius: 0.5rem;
    overflow: hidden; /* clip toolbar and editor inside rounded card */
}

/* ── Quill toolbar overrides ────────────────────────────────────────────── */
#quillToolbar {
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 6px 8px;
    /* allow toolbar to wrap on narrow screens */
    flex-wrap: wrap;
}

.ql-toolbar.ql-snow {
    border: solid 0.5px;
    background-color: #eee;
    padding: 6px 8px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
}

/* Custom undo / redo buttons match Quill toolbar button sizing */
.qe-undo-redo {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    font-size: 1.05rem;
    line-height: 1;
    color: #444;
    border-radius: 3px;
    transition: background 0.15s;
}

.qe-undo-redo:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

.qe-undo-redo:active {
    background-color: rgba(0, 0, 0, 0.13);
}

/* ── Quill editor container ─────────────────────────────────────────────── */
.ql-container.ql-snow {
    border: none;
    font-family: inherit;
}

#quillEditor .ql-editor {
    min-height: 320px;
    max-height: 50vh;
    overflow-y: auto;
    font-size: initial;
    line-height: 1.7;
    color: #212529;
    background-color: white;
}

/* Comfortable placeholder text */
#quillEditor .ql-editor.ql-blank::before {
    color: #adb5bd;
    font-style: italic;
    left: 28px;
}

/* Blockquote styling inside the editor */
#quillEditor .ql-editor blockquote {
    border-left: 4px solid #0d6efd;
    padding-left: 1rem;
    color: #6c757d;
    margin: 0.75rem 0;
}

/* Code block */
#quillEditor .ql-editor pre.ql-syntax {
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Read-only: softer background so users know they can't type */
.ql-container.ql-snow[readonly] .ql-editor,
.ql-editor[contenteditable="false"] {
    background-color: #f8f9fa;
    cursor: default;
}

/* ── Loading overlay ────────────────────────────────────────────────────── */
.qe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Status bar ─────────────────────────────────────────────────────────── */
.card-footer {
    font-size: 0.82rem;
}

/* ── Load document modal table ──────────────────────────────────────────── */
#docListContainer .table tbody tr:hover {
    background-color: #e8f0fe;
}

/* ── Responsive: collapse toolbar on very small screens ─────────────────── */
@media (max-width: 576px) {
    #quillEditor .ql-editor {
        padding: 14px 14px;
        min-height: 300px;
    }

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 4px;
        margin-bottom: 4px;
    }
}

.ql-font-arial {
    font-family: Arial, sans-serif;
}

.ql-font-calibri {
    font-family: Calibri, sans-serif;
}

.ql-font-courier-new {
    font-family: "Courier New", monospace;
}

.ql-font-georgia {
    font-family: Georgia, serif;
}

.ql-font-helvetica {
    font-family: Helvetica, Arial, sans-serif;
}

.ql-font-times-new-roman {
    font-family: "Times New Roman", serif;
}

.ql-font-trebuchet-ms {
    font-family: "Trebuchet MS", sans-serif;
}

.ql-font-verdana {
    font-family: Verdana, sans-serif;
}
.ql-toolbar .ql-undo,
.ql-toolbar .ql-redo {
    width: 28px;
}

    .ql-toolbar .ql-undo svg,
    .ql-toolbar .ql-redo svg {
        width: 18px;
        height: 18px;
    }

/* custom fonts desing */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before {
    content: "Arial";
    font-family: Arial;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="calibri"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="calibri"]::before {
    content: "Calibri";
    font-family: Calibri;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before {
    content: "Courier New";
    font-family: "Courier New";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before {
    content: "Georgia";
    font-family: "Georgia";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica"]::before {
    content: "Helvetica";
    font-family: "Helvetica";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before {
    content: "Trebuchet Ms";
    font-family: "Trebuchet Ms";
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before {
    content: "Verdana";
    font-family: "Verdana";
}


/* Quill Rich Text Editor - custom styls */
.ql-snow .ql-tooltip {
    z-index: 999;
}