/* =================================================== */
/* 1. الإعدادات العامة والخطوط (Reset & Typography) */
/* =================================================== */
/* تعيين نموذج الصندوق (Box Model) وإعادة الضبط الأساسي */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* 🚨 تصحيح: إزالة فرض direction: rtl و text-align: right من body العام 🚨
سنعتمد على وسم لتحديد الاتجاه الآن. */
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f4f7f6;
color: #333;
margin-top: 0; /* يضمن إزالة أي هامش علوي افتراضي */
padding-top: 0;
}
/* 🚨 أنماط اتجاه الكتابة: يتم تطبيقها بناءً على وسم 🚨 */
[dir="rtl"] {
direction: rtl;
text-align: right;
}
[dir="ltr"] {
direction: ltr;
text-align: left;
}
/* التنسيق العام للروابط */
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #0056b3;
}
/* =================================================== */
/* 2. التخطيط الرئيسي (Layout & Centering) */
/* =================================================== */
/* الحاوية الرئيسية للمحتوى (Main Content Container) */
main {
padding: 20px;
min-height: calc(100vh - 120px);
}
/* الـ Container الذي يحدد عرض المحتوى (للصفحات العامة) */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}
/* =================================================== */
/* 3. تنسيق شريط التنقل (Navigation Bar) */
/* =================================================== */
.navbar {
background-color: #004d99;
color: white;
padding: 15px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.logo a {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links ul {
list-style: none;
display: flex;
}
/* 🚨 تصحيح: استخدام الهوامش المنطقية (inline) للروابط 🚨 */
.nav-links li {
/* الهامش في نهاية الكتابة (أي اليسار في العربي، اليمين في الإنجليزي) */
margin-inline-start: 20px;
}
/* 🚨 إزالة التكرار القديم:
.nav-links li { margin-left: 20px; margin-left: 0; }
*/
.nav-links a {
color: white;
font-size: 16px;
padding: 5px 10px;
border-bottom: 2px solid transparent;
}
.nav-links a:hover {
color: #ffc107;
border-bottom-color: #ffc107;
}
/* =================================================== */
/* 4. تنسيق عناصر المصادقة (Auth Forms: Login, Register) */
/* =================================================== */
.auth-container {
width: 85% !important;
max-width: 900px !important;
margin: 60px auto !important;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.auth-container h2 {
text-align: center;
margin-bottom: 25px;
color: #004d99;
}
.auth-container label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"] {
width: 100%;
padding: 12px 15px;
margin-bottom: 0px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
.auth-container button[type="submit"] {
width: 100%; /* 🚨 التعديل: ليمتد على كامل عرض النموذج 🚨 */
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 18px; /* 🚨 التعديل: تكبير الخط قليلاً ليكون واضحاً 🚨 */
font-weight: bold;
transition: background-color 0.3s;
}
.auth-container button[type="submit"]:hover {
background-color: #0056b3;
}
.auth-links {
margin-top: 20px;
text-align: center;
font-size: 14px;
}
.error-message {
padding: 10px;
margin-bottom: 15px;
color: #a94442;
background-color: #f2dede;
border: 1px solid #ebccd1;
border-radius: 4px;
text-align: center;
}
.success-message {
padding: 10px;
margin-bottom: 15px;
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
border-radius: 4px;
text-align: center;
}
/* =================================================== */
/* 5. تنسيق لوحات التحكم (Dashboard Layout & Cards) */
/* =================================================== */
.dashboard-layout {
display: grid;
/* تخطيط بثلاثة أعمدة متساوية الحجم */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
margin-bottom: 30px; /* دمج التكرار */
}
.dashboard-card {
background: #fff;
padding: 20px; /* تم توحيد البادينج */
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* تم توحيد الظل */
transition: transform 0.3s;
border-top: 5px solid #0056b3;
}
.dashboard-card:hover {
transform: translateY(-5px);
}
.dashboard-card h2 {
font-size: 1.2em; /* تم توحيد الحجم */
color: #333;
margin-top: 0;
margin-bottom: 15px;
text-align: center;
}
.card-metric {
font-size: 2.5em;
font-weight: bold;
color: #0056b3;
margin: 10px 0;
text-align: center;
}
.card-link {
display: block;
margin-top: 15px;
color: #007bff;
text-decoration: none;
font-weight: bold;
text-align: center;
}
.action-card {
border-top: 5px solid #28a745;
text-align: center;
}
.action-card .btn-primary {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: white;
border-radius: 5px;
text-decoration: none;
margin-top: 15px;
font-weight: normal;
}
.quick-access-section {
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
text-align: center;
}
.quick-link {
color: #007bff;
text-decoration: none;
/* 🚨 تصحيح: استخدام الهوامش المنطقية 🚨 */
margin-inline: 0 10px;
}
.separator {
color: #ccc;
}
/* =================================================== */
/* 6. تنسيق نماذج المحتوى (المنتجات/المطالبات) */
/* =================================================== */
.content-form {
max-width: 900px;
margin: 30px auto;
padding: 30px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr; /* عمودين متساويين */
gap: 20px;
margin-bottom: 20px;
}
.form-control {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* لضمان أن العرض يشمل البادينغ والحدود */
}
.form-grid .full-width {
grid-column: span 2;
}
.content-form input:not([type="submit"]),
.content-form select,
.content-form textarea {
width: 100%;
padding: 10px 15px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* =================================================== */
/* 7. تنسيق الجداول والتبويبات */
/* =================================================== */
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.data-table th, .data-table td {
padding: 12px 15px;
/* 🚨 تصحيح: إزالة النص المثبت على اليمين 🚨 */
border: 1px solid #ddd;
}
.data-table th {
background-color: #004d99;
color: white;
/* 🚨 تصحيح: إزالة النص المثبت على اليمين 🚨 */
}
.data-table tr:nth-child(even) {
background-color: #f9f9f9;
}
/* توحيد محاذاة النص في الجدول */
.data-table th, .data-table td {
/* يتم تطبيق المحاذاة حسب dir="rtl" أو dir="ltr" */
text-align: inherit;
}
/* 🚨 أنماط مخصصة لـ LTR 🚨 */
[dir="ltr"] .data-table th,
[dir="ltr"] .data-table td {
text-align: left;
}
/* تنسيق التبويبات (الأزرار المتلاصقة) */
.tab-buttons a.btn {
/* 🚨 تصحيح: استخدام margin-inline-end 🚨 */
margin-inline-end: 10px;
text-decoration: none;
}
.tab-buttons .btn-primary {
font-weight: bold;
border-bottom: 3px solid #007bff;
background-color: #f8f9fa;
color: #000;
}
/* 🚨 تنسيق حقل الرفع الإضافي (لحل مشكلة صغر حجم زر الرفع) 🚨 */
.form-row {
display: flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.form-row .input-full-width {
flex-grow: 1;
min-width: 150px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-row input[type="file"] {
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-row .btn-primary {
padding: 8px 15px;
font-size: 14px;
height: 38px;
white-space: nowrap;
}
/* =================================================== */
/* 8. الأنماط المعكوسة (L-T-R Overrides) */
/* =================================================== */
/* 🚨 هذا الجزء هو المفتاح لنقل عناصر الواجهة في وضع LTR 🚨 */
/* عكس محاذاة الجداول (لأنها كانت مثبتة على اليمين) */
[dir="ltr"] .data-table th,
[dir="ltr"] .data-table td {
text-align: left;
}
/* عكس الشريط الجانبي (sidebar) */
.sidebar {
float: right;
}
[dir="ltr"] .sidebar {
float: left;
}
/* عكس محاذاة الجدول الجزئية (إذا لزم الأمر) */
[dir="ltr"] .data-table th:nth-child(1),
[dir="ltr"] .data-table td:nth-child(1) {
text-align: center; /* يمكن إبقاء التوسيط كما هو */
}
/* =================================================== */
/* 9. استجابة الشاشات الصغيرة (Media Queries) */
/* =================================================== */
@media (max-width: 768px) {
.dashboard-layout {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
}
/* =================================================== */
/* 10. تنسيق تذييل الصفحة (Footer) */
/* =================================================== */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px 0;
font-size: 14px;
}
/* =================================================== */
/* 11. أنماط Grid لنموذج التسجيل المتقدم (register.php) */
/* =================================================== */
/* 🚨 1. أنماط Grid الأساسية (لتقسيم الأعمدة) 🚨 */
.auth-grid-form {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 أعمدة */
gap: 20px; /* مسافة بين الحقول */
}
/* 🚨 2. النمط للامتداد على كامل العرض 🚨 */
.auth-grid-form .grid-span-full {
grid-column: 1 / -1;
}
/* 🚨 3. تنسيق حقول الإدخال داخل Grid (الأهم لإعادة الشكل المنسق) 🚨 */
/* تنسيق الـ label */
.auth-grid-form .grid-col-item label,
.auth-grid-form .grid-span-full label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
/* تنسيق حقول الإدخال والـ select والـ textarea داخل الـ Grid */
.auth-grid-form input, /* يشمل كل أنواع الـ input */
.auth-grid-form select,
.auth-grid-form textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
margin-bottom: 0; /* نلغي أي هامش سفلي قديم ونعتمد على الـ gap */
}
/* 🚨 تصحيح ارتفاع حقل التاريخ 🚨 */
.auth-grid-form input[type="date"] {
height: 44px; /* لضمان ارتفاع ثابت */
}
/* 🚨 تصغير خط ملاحظة ثبات البيانات 🚨 */
.auth-container .auth-note {
font-size: 0.9em;
font-weight: normal !important;
color: #555;
}
/* 🚨 4. استجابة الشاشات الصغيرة (Media Queries) 🚨 */
@media (max-width: 992px) {
.auth-grid-form {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.auth-grid-form {
grid-template-columns: 1fr;
}
}
/* ====================================
تنسيق مربع تبديل اللغة (Language Switcher)
==================================== */
.lang-switcher {
/* التأكد من ظهوره بشكل صحيح في النافبار */
display: flex;
align-items: center;
margin-inline-start: 15px; /* مسافة عن العناصر المجاورة (لـ RTL/LTR) */
}
.lang-switcher #langSelect {
/* جعل الحقل أكبر وأكثر وضوحاً */
padding: 8px 12px;
height: 40px; /* تحديد ارتفاع موحد */
font-size: 14px; /* حجم خط مناسب */
font-weight: 500;
/* التصميم الجمالي */
border: 1px solid #ccc; /* حدود خفيفة */
border-radius: 6px; /* زوايا ناعمة */
background-color: #f9f9f9; /* خلفية خفيفة */
color: #333; /* لون النص */
/* إخفاء سهم المتصفح الافتراضي وجعل السهم مخصصاً (اختياري) */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* إضافة سهم مخصص للقائمة المنسدلة */
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px; /* ترك مسافة للسهم */
/* التأثير عند التركيز */
transition: border-color 0.3s, box-shadow 0.3s;
}
.lang-switcher #langSelect:hover {
border-color: #999;
cursor: pointer;
}
.lang-switcher #langSelect:focus {
border-color: #007bff; /* لون التركيز الأساسي */
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* ظل خفيف حول المربع */
}
.status-new { color: blue; font-weight: bold; }
.status-in-progress { color: orange; font-weight: bold; }
.status-approved { color: green; font-weight: bold; }
.status-rejected { color: red; font-weight: bold; }
.status-paid { color: #007bff; font-weight: bold; }
/* =======================================
تنسيق الفوتر (Footer Styling)
======================================= */
.main-footer {
background-color: #1E3A8A; /* لون غامق للفوتر */
color: #f8f9fa; /* لون فاتح للنص */
padding: 40px 0 20px 0;
line-height: 1.8;
}
.footer-columns {
display: flex;
justify-content: space-between;
gap: 30px; /* المسافة بين الأعمدة */
margin-bottom: 30px;
flex-wrap: wrap; /* السماح للأعمدة بالنزول في الشاشات الصغيرة */
}
.footer-col {
flex: 1; /* جعل كل عمود يأخذ حصته بالتساوي */
min-width: 250px; /* ضمان عدم انكماش الأعمدة كثيراً */
}
.main-footer h3 {
color: #4CAF50; /* لون مميز للعناوين */
font-size: 18px;
margin-bottom: 20px;
border-bottom: 2px solid #555;
padding-bottom: 5px;
}
.footer-col-info p {
font-size: 16px;
margin-bottom: 15px; /* إضافة مسافة أسفل الفقرة للفصل عن أيقونات التواصل */
line-height: 1.6; /* تحسين قراءة النص */
}
/* تنسيق الروابط والقوائم */
.main-footer ul {
list-style: none;
padding: 0;
}
.main-footer ul li {
margin-bottom: 10px;
font-size: 16px;
}
.main-footer ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.main-footer ul li a:hover {
color: #4CAF50;
}
/* أيقونات ومعلومات الاتصال */
.footer-col-contact ul li i {
margin-inline-end: 10px;
color: #4CAF50;
}
.working-hours-info {
font-size: 13px;
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #555;
}
/* روابط التواصل الاجتماعي */
.social-links-footer {
margin-top: 20px;
}
.social-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
background-color: #555;
color: #f8f9fa;
border-radius: 50%;
text-decoration: none;
margin-inline-end: 8px;
transition: background-color 0.3s;
}
.social-icon:hover {
background-color: #4CAF50;
}
.copyright-text {
font-size: 13px;
color: #999;
}
/* تنسيق الشاشات الصغيرة */
@media (max-width: 768px) {
.footer-columns {
flex-direction: column;
gap: 20px;
}
.footer-col {
min-width: 100%;
padding-bottom: 20px;
border-bottom: 1px dashed #555;
}
.footer-col:last-child {
border-bottom: none;
}
}
/* =======================================
تنسيق الهيدر (Header Styling)
======================================= */
.main-header {
/* اختيار لون رسمي لخلفية الهيدر */
background-color: #FFFFFF; /* نتركه أبيض أو فاتح جداً */
border-bottom: 3px solid #0056b3; /* خط فاصل أزرق داكن رسمي */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ظل خفيف */
}
/* الشريط العلوي للمعلومات (Top Bar) */
.header-top-bar {
background-color: #0056b3; /* 🚨 اختر هذا اللون لشريط المعلومات العلوي 🚨 */
color: white; /* لون النص الأبيض */
padding: 8px 0;
font-size: 13px;
text-align: center;
}
.header-top-bar a {
color: #ccf; /* لون الروابط في الشريط العلوي */
text-decoration: none;
}
/* المنطقة الرئيسية للشعار */
.main-navbar-area {
display: flex;
justify-content: center; /* وضع الشعار في المنتصف */
align-items: center;
padding: 10px 0;
}
/* تنسيق الشعار وعنوان الشركة */
.logo a {
text-decoration: none;
}
.logo h1 {
color: #003366; /* لون نص الشعار (كحلي) */
font-size: 24px;
margin: 0;
}
/* إذا كان لديك وسم img للشعار، تأكد من أن له كلاس */
.company-logo {
height: 40px; /* تأكد من تحديد ارتفاع مناسب للشعار */
width: auto;
}
/* =======================================
تعديلات لتنسيق الهيدر واللوجو
======================================= */
/* تحديد حجم اللوجو وشعار الشركة */
.logo {
display: flex; /* لضمان محاذاة اللوجو */
align-items: center;
}
.logo img {
height: 40px; /* الارتفاع الذي اخترته، تأكد من أنه نفسه في header.php */
width: auto;
/* إزالة أي هوامش قديمة */
margin: 0;
}
/* تنسيق الـ Main-Navbar-Area لضمان المحاذاة */
.main-navbar-area {
/* تم التعديل ليصبح احترافياً أكثر */
display: flex;
justify-content: space-between; /* بدلاً من Center، لتمكين النافبارات المخصصة */
align-items: center;
padding: 10px 0;
}
.footer-bottom {
/* 🚨 أضف هذه الخاصية 🚨 */
width: 100%;
/* 🚨 أضف هذه الخاصية لضمان عدم مشاركته في توزيع الأعمدة 🚨 */
flex-shrink: 0;
/* باقي التنسيقات */
text-align: center;
padding-top: 20px;
border-top: 1px solid #555;
margin-top: 30px;
}
/* تنسيق Flexbox لوضع الشعار ومعلومات الاتصال في سطر واحد */
.header-combined-row {
/* يجعل العناصر تتوازى في سطر واحد */
display: flex;
/* توزيع المساحة: يتم دفع العناصر إلى الأطراف (Space Between) */
justify-content: space-between;
/* محاذاة العناصر عمودياً في المنتصف */
align-items: center;
padding: 15px 0; /* تباعد داخلي */
}
/* تنسيق مجموعة الشعار واسم الشركة */
.header-brand a {
/* ضمان أن الشعار واسم الشركة في سطر واحد داخل العلامة */
display: flex;
align-items: center;
text-decoration: none; /* إزالة خطوط الروابط */
color: #333; /* لون نص الشعار */
}
/* تنسيق اسم الشركة */
.company-name-display {
font-size: 1.5rem;
font-weight: bold;
/* يمكنك إضافة لون مميز هنا */
/* color: #007bff; */
}
/* تنسيق معلومات الاتصال */
.contact-info-top {
font-size: 0.95rem;
color: #555;
/* ضمان عدم وجود التفاف غير مرغوب فيه في الأجهزة الصغيرة */
white-space: nowrap;
}
.contact-info-top a {
color: #007bff;
text-decoration: none;
}
/* فاصلة صغيرة بين الهاتف والبريد الإلكتروني */
.contact-info-top .separator {
margin: 0 5px;
color: #ccc;
}