/* ==========================================================================
   جدول‌های محتوای صفحه — یاقوت
   --------------------------------------------------------------------------
   تنها فایل استایل جدول‌ها؛ هم در فرانت و هم در پنل ادمین (Tiptap) لود شود.
   هیچ قاعده‌ی جدولی نباید در custom.css ادمین یا فرانت باقی بماند.

   ظرف‌ها:
     .page-content  → ظرفی که HTML صفحه در فرانت داخلش چاپ می‌شود
     .ProseMirror   → خود ادیتور Tiptap در پنل ادمین

   سه نوع جدول:
     ۱) همه‌ی جدول‌ها       → ظاهر مشترک (رنگ، حاشیه، سرستون، راه‌راه، تصویر پس‌زمینه)
     ۲) جدولی که ادمین ستون‌هایش را با درگ تغییر اندازه داده (سلول‌ها colwidth دارند)
          → همان عرضی که ادمین داده، هم در ادیتور و هم در فرانت
     ۳) بقیه‌ی جدول‌ها در فرانت (قدیمی ویکی، Word، و جدول Tiptapی که resize نشده)
          → به اندازه‌ی محتوا، وسط صفحه؛ عرض‌های درون‌خطی خنثی
          (پاک‌سازی رنگ و فونت درون‌خطی فقط برای جدول‌های غیر Tiptap: بدون کلاس .yt-table)

   جدول‌های DataTables (class="dataTable" یا id="data-table") مستثنا هستند.
   ========================================================================== */


/* ==========================================================================
   ۱) ظاهر مشترک همه‌ی جدول‌ها
   ========================================================================== */

:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) {
    --yt-tbl-border: #ecdde2;
    --yt-tbl-head-bg: #bc2050;                     /* سرستون: رنگ primary */
    --yt-tbl-head-color: #fff;
    --yt-tbl-head-border: rgba(255, 255, 255, 0.22);
    --yt-tbl-caption-bg: #f9edf1;                  /* عنوان جدول: روشن، تا از سرستون جدا دیده شود */
    --yt-tbl-caption-color: rgba(188, 32, 80, 0.9);
    --yt-tbl-stripe: rgba(136, 15, 53, 0.035);   /* نیمه‌شفاف تا تصویر پس‌زمینه دیده شود */
    --yt-tbl-hover: rgba(136, 15, 53, 0.07);
    /* تصویر پس‌زمینه‌ی جدول‌های قدیمی ویکی؛ برای حذف: none */
    --yt-tbl-bg-image: url("https://dl.yaghut.ir/media/mediawiki/2/2f/18c06d17-4010-4e9a-9cca-16667db867d1.png");
    --yt-tbl-bg-size: 240px;   /* ← اندازه‌ی هر خانه‌ی پترن؛ کوچک‌تر = ریزتر */

    display: table !important;
    height: auto !important;
    float: none !important;
    clear: both;
    margin: 1.5em 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--yt-tbl-border) !important;
    border-radius: 12px !important;
    overflow: hidden;

    background-color: #fff !important;
    background-image: var(--yt-tbl-bg-image) !important;
    background-size: var(--yt-tbl-bg-size) auto !important;
    background-repeat: repeat !important;
    background-position: top right !important;
    color: inherit !important;
    font-size: 0.95em;
    line-height: 1.8;
}

:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, td) {
    padding: 0.6em 0.9em !important;
    border: 0 !important;
    border-bottom: 1px solid var(--yt-tbl-border) !important;
    border-inline-start: 1px solid var(--yt-tbl-border) !important;
    border-radius: 0 !important;
    text-align: start !important;
    vertical-align: middle !important;
    /* break-word (نه anywhere): کلمه فقط وقتی شکسته می‌شود که از کل سلول بلندتر باشد.
       anywhere حداقل عرض ستون را تا یک حرف پایین می‌آورد و مرورگر ستون‌های کوتاه را
       آن‌قدر باریک می‌کرد که کلمه‌ها حرف‌به‌حرف می‌شکستند. */
    overflow-wrap: break-word;
    word-break: normal;
}

/* پس‌زمینه‌ی سلول‌ها همیشه شفاف؛ رنگ ردیف‌ها (راه‌راه) و تصویر پترن از tr و table می‌آید.
   (CSSهای قدیمی ویکی مثل tableWikiYaghut-striped به سلول‌ها پس‌زمینه‌ی سفید می‌دادند و
   در فرانت ردیف‌های یکی‌درمیان سفید و بدون پترن دیده می‌شدند) */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) td {
    background: transparent !important;
}

/* فونت یکسان جدول در ادمین و فرانت
   (پنل ادمین روی span/a/div فونت iranyekan با !important دارد) */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table),
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, td, th *, td *) {
    font-family: 'iransansxv', tahoma !important;
}

/* فونت یکسان برای کل جدول (سرستون، سلول‌ها و محتوای داخلشان) در ادیتور و فرانت.
   در ادمین قواعد سراسری custom.css (iranyekan روی span/div/…) و در فرانت
   .deysg-black-box هر کدام فونت دیگری روی بخشی از جدول می‌گذاشتند. */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table),
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(caption, th, td),
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(caption, th, td) :not(i, .fa, [class*="fa-"]) {
    font-family: 'iransansxv', 'iransansx', tahoma, sans-serif !important;
}

/* لبه‌ها: آخرین ردیف خط پایین ندارد، اولین ستون خط کناری ندارد */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) tr:last-child > :is(th, td) {
    border-bottom: 0 !important;
}
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) tr > :is(th, td):first-child {
    border-inline-start: 0 !important;
}

/* سرستون: <th> (ردیف/ستون عنوان Tiptap) یا <thead> */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) {
    background: var(--yt-tbl-head-bg) !important;
    color: var(--yt-tbl-head-color) !important;
    border-color: var(--yt-tbl-head-border) !important;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    text-align: center !important;
}
/* وزن متن سرستون صریح و روی همه‌ی فرزندان (p، span، لینک)، چون iransansxv فونت variable است
   و font-variation-settings والدها (ادیتور / فرانت) روی آن‌ها اثر می‌گذاشت */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) * {
    font-weight: 700 !important;
    font-variation-settings: "wght" 700 !important;
}
/* خط زیر ردیف سرستون کمی پررنگ‌تر */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) {
    border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

/* لینک‌ها و ارجاع‌ها (sup) داخل سرستون: سفید، با زیرخط برای تشخیص */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) :is(a, a *, sup, sup *) {
    color: #fff !important;
}
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) a {
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.55) !important;
    text-underline-offset: 3px;
}
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) a:hover {
    text-decoration-color: #fff !important;
}

/* انتخاب متن داخل سرستون خوانا بماند */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, thead td) ::selection {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* ردیف‌های راه‌راه و hover (روی tr، نه سلول) */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) tr {
    background: transparent !important;
}
/* راه‌راه فقط بین ردیف‌های داده شمرده می‌شود (ردیف سرستون حساب نمی‌شود)؛
   اولین ردیف داده رنگی است — در ادمین و فرانت یکسان، چه سرستون داخل tbody باشد چه thead */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) tr:nth-child(odd of tr:has(> td)) {
    background: var(--yt-tbl-stripe) !important;
}
.page-content table:not(.dataTable, #data-table) tbody tr:hover {
    background: var(--yt-tbl-hover) !important;
}

/* پاراگراف داخل سلول: بدون فاصله‌ی اضافه و با وزن/رنگ خود سلول
   (جلوی .deysg-black-box p در فرانت و .ProseMirror p در ادمین را می‌گیرد
   تا جدول در هر دو جا یکسان دیده شود) */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, td) p {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-variation-settings: inherit !important;
}
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) :is(th, td) p + p {
    margin-top: 0.5em !important;
}

/* عنوان جدول (<caption>): همیشه بالای جدول، تمام‌عرض */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) > caption {
    display: table-caption !important;
    caption-side: top !important;
    float: none !important;
    width: auto !important;
    padding: 0.7em 0.9em !important;
    margin: 0 !important;
    border: 1px solid var(--yt-tbl-border) !important;
    border-radius: 12px 12px 0 0 !important;
    background: var(--yt-tbl-caption-bg) !important;
    color: var(--yt-tbl-caption-color) !important;
    text-align: center !important;
    font-weight: 700;
    font-size: 1.05em;
}
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) > caption :is(a, a *) {
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(136, 15, 53, 0.4) !important;
    text-underline-offset: 3px;
}

/* caption بیرون از قاب جدول رسم می‌شود؛ گوشه‌ها و خط بالای جدول با آن یکی شوند */
:is(.page-content, .ProseMirror) table:not(.dataTable, #data-table):has(> caption) {
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}


/* ==========================================================================
   ۲) جدول Tiptap — عرض را ادمین تعیین می‌کند
   --------------------------------------------------------------------------
   Tiptap عرض‌ها را به‌صورت درون‌خطی می‌نویسد:
     - ستون resize نشده: <table style="min-width: …">  → جدول ۱۰۰٪ می‌شود
     - همه‌ی ستون‌ها resize شده: <table style="width: 640px"> → همان عرض ادمین
     - <colgroup><col style="width: 200px"> برای هر ستون
   بنابراین این‌جا width بدون !important است تا style درون‌خطی برنده شود،
   و table-layout: fixed لازم است تا عرض ستون‌ها دقیقاً رعایت شود.
   جدول پهن‌تر از صفحه داخل ظرف خودش اسکرول افقی می‌خورد
   (ادیتور: .tableWrapper / فرانت: .yt-table-scroll).
   ========================================================================== */

.ProseMirror table,
.page-content table:not(.dataTable, #data-table):has(> tbody > tr > [colwidth]) {
    width: 100%;
    table-layout: fixed !important;
}


/* ==========================================================================
   ۳) جدول قدیمی ویکی / Word در فرانت — خنثی‌سازی استایل‌های درون‌خطی
   (width="500pt"، bgcolor، border="1"، style="…"، فونت و رنگ Word)
   ========================================================================== */

/* عرض به اندازه‌ی محتوا (مثل نمایش قبلی ویکی) و وسط صفحه؛ عرض‌های ثابت Word/ویکی خنثی.
   ملاک فقط resize شدن ستون‌هاست، نه کلاس yt-table: جدول قدیمی‌ای که یک بار در ادمین
   ذخیره شده هم کلاس yt-table می‌گیرد ولی نباید ۱۰۰٪ شود. */
.page-content table:not(.dataTable, #data-table, :has(> tbody > tr > [colwidth])) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-content table:not(.dataTable, #data-table, :has(> tbody > tr > [colwidth])) :is(col, colgroup) {
    width: auto !important;
}
.page-content table:not(.dataTable, #data-table, :has(> tbody > tr > [colwidth])) :is(th, td) {
    width: auto !important;
    height: auto !important;
    /* ستون‌های کوتاه (سال، ناشر…) زیر فشار یک ستون پرمتن بیش از حد باریک نشوند */
    min-width: 6.5em;
}
.page-content table:is(:not(.yt-table, :has(> tbody > tr > [colwidth])), .wikitable, [class*="tableWikiYaghut"], [class*="Mso"]):not(.dataTable, #data-table) td {
    background: transparent !important;
    color: inherit !important;
}
.page-content table:is(:not(.yt-table, :has(> tbody > tr > [colwidth])), .wikitable, [class*="tableWikiYaghut"], [class*="Mso"]):not(.dataTable, #data-table) :is(th, td) * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}
/* رنگ متن Word (مثلاً سفید روی سلول آبی) بعد از حذف پس‌زمینه‌ی سلول ناخوانا می‌شود */
.page-content table:is(:not(.yt-table, :has(> tbody > tr > [colwidth])), .wikitable, [class*="tableWikiYaghut"], [class*="Mso"]):not(.dataTable, #data-table) :is(th, td) :not(a, a *, mark) {
    color: inherit !important;
    background-color: transparent !important;
}


/* ==========================================================================
   ۴) فقط ادیتور Tiptap (پنل ادمین)
   ========================================================================== */

/* ظرفی که Tiptap دور جدول resizable می‌گذارد */
.ProseMirror .tableWrapper {
    max-width: 100%;
    overflow-x: auto;
    margin: 1.5em 0;
}
.ProseMirror .tableWrapper > table:not(.dataTable, #data-table) {
    margin: 0 !important;
}

/* دستگیره‌ی تغییر عرض ستون */
.ProseMirror table :is(td, th) {
    position: relative;
}
.ProseMirror .column-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    background: #bc2050;
    opacity: 0.5;
    cursor: col-resize;
    pointer-events: none;
    z-index: 20;
}
.ProseMirror.resize-cursor {
    cursor: col-resize;
}

/* سلول‌های انتخاب‌شده */
.ProseMirror td.selectedCell::after,
.ProseMirror th.selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(188, 32, 80, 0.12);
    pointer-events: none;
    z-index: 2;
}

/* عنوان سفارشی جدول که داخل سلول نگه داشته می‌شود (منتقل‌شده از custom.css ادمین) */
.ProseMirror table td > caption {
    display: block;
    width: 100%;
    margin: 0;
}
.ProseMirror table td:has(> caption) {
    padding: 0 !important;
    border: 0 !important;
}


/* ==========================================================================
   ۵) ظرف اسکرول جدول در فرانت: <div class="yt-table-scroll">
   (LegacyContentCleaner هر جدول را داخلش می‌گذارد)

   - حداکثر ارتفاع؛ جدول بلندتر داخل خودش اسکرول عمودی می‌خورد
   - اسکرول افقی برای جدول‌های پهن (موبایل، یا عرض ثابتی که ادمین داده)
   - عنوان جدول (caption) یا ردیف سرستون هنگام اسکرول ثابت می‌ماند

   قاب (حاشیه و گوشه‌ی گرد) از جدول به خود ظرف منتقل می‌شود، چون
   overflow:hidden روی جدول جلوی ثابت ماندن (sticky) سرستون را می‌گیرد.
   ========================================================================== */

/* ظرف‌های اضافه‌ی دیگر دور جدول (مثل .yaghut-table-wrap) داخل این ظرف بی‌اثر شوند
   تا فقط یک قاب و یک اسکرول باقی بماند */
.page-content .yt-table-scroll .yaghut-table-wrap {
    display: contents !important;
}

.page-content .yt-table-scroll {
    --yt-table-max-height: min(70vh, 560px);   /* ← حداکثر ارتفاع را اینجا تنظیم کنید */

    max-height: var(--yt-table-max-height);
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    border: 1px solid #ecdde2;
    border-radius: 12px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #d9c2ca transparent;
}

/* قاب هم‌اندازه‌ی جدول و وسط صفحه (جدول به اندازه‌ی محتوا، یا عرضی که ادمین داده)
   (توجه: :has تودرتو در CSS مجاز نیست، برای همین حالت پیش‌فرض fit-content است
   و فقط استثنا با یک :has ساده مشخص می‌شود) */
.page-content .yt-table-scroll {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* استثنا: فقط بعضی ستون‌ها resize شده‌اند (جدول ۱۰۰٪ با عرض ستون‌های ثابت) → قاب تمام‌عرض */
.page-content .yt-table-scroll:has(> table > tbody > tr > [colwidth], > .yaghut-table-wrap > table > tbody > tr > [colwidth]):not(:has(> table[style^="width"], > .yaghut-table-wrap > table[style^="width"])) {
    width: auto;
}

.page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(.dataTable, #data-table) {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(.dataTable, #data-table) > caption {
    position: sticky;
    top: 0;
    z-index: 3;
    border: 0 !important;
    border-bottom: 1px solid var(--yt-tbl-border) !important;
    border-radius: 0 !important;
}

/* ردیف سرستون (thead یا ردیف اولی که فقط th دارد) ثابت می‌ماند؛
   اگر جدول caption دارد، همان caption ثابت می‌ماند */
.page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(:has(> caption)) > thead > tr > th,
.page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(:has(> caption)) > :is(tbody, thead):first-of-type > tr:first-child:not(:has(> td)) > th,
.page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(:has(> caption, > thead)) > tr:first-child:not(:has(> td)) > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ظرف «جدول واکنش‌گرا»ی ویکی قدیمی: اسکرول را به yt-table-scroll داخلش بسپارد */
.page-content [class*="tableWikiYaghut-responsive"] {
    height: auto !important;
    overflow: visible !important;
    max-width: 100%;
}
.page-content [class*="tableWikiYaghut-responsive"] > .yt-table-scroll {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* ==========================================================================
   ۶) چینش کل جدول (راست / وسط / چپ) — data-align روی جدول
   فقط وقتی دیده می‌شود که جدول از عرض صفحه باریک‌تر باشد (عرض داده‌شده با درگ)
   ========================================================================== */

/* ادیتور: data-align روی جدول یا روی .tableWrapper (حالت resizable) */
.ProseMirror :is(table[data-align="center"], [data-align="center"] > table):not(.dataTable, #data-table) {
    margin-left: auto !important;
    margin-right: auto !important;
}
.ProseMirror :is(table[data-align="right"], [data-align="right"] > table):not(.dataTable, #data-table) {
    margin-left: auto !important;
    margin-right: 0 !important;
}
.ProseMirror :is(table[data-align="left"], [data-align="left"] > table):not(.dataTable, #data-table) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* فرانت: خود ظرف اسکرول (که هم‌اندازه‌ی جدول است) جابه‌جا می‌شود */
.page-content .yt-table-scroll:has(> table[data-align="center"], > .yaghut-table-wrap > table[data-align="center"]) {
    margin-left: auto;
    margin-right: auto;
}
.page-content .yt-table-scroll:has(> table[data-align="right"], > .yaghut-table-wrap > table[data-align="right"]) {
    margin-left: auto;
    margin-right: 0;
}
.page-content .yt-table-scroll:has(> table[data-align="left"], > .yaghut-table-wrap > table[data-align="left"]) {
    margin-left: 0;
    margin-right: auto;
}
/* جدولی که داخل ظرف اسکرول نیست */
.page-content table[data-align="center"]:not(.dataTable, #data-table) { margin-left: auto !important; margin-right: auto !important; }
.page-content table[data-align="right"]:not(.dataTable, #data-table)  { margin-left: auto !important; margin-right: 0 !important; }
.page-content table[data-align="left"]:not(.dataTable, #data-table)   { margin-left: 0 !important; margin-right: auto !important; }


@media (max-width: 768px) {
    .page-content .yt-table-scroll {
        --yt-table-max-height: 65vh;
    }
    :is(.page-content, .ProseMirror) table:not(.dataTable, #data-table) {
        font-size: 0.9em;
    }
    /* جدول قدیمی داخل ظرف اسکرول: ستون‌ها بیش از حد باریک نشوند؛ اسکرول بخورد
       (جدول Tiptap عرض ستون‌هایش را خودش دارد) */
    .page-content :is(.yt-table-scroll, .yt-table-scroll > .yaghut-table-wrap) > table:not(:has(> tbody > tr > [colwidth])) :is(th, td) {
        min-width: 8em;
    }
}