* {
    box-sizing: border-box;
}
/* Basic Reset and Font */
:root {
    --primary-bg: #f4f7fa;      /* Light Gray */
    --secondary-bg: #ffffff;    /* White */
    --sidebar-bg: #111827;      /* Dark Blue/Gray */
    --accent-color: #3b82f6;    /* Blue */
    --text-primary: #1f2937;    /* Dark Text */
    --text-secondary: #6b7280;  /* Gray Text */
    --text-on-dark: #f9fafb;     /* White Text on Dark BG */
    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    /* تم حذف overflow-x: hidden; للسماح بالتمرير */
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    position: relative; /* <-- السطر الجديد الأول */
    z-index: 1;         /* <-- السطر الجديد الثاني */
}

/* Sidebar Styles (Updated for better contrast and feel) */
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: width 0.3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header .logo {
    height: 40px;
    margin-left: 15px;
}

.sidebar-header h1 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--text-on-dark);
}

.sidebar-nav {
    flex-grow: 1;
    padding-top: 15px;
    overflow-y: auto; /* <-- هذا هو السطر الأهم */
}
.search-hidden {
    display: none !important;
}


#sidebar-search-input:focus {
    border-color: var(--accent-color) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

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

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    margin: 5px 10px;
    color: #a7b3c4; /* Lighter gray for better readability */
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px; /* Rounded corners for tabs */
    transition: all 0.2s ease;
    border: none; /* <-- هذا هو السطر الجديد والمهم */
}

.sidebar-nav a:hover {
    background-color: #252e3e;
    color: var(--text-on-dark);
}

.sidebar-nav a.active {
    background-color: var(--accent-color);
    color: var(--text-on-dark);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Glow effect for active tab */
}

.sidebar-nav a i {
    font-size: 1.4rem;
    margin-left: 15px;
}

.sidebar-footer {
    padding: 20px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Main Content Styles */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.main-header {
    background-color: var(--secondary-bg);
    padding: 15px 30px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px var(--shadow-color);
    z-index: 10;
}

.main-header h2 {
    margin: 0;
    font-size: 1.75rem;
}

.user-profile {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.user-profile i {
    font-size: 2.5rem;
    margin-right: 15px;
    color: var(--accent-color);
}

.content-area {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto; /* <-- إضافة */
}

/* === NEW PROFESSIONAL BUTTON STYLES === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 5px var(--shadow-color);
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--shadow-color);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px var(--shadow-color);
}

.btn i {
    font-size: 1.2rem;
}

/* Button Colors */
.btn-primary {
    background-color: var(--accent-color);
    color: white;
}
.btn-primary:hover {
    background-color: #2563eb;
}

.btn-success {
    background-color: #22c55e;
    color: white;
}
.btn-success:hover {
    background-color: #16a34a;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}
.btn-danger:hover {
    background-color: #dc2626;
}

.btn-secondary {
    background-color: #ffffff;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

/* For logout button */
.btn-logout {
    width: 100%;
    background-color: #374151;
    color: white;
}
.btn-logout:hover {
    background-color: #1f2937;
}

/* Showcase container for buttons */
.button-showcase {
    background-color: var(--secondary-bg);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    box-shadow: 0 4px 10px var(--shadow-color);
}
/* Page Content Visibility */
.page-content.hidden {
    display: none;
}

/* Styles for tables from user's files */
.table-container {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px var(--shadow-color);
    overflow-x: auto;
    width: 100%; /* التأكيد على أن الحاوية تأخذ كامل العرض المتاح */
}
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.table-header h3 {
    margin: 0;
    font-size: 1.5rem;
}
table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}
th, td {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}
th {
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.85rem;
}
.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
}
.status.active {
    background-color: #28a74540;
    color: #16a34a;
}
.status.inactive {
    background-color: #fee2e2; /* Light Red */
    color: #b91c1c; /* Dark Red */
}
.btn-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 1.2rem;
    color: var(--text-secondary);
}
.btn-action.edit:hover { color: var(--accent-color); }
.btn-action.delete:hover { color: #dc2626; }

/* Styles for statistics cards */
/* === Styles for Statistics Cards (Improved) === */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px; /* للحفاظ على التوافق مع تقسيم الأعمدة */
}

/* responsive columns */
.col-xl-3 { flex: 0 0 25%; max-width: 25%; padding: 15px; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; padding: 15px; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 15px; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; padding: 15px; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 15px; }

.card-statistic {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-statistic:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.icon-stat {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0; /* يمنع الأيقونة من التقلص */
}

.card-statistic h3 {
    font-size: 2.25rem; /* حجم أكبر للرقم */
    margin: 0 0 5px 0;
    font-weight: 700;
}
.card-statistic p {
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}
/* === Job Cards Styles === */
.jobs-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.job-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.job-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.job-card-body {
    padding: 0 20px;
    flex-grow: 1;
    color: var(--text-secondary);
}

.job-card-body p {
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-card-body p i {
    font-size: 1.1rem;
    color: var(--accent-color);
}

.job-card-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
    text-align: left;
}
/* === Map Styles === */
#map {
    height: calc(100vh - 150px); /* اجعل ارتفاع الخريطة يملأ اغلب الشاشة */
    width: 100%;
    border-radius: 8px;
}
/* === Schedules Styles === */
.schedule-day-group {
    margin-bottom: 35px;
}

.schedule-day-group h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.shifts-container {
    display: grid;
    gap: 15px;
}

.shift-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    padding: 20px;
    border-right: 5px solid var(--accent-color);
}

.shift-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    width: 220px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.shift-details p {
    margin: 0 0 5px 0;
    font-size: 1rem;
}

.shift-details p strong {
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 5px;
}
/* === Open Shifts (Coverage) Styles === */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.page-header h3 {
    margin: 0;
    font-size: 1.6rem;
}

.open-shift-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    padding: 20px 25px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 5px solid #f59e0b; /* Orange as default for open shifts */
}

.open-shift-card h4 { margin: 0 0 5px 0; font-size: 1.2rem; }
.open-shift-card .shift-timing { font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px;}
.open-shift-card .shift-notes { font-size: 0.9rem; margin: 0; }
.open-shift-card .shift-notes strong { color: var(--text-primary); }

.shift-status-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    flex-shrink: 0;
    margin-right: 10px;
}
/* === Visits Page Styles === */
.visit-card {
    display: flex;
    gap: 25px;
    background-color: var(--secondary-bg);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-right: 5px solid #8b5cf6; /* بنفسجي */
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

.visit-icon {
    font-size: 2.2rem;
    color: #8b5cf6; /* بنفسجي */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}

.visit-details h4 {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
}

.visit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.visit-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.visit-notes {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}
/* === New Reports Page Styles (Filter View) === */
.report-filters-card {
    background-color: var(--secondary-bg);
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    margin-bottom: 30px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.filter-group input[type="date"],
.filter-group select {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: #f8f9fa; /* Light background for inputs */
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    box-sizing: border-box; /* Important for padding */
}

.report-actions {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end; /* Align buttons to the left */
    gap: 15px;
}

.report-results-area {
    background-color: var(--secondary-bg);
    padding: 50px;
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
    min-height: 200px;
    border: 1px dashed #d1d5db;
    font-size: 1.1rem;
}

/* === Attendance Page Styles === */
.attendance-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 40px;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}
.attendance-status-text {
    font-size: 1.3rem;
    margin-bottom: 25px;
}
.attendance-status-text strong {
    color: var(--accent-color);
}
.btn-lg {
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 700;
}
.location-status {
    margin-top: 25px;
    color: var(--text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* === New "My Requests" Page Styles (from screenshot) === */
.requests-actions-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 أعمدة على الشاشات الكبيرة */
    gap: 20px;
}

.request-action-card {
    background-color: var(--card-color, #6c757d); /* استخدام متغير اللون مع لون احتياطي */
    color: white;
    border-radius: 12px; /* زوايا أكثر دائرية */
    padding: 25px 20px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.request-action-card:hover {
    transform: translateY(-8px); /* تأثير رفع للأعلى عند المرور */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.request-action-card i {
    font-size: 3.5rem; /* أيقونات أكبر */
    margin-bottom: 15px;
    display: block;
    opacity: 0.9;
}

.request-action-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

/* جعل التصميم متجاوب مع الشاشات الصغيرة */
@media (max-width: 992px) {
    .requests-actions-container {
        grid-template-columns: repeat(2, 1fr); /* عمودان على الشاشات المتوسطة */
    }
}
@media (max-width: 576px) {
    .requests-actions-container {
        grid-template-columns: 1fr; /* عمود واحد على شاشات الجوال */
    }
}

#past-requests-list {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}
/* ======================================================= */
/* === Login Page & Modal Styles (Corrected & Final) === */
/* ======================================================= */

/* Login Page Styles */
/* بداية الاستبدال */
#login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative; /* <-- السطر الجديد الأول */
    z-index: 1;         /* <-- السطر الجديد الثاني */
}
/* نهاية الاستبدال */

.login-card {
    background-color: var(--secondary-bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card .logo {
    height: 60px;
    margin-bottom: 20px;
}

.login-card h3 {
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.login-card .form-group {
    text-align: right;
    margin-bottom: 20px; /* إضافة مسافة بين الحقول */
}
.login-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
}

.login-card .form-group input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--primary-bg); /* لون خلفية أغمق قليلاً */
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
}

.login-card .form-group input {
    background-color: #ffffff;
}

.login-card button {
    margin-top: 15px;
    padding: 12px;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.8);
    display: flex;
    justify-content: center;
    align-items: center; /* <-- تم التعديل هنا */
    z-index: 1000;
    opacity: 0;
    visibility: hidden; /* لإخفاء العنصر تماماً */
    transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

/* بداية الإضافة */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
/* نهاية الإضافة */

.modal-panel {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 550px;
    display: flex; /* <-- الأهم: تفعيل Flexbox */
    flex-direction: column; /* <-- الأهم: جعل العناصر تترتب عمودياً */
    max-height: 90vh; /* <-- الأهم: تحديد أقصى ارتفاع للنافذة */
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s ease;
}

.modal-overlay:not(.hidden) .modal-panel {
    transform: scale(1) translateY(0);
}

.modal-header { 
    padding: 20px 25px; 
    border-bottom: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; /* منع الهيدر من الانكماش */
}
.modal-header h4 { margin: 0; font-size: 1.4rem; }
.modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); }

/* ================== بداية إضافة: إصلاح تمرير النماذج الطويلة ================== */
.modal-panel form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* يجعل الفورم يملأ المساحة المتبقية */
    min-height: 0; /* خدعة لضمان عمل التمرير داخل flex */
}
/* ================== نهاية الإضافة ================== */

.modal-body { 
    padding: 25px; 
    flex-grow: 1; /* جعل المحتوى يأخذ المساحة المتبقية */
    overflow-y: auto; /* <-- هذا هو السطر السحري الذي يضيف السكرول عند الحاجة */
    min-height: 0; /* إصلاح لبعض المتصفحات */
}
/* Form Group inside Modal */
.modal-body .form-group {
    margin-bottom: 20px;
}

.modal-body .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.modal-body .form-group input[type="text"],
.modal-body .form-group input[type="email"],
.modal-body .form-group input[type="tel"],
.modal-body .form-group input[type="password"], /* تم إضافة هذا السطر */
.modal-body .form-group input[type="date"], /* تم إضافة هذا السطر */
.modal-body .form-group input[type="datetime-local"], /* تم إضافة هذا السطر */
.modal-body .form-group input[type="number"], /* تم إضافة هذا السطر */
.modal-body .form-group select, /* تم إضافة هذا السطر */
.modal-body .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #f8f9fa;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea { resize: vertical; min-height: 80px; }

.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
    background-color: #f9fafb; /* لون أفتح قليلاً */
    display: flex;
    justify-content: flex-end; /* لمحاذاة الأزرار لليسار */
    gap: 15px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    flex-shrink: 0; /* منع الفوتر من الانكماش */
}
/* === Past Requests List Styles === */
#past-requests-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.request-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.request-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.request-card-header h4 {
    margin: 0;
    font-size: 1.1rem;
}

.request-card-body {
    padding: 20px;
    flex-grow: 1;
    color: var(--text-secondary);
}

.request-card-body p {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}
.request-card-body p:last-child {
    margin-bottom: 0;
}
.request-card-body strong {
    color: var(--text-primary);
}

.request-card-footer {
    padding: 15px 20px;
    background-color: #fff5f5;
    color: #c53030;
    border-top: 1px solid #fed7d7;
    font-size: 0.9rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.request-card-footer strong {
    color: #9b2c2c;
}

/* <<<<<<<<<<<<<<<< بداية الإضافة <<<<<<<<<<<<<<<< */
/* ======================================= */
/* ===   تصميم جديد لصفحة أرشيف الطلبات   === */
/* ======================================= */

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.archive-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    border-left: 5px solid; /* سيتم تحديد اللون بالجافاسكريبت */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.archive-card.status-approved { border-left-color: var(--approved-color); }
.archive-card.status-denied { border-left-color: var(--denied-color); }

.archive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.archive-card-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.archive-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-card-body p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.archive-card-body p strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: 5px;
}

.archive-card-footer {
    padding: 12px 20px;
    background-color: #fff5f5;
    color: #c53030;
    border-top: 1px solid #fed7d7;
    font-size: 0.9rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* ======================================= */
/* ===            نهاية الإضافة           === */
/* ======================================= */
/* <<<<<<<<<<<<<<<< نهاية الإضافة <<<<<<<<<<<<<<<< */

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
}
.status-badge.approved { background-color: #22c55e; }
.status-badge.denied { background-color: #ef4444; }
.status-badge.pending { background-color: #f59e0b; }
/* === كلاس مساعد للإخفاء === */
.hidden {
    display: none !important;
}
.attendance-list {
    display: grid;
    gap: 15px;
    margin-top: 15px;
}
.attendance-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    border-right: 5px solid;
}
.attendance-card.present {
    border-right-color: #22c55e;
}
.attendance-card.absent {
    border-right-color: #ef4444;
}
.attendance-card .time {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: normal;
}
/* === Contract Card Styles === */
.contracts-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.contract-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contract-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.contract-card-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.contract-card-header h4 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.contract-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 1rem;
}

.contract-card-body .info-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
}

.contract-card-body .info-line i {
    font-size: 1.2rem;
    color: var(--accent-color);
}

.contract-card-body .info-line strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Specific status styles for contracts */
.contract-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
}
.contract-status.active { background-color: #22c55e; } /* أخضر */
.contract-status.pending { background-color: #f59e0b; } /* برتقالي */
.contract-status.cancelled { background-color: #ef4444; } /* أحمر */


.contract-card-footer {
    padding: 15px 20px;
    background-color: #f9fafb;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* === Advanced Clauses Section Styles === */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center; /* <-- أضف هذا السطر */
}
.clauses-section .clauses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.clauses-section h5 {
    font-size: 1.2rem;
    margin: 0;
}
#clause-groups-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.clause-group {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}
.clause-group-header {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.clause-group-header .form-group {
    flex-grow: 1;
    margin-bottom: 0;
}
.clause-group-header input {
    background-color: white !important;
}
.clause-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 15px;
    border-right: 3px solid #e5e7eb;
}
.clause-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.clause-item input {
    flex-grow: 1;
    background-color: white !important;
}
.delete-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 5px;
}
.clause-group-footer {
    margin-top: 15px;
}
/* === HR Vacancies Page Styles === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
.stat-card-mini {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-left: 5px solid var(--stat-color, var(--accent-color));
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.stat-card-mini i {
    font-size: 2.5rem;
    color: var(--stat-color, var(--accent-color));
    opacity: 0.8;
}
.stat-card-mini h4 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    font-weight: 700;
}
.stat-card-mini p {
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}

#vacancies-list-container table {
    margin-top: 20px;
}
/* === Professional Tabs System (Final Version) === */
.tabs {
    display: inline-flex;
    background-color: #f3f4f6; /* لون خلفية أفتح قليلاً */
    border-radius: 0.75rem; /* زوايا دائرية عصرية */
    padding: 5px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color); /* حد خفيف للحاوية */
}

.tabs .tab-link { /* استخدام محدد أكثر دقة لمنع التعارض */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px; /* حشوة متوازنة */
    font-size: 0.95rem; /* تنعيم حجم الخط */
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 0.5rem; /* زوايا دائرية متناسقة */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* إزالة أي خط سفلي بشكل صريح */
    white-space: nowrap; /* منع التفاف النص داخل الزر */
}

.tabs .tab-link:hover:not(.active) {
    color: var(--text-primary);
}

.tabs .tab-link.active {
    background-color: var(--secondary-bg); /* خلفية بيضاء للزر النشط */
    color: var(--accent-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ظل خفيف لإعطاء عمق */
    font-weight: 700;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
:root {
    /* ... (الألوان الموجودة لديك) ... */
    --approved-color: #22c55e;
    --denied-color: #ef4444;
    --pending-color: #f59e0b;
}
/* ======================================= */
/* === New Professional Request Cards  === */
/* ======================================= */

.all-requests-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 25px;
}

.review-request-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* لإخفاء أي زوائد من الهيدر الملون */
}

.review-request-header {
    padding: 15px 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-request-header.status-pending { background-color: #f59e0b; }
.review-request-header.status-approved { background-color: #22c55e; }
.review-request-header.status-denied { background-color: #ef4444; }

.review-request-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.review-request-body {
    padding: 20px;
    flex-grow: 1;
}

.request-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.request-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.request-meta-item i {
    font-size: 1.3rem;
    color: var(--accent-color);
}

.request-main-details h5 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.request-main-details p {
    margin: 0 0 8px 0;
    font-size: 1rem;
    line-height: 1.6;
}

.review-request-footer {
    padding: 15px 20px;
    background-color: #f9fafb;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
/* ======================================= */
/* ===         Hiring Page Styles      === */
/* ======================================= */

.hiring-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: flex-start;
}

.hiring-column h4 {
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.hiring-list {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
    border: 1px solid var(--border-color);
}
/* ======================================= */
/* ===     Hiring Page Card Styles     === */
/* ======================================= */

.hiring-list .hiring-card {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hiring-card h5 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.hiring-card p {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* تمييز بطاقات الموظفين لجعلها قابلة للسحب */
.hiring-card.employee-card {
    cursor: grab;
    border-left: 4px solid var(--accent-color);
}

.hiring-card.employee-card:active {
    cursor: grabbing;
    background-color: #eef2ff; /* لون أزرق خفيف عند السحب */
}
.hiring-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hiring-card-header h5 {
    margin: 0;
}

.btn.btn-sm {
    padding: 5px 12px;
    font-size: 0.85rem;
}
/* بداية الإضافة: إصلاح تنسيق أيام الأسبوع */

.weekdays-selector {
    display: flex;
    gap: 15px; /* مسافة بين الأيام */
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
}

.weekdays-selector label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 600;
}

/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات عرض تفاصيل العقد */
.contract-display h2, .contract-display h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.contract-display p {
    font-size: 1.1rem;
    margin: 0 0 12px 0;
}
.location-view-group {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
.location-view-group h4 {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.shifts-view-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shift-view-item {
    border-right: 3px solid var(--accent-color);
    padding-right: 15px;
}
.shift-view-item p {
    font-size: 1rem;
    margin: 0 0 5px 0;
}
/* نهاية الإضافة */
/* === Advanced Clauses Section Styles === */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.clauses-section .clauses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.clauses-section h5 {
    font-size: 1.2rem;
    margin: 0;
}
#clause-groups-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.clause-group {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}
.clause-group-header {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.clause-group-header .form-group {
    flex-grow: 1;
    margin-bottom: 0;
}
.clause-group-header input {
    background-color: white !important;
}
.clause-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 15px;
    border-right: 3px solid #e5e7eb;
}
.clause-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.clause-item input {
    flex-grow: 1;
    background-color: white !important;
}
.delete-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 5px;
}
.clause-group-footer {
    margin-top: 15px;
}
/* === HR Vacancies Page Styles === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}
.stat-card-mini {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-left: 5px solid var(--stat-color, var(--accent-color));
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.stat-card-mini i {
    font-size: 2.5rem;
    color: var(--stat-color, var(--accent-color));
    opacity: 0.8;
}
.stat-card-mini h4 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    font-weight: 700;
}
.stat-card-mini p {
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}

#vacancies-list-container table {
    margin-top: 20px;
}
/* === Tabs System Styles === */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 25px;
}
.tab-link {
    padding: 15px 25px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab-link:hover {
    color: var(--text-primary);
}
.tab-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
:root {
    /* ... (الألوان الموجودة لديك) ... */
    --approved-color: #22c55e;
    --denied-color: #ef4444;
    --pending-color: #f59e0b;
}
/* ======================================= */
/* === New Professional Request Cards  === */
/* ======================================= */

.all-requests-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 25px;
}

.review-request-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* لإخفاء أي زوائد من الهيدر الملون */
}

.review-request-header {
    padding: 15px 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-request-header.status-pending { background-color: #f59e0b; }
.review-request-header.status-approved { background-color: #22c55e; }
.review-request-header.status-denied { background-color: #ef4444; }

.review-request-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.review-request-body {
    padding: 20px;
    flex-grow: 1;
}

.request-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.request-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.request-meta-item i {
    font-size: 1.3rem;
    color: var(--accent-color);
}

.request-main-details h5 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
}

.request-main-details p {
    margin: 0 0 8px 0;
    font-size: 1rem;
    line-height: 1.6;
}

.review-request-footer {
    padding: 15px 20px;
    background-color: #f9fafb;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
/* ======================================= */
/* ===         Hiring Page Styles      === */
/* ======================================= */

.hiring-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: flex-start;
}

.hiring-column h4 {
    font-size: 1.3rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.hiring-list {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 15px;
    min-height: 400px;
    border: 1px solid var(--border-color);
}
/* ======================================= */
/* ===     Hiring Page Card Styles     === */
/* ======================================= */

.hiring-list .hiring-card {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hiring-card h5 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.hiring-card p {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* تمييز بطاقات الموظفين لجعلها قابلة للسحب */
.hiring-card.employee-card {
    cursor: grab;
    border-left: 4px solid var(--accent-color);
}

.hiring-card.employee-card:active {
    cursor: grabbing;
    background-color: #eef2ff; /* لون أزرق خفيف عند السحب */
}
.hiring-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hiring-card-header h5 {
    margin: 0;
}

.btn.btn-sm {
    padding: 5px 12px;
    font-size: 0.85rem;
}
/* بداية الإضافة: إصلاح تنسيق أيام الأسبوع */

.weekdays-selector {
    display: flex;
    gap: 15px; /* مسافة بين الأيام */
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
}

.weekdays-selector label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: 600;
}

/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات عرض تفاصيل العقد */
.contract-display h2, .contract-display h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.contract-display p {
    font-size: 1.1rem;
    margin: 0 0 12px 0;
}
.location-view-group {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
.location-view-group h4 {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.shifts-view-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shift-view-item {
    border-right: 3px solid var(--accent-color);
    padding-right: 15px;
}
.shift-view-item p {
    font-size: 1rem;
    margin: 0 0 5px 0;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات السجل الهرمي */
.attendance-accordion details {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.attendance-accordion summary {
    padding: 15px 20px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* إخفاء السهم الافتراضي */
    display: flex;
    align-items: center;
    gap: 10px;
}

.attendance-accordion summary::before {
    content: '\ea3a'; /* أيقونة السهم من Phosphor Icons */
    font-family: 'Phosphor Icons';
    font-weight: bold;
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.attendance-accordion details[open] > summary::before {
    transform: rotate(90deg);
}

.attendance-accordion .content {
    padding: 0px 20px 20px 45px;
    border-top: 1px solid var(--border-color);
}

.attendance-accordion .content details { /* تنسيق المستويات الداخلية */
    background-color: #f8f9fa;
    box-shadow: none;
}
.attendance-accordion .content summary {
    font-size: 1.1rem;
    font-weight: 600;
}

.attendance-accordion .records-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.attendance-accordion .records-table th, 
.attendance-accordion .records-table td {
    text-align: right;
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}
/* نهاية الإضافة */

/* ==================== بداية الإضافة: تنسيقات جدول سجل الحضور ==================== */
.attendance-log-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.attendance-log-table th, 
.attendance-log-table td {
    text-align: right;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}
.attendance-log-table thead th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: var(--text-secondary);
}
.location-header-row th {
    background-color: var(--sidebar-bg);
    color: white;
    padding: 10px 15px;
    font-size: 1.2rem;
    text-align: center !important;
}
.status.completed {
    background-color: #e5e7eb;
    color: #4b5563;
}
.status.permission {
    background-color: #fef9c3;
    color: #a16207;
}
/* ===================== نهاية الإضافة: تنسيقات جدول سجل الحضور ===================== */

/* بداية الإضافة */
.attachments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.attachments-grid h5 {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.attachment-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    object-fit: contain; /* للتأكد من ظهور الصورة كاملة */
    background-color: #f8f9fa;
}

@media (max-width: 576px) {
    .attachments-grid {
        grid-template-columns: 1fr;
    }
}
/* نهاية الإضافة */
/* --- أكواد التجاوب مع شاشات الجوال --- */

/* إخفاء زر القائمة على الشاشات الكبيرة */
#menu-toggle-btn {
    display: none;
}

/* للأجهزة اللوحية والجوال (أصغر من 992 بكسل) */
@media (max-width: 992px) {
    .sidebar {
        position: fixed; /* تغيير التموضع ليصبح عائماً */
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1100; /* لضمان ظهوره فوق المحتوى */
        transform: translateX(-100%); /* إخفاء القائمة خارج الشاشة افتراضياً */
        transition: transform 0.3s ease-in-out;
    }

    .sidebar.open {
        transform: translateX(0); /* إظهار القائمة عند إضافة كلاس open */
    }

    .main-content {
        width: 100%; /* اجعل المحتوى الرئيسي يأخذ كامل العرض */
    }

    /* إظهار زر القائمة ووضعه في بداية الهيدر */
    #menu-toggle-btn {
        display: inline-flex;
        font-size: 1.5rem;
        order: -1; 
    }

    .main-header {
        gap: 15px;
    }
}
/* إظهار زر الخروج الجديد في الجوال فقط */
#logout-btn-mobile {
    display: none; /* إخفاؤه افتراضياً على الشاشات الكبيرة */
    font-size: 1.5rem;
    color: var(--text-secondary);
}

@media (max-width: 992px) {
    /* إظهار زر الخروج في الهيدر للجوال */
    #logout-btn-mobile {
        display: inline-flex;
    }

    /* إخفاء زر الخروج القديم الذي في القائمة الجانبية */
    .sidebar-footer {
        display: none;
    }
}
#enable-notifications-btn {
    font-size: 1.5rem;
    color: var(--text-secondary);
}
/* ======================================= */
/* ===   تحسينات واجهة الجوال (PWA)   === */
/* ======================================= */

/* استهداف الشاشات الأصغر من 768 بكسل (معظم الجوالات) */
@media (max-width: 768px) {

    /* تقليل الحشو العام لإعطاء مساحة أكبر للمحتوى */
    .content-area {
        padding: 20px;
    }

    /* تعديل الهيدر ليصبح أنظف في الجوال */
    .main-header {
        padding: 10px 15px;
        gap: 10px;
    }
    
    /* إخفاء عنوان الصفحة النصي الكبير في الجوال لتوفير المساحة */
    .main-header h2 {
        display: none;
    }
    
    /* إخفاء اسم المستخدم في الهيدر والإبقاء على الأيقونات فقط */
    .user-profile span {
        display: none;
    }
    .user-profile i {
        font-size: 2.2rem;
        margin-right: 0;
    }

    /* جعل النماذج تظهر بعمود واحد بدلاً من عمودين لتسهيل التعبئة */
    .form-grid,
    .hiring-layout-grid,
    .request-meta-grid {
        grid-template-columns: 1fr;
    }

    /* تعديل حجم الخطوط الرئيسية لتناسب الشاشة الصغيرة */
    .page-header h3, .main-header h2 {
        font-size: 1.4rem;
    }
    .card-statistic h3 {
        font-size: 1.8rem;
    }
    .modal-header h4 {
        font-size: 1.2rem;
    }
    
    /* التأكد من أن بطاقات المراجعة تأخذ كامل العرض */
.all-requests-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 25px;
}
    
    /* تصغير حجم أزرار الإجراءات في الجداول */
    .btn-action {
        padding: 2px;
        font-size: 1.1rem;
    }
}
/* ======================================= */
/* === تصميم محسن لصفحة حضور الحراس === */
/* ======================================= */

.attendance-list {
    display: grid;
    grid-template-columns: 1fr; /* عمود واحد دائمًا لتصميم البطاقة الجديد */
    gap: 15px;
}

.attendance-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    border-right: 5px solid; /* سيتم تحديد اللون بناءً على الحالة */
    transition: all 0.2s ease-in-out;
}

.attendance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* تحديد لون الشريط الجانبي للبطاقة بناءً على الحالة */
.attendance-card.present { border-right-color: var(--approved-color); }
.attendance-card.absent { border-right-color: var(--denied-color); }
.attendance-card.off { border-right-color: var(--pending-color); }

.attendance-card .time {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: normal;
}

.attendance-card > div > span { /* اسم الحارس */
    font-weight: 700;
    font-size: 1.1rem;
}

/* تنسيق جديد للحالة ليكون أوضح */
.attendance-card .status-text {
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: white;
}

.attendance-card.present .status-text { background-color: var(--approved-color); }
.attendance-card.absent .status-text { background-color: var(--denied-color); }
.attendance-card.off .status-text { background-color: var(--pending-color); color: var(--text-primary); }
/* ======================================= */
/* ===  تحسينات إضافية لواجهة الجوال   === */
/* ======================================= */

/* 1. إضافة سكرول للقائمة الجانبية عند الحاجة */
.sidebar-nav {
    flex-grow: 1; /* تجعل القائمة تملأ المساحة المتاحة */
    overflow-y: auto; /* يضيف سكرول عمودي فقط اذا كانت القائمة أطول من الشاشة */
}

/* 2. تحسينات عامة لجعل المظهر أقرب للتطبيقات */
html {
    scroll-behavior: smooth; /* يجعل التمرير داخل الصفحة سلسًا */
}

body {
    -webkit-tap-highlight-color: transparent; /* يزيل الوميض الرمادي عند لمس الروابط في الجوال */
    -webkit-font-smoothing: antialiased; /* يحسن عرض الخطوط */
    text-rendering: optimizeLegibility;
}

/* 3. تحسين مظهر البطاقات والنماذج في الجوال */
@media (max-width: 768px) {
    /* إضافة مسافات داخلية أفضل للبطاقات */
    .contract-card-body, .review-request-body, .visit-details {
        padding: 15px;
    }
    
    .contract-card-header, .review-request-header {
        padding: 12px 15px;
    }

    /* تحسين شكل حقول الإدخال */
    .form-group input, .form-group select, .form-group textarea {
        padding: 14px;
        font-size: 1rem;
        background-color: #f8f9fa;
        border: 1px solid #e5e7eb;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* تغيير شكل الحقل عند التركيز عليه */
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        outline: none;
    }

    /* إضافة تأثير بسيط عند الضغط على البطاقات القابلة للضغط */
    .request-action-card:active {
        transform: translateY(0) scale(0.95); /* تأثير ضغط للأسفل */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}
/* ================================== */
/* === إصلاح تنسيق صفحة ملفي الشخصي === */
/* ================================== */
@media (max-width: 768px) {
    #page-my-profile .attendance-card {
        padding: 25px;
    }
}
/* ============================================== */
/* === إصلاح نهائي لنموذج تغيير كلمة المرور بالجوال === */
/* ============================================== */
@media (max-width: 768px) {
    #page-my-profile .form-group label {
        display: block; /* يجعل العنوان يأخذ سطراً كاملاً */
        text-align: right; /* التأكد من محاذاة النص لليمين */
        margin-bottom: 8px; /* مسافة بين العنوان والحقل */
    }

    #page-my-profile .form-group input {
        width: 100%; /* اجعل حقل الإدخال يأخذ كامل العرض المتاح */
    }
}
/* ============================================== */
/* ===   إصلاح نهائي ومخصص لصفحة ملفي الشخصي   === */
/* ============================================== */
@media (max-width: 768px) {
    /* استهداف الحاوية الرئيسية في صفحة ملفي الشخصي */
    #page-my-profile .attendance-card {
        display: flex;
        flex-direction: column; /* الأهم: جعل العناصر تترتب عمودياً */
        align-items: stretch; /* جعل العناصر تملأ العرض */
        text-align: right; /* محاذاة كل النصوص لليمين */
        padding: 20px;
    }

    #page-my-profile h4 {
        width: 100%;
        text-align: center; /* توسط العنوان */
        margin-bottom: 25px; /* مسافة تحت العنوان */
    }

    #page-my-profile .form-group {
        width: 100%; /* اجعل مجموعة الحقل تأخذ العرض الكامل */
        margin-bottom: 20px;
    }

    #page-my-profile .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
    }

    #page-my-profile .form-group input {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    /* تنسيق خاص لزر التحديث */
    #page-my-profile .btn-primary {
        width: 100%;
        margin-top: 10px;
        padding: 14px;
    }
}
/* تنسيق صور المرفقات في النافذة المنبثقة */
.attachment-image {
    width: 100%;
    height: auto;
    max-height: 250px; /* تحديد ارتفاع أقصى */
    object-fit: contain; /* للتأكد من ظهور الصورة كاملة */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8f9fa;
    margin-top: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.attachment-image:hover {
    opacity: 0.8;
}
/* ==================== بداية الإضافة: تنسيقات المرفقات ونافذة عرض الصور ==================== */
.attachment-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.attachment-image:hover {
    transform: scale(1.05);
}
/* ===================== نهاية الإضافة ===================== */
/* ==================== بداية الإضافة: تحسينات عرض الصور القابلة للتكبير ==================== */

.viewable-image {
    cursor: pointer; /* يغير شكل مؤشر الفأرة إلى يد للإشارة إلى أنها قابلة للنقر */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* يجعل التأثيرات ناعمة */
}

.viewable-image:hover {
    transform: scale(1.05); /* تكبير بسيط للصورة عند مرور الفأرة فوقها */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* إضافة ظل خفيف لإبراز الصورة */
}

/* =================================== نهاية الإضافة =================================== */
/* ==================== بداية الإضافة: تفعيل السكرول في نافذة المراجعة ==================== */

/* نجعل الفورم يأخذ المساحة المتاحة كاملة داخل النافذة */
#ops-review-applicant-modal #ops-review-form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* خدعة بسيطة لضمان عمل السكرول بشكل صحيح داخل Flexbox */
}

/* نجعل جسم النافذة هو الجزء الذي يتمدد ويقبل السكرول */
#ops-review-applicant-modal .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* هذا هو السطر الأهم الذي يضيف السكرول العمودي عند الحاجة */
}

/* =================================== نهاية الإضافة =================================== */
/* إصلاح تنسيق صفحة العطلات الرسمية */
#page-official-holidays {
    display: block;
}
/* تنسيق مخصص لشبكة صفحة العطلات */
.holidays-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودان على الشاشات الكبيرة */
    gap: 30px;
    align-items: flex-start;
}

/* في الجوال، اجعلها عمودًا واحدًا */
@media (max-width: 768px) {
    .holidays-layout-grid {
        grid-template-columns: 1fr;
    }
}
/* بداية كود الإصلاح الإضافي لضمان المحاذاة للأعلى */
.content-area > .page-content {
    margin-top: 0 !important;
}
/* نهاية كود الإصلاح الإضافي */
.modal-body { padding: 25px; flex-grow: 1; overflow-y: auto; }
/* بداية الإضافة: تنسيقات مجموعات الاختيار */
.checkbox-group-container {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    max-height: 150px; /* تحديد ارتفاع أقصى */
    overflow-y: auto; /* إضافة شريط تمرير عند الحاجة */
    margin-top: 5px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkbox-grid label:hover {
    background-color: #eef2ff;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات نافذة العقود الجديدة */

/* تصميم جديد للمناطق والمدن (نظام الوسوم - Tags) */
.tag-selector-container {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    background-color: var(--accent-color);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tag-item.region-tag {
    cursor: pointer;
    transition: background-color 0.2s;
}

.tag-item.region-tag:not(.selected) {
    background-color: #e5e7eb;
    color: var(--text-secondary);
}

.tag-item .remove-tag {
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.7;
}
.tag-item .remove-tag:hover {
    opacity: 1;
}

.add-tag-controls {
    display: flex;
    gap: 10px;
}

.add-tag-controls input {
    flex-grow: 1;
}

/* تصميم جديد لنظام المواقع والورديات (عمودان) */
.locations-shifts-editor {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    background-color: #f8f9fa;
}

#locations-list-panel h5, #shifts-details-panel h5 {
    margin: 0 0 15px 0;
}

#locations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.location-list-item.active {
    background-color: #eef2ff;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

#shifts-for-location-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shift-entry-card {
    background-color: white;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid var(--border-color);
    position: relative;
}

.shift-entry-card .delete-shift-btn {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات بطاقات المواقع والورديات */
.location-entry-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.location-entry-card .location-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}
.location-entry-card .location-header h5 {
    font-size: 1.2rem;
    margin: 0;
}

.location-entry-card .shifts-container-for-location {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.location-entry-card .add-shift-to-card-btn {
    width: 100%;
    margin-top: 15px;
    background-color: #eef2ff;
    color: var(--accent-color);
    border-color: var(--accent-color);
}
/* نهاية الإضافة */
.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
    background-color: #f9fafb;
    display: flex;
    justify-content: flex-start; /* تم تغييرها من flex-end إلى flex-start */
    gap: 15px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
/* بداية الإضافة: تنسيقات عرض تفاصيل العقد */
.contract-display h3 {
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--accent-color);
}
.contract-display p {
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    line-height: 1.6;
}
.location-view-group {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}
.location-view-group h4 {
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}
.shifts-view-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 20px;
    border-right: 3px solid #e0e0e0;
}
.shift-view-item p {
    font-size: 1rem;
    margin: 0 0 8px 0;
}
/* نهاية الإضافة */
.status.pending {
    background-color: #fef9c3; /* Light Yellow */
    color: #a16207; /* Dark Yellow */
}
.table-container {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px var(--shadow-color);
    overflow-x: auto; /* <-- هذا هو السطر الجديد والمهم */
}
/* بداية كود إجباري لتمرير الجدول */



/* نهاية الكود */
/* بداية تنسيقات النافذة المنبثقة المخصصة */
#custom-alert-header.success {
    background-color: #198754; /* أخضر للنجاح */
    color: white;
}
#custom-alert-header.error {
    background-color: #dc3545; /* أحمر للخطأ */
    color: white;
}
#custom-alert-header.info {
    background-color: #0d6efd; /* أزرق للمعلومات */
    color: white;
}
/* نهاية تنسيقات النافذة المنبثقة المخصصة */
/* بداية تنسيقات صفحة "جدولي" الجديدة */
.schedule-week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.schedule-day-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--secondary-bg);
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 160px;
    transition: all 0.2s ease;
}

.schedule-day-card h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.schedule-day-card .details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.schedule-day-card .details p {
    margin: 2px 0;
    font-weight: 600;
}

.schedule-day-card .time {
    font-size: 1.2rem;
    color: var(--accent-color);
}

.schedule-day-card .rest-day {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.schedule-day-card.current-day {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
    transform: translateY(-5px);
}

.schedule-day-card.current-day h4 {
    color: var(--accent-color);
}

/* نهاية تنسيقات صفحة "جدولي" الجديدة */
/* بداية تنسيقات حاوية السجلات القابلة للتمرير */
.log-container {
    max-height: 65vh; /* تحديد أقصى ارتفاع للحاوية */
    overflow-y: auto; /* إضافة شريط تمرير عمودي عند الحاجة */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    background-color: #fdfdff; /* لون خلفية خفيف جداً */
}
/* نهاية التنسيقات */
/* --- تنسيقات نظام الإشعارات والجرس --- */
.notification-bell {
    position: relative;
    display: inline-flex;
}
.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--secondary-bg);
}
.notification-list {
    position: absolute;
    top: 120%;
    left: 0;
    width: 350px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    z-index: 1200;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}
.notification-list-header {
    padding: 12px 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
}
#notification-list-content {
    overflow-y: auto;
    flex-grow: 1;
}
.notification-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}
.notification-item:hover {
    background-color: #f8f9fa;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item p {
    margin: 0 0 5px 0;
    font-weight: 600;
    font-size: 0.95rem;
}
.notification-item small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* --- تنسيقات تنبيهات الـ Toast --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast-message {
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInAndOut 4s ease-in-out forwards;
}
.toast-message.success { background-color: #22c55e; }
.toast-message.error { background-color: #ef4444; }
.toast-message i { font-size: 1.5rem; }

@keyframes slideInAndOut {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    10%, 90% { opacity: 1; transform: translateX(0); }
}
/* بداية تنسيقات شريط العودة للمدير */
#return-to-admin-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f59e0b; /* برتقالي مميز */
    color: #1f2937;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#return-to-admin-banner p {
    margin: 0;
}

#return-to-admin-banner .btn {
    margin-right: 20px;
    background-color: #1f2937;
    color: white;
    padding: 5px 15px;
    font-size: 0.9rem;
}
/* نهاية التنسيقات */
/* بداية تنسيقات لوحة إحصائيات الخريطة */
/* بداية تنسيقات لوحة إحصائيات الخريطة */
.map-stats-bar {
    display: flex;
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: var(--secondary-bg);
    border-bottom: 1px solid var(--border-color);
}

.map-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.map-stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.map-stat-card h4 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.map-stat-card p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
/* نهاية التنسيقات */
#map-search-container {
    display: flex;
    gap: 5px;
    margin-right: auto; /* يدفع صندوق البحث لليمين */
}

#map-search-container input {
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    min-width: 220px;
}
/* ======================================= */
/* ===  تنسيقات صفحة إدارة الإعلانات   === */
/* ======================================= */

.announcement-manage-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 15px;
    border-left: 5px solid; /* سيتم تحديد اللون بناءً على النوع */
}

.announcement-manage-card .review-request-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.announcement-manage-card .content-text {
    font-size: 1.1rem;
    font-weight: 600;
    flex-grow: 1;
}

.announcement-manage-card .meta-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
    flex-shrink: 0;
}

.announcement-manage-card .actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* تحديد لون الشريط بناءً على النوع */
.announcement-manage-card.type-info { border-left-color: #3b82f6; }
.announcement-manage-card.type-warning { border-left-color: #f59e0b; }
.announcement-manage-card.type-critical { border-left-color: #ef4444; }
/* بداية الإضافة: تنسيقات مجموعات الاختيار */
.checkbox-group-container {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    max-height: 150px; /* تحديد ارتفاع أقصى */
    overflow-y: auto; /* إضافة شريط تمرير عند الحاجة */
    margin-top: 5px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkbox-grid label:hover {
    background-color: #eef2ff;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات شريط الإعلانات */
#announcement-banner {
    padding: 15px 20px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#announcement-banner p {
    margin: 0;
    flex-grow: 1; /* لجعل النص يأخذ المساحة المتاحة */
    text-align: center;
}

#announcement-banner button {
    background: rgba(0,0,0,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 30px;
    padding: 0;
}

/* ألوان الشريط بناءً على نوع الإعلان */
#announcement-banner.type-info { background-color: #3b82f6; }
#announcement-banner.type-warning { background-color: #f59e0b; }
#announcement-banner.type-critical { background-color: #ef4444; }
/* نهاية الإضافة */
/* ================================================= */
/* === تصميم نافذة عرض تفاصيل العقد (النسخة المحسنة) === */
/* ================================================= */

#view-contract-modal .modal-panel {
    background-color: #1f2937; /* خلفية داكنة */
    color: #f9fafb; /* نص أبيض */
    max-width: 600px;
}

#view-contract-modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#view-contract-modal .modal-close-btn {
    color: #9ca3af;
}

#view-contract-modal .contract-display h3 {
    color: #3b82f6; /* لون أزرق مميز للعناوين */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#view-contract-modal .contract-display p {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 8px 0;
    margin-bottom: 5px;
}

#view-contract-modal .contract-display p strong {
    color: #9ca3af; /* لون رمادي فاتح للعنوان */
    font-weight: 600;
}

#view-contract-modal .location-view-group {
    background: none;
    border: none;
    padding: 0;
    margin-top: 20px;
}

#view-contract-modal .location-view-group h4 {
    color: #e5e7eb;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

#view-contract-modal .shifts-view-container {
    border-right: none;
    padding: 0;
}

#view-contract-modal .shift-view-item {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-right: 3px solid #3b82f6;
}

#view-contract-modal .shift-view-item p {
    font-size: 0.95rem;
}

#view-contract-modal .modal-footer {
    background-color: #111827;
    border-top-color: rgba(255, 255, 255, 0.1);
    justify-content: center;
}

#view-contract-modal .modal-footer .btn-secondary {
    background-color: #374151;
    color: white;
    width: 150px;
}
/* ======================================================= */
/* ===   بداية الإضافة: تصميم جديد لصفحة حضور الحراس    === */
/* ======================================================= */

/* الحاوية الرئيسية للأقسام */
.attendance-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* تنسيق كل قسم (كل موقع) */
.attendance-accordion-group details {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.attendance-accordion-group details[open] {
    border-color: var(--accent-color);
}

/* تنسيق عنوان المجموعة (المشروع/الموقع) */
.attendance-accordion-group summary {
    padding: 15px 20px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* إخفاء السهم الافتراضي */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.attendance-accordion-group summary:hover {
    background-color: #f8f9fa;
}

.attendance-accordion-group details[open] > summary {
    background-color: #eef2ff;
    color: var(--accent-color);
}

/* أيقونة السهم بجانب العنوان */
.attendance-accordion-group summary::before {
    content: '\ea3a'; /* أيقونة سهم من Phosphor Icons */
    font-family: 'Phosphor Icons';
    font-weight: bold;
    font-size: 1rem;
    transition: transform 0.2s ease;
    margin-left: 10px;
}

.attendance-accordion-group details[open] > summary::before {
    transform: rotate(90deg);
}

/* حاوية ملخص الحضور (مثال: 4 / 5) */
.attendance-summary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.attendance-accordion-group details[open] > summary .attendance-summary {
    color: var(--accent-color);
}

/* محتوى القسم (قائمة الحراس) */
.attendance-accordion-group .content {
    padding: 0 10px 10px 10px;
    border-top: 1px solid var(--border-color);
}

/* تصميم كل حارس داخل القائمة */
.guard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    border-bottom: 1px solid var(--border-color);
}

.guard-row:last-child {
    border-bottom: none;
}

.guard-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.guard-info strong {
    font-size: 1.1rem;
    font-weight: 700;
}

/* تصميم شارة الحالة (الدائرة الملونة) */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.present { background-color: var(--approved-color); }
.status-indicator.absent { background-color: var(--denied-color); }
.status-indicator.off { background-color: var(--pending-color); }
.status-indicator.auto-checkout { background-color: #6b7280; }

.guard-status-details {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.guard-actions {
    display: flex;
    gap: 10px;
}

/* ======================================================= */
/* ===                  نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===    بداية الإضافة: تصميم البطاقات لصفحة حضور الحراس   === */
/* ======================================================= */

/* الحاوية الشبكية للبطاقات */
.guard-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

/* تصميم البطاقة الواحدة */
.guard-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    border-top: 5px solid; /* سيتم تحديد اللون لاحقاً بالجافاسكريبت */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* تحديد لون الشريط العلوي حسب الحالة */
.guard-card.status-present { border-top-color: var(--approved-color); }
.guard-card.status-absent { border-top-color: var(--denied-color); }
.guard-card.status-off { border-top-color: var(--pending-color); }
.guard-card.status-auto-checkout { border-top-color: #6b7280; }


/* جسم البطاقة */
.guard-card-body {
    padding: 20px;
    flex-grow: 1; /* لجعل الجسم يأخذ المساحة المتاحة */
}

/* معلومات الحارس الأساسية */
.guard-card-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.guard-card-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* قسم تفاصيل الحالة */
.guard-card-status {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
}

/* قسم الأزرار */
.guard-card-actions {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end; /* لمحاذاة الأزرار لليسار */
    gap: 10px;
}
/* ==================== بداية الإضافة: تنسيق رسالة القفل ==================== */
.lockout-message {
    text-align: center;
    padding: 15px;
}
.lockout-message h4 {
    font-size: 1.3rem;
    color: var(--denied-color);
    margin: 0 0 10px 0;
}
.lockout-message p {
    font-size: 1rem;
    margin: 0 0 20px 0;
    line-height: 1.6;
}
.lockout-message small {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.8;
}
/* ===================== نهاية الإضافة: تنسيق رسالة القفل ===================== */

/* ======================================================= */
/* ===                  نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===    بداية الإضافة: تعديل بسيط على شريط الإحصائيات   === */
/* ======================================================= */

/* جعل شريط الإحصائيات يلتف بشكل أفضل في الشاشات الصغيرة */
.map-stats-bar {
    flex-wrap: wrap;
}
/* بداية الإضافة */
/* بداية الاستبدال */
/* ======================================================= */
/* === بداية الإضافة: إصلاح السكرول في نوافذ التقديمات === */
/* ======================================================= */

/* نجعل لوحة النافذة تتمدد بمرونة وتأخذ ارتفاع الشاشة كحد أقصى */
#apply-modal .modal-panel,
#job-application-modal .modal-panel {
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* الحد الأقصى للارتفاع هو 85% من ارتفاع الشاشة */
}

/* هذا هو الجزء الأهم: نجبر الفورم على أن يكون مرناً أيضاً */
#apply-modal form,
#job-application-modal form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* نجعل الفورم يملأ المساحة المتاحة بين الهيدر والفوتر */
    min-height: 0; /* خدعة بسيطة لضمان عمل السكرول بشكل صحيح داخل Flexbox */
}

/* الآن نجعل جسم النافذة هو الجزء الذي يتمدد ويقبل السكرول */
#apply-modal .modal-body,
#job-application-modal .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* يضيف شريط تمرير عمودي فقط عند الحاجة */
}

/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* نهاية الاستبدال */
/* بداية الإضافة */
/* ======================================================= */
/* ===   تنسيقات مخصصة لعلامات الخريطة (بداية/نهاية)    === */
/* ======================================================= */

.map-marker-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    color: white;
    border-radius: 50% 50% 50% 0; /* شكل قطرة الماء */
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.map-marker-icon i {
    transform: rotate(45deg); /* إعادة تدوير الأيقونة للوضع الصحيح */
    font-size: 20px;
}

.marker-start {
    background-color: #16a34a; /* أخضر */
}

.marker-end {
    background-color: #dc2626; /* أحمر */
}
/* نهاية الاستبدال */
.marker-stop {
    background-color: #8b5cf6; /* بنفسجي */
    border-color: #7c3aed;
}
/* ================================================================ */
/* ===         بداية الإضافة: تصميم احترافي لحقول النماذج         === */
/* ================================================================ */

/* --- 1. النمط العام لجميع حقول الإدخال والاختيار --- */
.modal-body .form-group input:not([type="checkbox"]),
.modal-body .form-group select,
.modal-body .form-group textarea,
.filter-group input,
.filter-group select {
    appearance: none; /* إزالة المظهر الافتراضي للمتصفح */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff; /* خلفية بيضاء نظيفة */
    border: 1px solid #d1d5db; /* حدود رمادية أكثر وضوحاً */
    border-radius: 8px; /* زوايا دائرية */
    padding: 12px 15px; /* حشوة داخلية مريحة */
    font-family: 'Cairo', sans-serif; /* ضمان استخدام الخط الصحيح */
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* تأثيرات انتقال ناعمة */
    color: var(--text-primary);
    background-clip: padding-box; /* مهم لظهور أيقونة الخلفية بشكل صحيح */
}

/* --- 2. تغيير شكل الحقل عند التركيز عليه (النقر داخله) --- */
.modal-body .form-group input:focus,
.modal-body .form-group select:focus,
.modal-body .form-group textarea:focus,
.filter-group input:focus,
.filter-group select:focus {
    outline: none; /* إزالة المخطط الافتراضي */
    border-color: var(--accent-color); /* تغيير لون الحدود إلى الأزرق */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* إضافة توهج أزرق خفيف */
}

/* --- 3. تصميم خاص بالقوائم المنسدلة (select) --- */
.modal-body .form-group select,
.filter-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.75rem center; /* موقع السهم على اليسار (RTL) */
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 15px; /* مساحة للنص */
    padding-left: 2.5rem; /* مساحة للسهم المخصص */
}

/* --- 4. تصميم خاص بحقول التاريخ (input[type=date]) --- */
.modal-body .form-group input[type="date"],
.filter-group input[type="date"] {
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280' class='w-6 h-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18M-9.75 12h13.5' /%3e%3c/svg%3e");
    background-position: left 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-left: 2.5rem;
}

/* إخفاء أيقونة التقويم الافتراضية في متصفحات Webkit (مثل كروم) */
.modal-body .form-group input[type="date"]::-webkit-calendar-picker-indicator,
.filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

/* --- 5. تعديل بسيط على حقول القراءة فقط لتبدو أفضل --- */
.modal-body .form-group input:read-only,
.modal-body .form-group input:disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

/* ================================================================ */
/* ===                  نهاية الإضافة                          === */
/* ================================================================ */
/* ======================================================== */
/* === بداية الإضافة: تنسيق خاص لسجلات الانصراف التلقائي === */
/* ======================================================== */

/* 1. لون خلفية مميز للصف بالكامل في الجدول */
tr.auto-checkout-row td {
    background-color: #fffbe6 !important; /* لون أصفر فاتح للخلفية */
    color: #b45309 !important; /* لون بني داكن للنص */
    font-weight: 600 !important;
}

/* 2. تنسيق خاص لكلمة "انصراف تلقائي" (status badge) */
.status.auto-checkout {
    background-color: #fef9c3; /* أصفر فاتح */
    color: #854d0e; /* بني داكن */
    border: 1px solid #fde68a;
}

/* 3. تنسيق خاص لتاريخ الحضور الحقيقي */
.real-checkin-date {
    display: block;
    font-size: 0.8rem;
    color: #b45309;
    font-weight: normal;
}
/* ======================================================== */
/* ===                   نهاية الإضافة                   === */
/* ======================================================== */
/* ======================================================== */
/* ===   بداية الإضافة: تنسيق خاص لحالات "تم تغطيته"     === */
/* ======================================================== */

.status.covered {
    background-color: #eef2ff; /* لون أزرق فاتح */
    color: #4338ca;    /* لون أزرق داكن */
    border: 1px solid #c7d2fe;
}

/* ======================================================== */
/* ===                   نهاية الإضافة                   === */
/* ======================================================== */
/* ======================================================== /
/ ===  بداية الإضافة: تنسيق توهج لعدد الشواغر الفارغة === /
/ ======================================================== */

.stat-card-mini #hr-stats-closed-empty.highlight {
animation: pulse-glow 1.5s infinite alternate;
}

/* بداية الاستبدال */
@keyframes pulse-glow {
    from {
        color: #fef08a; /* لون أصفر ساطع */
        text-shadow: 0 0 8px rgba(245, 158, 11, 0.8), 0 0 12px rgba(245, 158, 11, 0.5);
    }
    to {
        color: #ffffff; /* اللون الأصلي للنص */
        text-shadow: 0 0 15px rgba(245, 158, 11, 1), 0 0 25px rgba(245, 158, 11, 0.7);
    }
}
/* نهاية الاستبدال */

/* ======================================================== /
/ ===                 نهاية الإضافة                   === /
/ ======================================================== */
/* ======================================================== */
/* ===      بداية الإضافة: تنسيق توهج لعدد العجز        === */
/* ======================================================== */

.stat-card-mini #hr-stats-gap.highlight-red {
    animation: pulse-glow-red 1.5s infinite alternate;
}

@keyframes pulse-glow-red {
    from {
        color: #fca5a5; /* لون أحمر ساطع */
        text-shadow: 0 0 8px rgba(239, 68, 68, 0.8), 0 0 12px rgba(239, 68, 68, 0.5);
    }
    to {
        color: #ffffff; /* اللون الأصلي للنص */
        text-shadow: 0 0 15px rgba(239, 68, 68, 1), 0 0 25px rgba(239, 68, 68, 0.7);
    }
}

/* ======================================================== */
/* ===                 نهاية الإضافة                   === */
/* ======================================================== */
/* بداية الإضافة: تنسيق حالة "بين الفترات" */
.guard-card.status-between-shifts { 
    border-top-color: #8b5cf6; /* بنفسجي */
}
.status-indicator.between-shifts { 
    background-color: #8b5cf6; 
}
/* نهاية الإضافة */
/* ======================================= */
/* ===   تصميم شريط الإعلانات المتوهج   === */
/* ======================================= */

/* حركة التوهج النابضة */
@keyframes pulse-glow-banner {
    0% { box-shadow: 0 0 4px 0px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.5); }
    100% { box-shadow: 0 0 4px 0px rgba(255, 255, 255, 0.3); }
}

#announcement-banner {
    padding: 12px 20px;
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    justify-content: center; /* توسط المحتوى */
    align-items: center;
    gap: 15px;
    border-bottom: 2px solid rgba(0,0,0,0.2);
    /* تطبيق حركة التوهج */
    animation: pulse-glow-banner 4s infinite ease-in-out;
}

#announcement-banner i {
    font-size: 1.6rem;
    /* إضافة ظل خفيف للأيقونة */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* ======================================= */
/* ===   تصميم زر تفعيل الفلترة         === */
/* ======================================= */

/* الحاوية الرئيسية لزر التبديل */
.filter-group-toggle {
    grid-column: 1 / -1; /* لجعل الزر يمتد على عرض الفلاتر بالكامل */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2937;
    border-radius: 8px;
    padding: 8px 0;
    border: 1px solid #374151;
    margin-bottom: 10px;
}

/* الليبل الذي يعمل كزر تفاعلي */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

/* إخفاء مربع الاختيار الافتراضي */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* نص العنوان بجانب الزر */
.toggle-switch .label-text {
    font-weight: 700;
    color: #f9fafb;
    font-size: 1.1rem;
}

/* مسار التبديل (الجزء الخلفي من الزر) */
.slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #4b5563; /* لون الزر وهو مطفأ */
    border-radius: 34px;
    transition: background-color 0.3s;
}

/* المقبض الدائري للزر */
.slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* تصميم الزر عند تفعيله */
.toggle-switch input:checked + .slider {
    background-color: var(--accent-color); /* اللون الأزرق عند التفعيل */
}

/* تحريك المقبض الدائري عند تفعيل الزر */
.toggle-switch input:checked + .slider::before {
    transform: translateX(20px);
}
/* بداية الإضافة: تنسيق أيقونة مواقع العمل على الخريطة */
.custom-map-icon-site {
    background-color: #374151; /* لون رمادي داكن للخلفية */
    border-radius: 50%;       /* جعلها دائرية */
    border: 2px solid white;  /* إضافة حد أبيض */
    box-shadow: 0 0 5px rgba(0,0,0,0.5); /* إضافة ظل لإبرازها */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* نهاية الإضافة */
/* ======================================================= */
/* ===   بداية الإضافة: تحسينات شاملة لواجهة الجوال     === */
/* ======================================================= */

@media (max-width: 768px) {

    /* 1. تحسين الأزرار العامة */
    .btn {
        padding: 8px 14px; /* تصغير حشوة الزر */
        font-size: 0.9rem;  /* تصغير خط الزر */
        gap: 6px;
    }
    .btn-lg {
        padding: 12px 24px;
        font-size: 1rem;
    }
    .page-header .btn {
        font-size: 0.85rem; /* تصغير الأزرار في رأس الصفحة */
        padding: 6px 10px;
    }
    
    /* 2. تصغير بطاقات الإحصائيات في الأعلى */
    .map-stats-bar {
        padding: 10px;
        justify-content: center; /* توسط البطاقات */
    }
    .map-stat-card {
        padding: 10px;
        gap: 10px;
        flex-grow: 1; /* جعل البطاقات تتمدد لتملأ المساحة */
    }
    .map-stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .map-stat-card p {
        font-size: 1.2rem;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* عمودان في الجوال */
        gap: 15px;
    }
    .stat-card-mini {
        padding: 15px;
        gap: 12px;
        flex-direction: column; /* ترتيب المحتوى عمودياً */
        text-align: center;
        border-left-width: 0;
        border-bottom: 4px solid var(--stat-color, var(--accent-color));
    }
    .stat-card-mini h4 {
        font-size: 1.5rem;
    }
    .stat-card-mini p {
        font-size: 0.8rem;
    }

    /* 3. تحسين الجداول لتكون أكثر إحكامًا */
    table th, table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
    
    /* 4. تصغير بطاقات المراجعة والطلبات */
    #all-requests-container, .contracts-container, .guard-cards-grid {
        grid-template-columns: 1fr; /* عرض البطاقات في عمود واحد */
        gap: 15px;
    }
    .review-request-header h4 {
        font-size: 1rem;
    }
    .review-request-body {
        padding: 15px;
    }

    /* 5. تحسين النوافذ المنبثقة (Modals) */
    .modal-panel {
        max-width: 95vw; /* جعل النافذة تأخذ معظم عرض الشاشة */
        max-height: 90vh;
    }
    .modal-body {
        padding: 15px;
    }

    /* 6. تحسينات عامة */
    .page-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        flex-direction: column; /* ترتيب عنوان الصفحة والزر عمودياً */
        align-items: flex-start;
        gap: 15px;
    }
    
    /* 7. تحسين شبكة الفلاتر */
    .filter-grid {
        grid-template-columns: 1fr; /* عمود واحد لجميع الفلاتر */
        gap: 15px;
    }
    #map-search-container {
        width: 100%;
        margin-top: 10px;
    }
    #map-search-container input {
        flex-grow: 1;
    }
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================= */
/* ===  تحسينات إضافية لواجهة الجوال   === */
/* ======================================= */

/* 1. إضافة سكرول للقائمة الجانبية عند الحاجة (إذا لم تكن مضافة سابقاً) */
.sidebar-nav {
    overflow-y: auto; 
}

/* 2. تحسينات عامة لجعل المظهر أقرب للتطبيقات */
html {
    scroll-behavior: smooth; /* يجعل التمرير داخل الصفحة سلسًا */
}

body {
    -webkit-tap-highlight-color: transparent; /* يزيل الوميض الرمادي عند لمس الروابط في الجوال */
    -webkit-font-smoothing: antialiased; /* يحسن عرض الخطوط */
    text-rendering: optimizeLegibility;
}

/* 3. تحسين مظهر البطاقات والنماذج في الجوال */
@media (max-width: 768px) {
    /* تحسين شكل حقول الإدخال */
    .form-group input:not([type="checkbox"]), .form-group select, .form-group textarea {
        padding: 14px;
        font-size: 1rem;
        background-color: #f8f9fa;
        border: 1px solid #e5e7eb;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* تغيير شكل الحقل عند التركيز عليه */
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        outline: none;
    }

    /* إضافة تأثير بسيط عند الضغط على البطاقات القابلة للضغط */
    .request-action-card:active {
        transform: translateY(0) scale(0.95); /* تأثير ضغط للأسفل */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}
/* ======================================================= */
/* ===    بداية الإضافة: تحسينات احترافية للواجهة (UI)    === */
/* ======================================================= */

/* --- 1. تحسين الألوان والظلال والخطوط --- */
:root {
    --primary-bg: #f4f7fa;      /* لون خلفية رمادي فاتح جداً بدلاً من الأبيض الصريح */
    --border-color: #e5e7eb;    /* لون حدود أخف وأكثر هدوءاً */
    --shadow-color: rgba(99, 102, 241, 0.1); /* ظل خفيف مائل للبنفسجي ليعطي لمسة احترافية */
    --shadow-hover-color: rgba(99, 102, 241, 0.2);
}

body {
    background-color: var(--primary-bg);
}

/* --- 2. إضافة تأثيرات تفاعلية للبطاقات والأزرار --- */

/* جعل البطاقات ترتفع قليلاً عند المرور عليها */
.review-request-card, .contract-card, .attendance-card, .job-card, .visit-card, .stat-card-mini, .guard-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.review-request-card:hover, .contract-card:hover, .attendance-card:hover, .job-card:hover, .visit-card:hover, .stat-card-mini:hover, .guard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-hover-color);
}

/* جعل الأزرار تتفاعل عند النقر عليها */
.btn {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px var(--shadow-color);
}

/* --- 3. تحسين حركة ظهور النوافذ المنبثقة (Modals) --- */
.modal-overlay {
    transition: opacity 0.25s ease;
}

.modal-panel {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.modal-overlay:not(.hidden) .modal-panel {
    transform: scale(1);
    opacity: 1;
}

/* --- 4. تجهيز كلاسات لحالات التحميل والحالات الفارغة (للاستخدام مستقبلاً في JS) --- */

/* كلاس لعرض هيكل عظمي (Skeleton) أثناء تحميل البيانات */
.skeleton {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background-color: #e5e7eb;
    border-radius: 8px;
    color: transparent !important;
}

.skeleton > * {
    visibility: hidden;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* كلاس لعرض رسالة احترافية عند عدم وجود بيانات */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background-color: #fafafa;
    color: var(--text-secondary);
}
.empty-state i {
    font-size: 3rem;
    color: var(--accent-color);
    opacity: 0.5;
    margin-bottom: 15px;
}
.empty-state h4 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}
.empty-state p {
    margin: 0;
    max-width: 300px;
}

/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===     بداية الإضافة: تصميم شارات التنبيه للقائمة     === */
/* ======================================================= */

/* نجعل الرابط هو المرجع لمكان الشارة */
.sidebar-nav a {
    position: relative;
}

.menu-badge {
    position: absolute;
    top: 10px;
    right: 15px; /* ليتناسب مع RTL */
    background-color: #ef4444; /* أحمر */
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    border: 2px solid var(--sidebar-bg);
    transition: transform 0.2s ease, opacity 0.2s;
    transform: scale(1);
    opacity: 1;
}

/* إخفاء الشارة عند وجود كلاس hidden */
.menu-badge.hidden {
    transform: scale(0);
    opacity: 0;
    display: flex; /* We keep it as flex to allow smooth transition */
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================= */
/* ===   Kanban Board Layout Styles    === */
/* ======================================= */

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    height: calc(100vh - 200px); /* ارتفاع مرن ليملأ الشاشة */
    overflow-x: auto;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    background-color: #f1f5f9; /* لون خلفية خفيف للعمود */
    border-radius: 8px;
    height: 100%;
}

.kanban-column-header {
    padding: 15px;
    border-bottom: 2px solid var(--border-color);
}

.kanban-column-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.kanban-column-content {
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kanban-card {
    background-color: var(--secondary-bg);
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.07);
    border-left: 4px solid var(--accent-color);
}

.kanban-card h5 {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.kanban-card p {
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.kanban-card .card-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    text-align: left;
}
/* بداية الإضافة: تنسيق بطاقات حراس التغطية */
.guard-card.coverage-card { 
    border-top-color: var(--accent-color); /* اللون الأزرق */
    background-color: #f7f9fc;
}
.guard-card.coverage-card h4 {
    color: var(--accent-color);
}
.guard-card .coverage-reason {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--border-color);
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيق حالة "متأخر" */
.guard-card.status-late { 
    border-top-color: #facc15; /* أصفر قوي */
}
.status-indicator.late { 
    background-color: #facc15; 
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات مخصصة لعلامات الخريطة */
.map-guard-marker {
    background-clip: padding-box;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}
.map-guard-marker i {
    transform: rotate(45deg);
    font-size: 20px;
    color: white;
}
.primary-guard-marker {
    background-color: var(--accent-color); /* اللون الأزرق الافتراضي */
}
.coverage-guard-marker {
    background-color: #8b5cf6; /* اللون البنفسجي للتغطية */
}
/* نهاية الإضافة */
/* ======================================================= */
/* ===   بداية الإضافة: إصلاح جذري لمشكلة التمرير      === */
/* ======================================================= */

/* هذا هو الجزء الأهم:
   يخبر الحاوية الرئيسية بأنها يمكن أن تحتوي على عناصر قابلة للتمرير
   حتى لو كانت داخل تصميم flexbox.
*/
.content-area {
    min-width: 0;
}

/* هذا يضمن أن أي حاوية جدول يمكنها التمرير */
.table-container {
    overflow-x: auto;
}

/* وهذا يضمن أن النصوص في مسير الرواتب لا تلتف أبداً */
#payroll-results-container th,
#payroll-results-container td {
    white-space: nowrap; 
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===   بداية الإضافة: كود نهائي لتفعيل تمرير الجدول     === */
/* ======================================================= */

#payroll-results-container.table-container {
    overflow-x: auto !important; /* للتأكيد على تفعيل التمرير */
}

#payroll-results-container table {
    min-width: max-content !important; /* الأهم: يجبر الجدول على التمدد لعرض كل المحتوى */
}

#payroll-results-container th,
#payroll-results-container td {
    white-space: nowrap; 
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* بداية الإضافة: تنسيق حالة "متأخر" */
.guard-card.status-late { 
    border-top-color: #facc15; /* أصفر قوي */
}
.status-indicator.late { 
    background-color: #facc15; 
}
/* نهاية الإضافة */
/* ======================================= */
/* ===   بداية الإضافة: تنسيق تقويم التسويق   === */
/* ======================================= */

/* الحاوية الرئيسية للموعد */
.fc-event-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 5px; /* زيادة الحشوة الداخلية */
    height: 100%;
    white-space: normal;
    overflow: hidden;
    font-size: 13px; /* تحديد حجم خط أساسي واضح */
}

/* عنوان الموعد */
.fc-event-main b {
    font-weight: 700; /* خط أعرض */
    margin-bottom: 5px; /* زيادة المسافة */
}

/* التفاصيل الإضافية (العميل والوصف) */
.fc-event-main small {
    display: flex;
    align-items: center;
    line-height: 1.4;
    font-size: 12px; /* حجم خط ثابت وواضح */
}

/* تحسين شكل الأيقونة بجانب اسم العميل */
.fc-event-main small i {
    margin-left: 4px;
    font-size: 12px;
}
/* ======================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================= */
/* ======================================= */
/* ===   بداية الإضافة: تنسيق زر تعديل التقويم   === */
/* ======================================= */

.fc-event {
    position: relative;
}

.fc-event-edit-btn {
    position: absolute;
    top: 3px;
    right: 3px; /* <-- تم التعديل هنا لوضعه على اليمين */
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 1; /* لضمان ظهوره فوق النص */
}

.fc-event-edit-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

.fc-event-main-custom {
    padding-right: 25px; /* <-- تم التعديل هنا لترك مساحة للزر */
}

/* ======================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================= */
/* ======================================= */
/* ===   Legal Employee Lookup Page    === */
/* ======================================= */

.lookup-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    height: calc(100vh - 150px);
}

.lookup-sidebar {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px var(--shadow-color);
}

#legal-lookup-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 1rem;
    margin-bottom: 20px;
}

#legal-lookup-results {
    flex-grow: 1;
    overflow-y: auto;
}

.lookup-result-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.lookup-result-item:hover, .lookup-result-item.active {
    background-color: #eef2ff;
}

.lookup-result-item h5 { margin: 0 0 5px 0; font-size: 1.1rem; }
.lookup-result-item p { margin: 0; color: var(--text-secondary); }

.lookup-content {
    overflow-y: auto;
    padding-right: 20px;
}

.profile-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px var(--shadow-color);
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.profile-card-header h4 { margin: 0; font-size: 1.4rem; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.info-bit { display: flex; align-items: center; gap: 12px; }
.info-bit i { font-size: 1.5rem; color: var(--accent-color); flex-shrink: 0; }
.info-bit div p { margin: 0; color: var(--text-secondary); }
.info-bit div strong { font-size: 1.1rem; color: var(--text-primary); }

.history-list .history-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.history-list .history-item:last-child { border-bottom: none; }
/* بداية الإضافة: تنسيقات نسيت كلمة المرور */
#forgot-password-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    transition: opacity 0.2s;
}

#forgot-password-link:hover {
    opacity: 0.8;
}

.step-view.hidden {
    display: none;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات زر إظهار/إخفاء كلمة المرور */
.password-wrapper {
    position: relative;
}

.password-wrapper .toggle-password {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px; /* عرض يطابق الحشوة في حقل الإدخال */
    height: 100%; /* ارتفاع يطابق الحقل */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    z-index: 10; /* الأهم: لضمان ظهوره فوق حقل الإدخال */
}

.password-wrapper input {
    padding-left: 45px !important; /* لترك مساحة للأيقونة */
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات بطاقات إدارة الأقسام */
.department-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 25px;
}

.permission-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    display: flex;
    flex-direction: column;
}

.permission-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.permission-card-header h5 {
    margin: 0;
    font-size: 1.2rem;
}

.permission-card-body {
    padding: 20px;
}

.permission-card .checkbox-grid label {
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات صفحة العقوبات الجديدة */
.penalties-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    height: calc(100vh - 200px);
}
.penalties-sidebar, .penalties-content {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
    display: flex;
    flex-direction: column;
}
.penalties-sidebar .hiring-list {
    flex-grow: 1;
    overflow-y: auto;
    margin-top: 15px;
    padding: 0;
    border: none;
}
.penalties-employee-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}
.penalties-employee-item:hover, .penalties-employee-item.active {
    background-color: #eef2ff;
}
.penalties-employee-item strong { display: block; font-size: 1.05rem; }
.penalties-employee-item small { color: var(--text-secondary); }
#penalties-content { overflow-y: auto; }
#penalties-placeholder { text-align: center; color: var(--text-secondary); margin-top: 50px; font-size: 1.1rem; }
#penalties-placeholder i { font-size: 2rem; display: block; margin-bottom: 10px; }
#penalty-history-container { max-height: 250px; overflow-y: auto; }
.penalty-history-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border-color); }
.penalty-history-item:last-child { border-bottom: none; }
/* نهاية الإضافة */
/* بداية الإضافة: إصلاحات صفحة العقوبات */

/* 1. إضافة سكرول للقائمة الجانبية للموظفين */
.penalties-sidebar .hiring-list {
    flex-grow: 1;
    overflow-y: auto;
    margin-top: 15px;
    padding-right: 10px; /* لإعطاء مساحة لشريط التمرير */
}

/* 2. تحسين شكل حقول إدخال العقوبة */
.penalties-content .form-group input,
.penalties-content .form-group textarea {
    appearance: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 15px;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.penalties-content .form-group input:focus,
.penalties-content .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.penalties-content .form-group input[type="date"] {
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236b7280' class='w-6 h-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0h18M-9.75 12h13.5' /%3e%3c/svg%3e");
    background-position: left 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-left: 2.5rem;
}

.penalties-content .form-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

/* نهاية الإضافة */
/* <<<<<<<<<<<<<<<< بداية الإضافة <<<<<<<<<<<<<<<< */
/* ======================================================= */
/* ===   بداية الإضافة: تحسين حقول ملفي الشخصي         === */
/* ======================================================= */

#page-my-profile .form-group .password-wrapper input {
    appearance: none;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 15px;
    padding-left: 45px; /* مساحة لأيقونة العين */
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#page-my-profile .form-group .password-wrapper input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* <<<<<<<<<<<<<<<< نهاية الإضافة <<<<<<<<<<<<<<<< */
/* ======================================================= */
/* ===   بداية الإضافة: تصميم بطاقات سجل التوجيهات       === */
/* ======================================================= */

.directive-history-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.directive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}

.recipient-info h5 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.recipient-info span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

.recipient-actions {
    display: flex;
    gap: 10px;
}

.directive-content {
    padding: 20px;
}

.directive-content p {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.7;
}

.directive-content small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.directive-response {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.directive-response i {
    font-size: 1.5rem;
    margin-top: 2px;
}

.directive-response strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

.directive-response p {
    margin: 0;
    font-size: 0.95rem;
}

.directive-response.accepted {
    background-color: #f0fdf4;
    color: #15803d;
}
.directive-response.accepted i { color: #22c55e; }

.directive-response.rejected {
    background-color: #fef2f2;
    color: #b91c1c;
}
.directive-response.rejected i { color: #ef4444; }

.directive-response.pending {
    background-color: #fffbeb;
    color: #b45309;
}
.directive-response.pending i { color: #f59e0b; }

/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* بداية الإضافة: تنسيقات بطاقات سجل التوجيهات */
.directive-history-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.directive-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}

.recipient-info h5 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.recipient-info span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.recipient-actions {
    display: flex;
    gap: 10px;
}

.directive-content {
    padding: 20px;
}

.directive-content p {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.7;
}

.directive-content small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.directive-response {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.directive-response i {
    font-size: 1.5rem;
    margin-top: 2px;
}

.directive-response strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

.directive-response p {
    margin: 0;
    font-size: 0.95rem;
    white-space: pre-wrap; /* للحفاظ على فواصل الأسطر في الملاحظات */
}

.directive-response.accepted {
    background-color: #f0fdf4;
    color: #15803d;
}
.directive-response.accepted i { color: #22c55e; }

.directive-response.rejected {
    background-color: #fef2f2;
    color: #b91c1c;
}
.directive-response.rejected i { color: #ef4444; }

.directive-response.pending {
    background-color: #fffbeb;
    color: #b45309;
}
.directive-response.pending i { color: #f59e0b; }
/* نهاية الإضافة */
/* بداية الإضافة: تنسيق رسالة رفض الصلاحية */
.permission-denied-message {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-right: 5px solid #f59e0b;
    border-radius: 8px;
    padding: 20px;
    text-align: right;
    color: #b45309;
}

.permission-denied-message h4 {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-denied-message p {
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.permission-denied-message ol {
    padding-right: 20px;
    margin: 0;
    text-align: right;
}

.permission-denied-message li {
    margin-bottom: 10px;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات ورديات العقود المرنة */

.shift-section-container {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.shift-section-container h5 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.exceptions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exceptions-header h5 {
    border-bottom: none;
    padding-bottom: 0;
}

.day-overrides-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.day-override-card {
    background-color: #ffffff;
    border: 1px dashed var(--accent-color);
    padding: 15px;
    border-radius: 6px;
}

.day-override-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.day-override-header .form-group {
    flex-grow: 1;
    margin-bottom: 15px;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيقات عرض الجداول المرنة */
.schedule-day-card .time.override {
    color: #f59e0b; /* لون برتقالي للاستثناء */
}

.info-line.exceptions-summary {
    font-weight: 700;
    color: var(--text-primary);
}

.info-line + ul {
    list-style-type: none;
    padding-right: 20px;
    margin-top: -10px;
}
/* نهاية الإضافة */
/* ================================================================= */
/* ===      بداية إضافة: تصميم النافذة التدريبية التفاعلية        === */
/* ================================================================= */

/* --- 1. شريط التقدم --- */
#training-progress-bar-container {
    width: 100%;
    background-color: #e5e7eb;
    height: 8px;
}

#training-progress-bar {
    width: 0%; /* يبدأ فاضي ويتعبى بالجافاسكريبت */
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.4s ease-in-out;
}

/* --- 2. حاوية الشرائح --- */
#training-slides-container {
    position: relative;
    min-height: 420px; /* زدنا الارتفاع عشان يكفي كل المحتوى */
    overflow: hidden;
}

/* --- 3. تصميم الشريحة الوحدة --- */
.training-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    visibility: hidden;
}

.training-slide.active {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.training-slide-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.training-slide h3 {
    font-size: 1.6rem;
    margin: 0 0 15px 0;
    color: var(--text-primary);
}

.training-slide p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 90%;
}

.training-slide .training-note {
    font-size: 0.9rem;
    color: var(--accent-color);
    background-color: #eef2ff;
    padding: 8px 15px;
    border-radius: 6px;
    margin-top: 15px;
}

/* --- 4. تصميم بطاقات الحالات الوهمية للتدريب --- */
.guard-card-mockup {
    width: 100%;
    max-width: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    border-top: 5px solid; /* اللون يجي من الكلاس الثاني */
}
.guard-card-mockup.status-late { border-top-color: #f59e0b; }
.guard-card-mockup.status-absent { border-top-color: #ef4444; }
.guard-card-mockup.status-withdrawal { border-top-color: #6366f1; }

.guard-card-mockup .guard-card-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
}

/* ================================================================= */
/* ===        بداية إضافة: إصلاح ألوان بطاقات التدريب           === */
/* ================================================================= */

/* نعطي النص داخل البطاقة لون فاتح عشان يكون واضح على الخلفية الداكنة */
.guard-card-mockup .guard-card-status {
    color: #e5e7eb; /* لون رمادي فاتح جداً للنص */
}

.guard-card-mockup .guard-card-status .time {
    color: #9ca3af; /* لون رمادي أغمق شوي للوقت عشان نميزه */
}

/* نلون الدائرة الصغيرة اللي جنب الحالة عشان تكون نفس لون الشريط العلوي */
.guard-card-mockup.status-late .status-indicator { background-color: #f59e0b; }
.guard-card-mockup.status-absent .status-indicator { background-color: #ef4444; }
.guard-card-mockup.status-withdrawal .status-indicator { background-color: #6366f1; }

/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */

/* --- 5. تصميم أزرار التنقل --- */
#training-modal-footer {
    justify-content: space-between; /* يخلي زر السابق يروح يمين والتالي يسار */
}

#training-next-btn, #training-prev-btn {
    min-width: 120px;
}
/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* ================================================================= */
/* ===      بداية إضافة: تصميم رسائل المحاكاة التدريبية          === */
/* ================================================================= */

/* نحذف التصميم القديم للبطاقة الوهمية */
.guard-card-mockup {
    display: none;
}

/* تصميم جديد يحاكي صندوق الرسائل الفعلي */
.message-mockup {
    width: 100%;
    max-width: 450px;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid;
    border-left-width: 5px;
    text-align: center;
}

.message-mockup.status-late {
    background-color: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.message-mockup.status-absent {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.message-mockup.status-withdrawal {
    background-color: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.message-mockup h4 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.message-mockup p {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600;
    color: inherit !important; /* يجبر النص على أخذ لون الحاوية */
}
/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* ================================================================= */
/* ===    بداية إضافة: تصميم محاكي التدريب التفاعلي (النسخة 2)    === */
/* ================================================================= */

/* تعديل على النافذة الرئيسية للتدريب عشان تصير أطول ومناسبة للجوال */
#training-modal-panel {
    min-height: 550px;
}

#training-simulator-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* تصميم صندوق التعليمات العلوي */
#training-instruction-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px 20px;
    border: 1px solid var(--border-color);
    text-align: center;
}

#training-instruction-text {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.6;
}

/* تصميم منطقة المحاكاة السفلية */
#training-simulation-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px;
    background-color: #fdfdff;
}

/* تصميم خاص لأزرار المحاكاة عشان نضيف لها تأثير إنها وهمية */
.training-sim-btn {
    animation: pulse-glow-faint 2s infinite alternate;
    cursor: pointer !important;
    pointer-events: auto !important;
}

@keyframes pulse-glow-faint {
    from { box-shadow: 0 0 5px 0px rgba(59, 130, 246, 0.4); }
    to { box-shadow: 0 0 15px 3px rgba(59, 130, 246, 0.7); }
}

/* حذف التصميمات القديمة اللي ما عاد نحتاجها */
.training-slide, .message-mockup {
    display: none !important;
}
/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* بداية الإضافة: تنسيق حالة انتهاء الاستمارة */
td.status-ok {
    color: var(--approved-color);
    font-weight: 600;
}
td.status-warning {
    color: var(--pending-color);
    font-weight: 600;
}
td.status-error {
    color: var(--denied-color);
    font-weight: 700;
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيق الجداول المتجاوبة للمركبات */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.responsive-table th,
.responsive-table td {
    padding: 12px 15px;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.responsive-table th {
    background-color: var(--sidebar-bg);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}

.responsive-table tbody tr:hover {
    background-color: var(--hover-bg);
}

/* لجعل الجدول متجاوباً على الشاشات الصغيرة */
@media screen and (max-width: 768px) {
    .responsive-table thead {
        display: none; /* إخفاء رأس الجدول على الشاشات الصغيرة */
    }
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block; /* جعل العناصر تتكدس رأسياً */
        width: 100%;
    }
    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-small);
    }
    .responsive-table td {
        text-align: right;
        padding-left: 50%; /* مساحة لاسم العمود الوهمي */
        position: relative;
    }
    .responsive-table td::before {
        content: attr(data-label); /* عرض اسم العمود */
        position: absolute;
        right: 15px;
        width: 45%;
        padding-left: 10px;
        font-weight: 700;
        text-align: right;
        color: var(--text-secondary);
    }

    /* تعديل لعرض الأزرار بشكل جيد في وضع التجاوب */
    .responsive-table td:last-child {
        display: flex;
        justify-content: flex-end;
        padding-right: 15px;
        gap: 10px;
        border-top: 1px solid var(--border-color);
    }
    .responsive-table td:last-child::before {
        content: "";
        display: none;
    }
}
/* نهاية الإضافة */
/* بداية الإضافة: تنسيق القوائم المنسدلة القابلة للبحث */
.custom-select-wrapper {
    position: relative;
}

.custom-select-search {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001; /* لضمان ظهورها فوق باقي العناصر */
}

.custom-select-wrapper:focus-within .custom-select-options {
    display: block;
}

.custom-select-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-select-option:hover {
    background-color: #f4f7fa;
}

.custom-select-option.selected {
    background-color: var(--accent-color);
    color: white;
    font-weight: bold;
}
/* نهاية الإضافة */
/* ================================================================= */
/* ===      بداية إضافة: تصميم شجرة تحديد المواقع للمشرف        === */
/* ================================================================= */

.assignment-tree {
    margin-top: 20px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 10px; /* لإعطاء مساحة لشريط التمرير */
}

.assignment-contract-group {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff;
}

.assignment-contract-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}
.assignment-contract-header.all-selected {
    background-color: #eef2ff;
    border-bottom-color: #c7d2fe;
}


.assignment-contract-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-left: 15px;
}

.assignment-contract-header h5 {
    margin: 0;
    font-size: 1.1rem;
    flex-grow: 1;
}

.assignment-sites-list {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assignment-site-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.assignment-site-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* ================================================================= */
/* ===      بداية إضافة: تنسيق عرض عدد المشرفين                === */
/* ================================================================= */

.assignment-site-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.assignment-site-item .site-name {
    flex-grow: 1; /* يدفع العدد إلى أقصى اليسار */
}

.site-supervisor-count {
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-secondary);
    background-color: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* بداية الإضافة: إصلاح نافذة تعديل العهدة */

/* 1. رفع النافذة لتظهر في المقدمة */
#admin-asset-modal {
    z-index: 1001; /* رقم أعلى من النافذة السابقة (1000) */
}

/* 2. تحديد عرض أقصى للنافذة لإصلاح التمدد وتفعيل السكرول */
#admin-asset-modal .modal-panel {
    max-width: 700px; 
}

/* نهاية الإضافة */
/* بداية الإضافة: إصلاح شكل حقل إدخال معرّف الفئة */
.category-field-row .clause-item-input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    font-family: 'Cairo', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-field-row .clause-item-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* نهاية الإضافة */
/* ================================================================= */
/* ===      بداية إضافة: إصلاح مشكلة تمرير نافذة المركبات        === */
/* ================================================================= */

/* 1. نجبر لوحة النافذة على أن تكون حاوية مرنة بطول الشاشة كحد أقصى */
#vehicle-modal .modal-panel {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* لا يتجاوز 90% من ارتفاع الشاشة */
}

/* 2. نجبر الفورم داخل النافذة على أن يتمدد ويأخذ المساحة المتاحة */
#vehicle-modal form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* خدعة مهمة لضمان عمل التمرير */
}

/* 3. نجعل جسم النافذة هو الجزء الوحيد الذي يقبل التمرير */
#vehicle-modal .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* هذا هو السطر الأهم */
}
/* ================================================================= */
/* ===                   نهاية الإضافة                          === */
/* ================================================================= */
/* ======================================================= */
/* ===      بداية الإضافة: تنسيق إحصائيات المخزون        === */
/* ======================================================= */
.inventory-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
}
.inventory-stats-grid div {
    display: flex;
    flex-direction: column;
}
.inventory-stats-grid span {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 5px;
}
.inventory-stats-grid strong {
    font-size: 1.5rem;
    color: white;
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===      بداية الإضافة: إصلاح طبقة نافذة المركبات      === */
/* ======================================================= */
#vehicle-modal {
    z-index: 1002; /* رقم أعلى لضمان ظهوره فوق النوافذ الأخرى */
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================================= */
/* ===   بداية الإضافة: إصلاح تنسيق شارات المركبات       === */
/* ======================================================= */

.vehicle-status-badges {
    display: flex;
    flex-wrap: wrap; /* يسمح بالتفاف الشارات في الشاشات الصغيرة */
    gap: 6px;        /* يضيف مسافة بين الشارات */
    align-items: center;
}

/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
#recipient-info-modal {
    z-index: 1101; /* رقم أعلى من القائمة الجانبية (1100) ومن نافذة المركبات (1002) */
}
/* ======================================= */
/* ===   تصميم جديد لبطاقات مراجعة الغياب   === */
/* ======================================= */

.absence-review-list {
    display: grid; /* <<-- تم التغيير هنا */
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); /* <<-- تم التوحيد */
    gap: 25px; /* <<-- تم التوحيد */
}

.absence-review-card {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ظل خفيف */
    border: 1px solid var(--border-color);
    border-right: 5px solid var(--pending-color); /* شريط جانبي برتقالي */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    transition: all 0.2s ease;
}
.absence-review-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* 1. قسم معلومات الحارس */
.absence-card-main-info {
    flex-basis: 30%; /* يأخذ 30% من العرض */
}
.absence-card-main-info h4 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.absence-card-main-info p {
    margin: 0 0 5px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.absence-card-main-info .status-badge {
    font-size: 0.8rem;
    padding: 3px 10px;
}

/* 2. قسم تفاصيل الغياب (الوقت والتاريخ) */
.absence-card-details {
    flex-basis: 35%; /* يأخذ 35% من العرض */
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}
.absence-card-details strong {
    color: var(--text-secondary);
    font-weight: normal;
    min-width: 80px; /* لترتيب العناوين */
    display: inline-block;
}
.absence-card-details span {
    display: flex;
    align-items: center;
}

/* 3. قسم الأزرار */
.absence-card-actions {
    flex-basis: 35%; /* يأخذ 35% من العرض */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.absence-card-actions .contact-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.absence-card-actions .decision-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* تصميم خاص لبطاقات الأرشيف */
.absence-review-card.archive-card {
    border-right-color: var(--sidebar-bg);
}
.absence-review-card .archive-reviewer {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
}
/* ======================================= */
/* ===   بداية الإضافة: تبويبات المدراء   === */
/* ======================================= */

/* إخفاء التبويبات الخاصة بالمدراء بشكل افتراضي */
.manager-only-tab {
    display: none;
}
/* ======================================= */
/* ===           نهاية الإضافة           === */
/* ======================================= */
/* ======================================= */
/* ===   بداية الإضافة: تنسيق القائمة السوداء   === */
/* ======================================= */

.blacklist-card {
    background-color: #fff5f5; /* خلفية حمراء فاتحة */
    border: 1px solid #fecaca;
    border-right: 5px solid #ef4444; /* شريط أحمر جانبي */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blacklist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.blacklist-card .contract-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #fecaca;
}

.blacklist-card .contract-card-header h4 {
    margin: 0;
    font-size: 1.3rem;
    color: #b91c1c; /* لون أحمر داكن */
}

.blacklist-card .contract-card-body {
    padding: 20px;
    color: #991b1b;
}

.blacklist-card .contract-card-footer {
    padding: 15px 20px;
    background-color: #fef2f2;
    border-top: 1px solid #fecaca;
}

/* تنسيق خاص للقائمة المنسدلة للبحث عن الموظفين */
.blacklist-searchable-select .custom-select-options {
    z-index: 1002; /* لضمان ظهورها فوق النافذة */
}

/* تنسيق نافذة عرض التفاصيل */
#blacklist-view-body h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}
#blacklist-view-body p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-wrap; /* للحفاظ على فواصل الأسطر في السبب */
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}
#blacklist-view-footer {
    justify-content: space-between; /* لوضع زر الحذف على اليمين */
}
/* ======================================= */
/* ===           نهاية الإضافة           === */
/* ======================================= */
/* ======================================= */
/* ===   بداية الإضافة: تنسيق بطاقات الدعاوى   === */
/* ======================================= */

.lawsuit-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease;
}

.lawsuit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-hover-color);
}

.lawsuit-card-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lawsuit-card-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* لون الحالة (قيد النظر أو منتهية) */
.lawsuit-card.status-active {
    border-right: 5px solid var(--accent-color);
}
.lawsuit-card.status-closed {
    border-right: 5px solid #6b7280;
    background-color: #f9fafb;
    opacity: 0.8;
}

.lawsuit-card-body {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

.lawsuit-card-body .info-bit {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lawsuit-card-body .info-bit i {
    font-size: 1.2rem;
    color: var(--text-secondary);
}
.lawsuit-card-body .info-bit p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.lawsuit-card-body .info-bit strong {
    font-size: 1rem;
    color: var(--text-primary);
    display: block;
}

.lawsuit-card-footer {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid var(--border-color);
}

.latest-update-info {
    font-size: 0.95rem;
}
.latest-update-info strong {
    color: var(--accent-color);
}

/* --- تنسيقات نافذة عرض التفاصيل --- */
#lawsuit-view-body {
    background-color: #f1f5f9;
}
.lawsuit-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.lawsuit-details-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.lawsuit-details-card h4 {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.lawsuit-details-card .details-body {
    padding: 20px;
}
.lawsuit-details-card .details-body p {
    margin: 0 0 12px 0;
}
.lawsuit-details-card .details-body p strong {
    color: var(--text-secondary);
    min-width: 100px;
    display: inline-block;
}

/* تنسيق سجل الإجراءات */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.timeline-item {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border-right: 3px solid var(--accent-color);
}
.timeline-item .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.timeline-item .timeline-body {
    font-size: 0.95rem;
    line-height: 1.6;
}
.timeline-item .timeline-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.timeline-item .timeline-footer strong {
    color: var(--text-secondary);
}

/* تنسيق نموذج إضافة تحديث */
#lawsuit-update-form {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}
/* ======================================= */
/* ===           نهاية الإضافة           === */
/* ======================================= */
/* ======================================================= */
/* ===   بداية الإضافة: تنسيقات زر التبديل (Toggle)     === */
/* ======================================================= */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .label-text {
    font-weight: 700;
}
.toggle-switch .slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 34px;
    transition: background-color 0.3s;
}
.toggle-switch .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}
.toggle-switch input:checked + .slider {
    background-color: var(--accent-color);
}
.toggle-switch input:checked + .slider::before {
    transform: translateX(20px);
}
/* ======================================================= */
/* ===    بداية الإضافة: تحسينات جدول إدارة المستخدمين    === */
/* ======================================================= */
#user-management-table-container table {
    min-width: 1200px; /* لضمان عدم تداخل الأعمدة الكثيرة */
}
#user-management-table-container th,
#user-management-table-container td {
    padding: 10px 12px;
    font-size: 0.9rem;
    text-align: center;
}
#user-management-table-container th:first-child,
#user-management-table-container td:first-child {
    text-align: right; /* محاذاة الاسم لليمين */
}
#user-management-table-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/* ======================================================= */
/* ===                   نهاية الإضافة                   === */
/* ======================================================= */
/* ======================================= */
/* ===   بداية الإضافة: تنسيق بطاقات التسوية   === */
/* ======================================= */

.settlement-card {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--shadow-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.settlement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--shadow-hover-color);
}

.settlement-card-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settlement-card-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.settlement-card.status-active {
    border-right: 5px solid var(--pending-color); /* برتقالي للتفاوض */
}
.settlement-card.status-closed {
    border-right: 5px solid var(--approved-color); /* أخضر للصلح */
}
.settlement-card.status-failed {
    border-right: 5px solid var(--denied-color); /* أحمر للفشل */
}


.settlement-card-body {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

.settlement-card-footer {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid var(--border-color);
}

/* --- تنسيقات نافذة عرض التفاصيل --- */
#settlement-view-body {
    background-color: #f1f5f9;
}
.settlement-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.settlement-details-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.settlement-details-card h4 {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.settlement-details-card .details-body {
    padding: 20px;
}
.settlement-details-card .details-body p {
    margin: 0 0 12px 0;
}
.settlement-details-card .details-body p strong {
    color: var(--text-secondary);
    min-width: 100px;
    display: inline-block;
}

/* تنسيق نموذج إضافة تحديث */
#settlement-update-form {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}
/* ======================================= */
/* ===           نهاية الإضافة           === */
/* ======================================= */
/* ======================================================= */
/* ===      إصلاح ظهور نافذة تعديل الشاغر في المقدمة     === */
/* ======================================================= */
#vacancy-modal {
    z-index: 1060; /* رقم أعلى من النافذة العادية (1000) ومن نافذة التقرير */
}
/* أيقونة الحارس المنسحب (حمراء) */
.withdrawal-guard-marker {
    background-color: #ef4444; /* أحمر */
    border-color: #b91c1c;    /* حدود أحمر داكن */
    background-clip: padding-box;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.withdrawal-guard-marker i {
    transform: rotate(45deg);
    font-size: 20px;
    color: white;
}
/* تصميم بطاقة إنهاء الخدمة */
.settlement-report-card {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.settlement-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settlement-body {
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.settlement-section {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.settlement-section h5 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: var(--accent-color);
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 0.95rem;
}

.calc-row.total {
    border-top: 2px solid #000;
    border-bottom: none;
    font-weight: bold;
    font-size: 1.1rem;
    margin-top: 10px;
    padding-top: 15px;
}

.asset-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fee2e2;
    color: #991b1b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 5px;
    border: 1px solid #fecaca;
}

/* إخفاء العناصر غير الضرورية عند الطباعة */
@media print {
    .sidebar, .main-header, .no-print { display: none !important; }
    .dashboard-container { height: auto; overflow: visible; }
    .main-content { margin: 0; padding: 0; width: 100%; }
    .settlement-report-card { box-shadow: none; border: 2px solid #000; }
}
/* تنسيق تبويبات الفلترة الخاصة (نفس تنسيق التبويبات العادية) */
.filter-tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.filter-tab:hover {
    color: var(--text-primary);
    background-color: #f3f4f6;
    border-radius: 5px;
}

.filter-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background-color: #eff6ff;
    border-radius: 5px 5px 0 0;
}
/* تحسينات بطاقة الطلب الاحترافية */
.request-user-info {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودان للمعلومات */
    gap: 10px;
}

.request-user-info .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.request-user-info .info-item strong {
    color: var(--text-primary);
    font-weight: 700;
}

.request-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودان للتفاصيل */
    gap: 15px;
    margin-bottom: 15px;
}

.detail-box {
    background: white;
    /* border: 1px dashed #d1d5db; */
    border-radius: 6px;
    padding: 5px 0;
}

.detail-box label {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 2px;
}

.detail-box span {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.full-width {
    grid-column: 1 / -1;
}

.reason-box {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-top: 5px;
}
@media print {
    /* إخفاء كل عناصر النظام */
    body * {
        visibility: hidden;
    }
    
    /* إظهار نافذة التقرير ومحتوياتها فقط */
    #eos-report-modal, #eos-report-modal * {
        visibility: visible;
    }

    #eos-report-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 9999;
    }

    .modal-panel {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* إخفاء الأزرار والهيدر غير الضروري داخل التقرير */
    .modal-header, .modal-close-btn, .no-print, .btn {
        display: none !important;
    }

    /* إظهار قسم التواقيع */
    .print-only {
        display: block !important;
    }
}
/* === تصميم لوحة متابعة المسيرات الجديد === */
.dashboard-region-section {
    margin-bottom: 40px;
}

.dashboard-region-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.dashboard-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.dashboard-project-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s;
}

.dashboard-project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.project-card-header {
    padding: 20px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.project-card-body {
    padding: 0;
}

.location-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.95rem;
}

.location-row:last-child {
    border-bottom: none;
}

.location-row:hover {
    background-color: #f8fafc;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
}/* --- تنسيق جدول الدوام المرن والاحترافي --- */
.schedule-container-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-top: 25px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e5e7eb;
}

.date-badge-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.date-pill {
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: #f3f4f6;
    color: var(--text-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* الشبكة الذكية: تتكيف تلقائياً */
.week-grid {
    display: grid;
    /* السر هنا: عرض العمود لا يقل عن 110 بكسل، ويمتد ليملأ الفراغ */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.day-cell {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.day-cell .day-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 700;
}

.day-cell .time-range {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: ltr;
    font-size: 0.85rem; /* تم التصغير */
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-top: auto; /* لضمان التناسق */
}

/* تنسيق اليوم الحالي */
.day-cell.active-day {
    background: #eff6ff; /* أزرق فاتح جداً */
    border: 2px solid var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.day-cell.active-day .day-label {
    color: var(--accent-color);
}

.day-cell.active-day::before {
    content: "اليوم";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: bold;
}

/* تنسيق يوم الراحة */
.day-cell.rest-day {
    background: #f9fafb;
    opacity: 0.7;
    border-style: dashed;
}

.day-cell.rest-day .time-range {
    color: #9ca3af;
    font-size: 0.8rem;
}
/* ========================================= */
/* ===   تنسيقات صفحة التغطيات (الجديدة)  === */
/* ========================================= */

/* 1. تنسيق شريط الفلاتر ليكون أفقياً ومطابقاً للصفحات الأخرى */
.attendance-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 20px;
    align-items: center;
}

/* تنسيق حقول الإدخال والقوائم داخل الشريط */
.attendance-filter-bar .search-input {
    flex: 2; /* البحث يأخذ مساحة أكبر */
    min-width: 200px;
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
}

.attendance-filter-bar .filter-select {
    flex: 1; /* القوائم تأخذ مساحة متساوية */
    min-width: 140px;
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background-color: #fff;
    cursor: pointer;
}

/* 2. تنسيق شريط الإحصائيات (البطاقات الملونة) */
.map-stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.map-stat-card {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
}

.map-stat-card:hover {
    transform: translateY(-2px);
}

.map-stat-card .stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.map-stat-card h4 {
    margin: 0;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.map-stat-card p {
    margin: 4px 0 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
}

/* تحسين العرض على الجوال */
@media (max-width: 768px) {
    .attendance-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .attendance-filter-bar .search-input,
    .attendance-filter-bar .filter-select {
        width: 100%;
    }
}