/* === إعدادات عامة === */
body { background-color: #1a2238; color: #f4f4f9; font-family: 'Tajawal', sans-serif; display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
.main-container { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 900px; margin: 0 auto; padding: 2rem; box-sizing: border-box; }
/* تعديل لتوسيط الشعار */
.header-logo { font-size: 1.2rem; font-weight: bold; color: #9daaf2; margin-bottom: 2rem; width: 100%; text-align: center; }
h1 { font-size: 2.5rem; margin-bottom: 2rem; color: #9daaf2; text-align: center; }
.input-group { margin-bottom: 1.5rem; text-align: right; flex-grow: 1; }
.input-group label { display: block; margin-bottom: 0.5rem; font-size: 1.1rem; }
input, select, textarea { width: 100%; padding: 12px; background-color: #2e3a59; border: 1px solid #4a5573; border-radius: 8px; color: #f4f4f9; font-size: 1rem; box-sizing: border-box; }
.main-button { padding: 12px 25px; background-color: #5a7dcb; color: white; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: background-color 0.3s ease; }
.main-button:hover { background-color: #4a6ac0; }
.secondary-button { padding: 12px 25px; background-color: #4a5573; color: white; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; }
.case-management-area { background-color: #252f4a; padding: 1.5rem; border-radius: 10px; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1rem; }

/* === تنسيقات حاوية الخط الزمني Wrapper === */
.timeline-wrapper { width: 100%; background-color: #252f4a; border-radius: 10px; padding: 2rem; text-align: center; }
.case-title-container { margin-bottom: 2.5rem; }
.case-title-container h2 { margin: 0; color: #9daaf2; font-size: 1.5rem; }
.case-title-container h3 { margin: 0.5rem 0 0 0; color: #f4f4f9; font-size: 1.2rem; font-weight: normal; }

/* === تصميم الخط الزمني الجهنمي (العمودي المحسن) === */
.timeline-container { position: relative; padding: 2rem 0; }
/* الخط العمودي الرئيسي */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 20px; /* محاذاة الخط إلى اليمين */
    height: 100%;
    width: 4px;
    background-color: #4a5573;
    border-radius: 2px;
}
.timeline-event {
    position: relative;
    margin-bottom: 50px; /* مسافة بين الأحداث */
    padding-right: 60px; /* مسافة للمحتوى بعيدًا عن الخط */
    text-align: right;
}
.timeline-event:last-child { margin-bottom: 0; }
/* النقطة النابضة على الخط */
.event-dot {
    position: absolute;
    top: 5px;
    right: 8px; /* محاذاة النقطة مع الخط */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 4px solid #252f4a;
    background-color: #fff;
    z-index: 2;
    transition: transform 0.3s ease;
}
.timeline-event:hover .event-dot { transform: scale(1.2); }
/* ألوان النقاط حسب نوع الحدث */
.event-positive .event-dot { background-color: #28a745; box-shadow: 0 0 15px #28a745; }
.event-negative .event-dot { background-color: #dc3545; box-shadow: 0 0 15px #dc3545; }
.event-neutral .event-dot { background-color: #007bff; box-shadow: 0 0 15px #007bff; }
.event-evidence .event-dot { background-color: #ffc107; box-shadow: 0 0 15px #ffc107; }
/* صندوق المحتوى */
.event-content {
    background-color: #2e3a59;
    padding: 1.5rem;
    border-radius: 8px;
    border-right: 4px solid; /* شريط جانبي ملون */
    transition: box-shadow 0.3s ease;
}
.timeline-event:hover .event-content { box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
/* ألوان الشريط الجانبي */
.event-positive .event-content { border-color: #28a745; }
.event-negative .event-content { border-color: #dc3545; }
.event-neutral .event-content { border-color: #007bff; }
.event-evidence .event-content { border-color: #ffc107; }
.event-date { font-weight: bold; font-size: 1.2rem; color: #9daaf2; margin-bottom: 0.75rem; }
.event-content p { margin: 0; font-size: 1rem; line-height: 1.7; color: #f4f4f9; }
.empty-timeline { text-align: center; color: #8a93a8; font-size: 1.2rem; padding: 2rem; }

/* === تنسيقات النماذج (Modals) === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-box { background-color: #1a2238; padding: 30px; border-radius: 10px; border: 1px solid #4a5573; width: 90%; max-width: 500px; }
.modal-box h3 { margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
.modal-box input, .modal-box select, .modal-box textarea { margin-bottom: 1rem; }
.modal-box textarea { min-height: 100px; resize: vertical; }
.modal-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.footer-text { width: 100%; text-align: center; padding: 1rem 0; font-size: 0.8rem; color: #8a93a8; margin-top: auto; }