/* ========== الأساسيات ========== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5fa;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* ========== الغلاف الرئيسي ========== */
.wrapper {
    display: flex;
    min-height: 100vh;
}

/* ========== الشريط الجانبي ========== */
#sidebar {
    width: 250px;
    background-color: #3c1361;
    color: #fff;
    transition: all 0.3s;
    z-index: 1030;
}

    #sidebar .sidebar-header {
        background-color: #4b177a;
        padding: 20px;
        font-size: 1.3rem;
        font-weight: bold;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #sidebar ul.components {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #sidebar ul li a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        text-decoration: none;
        transition: background 0.3s;
    }

        #sidebar ul li a:hover {
            background-color: #5e2e91;
            border-right: 5px solid #fff;
        }

/* ========== المحتوى الرئيسي ========== */
#content {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 0;
    overflow-x: hidden;
}

/* ========== شريط التنقل العلوي ========== */
.navbar {
    background: linear-gradient(90deg, #4b177a, #6f42c1) !important;
    color: #fff;
    height: 70px; /* أطول للهيدر */
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1035;
}

    .navbar .navbar-brand {
        color: #fff;
        font-weight: 500;
    }

    .navbar .btn-light {
        background-color: #ffffff;
        color: #4b177a;
        border: none;
        font-weight: bold;
        border-radius: 8px;
        padding: 4px 10px;
        transition: all 0.2s;
    }

        .navbar .btn-light:hover {
            background-color: #f0f0f0;
        }

/* 👤 رابط المستخدم */
.user-info-link {
    transition: background 0.2s ease-in-out, transform 0.2s;
    padding: 4px 8px;
    border-radius: 8px;
}

    .user-info-link:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
        text-decoration: none;
    }

/* 🚪 زر تسجيل الخروج */
.logout-btn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease-in-out, transform 0.2s;
}

    .logout-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(-10deg) scale(1.1);
    }

/* 📌 أيقونات البريد والإشعارات */
.icon-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    width: 60px;
    transition: transform 0.2s ease-in-out, color 0.2s;
}

    .icon-with-label i {
        font-size: 1.6rem;
    }

    .icon-with-label small {
        font-size: 0.7rem;
        margin-top: 3px;
        opacity: 0.85;
    }

    .icon-with-label:hover {
        color: #ffd966;
        transform: scale(1.08);
    }

    /* 🎯 الشارات (Badges) */
    .icon-with-label .badge, .email-status-container .badge {
        font-size: 0.7rem;
        padding: 4px 6px;
        border-radius: 6px;
        min-width: 22px;
        text-align: center;
    }

/* 📧 البريد */
.email-status-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

    .email-status-container:hover {
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

.email-icon {
    color: #fff;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.email-status-container:hover .email-icon {
    color: #ffd966;
    transform: scale(1.1);
}

/* ========== دعم الطي على الموبايل ========== */
@media (max-width: 768px) {
    #sidebar {
        display: none;
    }

        #sidebar.d-block {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            z-index: 999;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
        }

    #content {
        padding: 10px;
    }
}



/* ========== عناصر عامة ========== */
a, button {
    cursor: pointer;
}

/* ========== مكونات إدخال متعددة (Chips) ========== */
.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    min-height: 40px;
    background: #fff;
    border-radius: 6px;
}

.chip {
    display: flex;
    align-items: center;
    background: #6f42c1;
    color: #fff;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 14px;
}

    .chip .remove {
        margin-left: 5px;
        cursor: pointer;
        font-weight: bold;
    }

/* ========== القوائم التلقائية (Autocomplete) ========== */
.ui-autocomplete {
    position: absolute !important;
    z-index: 20000 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    max-height: 250px;
    overflow-y: auto;
    font-size: 14px;
}

.ui-menu-item-wrapper {
    padding: 6px 10px;
    cursor: pointer;
}

    .ui-menu-item-wrapper.ui-state-active {
        background: #6f42c1 !important;
        color: #fff !important;
    }

/* ========== المودال (Modal) ========== */
.modal {
    z-index: 20000 !important;
}

.modal-backdrop {
    z-index: 19999 !important;
}

/* ========== الشريط الجانبي (Sidebar) ========== */
#sidebar {
    z-index: 1030;
}

/* ========== شريط التنقل العلوي (Navbar) ========== */
.navbar {
    background: linear-gradient(90deg, #4b177a, #6f42c1) !important;
    color: #fff;
    height: 70px; /* أطول قليلاً */
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1035;
}

    .navbar .btn-light {
        background-color: #ffffff;
        color: #4b177a;
        border: none;
        font-weight: bold;
        border-radius: 8px;
        padding: 4px 10px;
        transition: all 0.2s;
    }

        .navbar .btn-light:hover {
            background-color: #f0f0f0;
        }

/* 👤 رابط معلومات المستخدم */
.user-info-link {
    transition: background 0.2s ease-in-out, transform 0.2s;
    padding: 4px 8px;
    border-radius: 8px;
}

    .user-info-link:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
        text-decoration: none;
    }

/* 🚪 زر تسجيل الخروج */
.logout-btn {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease-in-out, transform 0.2s;
}

    .logout-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(-10deg) scale(1.1);
    }

/* 📌 أيقونات البريد والإشعارات */
.icon-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    width: 60px;
    transition: transform 0.2s ease-in-out, color 0.2s;
}

    .icon-with-label i {
        font-size: 1.6rem;
    }

    .icon-with-label small {
        font-size: 0.7rem;
        margin-top: 3px;
        opacity: 0.85;
    }

    .icon-with-label:hover {
        color: #ffd966;
        transform: scale(1.08);
    }

    /* 🎯 الشارات (Badges) */
    .icon-with-label .badge,
    .email-status-container .badge {
        font-size: 0.7rem;
        padding: 4px 6px;
        border-radius: 6px;
        min-width: 22px;
        text-align: center;
    }

/* 📧 البريد */
.email-status-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

    .email-status-container:hover {
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

.email-icon {
    color: #fff;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.email-status-container:hover .email-icon {
    color: #ffd966;
    transform: scale(1.1);
}
/* ======= تحسين التوست Toast ======= */
/* ======= تحسين تنسيق Toast ======= */
.toast {
    border-radius: 10px !important;
    padding: 18px 20px !important; /* تكبير الحواف الداخلية */
    font-size: 1.05rem !important; /* خط أكبر */
    font-weight: 600 !important;
    min-width: 320px !important; /* عرضه أكبر */
    max-width: 450px !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25) !important;
    opacity: 0.98 !important;
}

/* ✅ نجاح */
.toast-success {
    background-color: #28a745 !important; /* أخضر واضح */
    color: #fff !important;
}

/* ❌ خطأ */
.toast-error {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* ⚠️ تحذير */
.toast-warning {
    background-color: #ffc107 !important;
    color: #212529 !important; /* نص غامق */
}

/* ℹ️ معلومات */
.toast-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

/* أيقونات داخل التوست */
.toast i {
    font-size: 1.4rem;
    margin-right: 8px;
}


/*////////////*/

/* تحسين شكل الفلاتر في YADCF */
.yadcf-filter-wrapper {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 2px;
}

.yadcf-filter {
    width: 100% !important;
    max-width: 150px;
}

.yadcf-filter-wrapper input,
.yadcf-filter-wrapper select {
    width: 100% !important;
    margin: 2px 0;
}

.yadcf-filter-wrapper input {
    height: 30px;
    font-size: 0.85rem;
}

.yadcf-filter-wrapper select {
    height: 32px;
    font-size: 0.85rem;
    padding: 2px 8px;
}

/* تحسين التاريخ */
.yadcf-filter-wrapper .yadcf-filter-date {
    min-width: 120px;
}







/*جدول الملاحظات */

/* 🌟 الحاوية العامة */
.card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background: #fff;
}

/* 🌟 عنوان الجدول */
h3 {
    font-weight: 700;
    color: #4b0082;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* 🌟 رأس الجدول (Header) */
.dataTables_wrapper .dataTables_scrollHead th,
table.dataTable thead th {
    background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
    color: #fff !important;
    text-align: center !important;
    font-weight: 600;
    border-bottom: none;
    padding: 12px;
}

/* محاذاة النصوص بالعناوين الوسط */
table.dataTable thead th {
    vertical-align: middle !important;
}

/* 🌟 خلايا الجدول */
table.dataTable tbody td {
    vertical-align: middle;
    padding: 10px;
    font-size: 0.92rem;
}

/* 🌟 تأثير hover على الصفوف */
table.dataTable tbody tr:hover {
    background: rgba(155, 89, 182, 0.08);
    transition: background 0.3s ease;
}

/* 🌟 الفلاتر (YADCF) */
.yadcf-filter-wrapper {
    padding: 5px;
    text-align: center;
}

    .yadcf-filter-wrapper input,
    .yadcf-filter-wrapper select {
        width: 90% !important;
        border-radius: 8px;
        border: 1px solid #ccc;
        padding: 5px 8px;
        font-size: 0.85rem;
        background: #f9f9fb;
        transition: border 0.2s ease;
    }

        .yadcf-filter-wrapper input:focus,
        .yadcf-filter-wrapper select:focus {
            border-color: #7b1fa2;
            box-shadow: 0 0 4px rgba(123, 31, 162, 0.3);
        }

/* 🌟 أزرار التصدير (Excel) */
.dt-buttons .btn {
    background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%);
    border: none;
    color: #fff !important;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px 14px;
    transition: background 0.3s ease;
}

    .dt-buttons .btn:hover {
        background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
    }

/* 🌟 شريط البحث */
.dataTables_filter input {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    background: #f9f9fb;
    width: 200px;
    transition: all 0.2s ease;
}

    .dataTables_filter input:focus {
        border-color: #7b1fa2;
        box-shadow: 0 0 4px rgba(123, 31, 162, 0.3);
    }

/* 🌟 الترقيم (Pagination) */
.dataTables_paginate .paginate_button {
    background: #f3e5f5;
    color: #6a1b9a !important;
    border-radius: 6px;
    margin: 0 2px;
    border: none !important;
    transition: background 0.3s ease;
}

    .dataTables_paginate .paginate_button:hover {
        background: #7b1fa2;
        color: #fff !important;
    }

    .dataTables_paginate .paginate_button.current {
        background: #7b1fa2 !important;
        color: #fff !important;
        border: none;
    }

/* 🌟 شريط الـ info */
.dataTables_info {
    color: #6a1b9a;
    font-weight: 500;
}

/* 🌟 قائمة الإجراءات */
.dropdown-menu {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-item:hover {
    background: #f3e5f5;
    color: #6a1b9a;
}

/* 🌟 تحسين شريط التمرير */
.dataTables_scrollBody::-webkit-scrollbar {
    height: 6px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #b39ddb;
    border-radius: 6px;
}

    .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
        background: #7b1fa2;
    }
/* قاعدة عامة: footer ثابت والتمرير داخل body */
.modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.modal .modal-body {
    overflow: auto;
}

/* سحب: شكل المؤشر ومنع انتقالات مزعجة */
.modal.draggable .modal-header {
    cursor: move;
    user-select: none;
}

.modal.draggable .modal-dialog {
    transition: none;
}

/* 📌 التكبير/التصغير بالماوس:
   ✳️ نفعّلها على .modal-content (وليس .modal-dialog) بسبب pointer-events من Bootstrap */
.modal.resizable .modal-dialog {
    /* نترك العرض يتحدد من المحتوى */
    width: auto;
    max-width: unset;
}

.modal.resizable .modal-content {
    resize: both; /* يظهر مقبض التكبير في الزاوية */
    overflow: auto;
    max-width: 96vw; /* لا يخرج خارج إطار الشاشة عرضًا */
    max-height: 92vh; /* ولا ارتفاعًا */
    min-width: 700px; /* حد أدنى مريح */
    min-height: 420px;
}

/* 👇 تكبير افتراضي لمودال الإنشاء تحديدًا */
#composeModal .modal-dialog {
    --bs-modal-width: min(2400px, 150vw); /* عدّل الرقم بحرّية */
}

#composeModal .modal-content {
    min-height: 60vh; /* مساحة عمل أوسع */
}

/* إن أردت تكبيرًا افتراضيًا لمودالات أخرى */
#observationModal .modal-dialog,
#viewReplyModal .modal-dialog {
    --bs-modal-width: min(1200px, 96vw);
}
/* وضع تصوير مؤقّت لإزالة قيود المودال أثناء الالتقاط */
.snap-boost .modal {
    position: static !important;
    overflow: visible !important;
}

.snap-boost .modal-backdrop {
    display: none !important;
}

.snap-boost .modal-dialog {
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
}

.snap-boost .modal-content {
    border: 0;
    box-shadow: none;
}

.snap-boost .modal-body {
    max-height: none !important;
    overflow: visible !important;
}