/*
 * CKEditor 5 - Content styles (shared)
 * استایل مشترک محتوای تولیدشده توسط CKEditor برای نمایش یکسان در ادیتور و همه قالب‌ها
 * این فایل روی هر عنصری با کلاس .ck-content اعمال می‌شود (هم داخل ادیتور و هم در فرانت‌اند)
 * کاملاً آفلاین، سازگار با RTL/LTR و فارسی/انگلیسی
 */

.ck-content {
    /* رنگ بولت‌ها و لهجه‌ها؛ قابل بازنویسی توسط هر قالب */
    --ck-accent: #e12528;
    --ck-accent-soft: rgba(225, 37, 40, 0.12);
    --ck-border: #e5e7eb;
    --ck-muted: #6b7280;
    line-height: 2;
    word-break: break-word;
}

/* جهت‌دهی خودکار برای متن فارسی/انگلیسی */
.ck-content[dir="rtl"],
.ck-content:not([dir]) {
    text-align: start;
}

/* ---------- سرفصل‌ها ---------- */
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
    font-weight: 800;
    line-height: 1.6;
    margin: 1.2em 0 0.6em;
}
.ck-content h2 { font-size: 1.6em; }
.ck-content h3 { font-size: 1.35em; }
.ck-content h4 { font-size: 1.15em; }

.ck-content p { margin: 0 0 1em; }

/* ---------- لینک ---------- */
.ck-content a {
    color: var(--ck-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--ck-accent-soft);
    transition: opacity .2s ease;
}
.ck-content a:hover { opacity: .8; }

/* ---------- لیست‌ها با بولت رنگی و حرفه‌ای ---------- */
.ck-content ul,
.ck-content ol {
    margin: 0 0 1em;
    padding-inline-start: 1.8em;
}
.ck-content li { margin: 0.35em 0; }

/* بولت رنگی برای لیست نامرتب */
.ck-content ul { list-style: none; padding-inline-start: 1.6em; }
.ck-content ul > li {
    position: relative;
    padding-inline-start: 0.2em;
}
.ck-content ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.1em;
    top: 0.85em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--ck-accent);
    box-shadow: 0 0 0 3px var(--ck-accent-soft);
}
/* بولت سطح دوم: توخالی */
.ck-content ul ul > li::before {
    background: transparent;
    border: 2px solid var(--ck-accent);
    box-shadow: none;
}
/* اگر کاربر list-style-type دستی انتخاب کرد، به مرورگر واگذار شود */
.ck-content ul[style*="list-style-type"] { list-style: revert; padding-inline-start: 1.8em; }
.ck-content ul[style*="list-style-type"] > li { padding-inline-start: 0; }
.ck-content ul[style*="list-style-type"] > li::before { content: none; }

/* لیست مرتب با شماره رنگی */
.ck-content ol { list-style: none; counter-reset: ck-ol; padding-inline-start: 2em; }
.ck-content ol > li {
    position: relative;
    counter-increment: ck-ol;
    padding-inline-start: 0.2em;
}
.ck-content ol > li::before {
    content: counter(ck-ol);
    position: absolute;
    inset-inline-start: -1.9em;
    top: 0.15em;
    min-width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    text-align: center;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--ck-accent);
    background: var(--ck-accent-soft);
    border-radius: 50%;
}
.ck-content ol[style*="list-style-type"] { list-style: revert; counter-reset: none; }
.ck-content ol[style*="list-style-type"] > li { counter-increment: none; padding-inline-start: 0; }
.ck-content ol[style*="list-style-type"] > li::before { content: none; }

/* ---------- چک‌لیست / تیک (To-do list) ---------- */
.ck-content ul.todo-list {
    list-style: none;
    padding-inline-start: 0;
}
.ck-content ul.todo-list > li { padding-inline-start: 0; margin: 0.4em 0; }
.ck-content ul.todo-list > li::before { content: none; }
.ck-content .todo-list__label {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}
.ck-content .todo-list__label > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.35em;
    border: 2px solid var(--ck-accent);
    border-radius: 0.3em;
    flex: 0 0 auto;
    position: relative;
    cursor: default;
    background: #fff;
}
.ck-content .todo-list__label > input[type="checkbox"]:checked {
    background: var(--ck-accent);
}
.ck-content .todo-list__label > input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.32em;
    top: 0.05em;
    width: 0.3em;
    height: 0.6em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ck-content .todo-list__label .todo-list__label__description { line-height: 1.9; }
.ck-content ul.todo-list li.todo-list__label--checked .todo-list__label__description {
    color: var(--ck-muted);
    text-decoration: line-through;
}

/* ---------- جدول ---------- */
.ck-content .table,
.ck-content figure.table {
    margin: 1.2em 0;
    overflow-x: auto;
    display: block;
    max-width: 100%;
}
.ck-content table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--ck-border);
    font-size: 0.95em;
}
.ck-content table td,
.ck-content table th {
    border: 1px solid var(--ck-border);
    padding: 0.6em 0.8em;
    text-align: start;
    vertical-align: top;
}
.ck-content table th {
    background: var(--ck-accent-soft);
    font-weight: 700;
}
.ck-content table tr:nth-child(even) td { background: #fafafa; }
.ck-content figure.table > figcaption {
    caption-side: bottom;
    text-align: center;
    color: var(--ck-muted);
    font-size: 0.85em;
    padding: 0.4em;
}

/* ---------- تصویر ---------- */
.ck-content figure.image {
    margin: 1.2em auto;
    max-width: 100%;
}
.ck-content figure.image img,
.ck-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.ck-content figure.image > figcaption {
    text-align: center;
    color: var(--ck-muted);
    font-size: 0.85em;
    padding: 0.5em 0;
}
.ck-content .image-style-align-left { float: left; margin-inline-end: 1em; max-width: 50%; }
.ck-content .image-style-align-right { float: right; margin-inline-start: 1em; max-width: 50%; }
.ck-content .image-style-align-center { margin-inline: auto; }
.ck-content .image-style-block-align-left { margin-inline-end: auto; }
.ck-content .image-style-block-align-right { margin-inline-start: auto; }

/* ---------- نقل‌قول ---------- */
.ck-content blockquote {
    margin: 1.2em 0;
    padding: 0.6em 1.2em;
    border-inline-start: 4px solid var(--ck-accent);
    background: var(--ck-accent-soft);
    border-radius: 0 8px 8px 0;
    color: #374151;
}

/* ---------- کد ---------- */
.ck-content code {
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 5px;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: embed;
}
.ck-content pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 1em 1.2em;
    border-radius: 10px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.ck-content pre code { background: transparent; color: inherit; padding: 0; }

/* ---------- خط افقی و هایلایت ---------- */
.ck-content hr {
    border: none;
    border-top: 2px dashed var(--ck-border);
    margin: 1.6em 0;
}
.ck-content mark { padding: 0.05em 0.15em; border-radius: 3px; }

/* ---------- موبایل ---------- */
@media (max-width: 576px) {
    .ck-content { line-height: 1.9; }
    .ck-content table { font-size: 0.85em; }
    .ck-content .image-style-align-left,
    .ck-content .image-style-align-right { float: none; max-width: 100%; margin-inline: auto; }
}

/* ---------- حالت «کد HTML خام» ادیتور (فقط در فرم‌های مدیریت) ---------- */
.ckeditor-field { position: relative; }
.ck-raw-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 8px;
}
.ck-raw-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ck-raw-toggle:hover { background: #e2e8f0; }
.ck-raw-toggle .ck-raw-toggle-icon {
    font-family: monospace;
    font-weight: 700;
    color: #6366f1;
}
.ck-raw-toggle.active {
    color: #fff;
    background: #4f46e5;
    border-color: #4338ca;
}
.ck-raw-toggle.active .ck-raw-toggle-icon { color: #c7d2fe; }
.ck-raw-hint { font-size: 12px; color: #64748b; }

textarea.ck-raw-active {
    display: block;
    width: 100%;
    direction: ltr;
    text-align: left;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    tab-size: 2;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 14px;
}
textarea.ck-raw-active:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

@media (max-width: 576px) {
    .ck-raw-hint { display: none; }
}