/* General Styling for RTL pages with fixed sidebar */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
/* style.css */

/* Import Google Font - Cairo for Arabic text */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">


body {
	
    font-family: 'Droid Arabic Naskh', 'Cairo', 'Tajawal', sans-serif;
    background-color: #f0f2f5; /* Light gray background */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height */
    margin: 0;
    direction: rtl; /* Set default direction for RTL */
}

/* Specific styles for the login page card */
.login-card {
    background-color: #ffffff; /* White background for the card */
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    padding: 2.5rem; /* More padding inside the card */
    width: 100%;
    max-width: 450px; /* Max width for the login form */
    /* قم بإزالة أي هوامش علوية/سفلية قد تكون موجودة هنا من تلقاء نفسها */
    margin: auto; /* هذا يساعد أيضًا في التوسيط ولكن flexbox هو الأساس */
}

/* ... باقي الأنماط الأخرى في style.css ... */

.login-card .card-title {
    color: #007bff; /* Primary blue for the title */
    font-weight: 700;
    margin-bottom: 1.5rem; /* Space below title */
    text-align: center;
}

.form-label {
    font-weight: 600;
    color: #333;
}

.form-control {
    border-radius: 5px;
    border-color: #ced4da;
    padding: 0.75rem 1rem; /* Increase padding for better input feel */
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #495057;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    padding: 0.75rem;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.alert-danger {
    border-radius: 5px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-danger .bi {
    font-size: 1.2em; /* Larger icon in alert */
}
body {
    font-family: 'Cairo', sans-serif;
    background-color: #f0f2f5; /* A light background color */
    margin: 0;
    /* Account for fixed sidebar on the right */
    padding-right: 250px; /* IMPORTANT: This must match the sidebar's width */
    direction: rtl; /* تأكد من تطبيق هذا على الـ body أو الـ html */
}

/* هذا العنصر لا يجب أن يكون موجوداً بهذا الشكل
   "container mt-4 main-content" هو خطأ في التحديد.
   يجب أن يكون ".container.mt-4.main-content" أو ببساطة ".main-content"
   ولكن الأفضل هو إزالة margin-right من هنا.
*/
/*
.container.mt-4.main-content {
    margin-right:20px;
}
*/

/* Sidebar Specific Styles */
.sidebar-wrapper {
    position: fixed;
    top: 0;
    right: 0; /* الشريط الجانبي على اليمين */
    width: 250px; /* Fixed width for the sidebar */
    height: 100vh; /* Full viewport height */
    background-color: #343a40; /* Dark background for the sidebar */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); /* Subtle shadow on the left edge */
    z-index: 1000; /* Ensure sidebar is above main content */
    overflow-y: auto; /* Enable scrolling for sidebar content if it overflows */
    direction: rtl; /* Explicitly set RTL for sidebar content */
    display: flex; /* لترتيب محتويات الشريط الجانبي عمودياً */
    flex-direction: column;
}

.accordion-item {
    border: none; /* Remove default accordion item borders */
    background-color: transparent;
}

.accordion-header .accordion-button {
    background-color: #343a40; /* Dark background for accordion buttons */
    color: #f8f9fa; /* Light text color */
    border-radius: 0; /* Remove border radius */
    padding: 1rem 1.25rem;
    font-weight: 600;
    text-align: right; /* Align text to the right for RTL */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-header .accordion-button:not(.collapsed) {
    background-color: #0056b3; /* Darker blue when open/active */
    color: white;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-header .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    background-color: #495057; /* Slightly lighter dark for body of accordion */
    padding: 0;
}

.sidebar-wrapper .nav-link {
    display: block;
    padding: 0.75rem 1.25rem; /* Padding for nav links */
    padding-right: 2.5rem; /* Additional padding for indentation from right edge */
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white for links */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: right;
}

.sidebar-wrapper .nav-link i {
    margin-left: 0.5rem; /* Space between icon and text for RTL */
}

.sidebar-wrapper .nav-link:hover,
.sidebar-wrapper .nav-link.active {
    background-color: #007bff; /* Primary blue on hover/active */
    color: white;
}

/* Main Content Area Styling */
.main-content {
    /* هنا يجب إزالة margin-right: 250px; لأن الـ body أصبح به padding-right */
    /* فقط أضف هوامش داخلية إذا أردت مسافة من حواف المتصفح */
    margin-left: auto; /* يدفع المحتوى إلى أقصى اليسار إذا كان هناك مساحة */
    margin-right: auto; /* يدفع المحتوى إلى أقصى اليمين إذا كان هناك مساحة (مع padding-right على body) */
    padding-top: 20px; /* Top padding for content */
    padding-left: 15px; /* مسافة من الحافة اليسرى */
    padding-right: 15px; /* مسافة من الحافة اليمنى (بعد padding-right للـ body) */
    max-width: 1200px; /* يمكن تحديد عرض أقصى للمحتوى للحفاظ على شكل جيد */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding-right: 0; /* Remove padding-right on small screens */
    }

    .sidebar-wrapper {
        position: relative; /* Sidebar becomes relative, not fixed */
        width: 100%; /* Full width */
        height: auto; /* Auto height */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow at the bottom */
        margin-bottom: 20px; /* Space below sidebar */
        border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    }

    .main-content {
        margin-left: 0;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Adjust accordion buttons for smaller screens if needed */
    .accordion-header .accordion-button {
        text-align: center; /* Center text on small screens */
    }
}

/* تم حذف هذا السطر المكرر والذي يسبب المشكلة */
/* .main-content { margin-right: 250px; padding: 20px; transition: margin-right 0.3s ease; flex-grow: 1; } */

/* تم حذف هذا السطر المكرر
@media (max-width: 768px) {
    .main-content {
        margin-right: 0;
    }
}
*/