/* wwwroot/css/content-sources.css */

:root {
    --primary: #1a56db; --primary-light: #e8f0fd; --primary-dark: #1341b0;
    --success: #0d9f6e; --success-light: #e3f8f0;
    --warning: #c27803; --warning-light: #fdf3e0;
    --danger: #c81e1e;  --danger-light: #fde8e8;
    --info: #0694a2;    --info-light: #e0f7f9;
    --ai: #7c3aed;      --ai-light: #ede9fe;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
    --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
    --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;
    --font: 'Vazirmatn', sans-serif;
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12); --transition: .15s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--gray-50);
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ─── Layout ─── */
.page-wrapper { max-width: 1200px; margin: 0 auto; padding: 24px; }
.page-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title   { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.page-sub     { font-size: 13px; color: var(--gray-400); margin-top: 3px; }
.header-actions { display: flex; gap: 8px; }

/* ─── Filter bar ─── */
.filter-bar {
    padding: 14px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-select { width: auto; font-size: 13px; }

/* ─── Buttons ─── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all var(--transition);
    border: 1px solid transparent; white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary  { background: var(--primary);      color: #fff;              border-color: var(--primary); }
.btn-primary:hover:not(:disabled)  { background: var(--primary-dark); }
.btn-secondary{ background: #fff;                color: var(--gray-700);   border-color: var(--gray-200); }
.btn-secondary:hover:not(:disabled){ background: var(--gray-50); border-color: var(--gray-300); }
.btn-ai       { background: var(--ai);           color: #fff;              border-color: var(--ai); }
.btn-ai:hover:not(:disabled)       { background: #6d28d9; }
.btn-ghost    { background: transparent;         color: var(--gray-500);   border-color: transparent; }
.btn-ghost:hover:not(:disabled)    { background: var(--gray-100); color: var(--gray-800); }
.btn-danger   { background: var(--danger-light); color: var(--danger);     border-color: var(--danger); }
.btn-sm       { padding: 4px 10px; font-size: 12px; }
.btn-icon     { padding: 6px; }
.btn .ti      { font-size: 14px; }

/* ─── Badges ─── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-primary  { background: var(--primary-light); color: var(--primary); }
.badge-success  { background: var(--success-light); color: var(--success); }
.badge-warning  { background: var(--warning-light); color: var(--warning); }
.badge-danger   { background: var(--danger-light);  color: var(--danger); }
.badge-info     { background: var(--info-light);    color: var(--info); }
.badge-gray     { background: var(--gray-100);      color: var(--gray-600); }
.badge-ai       { background: var(--ai-light);      color: var(--ai); }

/* ─── Card ─── */
.card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }

/* ─── Forms ─── */
.form-control {
    width: 100%; padding: 7px 11px;
    border: 1px solid var(--gray-300); border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13px; color: var(--gray-800); background: #fff;
    transition: border var(--transition);
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.1); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-group   { margin-bottom: 14px; }
.form-label   { display: block; font-size: 12px; font-weight: 500; color: var(--gray-600); margin-bottom: 5px; }
.form-label .req { color: var(--danger); }

/* Grid helper برای فرم‌های ۲ ستونه */
.cs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ─── Search Box ─── */
.search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-md); padding: 7px 12px;
    flex: 1; max-width: 320px;
}
.search-box input { background: transparent; border: none; outline: none; font-family: var(--font); font-size: 13px; color: var(--gray-800); width: 100%; }
.search-box input::placeholder { color: var(--gray-400); }
.search-box .ti { color: var(--gray-400); font-size: 16px; }

/* ─── Tag chip (۲۹ اوت ۲۰۲۶، بازسازی کامل) ─── */
.tag-chip {
    background: var(--primary-light); color: var(--primary); padding: 3px 6px 3px 10px;
    border-radius: 20px; font-size: 11.5px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px;
}
.tag-chip-remove {
    border: none; background: rgba(255,255,255,.6); color: var(--primary); cursor: pointer;
    width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    transition: background .15s ease;
}
.tag-chip-remove:hover { background: #fff; }
.tag-input-box {
    min-height: 36px; border: 1px dashed var(--gray-300); border-radius: var(--radius-md);
    padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.tag-input-box:empty::before {
    content: "هنوز برچسبی اضافه نشده"; font-size: 11.5px; color: var(--gray-400);
}
.tag-add-row { display: flex; gap: 8px; margin-top: 8px; }
.tag-add-row .tag-input { flex: 1; }
.tag-input {
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 7px 10px; font-size: 12.5px; color: var(--gray-700); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tag-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ─── Data Table ─── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    padding: 9px 14px; text-align: right;
    font-size: 11px; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
}
.data-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gray-50); }

/* ─── Progress bar ─── */
.progress-bar { height: 6px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width .4s; }

/* ─── Pagination ─── */
.pagination-bar {
    padding: 12px 16px; border-top: 1px solid var(--gray-100);
    display: flex; justify-content: flex-end; align-items: center; gap: 4px;
}
.page-btn {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    cursor: pointer; font-size: 13px; transition: all var(--transition);
}
.page-btn:hover:not(.active):not(.disabled) { background: var(--gray-50); }
.page-btn.active  { border-color: var(--primary); background: var(--primary); color: #fff; }
.page-btn.disabled { opacity: .4; cursor: default; }

/* ─── Bulk action bar ─── */
.bulk-action-bar {
    margin-top: 12px; padding: 10px 16px; background: var(--primary-light);
    border: 1px solid var(--primary); border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 10px;
}

/* ─── Section title ─── */
.section-title {
    font-size: 11px; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 18px 0 10px; display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--gray-200); }

/* ─── Info box ─── */
.info-box { padding: 9px 12px; border-radius: var(--radius-md); font-size: 12px; display: flex; gap: 8px; align-items: flex-start; }
.info-box.info    { background: var(--info-light);    color: var(--info); }
.info-box.warning { background: var(--warning-light); color: var(--warning); }
.info-box.success { background: var(--success-light); color: var(--success); }
.info-box.ai      { background: var(--ai-light);      color: var(--ai); }

/* ─── Modal ─── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    width: 720px; max-width: 96vw; max-height: 90vh;
    display: flex; flex-direction: column; transform: translateY(8px); transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-full  { width: 960px; }
.modal-header{ padding: 18px 24px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.modal-title { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.modal-body  { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer{ padding: 14px 24px; border-top: 1px solid var(--gray-200); display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ─── Detail modal body grid ─── */
.detail-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ─── Content tabs ─── */
.content-tabs { display: flex; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.content-tab  { flex: 1; padding: 8px; text-align: center; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; color: var(--gray-500); }
.content-tab:not(:last-child) { border-left: 1px solid var(--gray-200); }
.content-tab.active { background: var(--info-light); color: var(--info); }

/* ─── XOR Selector ─── */
.xor-selector { display: flex; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.xor-option   { flex: 1; padding: 8px; text-align: center; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; color: var(--gray-500); }
.xor-option:not(:last-child) { border-left: 1px solid var(--gray-200); }
.xor-option.active  { background: var(--primary-light); color: var(--primary); }
.xor-option:hover:not(.active) { background: var(--gray-50); }

/* ─── File drop zone ─── */
.file-drop-zone {
    border: 2px dashed var(--gray-200); border-radius: var(--radius-lg);
    padding: 28px; text-align: center; color: var(--gray-400);
}

/* ─── Question type chip ─── */
.type-chip {
    display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer;
    padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 20px;
}

/* ─── AI output item ─── */
.ai-output-item {
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 12px; margin-bottom: 8px; transition: border .2s;
}
.ai-output-item.selected { border-color: var(--primary); background: var(--primary-light); }
.ai-output-item .q-text  { font-size: 13px; font-weight: 500; color: var(--gray-900); margin-bottom: 6px; cursor: pointer; }

/* ─── نمایش گزینه‌ها/پاسخ صحیح (۳۰ اوت ۲۰۲۶) ─── */
.ai-options-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; padding-right: 4px; }
.ai-option-row {
    display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-600);
    padding: 4px 8px; border-radius: var(--radius-sm);
}
.ai-option-row .ti { font-size: 14px; color: var(--gray-300); flex-shrink: 0; }
.ai-option-row.correct { background: var(--success-light); color: var(--success); font-weight: 600; }
.ai-option-row.correct .ti { color: var(--success); }
.ai-no-structured-answer {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray-400);
    margin: 6px 0; font-style: italic;
}

/* ─── Confidence bar ─── */
.confidence-bar { display: flex; align-items: center; gap: 8px; }
.confidence-bar .bar  { flex: 1; height: 4px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.confidence-bar .fill { height: 100%; background: var(--success); border-radius: 4px; }

/* ─── Content preview (detail modal) ─── */
.content-preview {
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 16px; background: var(--gray-50);
    font-size: 13px; line-height: 1.8; color: var(--gray-700);
    max-height: 280px; overflow-y: auto;
}

/* ─── Mapping info box ─── */
.mapping-info-box {
    border: 1px solid var(--success); background: var(--success-light);
    border-radius: var(--radius-md); padding: 10px 12px;
}

/* ─── Linked questions list ─── */
.linked-questions-list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.linked-question-row {
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 10px 12px; display: flex; justify-content: space-between; align-items: center;
}

/* ─── AI model info box ─── */
.ai-model-info {
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; color: var(--gray-600);
}

/* ─── Toast ─── */
.toast-container { position: fixed; bottom: 24px; left: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--gray-900); color: #fff; border-radius: var(--radius-lg); font-size: 12px; box-shadow: var(--shadow-lg); animation: slideUp .2s; min-width: 240px; }
.toast.success { background: var(--success); }
.toast.danger  { background: var(--danger); }

/* ─── Animations ─── */
@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin     { from { transform: rotate(0deg); }               to { transform: rotate(360deg); } }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 8px; }

/* ════════════════════════════════════════
   RESPONSIVE PATCH
   ════════════════════════════════════════ */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    .page-wrapper { padding: 14px 12px; }
    .page-header  { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
    .page-title   { font-size: 17px; }
    .header-actions { width: 100%; }

    .filter-bar { padding: 10px 12px; gap: 8px; }
    .search-box { max-width: 100%; flex: 1 1 100%; order: -1; }
    .filter-select { flex: 1 1 calc(50% - 4px); width: auto !important; font-size: 12px; }

    .data-table { min-width: 560px; }
    .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; }

    .pagination-bar { flex-wrap: wrap; justify-content: center; gap: 4px; }

    /* modal → bottom sheet */
    .modal-overlay { align-items: flex-end; }
    .modal, .modal-full {
        width: 100% !important; max-width: 100% !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 92vh;
    }
    .modal-header { padding: 12px 16px; }
    .modal-body   { padding: 16px; }
    .modal-footer { padding: 10px 16px; flex-wrap: wrap; gap: 6px; }
    .modal-footer .btn { flex: 1; justify-content: center; }

    /* grid → single column */
    .cs-form-grid, .detail-body-grid { grid-template-columns: 1fr !important; }

    /* xor selector: wrap */
    .xor-selector { flex-wrap: wrap; }
    .xor-option   { flex: 1 1 30%; padding: 7px 4px; font-size: 11px; }

    /* content tabs: scroll */
    .content-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .content-tabs::-webkit-scrollbar { display: none; }
    .content-tab  { white-space: nowrap; font-size: 11px; }

    /* linked questions: stack */
    .linked-question-row { flex-direction: column; align-items: flex-start; gap: 6px; }

    .toast-container { left: 10px; right: 10px; bottom: 12px; }
    .toast { min-width: unset; width: 100%; }
}

@media (max-width: 480px) {
    .page-wrapper { padding: 10px; }
    .page-title   { font-size: 15px; }
    .data-table th, .data-table td { padding: 7px 8px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   qb-load-error — بنر خطای بارگذاری، مشترک بین همه‌ی ۷ صفحه‌ی
   مخزن سوالات (۲۹ اوت ۲۰۲۶، طبق بازبینی کامل ماژول: «راه‌حلی برای
   نمایش خطاها به ادمین»). قبلاً هر صفحه (اگه اصلاً مدیریت خطا
   داشت) با یه توست یا سکوت کامل خطا رو مخفی می‌کرد؛ الان همه‌جا
   همین یه بنر یکسان، با متن دقیق خطا و دکمه‌ی «تلاش دوباره».
   ══════════════════════════════════════════════════════════════ */
.qb-load-error {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--danger-light); border: 1px solid var(--danger);
    border-radius: var(--radius-lg); padding: 14px 16px; margin: 12px 0;
    color: var(--danger); font-size: 13px; line-height: 1.9;
}
.qb-load-error > i { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.qb-load-error > div { flex: 1; }
.qb-load-error-detail {
    margin-top: 4px; font-family: monospace; font-size: 11.5px;
    color: var(--gray-700); word-break: break-word;
}
.qb-load-error > button { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   qb-searchable-select — نگاه کنید به فایل قالب مشترک، پایین همین
   فایل اضافه شده (۲۹ اوت ۲۰۲۶).
   ══════════════════════════════════════════════════════════════ */

/* بنر خطای اعتبارسنجی فرم (۲۹ اوت ۲۰۲۶) — برای وقتی کاربر فیلد الزامی رو خالی می‌ذاره،
   به‌جای بی‌صدا نادیده‌گرفتن، یه پیام واضح نشون داده بشه. */
.cs-validation-error {
    display: flex; align-items: center; gap: 8px;
    background: var(--danger-light); border: 1px solid var(--danger);
    border-radius: var(--radius-md); padding: 10px 14px; margin: 0 20px 12px;
    color: var(--danger); font-size: 12.5px;
}
.cs-validation-error > i { font-size: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   qb-searchable-select — استایل کامل و حرفه‌ای (۲۹ اوت ۲۰۲۶، طبق
   درخواست کاربر: «آپشن‌ها بدون border، بکگراند و استایل — روی UX
   این قسمت بیشتر کار کن»). این کامپوننت در چند صفحه‌ی مختلف مخزن
   سوالات استفاده می‌شه (منبع محتوا، ورود دستی سوال، ویرایشگر
   ترکیبی) — برای همین این استایل عمداً در چند فایل CSS تکرار شده،
   تا مستقل از اینکه کدوم صفحه‌ی خاص بارگذاری شده، همیشه درست
   نمایش داده بشه.
   ══════════════════════════════════════════════════════════════ */
.qb-searchable-select { position: relative; }
.qb-searchable-select input[type="text"] {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 8px 12px; font-size: 12.5px; color: var(--gray-700);
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.qb-searchable-select input[type="text"]:hover:not(:disabled) { border-color: var(--gray-300, #d1d5db); }
.qb-searchable-select input[type="text"]:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.qb-searchable-select input[type="text"]:disabled {
    background: var(--gray-50); color: var(--gray-400, #9ca3af); cursor: not-allowed;
}
.qb-searchable-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 200;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.12));
    max-height: 240px; overflow-y: auto; padding: 4px;
}
.qb-searchable-option {
    padding: 8px 10px; font-size: 12.5px; color: var(--gray-700); cursor: pointer;
    border-radius: var(--radius-sm, 6px); transition: background .12s ease, color .12s ease;
}
.qb-searchable-option + .qb-searchable-option { margin-top: 2px; }
.qb-searchable-option:hover { background: var(--primary-light); color: var(--primary); }
.qb-searchable-option.selected { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.qb-searchable-no-match { padding: 14px 10px; font-size: 12px; color: var(--gray-400, #9ca3af); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }