/* ======================================================================== */
/* style.css - نسخه نهایی پاکسازی شده */
/* ======================================================================== */
/* # Icons   📂 ↳ ⏎ ↩️ 👥 ▶️ 📌 🔒 ✔️ 🎯 📋 / 🧾 🔍 */
/* ==========================
   1. استایل‌های پایه و عمومی (Base & Global)
   ========================== */
   body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    direction: rtl;
}

body.modal-open {
    overflow: hidden;
}

h2 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ==========================
   2. طرح‌بندی اصلی (Layout - Sidebar & Content)
   ========================== */
/* استایل‌های مربوط به سایدبار و محتوا در base.html */

/* ==========================
   3. استایل جدول نمایش داده (Data Table)
   ========================== */

.table-container {
    margin: 20px auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* برای border-radius */
}

/* --- هدر جدول --- */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #abd0ff; /* رنگ پیش‌فرض یا داینامیک */
}

.table-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-header-center {
    flex-grow: 1;
    text-align: center;
}

.table-header-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* عناصر داخل هدر */
.table-header-left button,
#back-to-parent-btn {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
    line-height: 1.5;
    margin: 0;
}

.table-header-left button:hover {
    background-color: #90ee90;
}

#back-to-parent-btn {
    background-color: #cfe2ff;
    color: #0d6efd;
    border-color: #9ec5fe;
    font-size: 14px;
}

#back-to-parent-btn:hover {
    background-color: #b6d4fe;
}

.table-header-right input[type="text"] {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 14px;
    width: 150px;
    text-align: right;
    direction: rtl;
}

/* صفحه بندی در هدر */
.table-header-center span {
    margin: 0 10px;
    font-weight: bold;
    vertical-align: middle;
    color: #495057;
}

.table-header-center a {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0 3px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 3px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.table-header-center a.pagination-link {
    color: #333; /* رنگ مشکی/خاکستری */
    cursor: pointer;
}

.table-header-center a.pagination-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
}

.table-header-center a.pagination-disabled {
    color: #adb5bd;
    cursor: default;
}

/* --- بدنه جدول --- */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th,
td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    box-sizing: border-box;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

td {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f0f0f0;
}

/* ستون عملیات */
td.operations-column {
    text-align: center;
    white-space: nowrap !important;
    overflow: visible !important;
    width: auto;
}

td.operations-column button {
    background: none !important;
    border: none !important;
    padding: 0 3px !important;
    margin: 0 1px !important;
    vertical-align: middle;
    cursor: pointer;
    font-size: 0.8em; /* <<< اندازه پایه برای همه (یا 0.9em) */
    color: #555;
    line-height: 1; /* <<< تنظیم پایه ارتفاع خط */
}
td.operations-column button:hover {
    color: #007bff;
}


td.operations-column button.child-table-btn {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; /* حفظ فونت ایموجی */
    font-size: 0.8em; /* <<< اندازه کمی بزرگتر برای ایموجی ها */
    line-height: 1; /* اطمینان از عدم تغییر ارتفاع خط */
    /* می توانید مقادیر font-size و line-height را تنظیم کنید */
}


.parent-info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.parent-info-table th,
.parent-info-table td {
    padding: 7px 10px;
    border: none;
    border-left: 1px solid #dee2e6;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parent-info-table th {
    background-color: #f8f9fa;
    color: #212529;
}

.parent-info-table td {
    background-color: #ffffff;
    color: #495057;
}

.parent-info-table th:last-child,
.parent-info-table td:last-child {
    border-left: none;
}

/* ==========================
   4. مودال‌ها (Backdrop, فرم افزودن/ویرایش, پاپ‌آپ کد)
   ========================== */

/* --- Backdrop --- */
#modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* --- دکمه بستن عمومی (X) --- */
.close-btn {
    position: absolute;
    top: 8px;
    left: 10px; /* <<< چپ برای RTL */
    right: auto;
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 5px;
    z-index: 1002; /* بالاتر از فرم */
}

.close-btn:hover {
    color: #333;
}

/*
  فایل: style.css
  آدرس: جایگزینی کامل سلکتور #add-record-form
*/
/* // =========================================================
// ===== selector: #add-record-form (Unified & Final)    =====
// ========================================================= */
#add-record-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 680px;
    max-width: 95vw;
    max-height: 90vh;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden; 
}
/* کانتینر داخلی فرم */
#record-form {
    padding: 40px 25px 15px 25px; /* پدینگ بالا برای دکمه بستن */
    direction: rtl;
    box-sizing: border-box;
}

/* استایل اسکرول‌بار فرم طولانی */
#record-form.long-form-content::-webkit-scrollbar {
    width: 8px;
}
#record-form.long-form-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
#record-form.long-form-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
#record-form.long-form-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}



/* #################################################
// =========================================================
// ===== selector: #code-table-popup (The Final Fix)     =====
// ========================================================= */
#code-table-popup #code-table-container {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    /* حذف پدینگ بالا که باعث مشکل می‌شد */
    padding: 0; 
}
/* ##################### */



.code-popup-item { /* li داخل .code-popup-list */
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-weight: bold; 
}

.code-popup-item:last-child {
    border-bottom: none;
}
.code-popup-item:hover {
    background-color: #f0f0f0;
}
/* ###################### */

#code-selection-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}
#code-selection-table th,
#code-selection-table td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;
}
#code-selection-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: -1px;
    z-index: 1;
    text-align: right;
}
#code-selection-table th:nth-child(1) { width: auto; } /* نام */
#code-selection-table th:nth-child(2) { text-align: center; width: 80px; } /* انتخاب */
#code-selection-table td:nth-child(1) {
    text-align: right;
    white-space: normal;
    overflow: visible;
} /* نام */
#code-selection-table td:nth-child(2) {
    text-align: center;
    width: 80px;
} /* انتخاب */
#code-selection-table button.select-code-btn {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f8f8f8;
    line-height: 1.2;
}
#code-selection-table button.select-code-btn:hover {
    background-color: #e9e9e9;
    border-color: #bbb;
}

/* ==========================
   5. استایل‌های چک‌باکس‌ها (استاندارد ستونی و غیر استاندارد ردیفی)
   ========================== */

/* --- لیبل و چک‌باکس عمومی --- */
label.checkbox-label {
    font-weight: bold ;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    /* text-align: right !important; */ /* حذف شد، توسط والد کنترل شود */
    white-space: normal;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}
input.access-checkbox {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #198754; /* رنگ سبز */
    vertical-align: middle;
    box-sizing: border-box;
}
/* چک باکس غیر استاندارد در فرم عادی */
/* در بخش فرم عادی استایل داده شد */

/* --- استایل‌های گروه چک‌باکس استاندارد (ستونی، فقط برای access_level_to_tables) --- */
.checkbox-group-container.checkbox-column-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fafafa;
    direction: rtl;
    max-height: 45vh;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #bdbdbd #f0f0f0;
}
.checkbox-group-container.checkbox-column-layout::-webkit-scrollbar { width: 8px; }
.checkbox-group-container.checkbox-column-layout::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px;}
.checkbox-group-container.checkbox-column-layout::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.checkbox-group-container.checkbox-column-layout::-webkit-scrollbar-thumb:hover { background: #aaa; }

.checkbox-group-title {
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 1em;
    font-weight: bold;
    color: #555;
    text-align: right;
    padding-right: 5px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
}
.checkbox-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    min-width: 180px;
    box-sizing: border-box;
    font-size: 1.0em;
}
.checkbox-column-title {
    font-weight: bold;
    font-size: .95em;
    color: #333;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
    text-align: right;
    white-space: normal;
}
.checkbox-column .checkbox-field {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
}
/* ترتیب در ستون چک باکس استاندارد */
.checkbox-column .checkbox-field label.checkbox-label {
    flex-grow: 1;
    order: 2; /* لیبل دوم (چپ) */
    text-align: right !important; /* متن راست چین */
}
.checkbox-column .checkbox-field input.access-checkbox {
    order: 1; /* چک باکس اول (راست) */
}


/* ========================================== */
/* استایل های مربوط به ویرایشگر کتاب */
/* ========================================== */

/* سلکتور والد برای محدود کردن استایل ها */
#table-placeholder .editor-container {
    /* width: 80%; */ /* عرض توسط table-placeholder کنترل می شود */
    margin: 10px 0; /* کمی فاصله */
    padding: 0; /* پدینگ لازم نیست */
    display: flex;
    flex-direction: row;
    gap: 15px; /* کمی فاصله کمتر */
    direction: ltr !important; /* <<<<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

    /* background-color: #f5f5f5; */ /* پس زمینه از والد */
}

#table-placeholder .editor-left-section {
    width: 30%; 
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* max-height: 75vh; */  /* <<--- این خط موقتاً کامنت یا حذف شود */
    overflow-y: auto;      /* این باید وجود داشته باشد تا اگر محتوا زیاد شد، کل بخش چپ اسکرول بخورد */
    padding-right: 5px; 
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    direction: ltr !important; 
}


#table-placeholder .editor-left-section h5 {
    text-align: right; /* راست چین */
    font-size: 16px; /* کمی کوچکتر */
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc; /* خط جدا کننده */
    padding-bottom: 8px;
    /* display: inline-block; */ /* حذف شد */
}

/* #table-placeholder .editor-records { */
    /* flex-grow: 1; */ /* نیاز نیست با max-height */
    /* overflow-y: auto; */ /* روی والد اعمال شد */
/* } */
#table-placeholder .editor-records {
    flex-grow: 1;         /* <--- این بخش فضای باقی‌مانده عمودی را می‌گیرد */
    overflow-y: auto;     /* <--- اسکرول داخلی برای لیست کلمات */
    min-height: 150px;    /* <--- یک حداقل ارتفاع برای زمانی که آیتم کم است (اختیاری) */
                          /* این مقدار باید طوری باشد که حداقل چند آیتم جا شود */
    padding-bottom: 5px;  /* کمی فضا در انتهای لیست قبل از اسکرول بار */
}

#table-placeholder .editor-record {
    background-color: #f9f9f9;
    border-radius: 4px;
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); */
    border: 1px solid #eee;
    padding: 5px; /* پدینگ داخلی */
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px; /* فاصله بین رکوردها */
    transition: background-color 0.2s ease;
    direction: ltr !important; /* <<<<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

}
#table-placeholder .editor-record:hover {
    background-color: #eef;
}

#table-placeholder .editor-record-image {
    width: 35px; /* کمی بزرگتر */
    height: 35px;
    margin-left: 8px; /* فاصله از متن */
    margin-right: 0;
    flex-shrink: 0;
}

#table-placeholder .editor-record-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* یا cover */
    border-radius: 3px;
    
}

#table-placeholder .editor-record-info p {
    margin: 0;
    font-size: 13px; /* کمی کوچکتر */
    text-align: right;
    text-align: left !important; /* <<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

}
#table-placeholder .editor-record-info strong {
     font-weight: bold;
     margin-left: 3px;
}

#table-placeholder .editor-right-section {
    width: 70%; /* یا درصد مناسب دیگر */
    background-color: #fdfdfd;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    /* max-height: 75vh; */ /* شاید نیاز به اسکرول باشد؟ */
    /* overflow-y: auto; */
    direction: ltr !important; /* <<<<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

}

#table-placeholder .editor-pagination {
    text-align: center; /* وسط چین */
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

#table-placeholder .editor-pagination button {
    text-decoration: none;
    background-color: #0d6efd; /* آبی بوت استرپ */
    color: white;
    padding: 5px 12px;
    border-radius: 3px;
    margin: 0 5px;
    border: 1px solid #0a58ca;
    font-size: 13px;
}

#table-placeholder .editor-pagination button:hover {
    background-color: #0b5ed7;
    border-color: #0a53be;
    transform: scale(1.03); /* کمی بزرگنمایی */
}

#table-placeholder .editor-pagination span {
    font-size: 14px;
    color: #333;
    margin: 0 8px;
    font-weight: bold;
}

#table-placeholder #editor-record-container {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); */ /* سایه داخلی */
    font-family: 'Arial', sans-serif;
    color: #333;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

#table-placeholder #editor-record-container div:not(:first-child) { /* استایل برای بخش فرم */
    margin-top: 15px;
}

#table-placeholder #editor-record-container label {
    font-weight: bold;
    display: block;
    margin-bottom: 3px;
    font-size: 13px; /* اندازه فونت لیبل */
    text-align: left !important; /* <<<<<<<<<<<<<<<<<<<<< تغییر به left و !important */
}

#table-placeholder #editor-record-container input[type="text"] {
    width: 98%; /* کمی کمتر برای پدینگ */
    padding: 6px 8px; /* پدینگ کمتر */
    margin: 0; /* حذف مارجین */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    /* box-shadow: none; */ /* حذف سایه */
    background-color: #fff; /* زمینه سفید */
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    direction: ltr !important; /* <<<<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

}

#table-placeholder #editor-record-container input[type="text"]:focus {
    border-color: #80bdff; /* آبی روشن تر در فوکوس */
    /* box-shadow: none; */
    outline: 0;
}

#table-placeholder #editor-record-container .farsi-input {
    direction: rtl !important;
    text-align: right !important;
    font-size: 16px;
    font-family: 'Tahoma', 'Arial', sans-serif; /* یا فونت فارسی شما */
    unicode-bidi: embed; /* <<<<<<<<<<<<<<<<<<<<<<< این خط را اضافه کنید */
}

#table-placeholder .editor-form-buttons {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    text-align: left !important; /* <<<<<<<<<<<<<<<<<<<<<<< تغییر به left و !important */

}

#table-placeholder .editor-form-buttons button {
    padding: 8px 18px; /* پدینگ مناسب */
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin: 0 5px;
}
#table-placeholder .editor-form-buttons button:hover {
    transform: scale(1.03);
}
#table-placeholder .editor-form-buttons .editor-save-btn {
    background-color: #198754; /* سبز */
    color: white;
    border: 1px solid #146c43;
}
#table-placeholder .editor-form-buttons .editor-save-btn:hover {
    background-color: #157347;
}

/* --- استایل هدر اطلاعات زمینه و دکمه بازگشت --- */
.editor-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9ecef; /* رنگ پس زمینه هدر */
    padding: 8px 15px;
    border-radius: 5px 5px 0 0; /* گردی گوشه های بالا */
    border: 1px solid #dee2e6;
    border-bottom: none; /* حذف خط پایین */
    margin: 10px 0 0 0; /* فقط مارجین بالا */
    box-sizing: border-box;
    direction: rtl !important; /* <<<<<<<<<<<<<<<<<<<<<<< اضافه کردن !important */

}
.editor-context-header p {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    color: #495057;
}
.editor-back-button {
    padding: 4px 10px;
    font-size: 13px;
    font-weight: bold;
    background-color: #6c757d; /* خاکستری */
    color: white;
    border: 1px solid #5a6268;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.editor-back-button:hover {
    background-color: #5a6268;
}
/*  تا اینجا - استایل های مربوط به ویرایشگر کتاب */
/* ========================================== */

/* ======================================================================== */
/* استایل‌های مربوط به جستجوی کلمه در ویرایشگر کتاب */
/* ======================================================================== */

#table-placeholder .editor-left-section .editor-word-search-container {
    position: relative; /* برای موقعیت‌دهی مطلق لیست نتایج */
    margin-bottom: 10px; /* فاصله از لیست اصلی کلمات */
    box-sizing: border-box;
}

#table-placeholder .editor-left-section .editor-word-search-input {
    width: 100%;
    padding: 8px 10px;
    padding-left: 30px; /* فضای کافی برای آیکون placeholder در سمت چپ (برای LTR) */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    direction: ltr; /* ورودی متن انگلیسی است */
    text-align: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 8px center; /* آیکون در سمت چپ ورودی */
    transition: border-color 0.2s ease;
}

#table-placeholder .editor-left-section .editor-word-search-input:focus {
    border-color: #007bff; /* رنگ آبی هنگام فوکوس */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#table-placeholder .editor-left-section .editor-word-search-results {
    position: absolute;
    top: 100%; /* دقیقاً زیر کادر جستجو */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* چون به کادر جستجو چسبیده */
    border-radius: 0 0 4px 4px; /* گردی گوشه‌های پایین */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px; /* حداکثر ارتفاع، سپس اسکرول */
    overflow-y: auto;
    z-index: 10; /* باید بالاتر از سایر عناصر در همان سطح باشد */
    direction: ltr; /* نتایج انگلیسی هستند */
    text-align: left;
    box-sizing: border-box;
}

#table-placeholder .editor-left-section .editor-word-search-results ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#table-placeholder .editor-left-section .editor-word-search-results li {
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #eee; /* خط جداکننده بین آیتم‌ها */
}

#table-placeholder .editor-left-section .editor-word-search-results li:last-child {
    border-bottom: none;
}

#table-placeholder .editor-left-section .editor-word-search-results li:hover {
    background-color: #f0f0f0; /* رنگ هاور */
}

/* استایل برای زمانی که پیام خطا در لیست نتایج نمایش داده می‌شود */
#table-placeholder .editor-left-section .editor-word-search-results li[style*="color: red"] {
    background-color: #fff0f0; /* پس زمینه قرمز خیلی روشن */
    font-style: italic;
}

/* استایل برای زمانی که پیام "موردی یافت نشد" نمایش داده می‌شود */
#table-placeholder .editor-left-section .editor-word-search-results li[style*="color:grey"] {
    background-color: #fafafa;
    font-style: italic;
}

/* ======================================================================== */
/* پایان استایل‌های جستجوی کلمه در برنامه ویرایشگر کتاب */
/* ======================================================================== */

/* ======================================================================== */
/* استایل‌های مربوط به Dropdown جستجوی نام کد در فرم‌ها */
/* ======================================================================== */


.code-field-wrapper {
    position: relative; /* برای موقعیت‌یابی suggestionsDiv */
    display: flex;
    align-items: center;
    flex-grow: 1; /* <<-- مهم: این خط اضافه یا جایگزین شده است */
}
.code-name-suggestions {
    position: absolute; /* ضروری برای موقعیت‌دهی دقیق */
    top: 100%;        /* زیر والدش که دارای position:relative است (یعنی fieldRowContainer) */
                        /* top دقیق‌تر با JS تنظیم می‌شود تا زیر input نام کد باشد */
    background-color: #fff;
    border: 1px solid #ccc;
    /* border-top: none; */ /* ممکن است بهتر باشد border کامل داشته باشد */
    border-radius: 4px; /* یا 0 0 4px 4px اگر border-top:none باشد */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 180px; 
    overflow-y: auto;
    z-index: 1005; 
    direction: rtl; 
    text-align: right;
    box-sizing: border-box;
    /* width و left توسط جاوا اسکریپت تنظیم خواهند شد */
}


 .code-name-suggestions ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
.code-name-suggestions .suggestion-item,
.code-name-suggestions .suggestion-item-more, /* آیتم "موارد بیشتر" را بولد نمی‌کنیم */
.code-name-suggestions .suggestion-item-none,
.code-name-suggestions .suggestion-item-error {
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #eee; 
}

.code-name-suggestions .suggestion-item:last-child,
.code-name-suggestions .suggestion-item-more:last-child, /* اگر فقط یک آیتم "بیشتر" باشد */
.code-name-suggestions .suggestion-item-none:last-child,
.code-name-suggestions .suggestion-item-error:last-child {
    border-bottom: none;
}

.code-name-suggestions .suggestion-item:hover {
    background-color: #f0f0f0;
}

.code-name-suggestions .suggestion-item-more {
    color: #007bff; /* رنگ آبی برای تاکید */
    font-style: italic;
    text-align: center;
}
.code-name-suggestions .suggestion-item-more:hover {
    background-color: #e6f2ff;
}

.code-name-suggestions .suggestion-item-none,
.code-name-suggestions .suggestion-item-error {
    color: #777;
    font-style: italic;
    cursor: default;
}
.code-name-suggestions .suggestion-item-error {
    color: red;
}


.code-name-suggestions .suggestion-item {
padding: 8px 12px;
font-size: 14px;
color: #333;
cursor: pointer;
border-bottom: 1px solid #eee; 
font-weight: bold; /* <<--- اطمینان حاصل کنید این خط وجود دارد و اعمال می‌شود */
}


   .code-name-suggestions .suggestion-item:last-child {
     border-bottom: none;
 }

/* ======================================================================== */

/* استایل برای دکمه جستجو در هدر جدول */
#search-table-btn {
    padding: 5px 8px; /* کمی پدینگ کمتر اگر فقط آیکون است */
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 14px; /* یا اندازه‌ای که آیکون خوب نمایش داده شود */
    font-weight: bold; /* اگر متن هم دارد */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    line-height: 1.5; /* برای هم‌ترازی عمودی */
    margin: 0;
    margin-left: 5px; /* کمی فاصله از دکمه بعدی (اگر وجود دارد) */
    color: #555; /* رنگ آیکون */
}

#search-table-btn:hover {
    background-color: #e9ecef; /* رنگ هاور ملایم */
    border-color: #bbb;
    color: #000;
}


/* ==========================
   7. استایل مودال فرم جستجو
   ========================== */
#search-form-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* مشابه مودال افزودن/ویرایش */
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 0; /* پدینگ توسط اجزای داخلی کنترل می‌شود */
    box-sizing: border-box;
    width: 650px; /* عرض مشابه فرم افزودن */
    max-width: 90vw;
    /* برای فرم‌های جستجوی طولانی، ارتفاع و اسکرول باید مدیریت شود */
    max-height: 85vh; /* حداکثر ارتفاع */
    display: flex; /* برای چیدمان داخلی با flex */
    flex-direction: column; /* اجزا به صورت ستونی */
    overflow: hidden; /* اسکرول اصلی روی کانتینر فیلدها خواهد بود */
}

#search-form-modal .close-btn { /* استایل دکمه X مشابه فرم اصلی */
    position: absolute;
    top: 8px;
    left: 10px;
    right: auto;
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 5px;
    z-index: 1002;
}
#search-form-modal .close-btn:hover {
    color: #333;
}

#search-form-modal .search-form-title-class { /* عنوان مودال جستجو */
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 15px 20px 10px 20px; /* پدینگ مناسب */
    margin: 0;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa; /* رنگ پس‌زمینه ملایم برای هدر */
    flex-shrink: 0; /* هدر کوچک نشود */
}

#search-form-modal .search-form-fields { /* کانتینر فیلدهای جستجو */
    padding: 20px 25px;
    direction: rtl;
    overflow-y: auto; /* اسکرول در صورت نیاز برای فیلدها */
    flex-grow: 1; /* این بخش فضای باقی‌مانده را پر می‌کند */
    /* استایل‌های مشابه #record-form برای فیلدها در اینجا توسط JS اعمال می‌شود */
    /* یا می‌توانید کلاس‌های مشابهی به فیلدهای جستجو بدهید */
}

/* استایل برای هر ردیف فیلد در فرم جستجو (اگر مشابه فرم اصلی است) */
#search-form-modal .search-form-fields .form-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px; /* فاصله بین ردیف‌ها */
    box-sizing: border-box;
}

#search-form-modal .search-form-fields .form-field label:not(.checkbox-label) {
    width: 150px; /* عرض لیبل‌ها */
    flex-shrink: 0;
    font-weight: bold;
    text-align: left; /* لیبل‌ها چپ‌چین */
    white-space: normal;
    padding-left: 5px;
    box-sizing: border-box;
    line-height: 1.3;
}

/* استایل برای input ها و textarea ها در فرم جستجو */
#search-form-modal .search-form-fields input[type="text"],
#search-form-modal .search-form-fields textarea,
#search-form-modal .search-form-fields .code-input, /* برای فیلدهای کد */
#search-form-modal .search-form-fields .name-input { /* برای نام کد */
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14px;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
    height: 30px;
    line-height: normal;
    vertical-align: middle;
    background-color: #f9f9f9; /* رنگ پس‌زمینه برای input های جستجو */
}

#search-form-modal .search-form-fields input[type="text"]:not(.code-input):not(.name-input),
#search-form-modal .search-form-fields textarea {
    flex-grow: 1;
}

#search-form-modal .search-form-fields textarea {
    height: auto;
    min-height: 60px;
    resize: vertical;
}

#search-form-modal .search-form-fields .code-input {
    width: 10ch;
    background-color: #eee; /* کد معمولا در جستجو قابل ویرایش مستقیم نیست */
}

#search-form-modal .search-form-fields .name-input {
    flex-grow: 1;
    background-color: #fff; /* نام کد قابل تایپ است */
}

#search-form-modal .search-form-fields .select-code-icon {
    cursor: pointer;
    padding: 0 5px;
    font-size: 1.2em;
    color: #555;
}
#search-form-modal .search-form-fields .select-code-icon:hover {
    color: #000;
}

/* استایل برای چک‌باکس‌ها در فرم جستجو */
#search-form-modal .search-form-fields .form-field.search-checkbox-field {
    justify-content: flex-start; /* چیدمان از راست */
}
#search-form-modal .search-form-fields .form-field.search-checkbox-field label.checkbox-label {
    order: 2;
    width: auto;
    flex-grow: 1;
    text-align: right;
    padding-right: 5px;
}
#search-form-modal .search-form-fields .form-field.search-checkbox-field input[type="checkbox"] {
    order: 1;
    margin: 0;
}


#search-form-modal .search-form-buttons { /* کانتینر دکمه‌های جستجو */
    text-align: center;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
    flex-shrink: 0; /* فوتر کوچک نشود */
}

#search-form-modal .search-form-buttons button {
    padding: 8px 18px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#search-form-modal .search-form-buttons button#execute-search-btn {
    background-color: #007bff; /* آبی */
    color: white;
    border-color: #0069d9;
}
#search-form-modal .search-form-buttons button#execute-search-btn:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

#search-form-modal .search-form-buttons button#cancel-search-btn:hover {
    background-color: #e0e0e0;
    border-color: #bbb;
}


/* --- هدر مجازی --- */
#add-record-form::before {
    content: attr(data-title);
    flex-shrink: 0;
    padding: 12px 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    background-color: var(--header-bg-color, '#f8f9fa');
}

/* --- بدنه فرم (بخش محتوا) --- */
#add-record-form > #record-form {
    flex-grow: 1; /* تمام فضای باقی‌مانده را پر می‌کند */
    min-height: 0;
    padding: 25px;
    /* overflow-y به صورت داینامیک توسط کلاس کمکی کنترل می‌شود */
}

/* --- کلاس کمکی برای فعال‌سازی اسکرول --- */
.form-is-scrollable #record-form {
    overflow-y: auto;
}

/* --- فوتر فرم (محل دکمه‌ها) --- */
#add-record-form .form-buttons-container {
    flex-shrink: 0;
    text-align: center;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    padding: 12px 20px;
}
#add-record-form .form-buttons-container button {
     padding: 8px 24px;
     margin: 0 8px;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
     border: 1px solid #ccc;
}
/* ... استایل‌های خاص دکمه ذخیره و لغو ... */
#add-record-form .form-buttons-container #save-record-btn {
    background-color: #28a745;
    color: white;
    border-color: #218838;
}

/* --- استایل‌های داخلی فیلدها (از کد اصلی شما) --- */
#add-record-form .form-field,
/* #add-record-form .long-form-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px; /* افزایش فاصله */
/* } */ 

#add-record-form label:not(.checkbox-label) {
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
}



/* استایل برای تراز صحیح چک‌باکس */
/* #add-record-form .form-field .input-wrapper { */
    /* flex-grow: 1; باعث می‌شود این کانتینر فضای خالی را پر کند */
    /* display: flex; */
/* } */

/* ===== اصلاح نهایی برای تراز چک‌باکس ===== */
/* #add-record-form .form-field { */
    /* display: flex;
    align-items: center;
    gap: 10px;
} */
/* ########/

/* ########/
/* ===== اصلاح نهایی تراز چک‌باکس (ساختار جدید) ===== */
#add-record-form .checkbox-container {
    display: flex;
    align-items: center;
    /* این باعث می‌شود چک‌باکس در سمت راست و لیبل در سمت چپ قرار گیرد */
    justify-content: flex-end; 
    width: 100%;
}

#add-record-form .checkbox-container .checkbox-label {
    order: 1; /* لیبل اول (در سمت راست) */
    margin-right: 8px; /* فاصله از چک‌باکس */
}

#add-record-form .checkbox-container .access-checkbox {
    order: 2; /* چک‌باکس دوم (در سمت چپ) */
}

/* ===== اصلاح نهایی فونت نام کد ===== */
#add-record-form .name-input {
    font-weight: bold !important;
}
 
/* ################################################ */
/* ================================================================= */
/* ===== FINAL CSS FIX: Consolidated Input Style (Replacement) ===== */
/* ================================================================= */
#add-record-form input[type="text"],
#add-record-form input[type="password"] {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
    height: 30px;
    font-weight: bold;
}

#add-record-form textarea {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
    font-weight: bold;
    /* --- استایل‌های صحیح برای ارتفاع --- */
    height: auto;
    min-height: 80px;
    resize: vertical;
    line-height: 1.6;
    /* --- کلید حل مشکل عرض --- */
    width: 400px !important;
}

/* =================================================================== */
/* 
  === نکته کلیدی ===
  ما به جای خود فرم، به بدنه فرم (جایی که فیلدها هستند)
  دستور می‌دهیم که اسکرول بخورد.
*/
#add-record-form > form#record-form {
    overflow-y: auto;  /* اسکرول عمودی فقط برای این بخش فعال می‌شود */
    min-height: 0;     /* ترفند Flexbox برای عملکرد صحیح overflow */
}


/* ================================================================= */
/* ===== Helper Class for Centering Small Forms ===== */
/* ================================================================= */

/* هر فرمی که این کلاس را داشته باشد، محتوای آن وسط‌چین می‌شود */
#add-record-form.form-centered .form-field {
    justify-content: center;
}

/* همچنین لیبل دیگر عرض ثابت نخواهد داشت تا همه چیز وسط قرار گیرد */
#add-record-form.form-centered .form-field label {
    width: auto;
    text-align: right; /* یا center */
}

/* ======================================================= */
/* ===== Search Form Style Enhancements ===== */
/* ======================================================= */

/* این قانون متن داخل دراپ‌داون‌های فرم جستجو را بولد می‌کند */
#search-form-modal .search-form-fields select {
    font-weight: bold;
}

/* ======================================================= */
/* ===== Reset Styles for .select-code-icon as button ===== */
/* ======================================================= */
button.select-code-icon {
    background: none;
    border: none;
    padding: 0 5px;
    margin: 0;
    font-size: 1.2em; /* یا هر اندازه‌ای که قبلاً داشتید */
    color: #555;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}

button.select-code-icon:hover {
    color: #000;
}

button.select-code-icon:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#clear-search-btn {
    padding: 5px 8px; border: 1px solid #ccc; border-radius: 3px;
    background-color: #ffc107; color: #000; font-size: 16px;
    font-weight: bold; cursor: pointer; line-height: 1.5; margin: 0;
}
#clear-search-btn:hover { background-color: #e0a800; }


#code-table-popup {
    position: fixed;
    z-index: 1050;
    
    display: none; /* در ابتدا مخفی است */
    flex-direction: column;
    
    min-width: 200px;
    
    background-color: white;
    border: 1px solid #aaa;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    
    overflow: hidden; /* اسکرول خارجی هرگز فعال نمی‌شود */
    box-sizing: border-box;
}

/* ======================================================= */
/* ===== Restore Add Form Layout                     ===== */
/* ======================================================= */

#add-record-form .form-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px; /* کمی فاصله بیشتر */
}

#add-record-form .form-field > label {
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
}

#add-record-form .code-field-wrapper,
#add-record-form .input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* ======================================================= */
/* ===== Final Box Sizing Fix for Perfect Scroll     ===== */
/* ======================================================= */

#code-table-popup * {
    box-sizing: border-box;
}

/* ======================================================= */
/* ===== Final Overflow Fix for Add Form Desktop     ===== */
/* ======================================================= */

#add-record-form .code-field-wrapper .code-table-popup #code-table-container {
    /* 
      این قانون به مرورگر دستور می‌دهد که تحت هیچ شرایطی 
      اجازه ندهد محتوای داخلی از والد خود بزرگتر محاسبه شود.
      این ترفند خطای جزئی محاسبه ارتفاع را خنثی می‌کند.
    */
    overflow-anchor: none;
}
/* ================================================================= */
/* ===== Fix 1, Part 1: Centering Form Container (Alpha)       ===== */
/* ================================================================= */
/* 
  این قانون به کانتینر اصلی فرم دستور می‌دهد که تمام ردیف‌های
  داخلی خود (که inline-flex خواهند شد) را در مرکز قرار دهد.
*/
#add-record-form.form-centered > #record-form {
    text-align: center;
}
/* ================================================================= */
/* ===== Fix 1, Part 2: Adjusting Form Rows (Alpha)            ===== */
/* ================================================================= */
/* 
  این قوانین فقط برای فرم‌های وسط‌چین اعمال می‌شوند.
  1. ردیف فرم را به inline-flex تبدیل می‌کند تا عرض آن به اندازه محتوایش باشد.
  2. عرض ثابت لیبل را حذف می‌کند تا همه چیز به درستی در مرکز قرار گیرد.
*/
#add-record-form.form-centered .form-field {
    display: inline-flex; /* کلیدی‌ترین تغییر */
    width: auto;          /* اطمینان از اینکه عرض کامل را اشغال نمی‌کند */
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;  /* حفظ فاصله عمودی بین فیلدها */
}

#add-record-form.form-centered .form-field > label {
    width: auto;
    flex-shrink: 0;      /* جلوگیری از کوچک شدن لیبل */
    text-align: right;
    padding-left: 0;
    margin-left: 10px;
}


/* ===================================================================== */
/* ===== FINAL & COMPLETE SIDEBAR CSS BLOCK (REPLACEMENT)        ===== */
/* ===================================================================== */

#sidebar-menu {
    order: 1;
    width: 240px;
    flex-shrink: 0;
    background-color: #012469;
    color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: width 0.3s ease;
}

#toggle-menu-btn {
    position: absolute;
    top: 10px;
    right: 15px; /* موقعیت صحیح در حالت RTL */
    background: none; border: none; font-size: 1.8em;
    cursor: pointer; padding: 0; color: #d4e1ff;
    z-index: 10;
}
#toggle-menu-btn:hover { color: #ffffff; }

.sidebar-content {
    padding-top: 60px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar-menu.collapsed { width: 55px; }
#sidebar-menu.collapsed .sidebar-content { display: none; }
#sidebar-menu.collapsed #toggle-menu-btn { right: 50%; transform: translateX(50%); }

#sidebar-menu .menu-group-header {
    display: flex; align-items: center; padding: 9px 20px;
    cursor: pointer; transition: background-color 0.2s ease;
    user-select: none; text-decoration: none; color: white;
}
#sidebar-menu .menu-group-header:hover { background-color: #0039a6; }

#sidebar-menu .menu-group-title {
    font-weight: bold; font-size: 1.05em; white-space: nowrap;
    flex-grow: 1; margin-right: 10px;
}

#sidebar-menu .menu-group-arrow {
    font-weight: bold; transition: transform 0.3s ease-out;
}
#sidebar-menu .menu-group-header.open .menu-group-arrow {
    transform: rotate(90deg);
}

/* =================================================================
 * ===== BLOCK REPLACEMENT: Smooth Accordion with Smart max-height =====
 * ================================================================= */
#sidebar-menu .menu-group-items {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
    
    /* حالت بسته با ارتفاع صفر */
    max-height: 0;
    
    /* ترفند کلیدی: transition روی padding هم اعمال می‌شود */
    transition: max-height 0.35s ease-in-out, padding 0.35s ease-in-out;
}

#sidebar-menu .menu-group-items.open {
    /* ارتفاع را بر اساس فضای باقی‌مانده صفحه تنظیم می‌کنیم تا از بریده شدن جلوگیری شود */
    max-height: calc(100vh - 200px); /* 100% ارتفاع صفحه منهای یک مقدار تقریبی برای هدرها و فوتر منو */
    
    /* فعال کردن اسکرول عمودی فقط در صورتی که محتوا از max-height بیشتر باشد */
    overflow-y: auto;
    
    /* پدینگ فقط در حالت باز اضافه می‌شود تا انیمیشن نرم شود */
    padding: 6px 0;
}

#sidebar-menu .menu-group-items li a {
    display: block; 
    padding: 8px 35px 8px 20px; /* کاهش پدینگ عمودی از 12px به 8px */
    text-decoration: none; white-space: nowrap;
    text-align: right; color: #001f5b; font-weight: bold;
}
#sidebar-menu .menu-group-items li a:hover { background-color: #e9ecef; }
#sidebar-menu .menu-group-items li a.active { background-color: #007bff; color: #ffffff; }

/* =================================================================
 * ===== BLOCK TO ADD: Correct Static Menu Link Styling        =====
 * ================================================================= */
/* این استایل‌ها ظاهر لینک‌های استاتیک را با هدرهای دیگر هماهنگ می‌کند */
#sidebar-menu .menu-group-header.static-link {
    display: flex;
    align-items: center;
    padding: 14px 20px; /* پدینگ مشابه هدرهای دیگر */
    text-decoration: none;
    color: white;
}

#sidebar-menu .menu-group-header.static-link .menu-group-title {
    flex-grow: 1; /* اجازه می‌دهد عنوان فضای خالی را پر کند */
}
/* =====================================================================
 * ===== BLOCK REPLACEMENT: Polished Data Generator Form Styling   =====
 * ===================================================================== */

/* کانتینر اصلی فرم - کمی کوچک‌تر */
#data-generator-area {
    max-width: 550px; /* <--- کوچک‌تر شد */
    margin: 40px auto;
    padding: 25px 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fdfdfd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#data-generator-area h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: #333;
    font-size: 1.5em;
}

#data-generator-form div {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

#data-generator-form label {
    font-weight: bold;
    color: #555;
    flex-basis: 180px; /* <--- کمی کوچک‌تر شد */
    flex-shrink: 0;
    text-align: left;
}

#data-generator-form select,
#data-generator-form input[type="number"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* حالت اجرا: فونت بولد و عرض متناسب با محتوا */
#data-generator-form select#run_mode {
    font-weight: bold; /* <--- بولد شد */
    flex-grow: 1;
}

/* تعداد پروژه: عرض بسیار کوچک */
#data-generator-form input#target_project_count {
    width: 100px; /* <--- بسیار کوچک شد */
    flex-grow: 0;
    text-align: center;
}

#data-generator-form select:focus,
#data-generator-form input[type="number"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* دکمه "شروع عملیات" - کمی کوچک‌تر */
#start-data-gen-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px; /* <--- کوچک‌تر شد */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em; /* <--- کوچک‌تر شد */
    font-weight: bold;
    display: block;
    width: 100%;
    margin-top: 20px;
    transition: background-color 0.2s;
}
#start-data-gen-btn:hover {
    background-color: #218838;
}

/* ... بقیه استایل‌های نتایج و لاگ‌ها بدون تغییر باقی می‌مانند ... */
#data-generator-results { margin-top: 30px; padding-top: 20px; border-top: 1px dashed #ccc; }
#data-generator-results h3, #data-generator-results h4 { color: #444; margin-bottom: 10px; }
#data-generator-message { font-weight: bold; padding: 12px; border-radius: 4px; margin-bottom: 15px; border: 1px solid transparent; }
#data-generator-message.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
#data-generator-message.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
#data-generator-logs { max-height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; background-color: #fff; white-space: pre-wrap; font-family: monospace; font-size: 0.9em; direction: ltr; text-align: left; border-radius: 4px; }

/* ===================================================================== */
/* ===== BLOCK REPLACEMENT: Larger and Bolder Button Text        ===== */
/* ===================================================================== */
/* --- استایل دکمه‌های اصلی --- */
.backup-actions .action-btn-green,
.backup-actions .action-btn-gray {
    padding: 10px 22px; /* <--- پدینگ بیشتر برای بزرگتر شدن دکمه */
    border: none;
    border-radius: 5px;
    font-size: 15px;    /* <--- اندازه فونت کمی بزرگتر */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin: 0 5px;
    letter-spacing: 0.5px; /* <--- کمی فاصله بین حروف برای خوانایی بهتر */
}

.backup-actions .action-btn-green:hover,
.backup-actions .action-btn-gray:hover {
    transform: translateY(-1px);
}

.backup-actions .action-btn-green {
    background-color: #28a745;
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.4);
}
.backup-actions .action-btn-green:hover {
    background-color: #218838;
}

.backup-actions .action-btn-gray {
    background-color: #6c757d;
    color: white;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.4);
}
.backup-actions .action-btn-gray:hover {
    background-color: #5a6268;
}

/* --- استایل پیغام وضعیت --- */
#backup-status-message {
    font-weight: bold;
    padding: 12px 15px;
    border-radius: 5px;
    margin: 15px 0;
    border: 1px solid transparent;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#backup-status-message.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}
#backup-status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
#backup-status-message.info {
    background-color: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

/* ===================================================================== */
/* ===== BLOCK REPLACEMENT: Final Clean & Responsive Table CSS   ===== */
/* ===================================================================== */

/* --- محدود کردن عرض کل بخش مدیریت بکاپ --- */
#backup-manager-area .backup-list-container {
    max-width: 950px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow-x: auto; /* اسکرول افقی در صورت نیاز شدید */
}

/* --- وسط‌چین کردن تیتر لیست --- */
#backup-manager-area h3 {
    text-align: center;
    padding: 10px;
    margin-bottom: 0;
}

/* --- استایل جدول و ستون‌ها --- */
#backup-list-table {
    width: 100%;
    border-collapse: collapse;
}

#backup-list-table th {
    background-color: #f2f2f2;
    padding: 10px 8px;
    font-weight: bold;
    text-align: center;
    /* white-space: nowrap; حذف شد تا تیترها در موبایل بشکنند */
}

#backup-list-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    vertical-align: middle; /* تراز عمودی محتوای سلول‌ها */
}

#backup-list-table tr:last-child td {
    border-bottom: none;
}

/* استفاده از سلکتور با اولویت بالا برای اطمینان از اعمال عرض */
#backup-manager-area .backup-list-container #backup-list-table .operations-column {
    width: 90px;
}

#backup-manager-area .backup-list-container #backup-list-table .backup-size {
    width: 130px;
    text-align: left;
    direction: ltr;
}

#backup-manager-area .backup-list-container #backup-list-table .backup-date {
    width: 200px;
    text-align: center;
    direction: ltr;
}

#backup-manager-area .backup-list-container #backup-list-table .backup-filename {
    text-align: left;
    direction: ltr;
    /* تضمین شکستن خطوط طولانی در تمام شرایط */
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ===================================================================== */
/* ===== Restore View Specific Styles (v2 - Replacement)         ===== */
/* ===================================================================== */

.restore-warning-box.critical {
    background-color: #f8d7da; /* قرمز هشدار */
    color: #721c24;
    border: 1px solid #f5c2c7;
    border-radius: 5px;
    padding: 15px 20px;
    margin: 20px auto;
    max-width: 950px;
    text-align: center;
}

.restore-warning-box.critical p {
    margin: 0;
    line-height: 1.7;
    font-weight: bold; /* فونت بولد */
}

/* وسط چین کردن تیتر لیست بازیابی */
.restore-list-title {
    text-align: center;
}

/* ===================================================================== */
/* ===== Restore View Table Styles (v3 - Replacement)            ===== */
/* ===================================================================== */
/* اصلاح عرض ستون‌ها فقط برای جدول بازیابی */
.restore-table .operations-column {
    width: 60px !important;
}

.restore-table .backup-size {
    width: 110px !important;
    text-align: left;
    direction: ltr !important; /* <<< اصلاح کلیدی برای نمایش صحیح حجم */
}

.restore-table .backup-date {
    width: 170px !important; /* <<< افزایش عرض ستون تاریخ */
    text-align: center;
    direction: ltr;
}

/* <<< بلوک جدید برای تراز نام فایل */
.restore-table .backup-filename {
    text-align: left;
    direction: ltr;
}

/* ===================================================================== */
/* ===== SweetAlert Custom Styles for Restore Dialog             ===== */
/* ===================================================================== */

.swal-restore-info {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    text-align: center; /* <<< محتوا را وسط چین می‌کند */
}

.swal-restore-info span {
    display: block; /* هر آیتم در یک خط جداگانه */
    margin-bottom: 5px;
    font-size: 1.1em; /* کمی بزرگتر */
    color: #333;
}

.swal-restore-info span:last-child {
    margin-bottom: 0;
}

.swal-restore-info strong {
    font-weight: bold; /* اطمینان از بولد بودن */
    color: #000;
}

/* ===================================================================== */
/* ===== Final Restore & Swal Styles (v3 - Add to end)           ===== */
/* ===================================================================== */

/* وسط چین کردن کل کانتینر صفحه بازیابی */
#restore-manager-area {
    margin: 0 auto;
    max-width: 950px; /* حداکثر عرض */
}

/* بولد کردن متن دکمه های SweetAlert */
.swal-button-bold {
    font-weight: bold !important;
}

/* ================================================================= */
/* ===== BLOCK TO ADD: Final Parent Project Title Styles       ===== */
/* ================================================================= */
.parent-project-title {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #495057;
    margin-top: 20px;
    margin-bottom: -10px; /* <<-- نکته کلیدی: عنوان را به جدول نزدیک‌تر می‌کند */
    padding-bottom: 5px;
}

/* ============================================================================== */
/* استایل‌های مربوط به پنجره پیشرفت چاپ تجمیعی */
/* ============================================================================== */
.swal-progress-container {
    height: 10px;
    width: 100%;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin: 15px 0;
}

.swal-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #28a745; /* سبز */
    transition: width 0.2s ease-in-out;
}

/* ============================================================================== */
/* استایل‌های مودال اختصاصی پیشرفت */
/* ============================================================================== */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* لایه پس‌زمینه */
}

.custom-modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative; /* برای ایجاد stacking context جدید */
    z-index: 1001; /* بالاتر از پس‌زمینه خود قرار می‌گیرد */
}

.custom-modal-content h3 {
    margin-top: 0;
    color: #333;
}

.custom-modal-content p {
    color: #555;
    margin-bottom: 20px;
}

.modal-cancel-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.modal-cancel-btn:hover {
    background-color: #ff8c00; /* نارنجی پررنگ */
}