:root {
    --primary-color: #2970FF;
    --secondary-color: #6c757d;
    --text-color: black;

    --font-family: 'Cairo', sans-serif;
    --font-size-base: 16px;
    --font-size-title: 24px;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    direction: rtl;
    text-align: right;
    /* background-color: #f6f4ff; */
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content-wrapper {
    display: flex;
    /* لترتيب SideBar و Content جنباً إلى جنب */
    flex-grow: 1;
    /* **مهم جداً: يجعل هذا الجزء ينمو ويأخذ كل المساحة المتاحة بين NavBar و Footer، مما يدفع الفوتر للأسفل** */
    padding-top: 60px;
    /* مسافة من الأعلى لتجنب تداخل المحتوى مع NavBar (اضبط حسب ارتفاع NavBar الخاص بك) */
    /* لا تضع padding-bottom هنا، دعه للفوتر نفسه */
}

/* نمط لمحتوى الصفحة الفعلي الذي يظهر بجانب السايد بار */
.content {
    flex-grow: 1;
    /* لجعل المحتوى يأخذ المساحة المتبقية بعد السايد بار */
    padding: 20px;
    /* مسافة داخلية للمحتوى */
    margin-right: 250px;
    /* مثال: إذا كان السايد بار بعرض 250px */
    transition: margin-right 0.3s ease;
    /* لتحريك المحتوى بسلاسة */
}

/* Media Query لأجهزة الموبايل (لتعديل التخطيط) */
@media (max-width: 767.98px) {
    .main-content-wrapper {
        flex-direction: column;
        /* لجعل السايد بار والمحتوى يتكدسان رأسياً على الموبايل */
        padding-top: 0;
        /* لا حاجة لـ padding-top إضافي إذا كان NavBar يتغير */
    }

    .content {
        margin-right: 0;
        /* إزالة الهامش الأيمن على الموبايل */
        padding: 10px;
        /* تقليل المسافة الداخلية */
    }
}

.app-container {
    direction: rtl;
}

.main-content {
    display: flex;
}

.sidebar {
    width: 250px;
    background-color: #f8f9fa;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 70px;
    /* ارتفاع الناف بار */
    z-index: unset;
    padding: 1rem;
}

.content {
    flex-grow: 1;
    padding: 2rem;
    margin-right: 250px;
    /* مساحة السايد بار */
}


@media (max-width: 768px) {
    .content {
        margin-right: auto;
    }

    .sidebar {
        z-index: 1;
        top: 80px;
    }
}



.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #f8f9fa;
    padding: 5rem 0 0 1rem;
    overflow-y: auto;
    z-index: 1000;
    display: block;
}

.sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* المسافة بين العناصر */
}

.nav-link {
    color: #fff;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}

.nav-link:hover {
    background: #333;
}

.nav-link:active {
    color: var(--primary-color) !important;
    border-bottom: 1px solid var(--primary-color);
}

/* في الموبايل تكون مختفية افتراضيًا */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
        /* تخرج برة الشاشة من اليمين */
    }

    .sidebar.open {
        transform: translateX(0);
        /* تظهر لما نضغط */
    }

    .toggle-btn {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1100;
        background-color: #2970ff;
        color: white;
        border: none;
        padding: 5px 10px;
        font-size: 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
}

/* على الديسكتوب الزر يختفي */
@media (min-width: 769px) {
    .toggle-btn {
        display: none;
    }

    .sidebar {
        transform: translateX(0);
        /* تبقى ظاهرة دائمًا */
    }
}

/* الوضع العادي - الديسكتوب */
.navbar-logo {
    margin-right: 0;
}




/* في الشاشات الصغيرة: خلي اللوجو في النص */
@media (max-width: 768px) {
    .navbar-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navbar {
        height: 80px;
        text-align: center;
    }
}

.auth-container {
    display: flex;
    justify-content: center;
    padding: 50px;
}

.auth-card {
    width: 50%;

}

input#formBasicPhone {
    direction: rtl;
}

.submit-button {
    width: 50%;
    align-items: center;
}

@media (max-width: 768px) {
    .auth-card {
        width: 100%;
    }

    .text-center.mb-4.card-title.h5 {
        font-size: 16px;
    }

    label.form-label {
        font-size: 14px;
    }

    .register {
        font-size: 10px;
    }

    input#formBasicPhone,
    input#formBasicPassword,
    input#formBasicName,
    input#formConfirmPassword {
        font-size: 10px;
        padding-right: 5px;
    }
}

/* src/css/Home.css */

/* التخطيط العام للحاوية الكبيرة */
.home-container {
    /* padding: 50px; */
    transition: margin-left 0.3s ease;
    border-radius: 8px;
}

.home-container h2 {
    font-size: 2.5rem;
    color: #000000;
    padding-bottom: 20px;
    font-weight: bold;
}

/* الأنماط العامة للبطاقات */
.home-card {
    border: none;
    /* إزالة حدود البطاقة الافتراضية */
    border-radius: 15px;
    /* حواف مستديرة للبطاقة */
    overflow: hidden;
    /* لضمان أن الصورة والتدرج لا يتجاوزان الحواف المستديرة */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    /* ظل أعمق للبطاقات */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* تأثير عند التحويم */
    min-height: 500px;
    /* لتثبيت ارتفاع البطاقات */
    display: flex;
    background: linear-gradient(to bottom, #afc8f9, #FFFFFF);
    padding: 70px 50px;
    flex-direction: column;
    justify-content: center;
    /* يدفع المحتوى للأسفل ويترك مسافة بين الصورة والجسم */
}

.home-card:hover {
    transform: translateY(-5px);
    /* تحريك البطاقة لأعلى قليلاً عند التحويم */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    /* تظليل أكبر عند التحويم */
}

.home-card .card-img-top {
    width: 100%;
    height: 250px;
}

.home-card .card-body {
    padding: 25px;
    text-align: center;
    color: #0f0f0f;
    /* لون أبيض للنص على تدرجات الألوان */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    /* لتأخذ المساحة المتبقية داخل الكارد */
}

.home-card .card-title-custom {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.home-card .card-text-custom {
    font-size: 15px;
    line-height: 1.6;
}



/* لأجهزة الموبايل والشاشات الصغيرة */
@media (max-width: 767.98px) {
    .home-container {
        margin-left: 0;
        /* إزالة الهامش الجانبي للسايد بار */
        padding: 15px;
    }

    .home-container h2 {
        font-size: 1rem;
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .home-card {
        margin-bottom: 20px;
        /* مسافة بين البطاقات في الوضع الرأسي */
        height: 200px !important;
    }

    .home-card .card-body {
        padding: 20px 0;
    }

    .home-card .card-title-custom {
        font-size: 15px;
    }

    .home-card .card-text-custom {
        font-size: 13px;
    }
}

/* src/css/Footer.css */

.app-footer {
    background-color: #161518;
    /* لون خلفية داكن */
    color: white;
    /* لون نص فاتح */
    padding: 20px 0;
    position: relative;
    /* يمكن أن يكون fixed أو sticky حسب الحاجة */
    bottom: 0;
    width: 100%;
    text-align: center;

}

.app-footer p {
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.app-footer .footer-links a {
    color: #007bff;
    /* لون أزرق للروابط */
    text-decoration: none;
    margin: 0 10px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.app-footer .footer-links a:hover {
    color: #6cbfff;
    /* لون أفتح عند التحويم */
    text-decoration: underline;
}

.app-footer .footer-links span {
    color: #f8f9fa;
    /* لون الفاصل بين الروابط */
}

/* لضمان أن الفوتر لا يتداخل مع الـ SideBar إذا كان موجوداً */
/* إذا كان الـ SideBar ثابتًا ولديه عرض معين */
/* .app-footer {
    margin-left: 250px;
    width: calc(100% - 250px);
} */

/* أنماط RTL للغة العربية */
body,
.app-footer {
    direction: rtl;
    text-align: right;
}

.app-footer .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* للسماح للروابط بالانتقال لسطر جديد على الشاشات الصغيرة */
}

.app-footer .footer-links a {
    margin: 0 10px;
    /* ضبط الهوامش للروابط */
}