/* 1. استيراد الخط (يجب أن يكون في السطر الأول حصراً) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* 2. المتغيرات العامة (تطبيق اللون الأزرق #333399) */
:root {
    --accent-color-rgb: 51, 51, 153;
    --primary-color: #333399; /* Blue Pigment */
    --secondary-color: #f0f2f5; 
    --accent-color: #333399; /* Blue Pigment للأزرار */
    --text-color: #343a40;
    --light-text-color: #ffffff;
    --border-color: #e9ecef;
    --danger-color: #dc3545;
    --success-color: #28a745;
    --hover-dark-blue: #222266;
    --hover-bright-blue: #4444aa;
    --disabled-color: #ced4da;
    --sidebar-bg: #333399; /* الخلفية الجانبية */
    --sidebar-text: #e9ecef;
    --sidebar-hover-bg: #2a2a80;
    --sidebar-active-bg: #222266;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --input-bg: #ffffff;
    --output-bg: #ffffff;
    --suggestion-bg: #eef5ff;
    --link-color: #333399;
    --sidebar-width: 280px;
}

/* 3. فرض الخط والتنسيق (Force Style) */
* {
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif !important; /* الخط الموحد */
    border-radius: 4px; /* توحيد الحواف */
}

body, html {
    height: 100%;
    font-size: 16px;
    margin: 0;
    background-color: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    display: flex; /* ضروري للتخطيط */
}

/* تأكيد إضافي للعناصر */
h1, h2, h3, h4, h5, h6, input, button, select, textarea, .nav-btn {
    font-family: 'Tajawal', sans-serif !important;
}
mily: 'Tajawal', sans-serif !important;
}
/* --- App Layout --- */
.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* --- Sidebar Navigation --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    right: 0; /* Positioned right for RTL */
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}
[dir="ltr"] .sidebar {
    right: auto;
    left: 0; /* Position left for LTR */
}

.sidebar-header {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}
.sidebar-logo { font-size: 2em; margin-left: 15px; }
[dir="ltr"] .sidebar-logo { margin-left: 0; margin-right: 15px; }
.sidebar-header h2 { margin: 0; font-size: 1.15em; font-weight: 600; white-space: nowrap; }

.nav-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.nav-list li { margin: 0; }
.nav-btn {
    display: flex; align-items: center; width: 100%;
    padding: 15px 25px; border: none; background-color: transparent;
    color: var(--sidebar-text); font-weight: 500; font-size: 1em;
    text-align: right; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
    border-right: 4px solid transparent; /* RTL active indicator */
}
[dir="ltr"] .nav-btn { text-align: left; border-right: none; border-left: 4px solid transparent; } /* LTR active indicator */

.nav-btn i {
    margin-left: 15px; width: 22px; text-align: center;
    font-size: 1.1em; opacity: 0.7; transition: opacity 0.2s;
}
[dir="ltr"] .nav-btn i { margin-left: 0; margin-right: 15px; }
.nav-btn:hover { background-color: var(--sidebar-hover-bg); }
.nav-btn.active {
    background-color: var(--sidebar-hover-bg);
    color: var(--light-text-color); font-weight: 600;
    border-right-color: var(--accent-color);
}
[dir="ltr"] .nav-btn.active { border-left-color: var(--accent-color); border-right-color: transparent; }
.nav-btn.active i { opacity: 1; }

.sidebar-footer { padding: 15px 25px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.login-btn {
    justify-content: center; margin-bottom: 15px; border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.05); border: none !important;
}
.login-btn:hover { background-color: rgba(255, 255, 255, 0.1); }

.lang-switch-container { display: flex; }
.lang-btn {
    padding: 9px 0; flex: 1; border: none; background: transparent;
    color: var(--sidebar-text); cursor: pointer; transition: all 0.2s ease;
    font-size: 0.9em; font-weight: 500; opacity: 0.7; border-radius: 5px; margin: 0 3px;
}
.lang-btn.active { font-weight: bold; opacity: 1; }
.lang-ar.active { background-color: #5f9ea0; color: white; } /* Olive-ish */
.lang-en.active { background-color: #87ceeb; color: var(--primary-color); } /* Sky Blue */

/* --- Main Content Area --- */
.main-content {
    flex-grow: 1; padding: 35px 40px; /* زيادة التباعد */
    margin-right: var(--sidebar-width); margin-left: 0;
    transition: margin-right 0.3s ease;
}
[dir="ltr"] .main-content {
    margin-right: 0; margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
}

/* === 1. تم إصلاح الخطأ الإملائي هنا === */
.view { display: none; /* مخفي افتراضيًا */ }
.view.active { display: block; } /* إظهار الواجهة النشطة */
/* (تم حذف القوس الزائد '}' من هنا) */

/* === 2. تم إضافة الكلاس المفقود هنا === */
.hidden {
    display: none !important;
}

.view h2 { /* View Titles */
    color: var(--primary-color); margin-top: 0; margin-bottom: 30px;
    padding-bottom: 15px; border-bottom: 1px solid var(--border-color);
    font-size: 1.8em; font-weight: 600;
}
/* --- Welcome View --- */
#welcome-view { padding-top: 20px; }
.instructions {
    max-width: 800px; margin: 20px 0; /* Align left/right */
    background-color: #fff; padding: 30px; border-radius: 8px;
    box-shadow: var(--box-shadow); border: 1px solid var(--border-color);
}
[dir="ltr"] .instructions { text-align: left; }
.instructions h3 { margin-top: 0; color: var(--primary-color); margin-bottom: 20px; }
.instructions ul { list-style: none; padding: 0; }
.instructions li { margin-bottom: 15px; padding-right: 30px; position: relative; }
[dir="ltr"] .instructions li { padding-right: 0; padding-left: 30px; }
.instructions li::before {
    content: "\f138"; /* Font Awesome check or arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute; right: 0; top: 3px; color: var(--accent-color);
    font-size: 1.1em;
}
[dir="ltr"] .instructions li::before { right: auto; left: 0; }
.instructions p { margin-top: 25px; color: #6c757d; font-size: 0.95em; }

/* --- Input & Query Sections --- */
.input-section, .query-section, .translate-options, .links-section, .specific-source-form {
    background-color: var(--input-bg); padding: 25px; border-radius: 8px;
    box-shadow: var(--box-shadow); margin-bottom: 30px; border: 1px solid var(--border-color);
}
.main-textarea, .query-textarea {
    width: 100%; padding: 15px; border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 1rem; margin-bottom: 15px; box-sizing: border-box; resize: vertical;
    background-color: #fcfdff;
}
/* Large Rectangular Text Area (توحيد الحجم مثل واجهة الترجمة) */
.input-section.large-input { 
    display: flex; 
    flex-direction: column; 
    height: auto; 
    min-height: 60vh !important; /* ارتفاع موحد ومريح (60% من الشاشة) */
}
.large-input .main-textarea {
    min-height: 300px !important; /* حد أدنى للارتفاع للقراءة المريحة */
    flex-grow: 1; /* التمدد لملء الفراغ المتبقي */
    margin-bottom: 15px;
}
.file-upload { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.file-label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; background: var(--secondary-color); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: 5px; cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s;
    font-size: 0.9em; font-weight: 500;
}
.file-label:hover { background-color: #e9ecef; border-color: #adb5bd; }
.file-label i { color: var(--accent-color); }
.file-name { font-size: 0.9em; color: #6c757d; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#file-input, #analyze-file-input, #translate-file-input, #case-docs-input { display: none; }

/* --- Buttons --- */
.ai-actions { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
.submit-button, .secondary-button, .ai-action-button {
    display: inline-flex; align-items: center; gap: 8px; /* لتوسيط الأيقونة والنص */
    padding: 12px 22px; border: none; border-radius: 6px; cursor: pointer;
    font-size: 1rem; font-weight: 600; transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.submit-button, .ai-action-button { background: var(--accent-color); color: var(--light-text-color); }
.submit-button:hover, .ai-action-button:hover { background: var(--hover-bright-blue); box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.ai-action-button:disabled { background: var(--disabled-color); cursor: not-allowed; opacity: 0.7; box-shadow: none; transform: none; }
.secondary-button { background-color: #6c757d; color: var(--light-text-color); }
.secondary-button:hover { background-color: #5a6268; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.db-search-buttons { display: flex; gap: 10px; margin-top: 15px; }

/* --- NEW: Professional Vertical Sources (تصميم هيئة التشريع #4b4a67) --- */
#folder-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* مسافة أنيقة */
    margin-bottom: 30px;
}

/* تصميم الشريط الأساسي */
.db-accordion {
    border: none;
    border-radius: 4px; /* حواف أقل استدارة لتبدو رسمية */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* رأس القائمة (اللون الذي استخرجته أنت) */
.db-accordion-header {
    width: 100%;
    padding: 14px 20px;
    background-color: #4b4a67; /* الكود الذي استخرجته */
    border: 1px solid #4b4a67;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
[dir="ltr"] .db-accordion-header { text-align: left; }

/* النصوص والأيقونات داخل الشريط (أبيض للتباين) */
.db-folder-title {
    font-size: 1.1rem; /* نفس الحجم الحالي */
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    /* [تعديل] فرض نفس نوع خط الواجهة الجانبية */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.accordion-icon {
    color: #ffffff; /* أيقونة بيضاء */
    font-size: 1rem;
    transition: transform 0.3s ease;
}
.header-actions { display: flex; align-items: center; gap: 15px; }
.db-accordion-header .add-file-btn {
    color: #ffffff; opacity: 0.8; transition: 0.2s;
}
.db-accordion-header .add-file-btn:hover { opacity: 1; transform: scale(1.1); }


/* --- حالة التحويم (Hover) --- */
.db-accordion-header:hover {
    background-color: #5a5978; /* درجة أفتح قليلاً للتفاعل */
    border-color: #5a5978;
}

/* --- القائمة المفتوحة (Active - التحول للبني الفاتح) --- */
.db-accordion-header.active {
    background-color: #fbf9f6; /* خلفية بيج فاتحة */
    border-color: #d2b48c; /* حدود بنية */
    border-bottom: 1px solid #eee;
}
.db-accordion-header.active .db-folder-title {
    color: #8b5e3c; /* النص يتحول للبني */
}
.db-accordion-header.active .accordion-icon {
    color: #8b5e3c; /* الأيقونة تتحول للبني */
    transform: rotate(180deg);
}
.db-accordion-header.active .add-file-btn {
    color: #8b5e3c;
}

/* محتوى القائمة */
.db-accordion-content {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    max-height: 600px;
    overflow-y: auto;
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* عناصر الملفات */
/* تنسيق شريط الملف (لون DBC2C8 المميز) */
.db-file-item {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.5); /* فاصل ناعم */
    display: flex; justify-content: space-between; align-items: center;
    transition: filter 0.2s;
    /* اللون المطلوب */
    background-color: #DBC2C8;
    margin-bottom: 5px; /* مسافة صغيرة بين الملفات */
    border-radius: 6px;
}
.db-file-item:last-child { border-bottom: none; margin-bottom: 0; }
.db-file-item:hover { filter: brightness(0.97); /* تأثير خفيف عند التحويم */ }

/* تحسين المربعات والعناوين */
.db-file-select { display: flex; align-items: center; gap: 12px; flex-grow: 1; cursor: pointer; }
.file-checkbox { width: 18px; height: 18px; accent-color: #333399; cursor: pointer; }
.db-file-title { 
    font-size: 1rem; font-weight: 700; 
    color: #4a3b3b; /* لون بني داكن ليتناسب مع الخلفية */
}

/* أزرار إجراءات الملف (مربعات نصية واضحة) */
.db-file-item .file-actions button {
    background: rgba(255,255,255,0.6); /* خلفية شبه شفافة */
    border: 1px solid rgba(0,0,0,0.1); 
    cursor: pointer;
    font-size: 0.8rem; 
    padding: 6px 12px; 
    margin-left: 8px;
    color: #333; 
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* مسافة بين الأيقونة والنص */
    transition: all 0.2s;
}
[dir="rtl"] .db-file-item .file-actions button { margin-left: 0; margin-right: 8px; }

.db-file-item .file-actions button:hover { 
    background-color: #fff; 
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: var(--primary-color);
}
/* تمييز زر الحذف عند التحويم */
.db-file-item .file-actions .delete-btn:hover { color: #dc3545; background-color: #ffebeb; }

.db-empty-folder-msg {
    padding: 20px; text-align: center; color: #999; font-style: italic;
}
/* --- Table for Legislations --- */
.legislation-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
.legislation-table th, .legislation-table td { border: 1px solid var(--border-color); padding: 8px; text-align: right; }
.legislation-table th { background-color: #f9f9f9; font-weight: bold; }
[dir="ltr"] .legislation-table th, [dir="ltr"] .legislation-table td { text-align: left; }
.legislation-table .file-actions { text-align: center; }

/* --- Legal Defenses Form --- */
.specific-source-form { border: 1px dashed var(--accent-color); padding: 20px; margin-top: 20px; margin-bottom: 20px; border-radius: 5px; background-color: #f8f9fa; }
.specific-source-form h4 { margin-top: 0; color: var(--primary-color); }
.specific-source-form label { display: block; margin-top: 12px; font-weight: bold; font-size: 0.9em; }
.specific-source-form select, .specific-source-form textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; font-size: 0.95rem; }
.specific-source-form button { margin-top: 15px; }
.small-upload { margin-top: 5px; }
.selected-sources { font-size: 0.9em; color: #555; margin-bottom: 20px; padding: 10px; background-color: #f0f0f0; border: 1px solid #eee; border-radius: 4px; }
#selected-sources-list { font-weight: bold; color: var(--primary-color); margin: 0 5px; }

/* --- Translate View --- */
.translate-flex-container { display: flex; gap: 25px; }
.translate-input { flex: 1; } .translate-output { flex: 1; }
.translate-options { display: flex; align-items: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
.translate-options label { font-weight: bold; }
.translate-options select { padding: 8px 12px; border-radius: 4px; border: 1px solid var(--border-color); font-size: 0.95rem; }
#translate-btn { margin-right: auto; } [dir="ltr"] #translate-btn { margin-right: 0; margin-left: auto; }

/* --- Links Sections --- */
.links-section { /* Shared style for important & user links */ }
.links-list { list-style: none; padding: 0; margin: 0; }
.links-list li { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px dotted #eee; }
.links-list li:last-child { border-bottom: none; }
.links-list a { color: var(--link-color); text-decoration: none; font-weight: 500; }
.links-list a:hover { text-decoration: underline; }
.link-info { font-size: 0.9em; color: #6c757d; margin-right: 15px; } [dir="ltr"] .link-info { margin-left: 15px; margin-right: 0;}
.add-link-form { display: flex; gap: 10px; margin-bottom: 25px; align-items: center; }
.add-link-form input[type="text"], .add-link-form input[type="url"] { flex-grow: 1; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.95rem; }
.add-link-form button.small-button { padding: 9px 15px; font-size: 0.95rem; }
.delete-link-btn { background: none; border: none; color: var(--danger-color); cursor: pointer; font-size: 1.2em; padding: 0 5px; transition: color 0.2s; }
.delete-link-btn:hover { color: #a51e2a; }

/* --- Login & Gazette Placeholders --- */
#login-view p, #gazette-view p { color: #6c757d; font-style: italic; }

/* --- NEW: Archive View (تصميم أرشيف البحث الجديد) --- */
.archive-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* مسافة بين العناصر */
}

/* تنسيق المستطيل الأفقي لكل ملف */
.archive-item {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s;
}
.archive-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* الجزء العلوي (العنوان والأزرار) */
.archive-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.archive-item-main .file-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-color);
}
.archive-item-main .file-actions button {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; padding: 6px; margin-left: 5px;
    color: #999; transition: all 0.2s;
}
[dir="rtl"] .archive-item-main .file-actions button { margin-left: 0; margin-right: 5px; }
.archive-item-main .file-actions button:hover { color: var(--primary-color); background-color: #e9ecef; border-radius: 4px; }
.archive-item-main .file-actions .delete-btn:hover { color: var(--danger-color); background-color: #fee2e2; }


/* الجزء السفلي (التصنيف) */
.archive-item-footer {
    padding: 10px 20px;
    background: #fcfcfc;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.archive-item-footer label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}
.classification-dropdown {
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: #fff;
    font-size: 0.9rem;
}

/* --- Results Area & Output Boxes --- */
.result-sub-area { margin-top: 30px; } 
.output-box {
    border: 1px solid var(--border-color); padding: 25px; border-radius: 8px;
    background: var(--output-bg); margin-bottom: 25px; position: relative;
    box-shadow: var(--box-shadow);
}
.output-box.result-box { min-height: 30vh; display: flex; flex-direction: column; }
.output-box h3, .output-box h4 {
    margin-top: 0; color: var(--primary-color); padding-top: 45px;
    margin-bottom: 15px; font-size: 1.3em; font-weight: 600;
}
.output-box .output-content, .output-box .analysis-text, .output-box p, .output-box pre {
    white-space: pre-wrap; word-wrap: break-word;
    font-size: 1rem; line-height: 1.7; margin: 0;
    flex-grow: 1; /* Make content area fill the box */
}
.result-actions { position: absolute; top: 18px; left: 18px; display: flex; gap: 8px; z-index: 10;}
.result-actions button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: 0.9em; background-color: var(--secondary-color);
    color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px;
    cursor: pointer; transition: all 0.2s; font-weight: 500;
}
.result-actions button:hover { background-color: #e2e6ea; border-color: #adb5bd;}
.result-actions button i { font-size: 1em; opacity: 0.9; }
[dir="ltr"] .result-actions { left: auto; right: 18px; }

/* --- Archive Box --- */
.archive-box { margin-top: 30px; padding: 20px; border: 1px dashed var(--border-color); border-radius: 5px; background-color: #f9f9f9; }
.archive-box h4 { margin-top: 0; padding-top: 0; color: var(--primary-color); font-weight: 600; font-size: 1.1em;}
#archive-list, #db-archive-list, #ai-search-archive-list, #analyze-archive-list { list-style: none; padding: 0; margin: 0; }
#archive-list li, #db-archive-list li, #ai-search-archive-list li, #analyze-archive-list li {
    margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee;
    font-size: 0.9em; line-height: 1.5;
}
#archive-list li:last-child, #db-archive-list li:last-child, #ai-search-archive-list li:last-child, #analyze-archive-list li:last-child { border-bottom: none; }
#archive-list strong, #db-archive-list strong, #ai-search-archive-list strong, #analyze-archive-list strong { color: var(--primary-color); display: block; margin-bottom: 3px; }
#archive-list small, #db-archive-list small, #ai-search-archive-list small, #analyze-archive-list small { color: #6c757d; display: block; margin-top: 5px; }
/* --- Loader & Modals --- */
.loader { border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 25px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: #fff; padding: 25px; border-radius: 8px; width: 90%; max-width: 550px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.modal-content h3 { margin-top: 0; color: var(--primary-color); }
.modal-content label { display: block; margin-top: 15px; font-weight: bold; font-size: 0.9em; }
.modal-content input, .modal-content select { width: 100%; padding: 10px; margin-top: 5px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; }
.modal-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions button { padding: 10px 18px; font-size: 0.95rem; }
.status-message { font-size: 0.9em; margin-top: 10px; color: var(--accent-color); font-style: italic; }

/* --- RTL Specific Styles --- */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .sidebar { right: 0; left: auto; }
[dir="rtl"] .main-content { margin-right: var(--sidebar-width); margin-left: 0; }
[dir="rtl"] .nav-btn i { margin-left: 12px; margin-right: 0; }
[dir="rtl"] .result-actions { left: 15px; right: auto; }
[dir="rtl"] .delete-link-btn { margin-right: auto; margin-left: 0; }
[dir="rtl"] .library-grid .file-icon { margin-right: 0; margin-left: 10px;}
[dir="rtl"] .query-options input[type="checkbox"] { margin-left: 8px; margin-right: 0; }
[dir="rtl"] #translate-btn { margin-right: 0; margin-left: auto; }
[dir="rtl"] .links-list li { text-align: right; }
[dir="rtl"] .folder-grid .folder-title { margin-right: 0; margin-left: 12px; }
[dir="rtl"] .file-list { padding-left: 0; padding-right: 25px; }
[dir="rtl"] .file-actions button { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .legislation-table th, [dir="rtl"] .legislation-table td { text-align: right; }
[dir="rtl"] .link-info { margin-left: 15px; margin-right: 0;}

/* --- Responsive --- */
@media (max-width: 992px) { /* Tablet */
    .sidebar { width: 240px; }
    .main-content { margin-right: 240px; } [dir="ltr"] .main-content { margin-left: 240px; }
    .folder-grid, .library-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .translate-flex-container { flex-direction: column; }
}
@media (max-width: 768px) { /* Mobile */
    body { flex-direction: column; }
    .sidebar {
        position: relative; width: 100%; height: auto;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 0;
    }
    .sidebar-header { display: none; } /* إخفاء الهيدر الجانبي في الموبايل */ 
    .nav-list {
        display: flex; overflow-x: auto; padding: 10px;
        background-color: var(--sidebar-hover-bg); white-space: nowrap;
        margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav-list li { flex-shrink: 0; }
    .nav-btn {
        padding: 10px 15px; border-radius: 5px; margin: 0 5px;
        font-size: 0.9em; border: none !important;
    }
     .nav-btn i { margin: 0 8px 0 0 !important; } [dir="rtl"] .nav-btn i { margin: 0 0 0 8px !important; }
    .nav-btn.active { background-color: var(--sidebar-active-bg); color: white; }
    .sidebar-footer { display: none; } /* إخفاء الفوتر الجانبي */
    .header-controls { margin-top: 0; } /* إظهار أزرار الهيدر العلوي */

    .main-content { margin-right: 0; margin-left: 0; padding: 20px 15px; }
    .view h2 { font-size: 1.5em; margin-bottom: 20px; }
    .input-section.large-input { height: 50vh; }
}
@media (max-width: 480px) {
    #app-container { padding: 10px; margin: 0; }
    .main-content { padding: 15px 10px; }
    .nav-btn { font-size: 0.85em; padding: 8px 12px; }
    .modal-content { padding: 15px; }
    .folder-grid, .library-grid { grid-template-columns: 1fr; }
    .ai-actions, .db-search-buttons { flex-direction: column; align-items: stretch; }
    .submit-button, .secondary-button, .ai-action-button { padding: 12px 18px; }
}
/* === 3. تم حذف جميع الكتل المكررة من النهاية === */
/* (أضف هذا في نهاية ملف style.css) */

/* 1. الخلفية الرمادية (الغطاء) */
.modal-overlay {
    position: fixed; /* يبقى ثابتاً حتى مع تمرير الصفحة */
    z-index: 1000; /* يجعله فوق كل شيء */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* للسماح بتمرير النافذة نفسها إذا كانت الشاشة صغيرة */
    background-color: rgba(0, 0, 0, 0.5); /* لون أسود نصف شفاف */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. المربع الأبيض (النافذة نفسها) */
.modal-content.large-modal {
    background-color: #ffffff;
    margin: auto;
    padding: 0; /* سنقسمه إلى header/body/footer */
    border: 1px solid #888;
    width: 80%; /* عرض النافذة */
    max-width: 900px; /* أقصى عرض */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column; /* لترتيب العناصر (header, body, footer) عمودياً */
}

/* 3. تنسيق رأس النافذة (العنوان وزر X) */
.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.modal-close-x {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close-x:hover,
.modal-close-x:focus {
    color: #000;
}


/* 4. تنسيق جسم النافذة (النص وشريط التمرير) - هذا هو الحل لمشكلتك */
.modal-body-scrollable {
    padding: 20px;
    max-height: 70vh; /* الأهم: أقصى ارتفاع 70% من ارتفاع الشاشة */
    overflow-y: auto; /* الأهم: إضافة شريط تمرير عمودي (الزر الجانبي) عند الحاجة */
    line-height: 1.6;
}
/* نستخدم <pre> للحفاظ على تنسيق النص والأسطر */
.modal-body-scrollable pre {
    white-space: pre-wrap; /* يسمح بكسر الأسطر الطويلة */
    word-wrap: break-word;
    margin: 0;
    font-family: inherit; /* ليرث الخط العادي بدلاً من خط الكود */
}


/* 5. تنسيق ذيل النافذة (زر الإغلاق) */
.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    text-align: left; /* ليتوافق مع الاتجاه من اليمين لليسار */
}

/* نستخدم نفس تصميم أزرار التطبيق */
.modal-footer .button {
    background-color: #6c757d; /* لون رمادي */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.modal-footer .button:hover {
    background-color: #5a6268;
}
/* --- NEW: Fullscreen Result Mode (تصميم تكبير النافذة) --- */
.output-box.fullscreen {
    position: fixed;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
    z-index: 9999; /* لضمان ظهوره فوق كل شيء */
    margin: 0 !important;
    overflow-y: auto; /* شريط تمرير خاص بالنافذة المكبرة */
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0,0,0,0.5); /* ظل قوي للتركيز */
    padding: 40px; /* مساحة قراءة مريحة */
}
/* تكبير زر الإغلاق في الوضع المكبر */
.output-box.fullscreen .close-result-btn {
    font-size: 2.5rem;
    top: 20px;
    left: 25px;
}
[dir="ltr"] .output-box.fullscreen .close-result-btn { left: auto; right: 25px; }

/* --- NEW: Inline Button Loader (دائرة التحميل الصغيرة بجانب الأزرار) --- */
/* سنقوم بإنشاء هذه الدائرة ديناميكياً بجانب الزر الذي يتم ضغطه */
.inline-loader {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(var(--accent-color-rgb), 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 12px; /* مسافة عن الزر */
    opacity: 1;
    transition: opacity 0.3s;
}
[dir="ltr"] .inline-loader { margin-right: 0; margin-left: 12px; }
/* --- تصميم أزرار الترجمة الخاص (جديد) --- */

/* زر الترجمة (مربع أزرق غامق، نص أبيض سميك، بدون أيقونة) */
/* زر الترجمة (مربع أزرق #333399، نص أبيض سميك) */
.translate-special-btn {
    background-color: #333399; /* Blue Pigment */
    color: #ffffff;
    font-weight: 800;
    border: none;
    border-radius: 4px;
    padding: 12px 35px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.translate-special-btn:hover {
    background-color: #2a2a80; /* أغمق قليلاً */
}
.translate-special-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
}
/* زر الجزء التالي (يظهر بجانب زر الترجمة - لون أخضر مميز) */
/* (مشترك للترجمة والتحليل) */
.next-part-btn {
    background-color: #28a745; /* أخضر */
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin: 0 10px; /* مسافة جانبية */
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    animation: pulse-green 2s infinite; /* تأثير النبض */
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* --- NEW: Manual Resizing Features (تفعيل التكبير اليدوي بالماوس) --- */

/* 1. تفعيل السحب (المد والتعريض) للنوافذ المنبثقة */
.modal-content, .modal-content.modal-xl {
    resize: both; /* يسمح بالتكبير أفقياً وعمودياً */
    overflow: auto; /* ضروري لظهور مقبض السحب */
    min-width: 300px; /* أقل عرض مسموح */
    min-height: 200px; /* أقل ارتفاع مسموح */
    max-width: 98vw; /* لا يتجاوز عرض الشاشة */
    max-height: 98vh; /* لا يتجاوز ارتفاع الشاشة */
}

/* 2. تفعيل التكبير العمودي لصناديق النصوص والنتائج داخل الصفحة */
.output-box, .main-textarea, .query-textarea {
    resize: vertical; /* يسمح بالتكبير للأسفل (الأكثر عملية داخل الصفحة) */
    overflow: auto;
    min-height: 150px;
}

/* 3. تحسين شكل "مقبض السحب" في الزاوية (للمتصفحات الحديثة) */
::-webkit-resizer {
    background-color: transparent;
    border-bottom: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
}

/* --- تنسيق رأس "الملفات المرفوعة" (جديد) --- */
.user-files-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase; /* حروف كبيرة (للاتينية) أو تأكيد (للعربية) */
    letter-spacing: 0.5px;
    padding: 15px 20px 10px 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
    background: #fdfdfd; /* خلفية مميزة قليلاً */
}

/* تعديل بسيط لرسالة "فارغ" لتبدو أفضل مع الرأس */
.user-files-container .db-empty-folder-msg {
    padding-top: 10px;
    padding-bottom: 15px;
}

/* --- زر حذف الملف (بني فاتح) --- */
.delete-file-btn {
    background-color: #d2b48c; /* بني فاتح (Tan) */
    color: #fff;
    border: 1px solid #c19b6c;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.2s;
    margin-left: 10px; /* مسافة عن زر الرفع */
    display: inline-flex; align-items: center; gap: 5px;
}
[dir="rtl"] .delete-file-btn { margin-left: 0; margin-right: 10px; }

.delete-file-btn:hover {
    background-color: #c19b6c; /* بني أغمق قليلاً عند التحويم */
}
/* --- نظام المربع الذكي (Smart Resizable Box) --- */

/* 1. الحاوية القابلة للتحجيم */
.resizable-wrapper {
    position: relative;
    width: 100%; /* عرض كامل للحاوية */
    height: 400px; /* ارتفاع مبدئي */
    min-width: 300px;
    min-height: 200px;
    margin: 0 auto 20px auto; /* توسيط */
    background: #fff;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 2. مربع النص (مجبر على الامتثال) */
.smart-textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none !important; /* إلغاء تحجيم المتصفح الافتراضي */
    padding: 20px;
    font-family: 'Tajawal', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    border-radius: 8px;
    /* --- السر لمنع شريط التمرير الأفقي --- */
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* 3. المقابض (Handles) */
.resizer-handle {
    position: absolute;
    background-color: transparent;
    z-index: 10;
}
.resizer-r { right: -5px; top: 0; width: 15px; height: 100%; cursor: col-resize; }
.resizer-l { left: -5px; top: 0; width: 15px; height: 100%; cursor: col-resize; }
.resizer-b { bottom: -5px; left: 0; width: 100%; height: 15px; cursor: row-resize; }

.resizer-handle:hover { background-color: rgba(51, 51, 153, 0.2); } /* لون أزرق خفيف عند اللمس */

/* 4. الأدوات الداخلية (أيقونات الرفع) */
.inner-tools {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.9);
    padding: 5px;
    border-radius: 20px;
    border: 1px solid #eee;
}
.icon-btn { cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 5px; background:none; border:none; }
.file-name-small { font-size: 0.8rem; color: #666; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.loader-small { width: 15px; height: 15px; border: 2px solid #ccc; border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; }
/* --- تصميم لوحة التحكم الاحترافية (الواجهة الرئيسية الجديدة) --- */

/* 1. الحاوية الرئيسية (تقسيم الشاشة) */
.welcome-dashboard-layout {
    display: flex;
    gap: 30px;
    align-items: stretch; /* لضمان تساوي الارتفاع */
    min-height: 60vh;
}

/* 2. القسم الأيمن (المحتوى) */
.welcome-content-side {
    flex: 3; /* يأخذ 75% من العرض تقريباً */
    display: flex;
    flex-direction: column;
}

.welcome-header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
}
.welcome-header h1 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.welcome-header p {
    font-size: 1.1rem;
    color: #666;
}

/* 3. شبكة البطاقات (Grid) */
.dashboard-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 أعمدة متساوية */
    gap: 20px;
}

/* 4. تصميم البطاقة (Style) */
.dash-card {
    background-color: #4b4a67; /* اللون الرسمي الغامق (Slate Blue) */
    color: #ffffff;
    padding: 25px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid transparent;
    min-height: 160px; /* ارتفاع موحد */
}

.dash-card h3 {
    font-size: 1.3rem !important; /* تكبير الخط قليلاً كما طلبت */
    margin: 0 0 10px 0;
    font-weight: 700;
    color: #ffffff !important;
}

.dash-card p {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
    color: #e0e0e0 !important;
}

/* تأثير التحويم والضغط (اللون البني الفاتح) */
.dash-card:hover, .dash-card:active {
    background-color: #d2b48c; /* بني فاتح (Tan) */
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    border-color: #c19b6c;
}

/* 5. القسم الأيسر (الصورة العمودية) */
.welcome-image-side {
    flex: 1; /* يأخذ 25% من العرض */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
    /* في وضع RTL، اليسار هو النهاية */
}

.welcome-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* قص الصورة لتملأ العمود بالكامل */
    display: block;
}

/* استجابة للموبايل */
@media (max-width: 992px) {
    .welcome-dashboard-layout { flex-direction: column; }
    .dashboard-cards-grid { grid-template-columns: repeat(2, 1fr); } /* عمودين في التابلت */
    .welcome-image-side { height: 200px; order: -1; /* رفع الصورة للأعلى في الموبايل */ }
}
@media (max-width: 600px) {
    .dashboard-cards-grid { grid-template-columns: 1fr; } /* عمود واحد في الموبايل */
}
/* --- تصميم موحد لجميع أقسام الروابط (بني فاتح كريمي) --- */

/* 1. الحاويات (روابط المجلدات، روابطي، روابط مهمة) */
.folder-links-section, .links-section {
    background-color: #fffbf2 !important; /* بيج فاتح */
    border: 1px solid #e8dfc5;
    border-radius: 8px;
    padding: 20px !important;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

/* 2. العناوين داخل هذه الأقسام */
.folder-links-section h5, .links-section h2 {
    color: #8c6a4d; /* بني غامق */
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
    border-bottom: 2px solid #e8dfc5;
    padding-bottom: 10px;
}

/* 3. حقول الإدخال */
.add-folder-link-form input, .add-link-form input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 0.95rem;
    transition: border-color 0.3s;
    background: #fff;
}
.add-folder-link-form input:focus, .add-link-form input:focus {
    border-color: var(--accent-color);
    outline: none;
}

/* 4. أزرار الإضافة (+) */
.add-folder-link-btn, .add-link-form button {
    background-color: #d2b48c !important; /* بني فاتح */
    color: white !important;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.add-folder-link-btn:hover, .add-link-form button:hover {
    background-color: #c19b6c !important;
}

/* 5. قائمة الروابط (بطاقات بيضاء أنيقة) */
.folder-links-section ul li, .links-list li {
    background-color: #ffffff;
    border: 1px solid #e9ecef !important;
    border-radius: 6px;
    padding: 12px 15px !important;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.folder-links-section ul li:hover, .links-list li:hover {
    transform: translateX(-2px);
}

.folder-links-section ul li a, .links-list li a {
    color: var(--primary-color) !important;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}
.folder-links-section ul li a:hover, .links-list li a:hover {
    text-decoration: underline;
}

/* 6. أزرار التحكم (تعديل وحذف) */
.link-actions { display: flex; gap: 8px; }

.edit-link-btn, .delete-link-btn, .delete-folder-link-btn {
    background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 4px;
}
.edit-link-btn { color: #f39c12; } /* برتقالي للتعديل */
.delete-link-btn, .delete-folder-link-btn { color: #e74c3c; } /* أحمر للحذف */

.edit-link-btn:hover, .delete-link-btn:hover { opacity: 0.7; transform: scale(1.1); }
/* --- تحسينات واجهة الترجمة (الألوان والاتجاه) --- */

/* 1. شريط أدوات الترجمة (بيج كريمي) */
.translate-tools-bar {
    background-color: #fffbf2 !important; /* بيج كريمي */
    border: 1px solid #e8dfc5 !important; /* حدود ذهبية خفيفة */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

/* 2. قوائم اختيار اللغة (أزرق غامق) */
.translate-options label {
    color: #333399 !important; /* أزرق غامق للعناوين */
    font-weight: 700 !important;
}

.translate-options select {
    color: #333399 !important; /* أزرق غامق للنص */
    border: 1px solid #333399 !important; /* حدود زرقاء */
    background-color: #fff !important;
    font-weight: 600;
    padding: 8px 15px !important;
}

/* 3. تحسين عرض النص المترجم (فواصل بين الأجزاء) */
.translation-part-container {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
}
.translation-part-header {
    text-align: center;
    font-weight: bold;
    color: #333399; /* أزرق غامق */
    margin-bottom: 10px;
    background: #eee;
    padding: 5px;
    border-radius: 4px;
    font-size: 0.9rem;
}
/* ============================================================
   تصميم أرشيف البحث الجديد (نظام البطاقات) + إصلاح الـ PDF
   ============================================================ */

/* 1. شبكة بطاقات الأرشيف (Archive Grid) */
.archive-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* تجاوب تلقائي */
    gap: 20px;
    padding-bottom: 40px;
}

/* 2. تصميم البطاقة الواحدة (Archive Card) */
.archive-card {
    background-color: #fff;
    border: 1px solid #e0d9ea;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.archive-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #8a63d2; /* تلميح بنفسجي عند التحويم */
}

/* 3. رأس البطاقة (العنوان) */
.archive-card-header {
    background-color: #4b4a67; /* اللون الرسمي الغامق */
    color: #fff;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.archive-card-header h3 {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 700;
    color: #fff !important;
}
/* عند فتح البطاقة (Active) */
.archive-card.active .archive-card-header {
    background-color: #d2b48c; /* يتحول للبني الفاتح */
}

/* 4. جسم البطاقة (مكان الملفات - بيج كريمي) */
.archive-card-body {
    background-color: #fffbf2; /* الخلفية الكريمية المطلوبة */
    padding: 0;
    max-height: 0; /* مخفي افتراضياً */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    border-top: 1px solid #eee;
}
.archive-card.active .archive-card-body {
    max-height: 500px; /* يفتح عند التفعيل */
    overflow-y: auto; /* سكرول داخلي إذا كثرت الملفات */
    padding: 10px;
}

/* 5. تنسيق عناصر الملفات داخل البطاقة (نمط موحد مع البحث) */
.archive-file-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #DBC2C8; /* اللون الوردي/البيج المميز */
    padding: 12px 20px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.5);
    transition: filter 0.2s;
}
.archive-file-row:hover { filter: brightness(0.97); }

.archive-file-name {
    font-weight: 700;
    color: #4a3b3b; /* لون بني داكن */
    font-size: 1rem;
    flex-grow: 1;
    margin-left: 15px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
[dir="ltr"] .archive-file-name { margin-left: 0; margin-right: 15px; }

/* 6. أزرار التحكم في الملف (نصية واضحة) */
.archive-actions { display: flex; align-items: center; }

.archive-actions button {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 6px 12px;
    margin-left: 6px;
    color: #333;
    border-radius: 4px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
[dir="ltr"] .archive-actions button { margin-left: 0; margin-right: 6px; }

.archive-actions button:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: var(--primary-color);
}

/* ألوان خاصة للأيقونات داخل الأزرار */
.btn-view-file { color: #4b4a67; }
.btn-view-text { color: #8a63d2; }
.btn-edit-name { color: #f39c12; }
.archive-actions .delete-btn:hover { color: #dc3545; background-color: #ffebeb; }


/* --- 7. الحل الجذري لتكبير الـ PDF (Full Height Fix) --- */
/* نجبر حاوية الـ PDF على ملء النافذة الكبيرة بالكامل */
.modal-body-pdf {
    flex-grow: 1; /* يملأ المساحة المتبقية في النافذة */
    height: calc(100% - 60px) !important; /* ارتفاع النافذة ناقص الهيدر */
    padding: 0 !important;
    overflow: hidden !important; /* منع السكرول المزدوج */
    display: flex;
    flex-direction: column;
}

/* نجبر الـ iframe على التمدد 100% في الطول والعرض */
.modal-body-pdf iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block;
    flex-grow: 1;
}
/* --- تنسيق أدوات داخل مربع النص (بيج كريمي) --- */

/* 1. الحاوية العائمة للأدوات */
.inner-tools {
    position: absolute;
    bottom: 15px;
    left: 15px; /* يمين في العربية بسبب RTL */
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95); /* خلفية شبه شفافة */
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 20;
}
[dir="ltr"] .inner-tools { left: auto; right: 15px; }

/* 2. الأزرار الكريمية (رفع وحذف) */
.creamy-tool-btn {
    background-color: #fffbf2; /* بيج كريمي */
    color: #5e4b35; /* بني غامق للنص */
    border: 1px solid #d2b48c; /* حدود بنية فاتحة */
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none; /* في حال كان label */
}

.creamy-tool-btn:hover {
    background-color: #d2b48c;
    color: #fff;
}

/* 3. إخفاء عنصر الإدخال الأصلي القبيح نهائياً */
#ai-check-file-input, #analyze-file-input, #translate-file-input {
    display: none !important; /* هذا سيخفي عبارة Choose File */
}

/* تنسيق اسم الملف بجانب الأزرار */
.file-name-small {
    font-size: 0.8rem;
    color: #666;
    max-width: 120px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
/* --- تصميم اللوحة الجانبية العائمة (Floating Side Panel) - النسخة الكاملة --- */
.floating-panel {
    position: fixed !important; /* ضروري جداً للتحريك */
    top: 120px;
    left: 20px;
    width: 300px;
    height: 500px;
    background-color: #fff;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 9999; /* طبقة عليا جداً */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s;
    min-width: 250px;
    min-height: 200px;
}

.panel-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move; /* مؤشر التحريك */
    user-select: none;
}
.panel-header h4 { margin: 0; font-size: 0.95rem; color: #fff !important; }

.close-panel-btn {
    background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; padding: 0 5px;
}

.panel-content {
    padding: 15px;
    flex-grow: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    
    /* الخلفية البيج الكريمي */
    background-color: #fffbf2 !important; 
    
    /* الحل الجذري للالتفاف: يطبق على الحاوية وكل أبنائها */
    white-space: pre-wrap !important;     
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;    
    word-break: break-word !important;    
    
    /* التحكم في التمرير */
    overflow-y: auto !important;   
    overflow-x: hidden !important; 
    
    /* ضمان الامتثال للأبعاد */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* قاعدة إضافية لإجبار نصوص Markdown على الالتفاف */
.panel-content pre, .panel-content p, .panel-content div {
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* زر المصباح الجديد */
.btn-suggest-file { color: #f39c12; transition: 0.2s; }
.btn-suggest-file:hover { transform: scale(1.2); text-shadow: 0 0 5px #f39c12; }

/* مقبض التحجيم العلوي (الجديد) */
.resizer-t {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    cursor: ns-resize;
    z-index: 20;
}
/* --- زر الحذف الجماعي (ماروني فاتح) --- */
.batch-delete-btn {
    background-color: #c85a5a; /* ماروني فاتح */
    color: white;
    border: 1px solid #b03030;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto; /* لدفعه لليسار في العنوان */
}
[dir="ltr"] .batch-delete-btn { margin-right: 0; margin-left: auto; }

.batch-delete-btn:hover {
    background-color: #a03030; /* ماروني أغمق */
}

/* تنسيق حاوية العنوان لتستوعب الزر */
.user-files-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
}
.user-files-header-container h5 {
    margin: 0;
    padding: 0;
    border: none; /* إزالة الحد السفلي القديم من العنوان */
}
/* --- تحسينات الرفاهية (المصادر، التنسيق القانوني، الأرشيف) --- */

/* 1. بطاقات المصادر (Source Chips) */
.sources-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
    background-color: #fbfcfd;
    border-radius: 0 0 8px 8px;
    padding: 15px;
}
.source-label {
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
    display: block;
    font-size: 0.9rem;
}
.source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #eef2f7;
    border: 1px solid #cce;
    color: #333399; /* اللون الأزرق الرسمي */
    padding: 6px 12px;
    border-radius: 20px; /* شكل بيضاوي */
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: background 0.2s;
}
.source-chip:hover {
    background-color: #dbe4ef;
    border-color: #333399;
}

/* 2. التنسيق القانوني (Legal Highlighting) */
/* سيتم تطبيق هذا الكلاس برمجياً على أرقام المواد والأحكام */
.legal-highlight {
    color: #c0392b; /* لون أحمر قرميدي وقور */
    font-weight: 800;
    background-color: rgba(192, 57, 43, 0.05);
    padding: 0 4px;
    border-radius: 3px;
    font-family: 'Tajawal', sans-serif;
}

/* 3. تحسين عرض النص ليتناسب مع التنسيق */
.output-content {
    line-height: 1.9 !important; /* زيادة المسافة بين الأسطر للقراءة المريحة */
    text-align: justify; /* محاذاة النص */
}
/* --- استعادة التنسيق القانوني الاحترافي (Highlighting) --- */

/* كلاس التمييز (للمواد وأرقام الطعون) */
.legal-highlight {
    color: #c0392b !important; /* أحمر قرميدي داكن */
    background-color: rgba(192, 57, 43, 0.08); /* خلفية حمراء خفيفة جداً */
    font-weight: 800 !important; /* خط سميك */
    padding: 0 4px;
    border-radius: 4px;
    border-bottom: 1px solid rgba(192, 57, 43, 0.2);
    font-family: 'Tajawal', sans-serif !important;
    display: inline-block; /* لضمان عدم تكسر الخلفية */
}

/* تحسين عرض النصوص داخل صناديق النتائج */
.analysis-text, .output-content {
    line-height: 2 !important; /* تباعد أسطر مريح للقراءة */
    font-size: 1.05rem !important;
    text-align: justify;
    color: #2c3e50;
}

/* تمييز العناوين الفرعية داخل التحليل */
.analysis-text h3, .analysis-text h4, .analysis-text strong {
    color: #333399 !important; /* الأزرق الرسمي */
    margin-top: 15px;
    display: block;
}