/* D:\_Codes\tashkilan\static\css\etc\quill-rtl.css */
/* ═══════════════════════════════════════════════════
   Quill Editor - Modern Redesign (RTL)
   ═══════════════════════════════════════════════════ */

/* ── Container اصلی ── */
.ql-container {
    border: none !important;
    border-radius: 0 0 16px 16px !important;
    min-height: 160px;
    background-color: #ffffff;
    font-family: inherit;
    box-shadow: 
        0 4px 16px rgba(99, 102, 241, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── محتوای ادیتور ── */
.ql-editor {
    direction: rtl;
    text-align: right;
    font-family: inherit;
    padding: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #374151;
    min-height: 160px;
}

.ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: normal;
    right: 16px;
    left: auto;
}

/* ── تولبار ── */
.ql-toolbar {
    border: none !important;
    border-radius: 16px 16px 0 0 !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    padding: 10px 12px !important;
    box-shadow: 
        0 2px 8px rgba(99, 102, 241, 0.15);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ── گروه‌های تولبار ── */
.ql-toolbar .ql-formats {
    margin: 0 !important;
    padding: 0 6px;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.ql-toolbar .ql-formats:first-child {
    padding-right: 0;
}

.ql-toolbar .ql-formats:last-child {
    border-left: none;
    padding-left: 0;
}

/* ── دکمه‌های تولبار ── */
.ql-toolbar button,
.ql-toolbar .ql-picker-label {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-picker-label:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
    transform: scale(1.08);
}

.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label.ql-active {
    background-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ── آیکون‌های تولبار (سفید) ── */
.ql-toolbar button svg,
.ql-toolbar .ql-picker-label svg {
    width: 16px;
    height: 16px;
}

.ql-toolbar button .ql-stroke,
.ql-toolbar .ql-picker-label .ql-stroke {
    stroke: #ffffff !important;
    stroke-width: 2;
}

.ql-toolbar button .ql-fill,
.ql-toolbar .ql-picker-label .ql-fill {
    fill: #ffffff !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: #ffffff !important;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar .ql-picker-label:hover .ql-fill {
    fill: #ffffff !important;
}

/* ── Picker ها (فونت، سایز، رنگ) ── */
.ql-toolbar .ql-picker {
    color: #ffffff !important;
    width: auto !important;
}

.ql-toolbar .ql-picker-label {
    width: auto !important;
    padding: 0 8px !important;
    min-width: 30px;
}

.ql-toolbar .ql-picker-label::before {
    color: #ffffff !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.ql-toolbar .ql-picker-options {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 
        0 8px 24px rgba(99, 102, 241, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.ql-toolbar .ql-picker-options .ql-picker-item {
    color: #374151 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    transition: background-color 0.15s;
}

.ql-toolbar .ql-picker-options .ql-picker-item:hover {
    background-color: #ede9fe !important;
    color: #6366f1 !important;
}

.ql-toolbar .ql-picker-options .ql-picker-item.ql-selected {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* ── اسکرول‌بار Picker ── */
.ql-toolbar .ql-picker-options::-webkit-scrollbar {
    width: 4px;
}

.ql-toolbar .ql-picker-options::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 4px;
}

/* ── Color Picker ── */
.ql-toolbar .ql-color-picker .ql-picker-options {
    width: 160px !important;
    padding: 8px !important;
}

.ql-toolbar .ql-color-picker .ql-picker-item {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    margin: 2px !important;
}

.ql-toolbar .ql-color-picker .ql-picker-item:hover {
    border-color: #6366f1 !important;
    transform: scale(1.15);
}

/* ══════════════════════════════════════════════════
   ریسپانسیو (موبایل)
   ══════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* تولبار در موبایل */
    .ql-toolbar {
        padding: 8px !important;
        gap: 3px;
        border-radius: 12px 12px 0 0 !important;
    }

    /* دکمه‌ها کوچک‌تر */
    .ql-toolbar button,
    .ql-toolbar .ql-picker-label {
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
    }

    /* گروه‌ها فشرده‌تر */
    .ql-toolbar .ql-formats {
        padding: 0 4px;
        gap: 2px;
    }

    /* آیکون‌ها کوچک‌تر */
    .ql-toolbar button svg,
    .ql-toolbar .ql-picker-label svg {
        width: 14px;
        height: 14px;
    }

    /* Picker ها */
    .ql-toolbar .ql-picker-label {
        padding: 0 6px !important;
        font-size: 0.75rem;
    }

    /* ادیتور */
    .ql-editor {
        padding: 12px;
        font-size: 0.9rem;
        min-height: 140px;
    }

    .ql-container {
        border-radius: 0 0 12px 12px !important;
        min-height: 140px;
    }
}

@media (max-width: 480px) {
    /* موبایل خیلی کوچک */
    .ql-toolbar button,
    .ql-toolbar .ql-picker-label {
        width: 26px !important;
        height: 26px !important;
    }

    .ql-toolbar .ql-formats {
        padding: 0 3px;
        gap: 1px;
    }

    .ql-toolbar {
        padding: 6px !important;
        gap: 2px;
    }
}

/* ══════════════════════════════════════════════════
   حالت Focus
   ══════════════════════════════════════════════════ */

.ql-container.ql-snow:focus-within {
    box-shadow: 
        0 0 0 3px rgba(99, 102, 241, 0.15),
        0 4px 16px rgba(99, 102, 241, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── حذف border پیش‌فرض ── */
.ql-snow {
    border: none !important;
}

/* ── Tooltip ها ── */
.ql-tooltip {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 
        0 8px 24px rgba(99, 102, 241, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 12px !important;
    color: #374151 !important;
    font-size: 0.85rem;
}

.ql-tooltip input {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.85rem;
    color: #374151;
}

.ql-tooltip input:focus {
    border-color: #6366f1 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ql-tooltip .ql-action,
.ql-tooltip .ql-remove {
    color: #6366f1 !important;
    font-weight: 600;
}

.ql-tooltip .ql-action:hover,
.ql-tooltip .ql-remove:hover {
    color: #4f46e5 !important;
}

.ql-container {
    overflow: visible;
}

.ql-toolbar {
    position: relative;
    z-index: 1;
}
.ql-toolbar,
.ql-container {
    width: 100% !important;
    max-width: 100% !important;
}
.ql-toolbar {
    box-sizing: border-box;
}

.ql-container {
    box-sizing: border-box;
}
.quill-wrapper {
    width: 100%;
}

.quill-wrapper .ql-toolbar,
.quill-wrapper .ql-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ql-container {
    height: auto;
}

.ql-editor {
    min-height: 160px;
}
/* wrapper برای جلوگیری از overflow */
.quill-wrapper {
    width: 100%;
}

/* container اصلی */
.quill-wrapper .ql-container {
    border: none;
    border-radius: 0 0 14px 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
}

/* editor */
.quill-wrapper .ql-editor {
    direction: rtl;
    text-align: right;
    min-height: 160px;
    font-size: .95rem;
    line-height: 1.8;
    padding: 16px;
}

/* toolbar */
.quill-wrapper .ql-toolbar {
    border: none;
    border-radius: 14px 14px 0 0;
}

/* جلوگیری از overflow */
.quill-wrapper .ql-toolbar,
.quill-wrapper .ql-container {
    width: 100%;
    box-sizing: border-box;
}

/* auto grow */
.quill-wrapper .ql-editor {
    overflow-y: hidden;
}

/* placeholder RTL */
.ql-editor.ql-blank::before {
    right: 16px;
    left: auto;
    color: #9ca3af;
    font-style: normal;
}

/* موبایل */
@media (max-width:640px){

    .quill-wrapper .ql-editor{
        min-height:120px;
        padding:12px;
        font-size:.9rem;
    }

}