/**
 * Riwaq Sessions & Payroll Pro
 * Admin Styles
 * (Version 8.0 - The Complete Comprehensive File)
 */

/* =========================================
   1. تعريف المتغيرات والخطوط الأساسية
   ========================================= */
:root {
	--accent-100: #106442;
	--accent-hover: #0d5336;
	--warning-100: rgba(255, 168, 0, 1);
	--danger-100: rgba(255, 57, 69, 1);
	--success-100: rgba(97, 204, 47, 1);

	--font-heading: 'Cairo', sans-serif;
	--font-body: 'Tajawal', sans-serif;
}

/* =========================================
   2. النطاق العام (Scoped Global Styles)
   ========================================= */
/* نستخدم #wpbody-content لزيادة قوة المحدد (Specificity) */
#wpbody-content .riwaq-spl-admin-wrap {
	font-family: var(--font-body);
	direction: rtl;
    max-width: 100%;
    overflow-x: hidden; /* منع السكرول العام للصفحة */
}

#wpbody-content .riwaq-spl-admin-wrap * {
	box-sizing: border-box;
}

#wpbody-content .riwaq-spl-admin-wrap h1,
#wpbody-content .riwaq-spl-admin-wrap h2,
#wpbody-content .riwaq-spl-admin-wrap h3 {
	font-family: var(--font-heading) !important;
	font-weight: 700;
}

/* =========================================
   3. تنسيق الجداول (Tables) - تصميم موحد
   ========================================= */
/* حاوية الجدول: تتيح السكرول الأفقي عند الحاجة */
#wpbody-content .riwaq-spl-admin-wrap .rspl-table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-top: 15px;
    margin-bottom: 20px;
    position: relative;
}

/* الجدول نفسه */
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table {
    width: 100% !important;
    table-layout: auto !important;
    border: none;
    box-shadow: none;
    margin: 0;
    background-color: #fff;
    border-collapse: collapse;
    min-width: 800px; /* ضمان عرض أدنى لظهور السكرول */
}

/* خلايا الجدول (الرأس والمتن) */
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table th, 
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td {
    padding: 12px 15px !important;
    vertical-align: middle;
    font-size: 14px !important;
    text-align: right !important;
    height: auto !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #f0f0f1;
    white-space: nowrap !important; /* منع انضغاط النصوص */
}

/* رأس الجدول */
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table thead th {
    background-color: #f6f7f7;
    border-bottom: 2px solid #dcdcde;
    color: #1d2327;
    font-weight: 700;
}

/* استثناء للأعمدة التي تحتوي نصوصاً طويلة (مثل الملاحظات) للسماح لها بالالتفاف */
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td.column-notes,
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td.column-comment,
#wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td.column-note_to_student {
    white-space: normal !important;
    min-width: 250px;
}

/* روابط الإجراءات (Edit | Delete) */
#wpbody-content .riwaq-spl-admin-wrap .row-actions {
    visibility: visible;
    font-size: 13px;
    padding: 4px 0 0;
}

/* إخفاء أسهم التوسيع التلقائي (Toggle Row) في الجوال */
#wpbody-content .riwaq-spl-admin-wrap .wp-list-table .toggle-row {
    display: none !important;
}

/* =========================================
   4. شارات الحالة (Status Badges) - الألوان
   ========================================= */
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-badge {
	display: inline-block !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	color: #ffffff !important; /* نص أبيض إجباري */
    text-align: center;
    min-width: 80px;
    line-height: 1.2;
    text-decoration: none;
    background-color: #787c82; /* لون افتراضي */
}

/* --- ألوان الحالات (يجب استخدام !important لضمان التطبيق) --- */

/* حالات الباقات (الجديد) */
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-active { 
    background-color: #46b450 !important; /* أخضر */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-completed { 
    background-color: #2c3e50 !important; /* كحلي */
}

/* حالات الحصص والفواتير */
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-draft { 
    background-color: #787c82 !important; /* رمادي */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-posted { 
    background-color: #f0b849 !important; /* أصفر */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-paid { 
    background-color: #106442 !important; /* أخضر غامق */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-void { 
    background-color: #dc3232 !important; /* أحمر */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-pending {
    background-color: #f39c12 !important; /* برتقالي */
}
#wpbody-content .riwaq-spl-admin-wrap .rspl-status-approved {
    background-color: #2271b1 !important; /* أزرق */
}

/* =========================================
   5. تنسيق النماذج والفلاتر (Forms & Filters)
   ========================================= */
/* حاوية الفلاتر العلوية */
#wpbody-content .rspl-filters-wrap {
	display: flex;
	flex-wrap: wrap; 
	gap: 15px; 
	padding: 20px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin: 20px 0;
    align-items: flex-end;
}

#wpbody-content .rspl-filters-wrap .filter-item {
	flex-grow: 1;
	flex-basis: 180px; 
}

#wpbody-content .rspl-filters-wrap .filter-item label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 13px;
}

/* توحيد ارتفاع جميع الحقول (Input, Select, Buttons) */
#wpbody-content .rspl-filters-wrap input[type="text"],
#wpbody-content .rspl-filters-wrap input[type="date"],
#wpbody-content .rspl-filters-wrap select,
#wpbody-content .rspl-filters-wrap .button,
#wpbody-content .riwaq-spl-admin-wrap .form-field input:not([type="submit"]),
#wpbody-content .riwaq-spl-admin-wrap .form-field select,
#wpbody-content .riwaq-spl-admin-wrap .form-field textarea {
	height: 40px !important; 
	line-height: normal !important;
    padding: 0 10px !important;
    box-shadow: none !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 4px !important;
    width: 100%;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
}

/* إصلاح textarea ليكون ارتفاعه طبيعياً */
#wpbody-content .riwaq-spl-admin-wrap .form-field textarea {
    height: auto !important;
    min-height: 100px;
    padding: 10px !important;
}

/* إصلاح Select2 ليطابق ارتفاع الحقول الأخرى */
#wpbody-content .riwaq-spl-admin-wrap .select2-container .select2-selection--single,
#wpbody-content .riwaq-spl-admin-wrap .select2-container .select2-selection--multiple {
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px 8px !important;
    border: 1px solid #8c8f94 !important;
    display: flex;
    align-items: center;
}
#wpbody-content .riwaq-spl-admin-wrap .select2-container--classic .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
}
#wpbody-content .riwaq-spl-admin-wrap .select2-container--classic .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

/* أزرار الفلترة */
#wpbody-content .rspl-filters-wrap .filter-item-buttons {
	flex-grow: 1;
	flex-basis: 160px;
	display: flex;
	gap: 10px;
}
#wpbody-content .rspl-filters-wrap .filter-item-buttons .button {
	width: auto;
    justify-content: center;
}

/* تنسيق الحقول داخل العلب (Postboxes) */
#wpbody-content .riwaq-spl-admin-wrap .postbox .form-field {
	margin-bottom: 20px; 
}
#wpbody-content .riwaq-spl-admin-wrap .postbox .form-field:last-child {
	margin-bottom: 0;
}
#wpbody-content .riwaq-spl-admin-wrap .postbox .form-field p.description {
	font-size: 13px;
	color: #646970;
	margin-top: 6px;
}

/* =========================================
   6. تنسيقات خاصة بالصفحات الفرعية
   ========================================= */

/* صفحة المعلمين: رابط تعديل السعر */
#wpbody-content .riwaq-spl-admin-wrap a.rspl-edit-price-link {
	text-decoration: none;
	border-bottom: 1px dashed var(--accent-100);
	color: var(--accent-100);
	font-weight: bold;
}
#wpbody-content .riwaq-spl-admin-wrap a.rspl-edit-price-link em {
	color: #777;
	font-weight: normal;
}

/* صفحة تفاصيل الدفعة (Invoice Details) */
#wpbody-content .rspl-summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 15px;
}
#wpbody-content .rspl-summary-grid p {
	margin: 8px 0;
	font-size: 15px;
}
#wpbody-content .rspl-summary-grid p strong {
	font-family: var(--font-heading);
	color: #333;
}

/* =========================================
   7. لوحة التحكم (Dashboard & KPIs)
   ========================================= */
/* فلاتر الداشبورد */
#wpbody-content .rspl-dashboard-filters {
	padding: 0;
	background: none;
	border: 0;
	margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#wpbody-content .rspl-dashboard-filters .button {
	margin-left: 5px;
    width: auto;
}
#wpbody-content .rspl-dashboard-filters .rspl-custom-date-filter {
	display: flex;
	gap: 5px;
	align-items: center;
	margin-left: auto; 
}
#wpbody-content .rspl-dashboard-filters .rspl-custom-date-filter input[type="date"] {
	width: auto;
}

/* بطاقات الإحصائيات (KPIs) */
#rspl-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}
#rspl-kpi-grid .rspl-kpi-card {
	background: #fff;
	padding: 25px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
	transition: transform 0.2s ease;
}
#rspl-kpi-grid .rspl-kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
#rspl-kpi-grid .rspl-kpi-card .kpi-label {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 600;
	color: #646970;
	margin-bottom: 12px;
}
#rspl-kpi-grid .rspl-kpi-card .kpi-value {
	font-size: 28px;
	font-weight: 800;
	color: #1d2327;
}
#rspl-kpi-grid .rspl-kpi-card.kpi-profit .kpi-value { color: var(--accent-100); }
#rspl-kpi-grid .rspl-kpi-card.kpi-cost .kpi-value { color: var(--danger-100); }
#rspl-kpi-grid .rspl-kpi-card.kpi-expenses .kpi-value { color: #f39c12; }

/* الرسوم البيانية */
.rspl-chart-container {
	margin-top: 30px;
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 15px;
	border-radius: 6px;
}
.rspl-chart-spinner {
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.rspl-charts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	gap: 25px;
}

/* =========================================
   8. التجاوب مع الجوال (Mobile Responsiveness)
   ========================================= */
@media screen and (max-width: 960px) {
	.rspl-charts-grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 782px) {
    
    /* 1. الفلاتر في الموبايل */
    #wpbody-content .rspl-filters-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    #wpbody-content .rspl-filters-wrap .filter-item,
    #wpbody-content .rspl-filters-wrap .filter-item-buttons {
        width: 100%;
        flex-basis: auto;
    }
    #wpbody-content .rspl-dashboard-filters {
		flex-direction: column;
		gap: 10px;
	}
	#wpbody-content .rspl-dashboard-filters .rspl-custom-date-filter {
		flex-direction: column;
		width: 100%;
	}
	#wpbody-content .rspl-dashboard-filters .rspl-custom-date-filter input {
		width: 100%;
	}

    /* 2. الجداول في الموبايل (Scrollable Table View) */
    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    
    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table thead {
        display: table-header-group !important; /* إظهار العناوين */
    }

    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table tbody {
        display: table-row-group !important;
    }

    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table tr {
        display: table-row !important;
        background: #fff !important;
        border: none !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table th,
    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td {
        display: table-cell !important;
        text-align: right !important;
        padding: 10px !important;
        border-bottom: 1px solid #eee !important;
        width: auto !important;
        white-space: nowrap !important; 
    }

    /* إخفاء العناوين المزيفة (data-label) نهائياً */
    #wpbody-content .riwaq-spl-admin-wrap table.wp-list-table td::before {
        display: none !important;
        content: none !important;
    }

    /* 3. جدول الإدخال المجمع (Bulk Add) - تحويله إلى بطاقات */
    #wpbody-content #rspl-bulk-table {
        display: block !important; 
        border: 0;
    }
    #wpbody-content #rspl-bulk-table thead {
        display: none !important;
    }
    #wpbody-content #rspl-bulk-table tbody, 
    #wpbody-content #rspl-bulk-table tr, 
    #wpbody-content #rspl-bulk-table td {
        display: block !important;
        width: 100% !important;
    }
    #wpbody-content #rspl-bulk-table tr {
        margin-bottom: 20px;
        background: #f9f9f9;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
    }
    #wpbody-content #rspl-bulk-table td {
        border: none;
        padding: 5px 0 !important;
        text-align: right !important;
    }
    #wpbody-content #rspl-bulk-table td::before {
        content: attr(data-label);
        display: block !important;
        font-weight: bold;
        margin-bottom: 5px;
        color: #555;
    }

    /* 4. النماذج في الموبايل */
	.riwaq-spl-admin-wrap #post-body.columns-2 {
		display: flex;
		flex-direction: column-reverse;
	}
	.riwaq-spl-admin-wrap #postbox-container-1 {
		margin-bottom: 20px;
	}
}

/* =========================================
   9. تنسيق قائمة الإشعارات (Admin Bar Dropdown - Mobile Fixed)
   ========================================= */

/* 1. الشارة الحمراء */
#wpadminbar .rspl-notification-badge {
    background-color: #d63638 !important;
    color: #fff !important;
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    margin-left: 4px;
    vertical-align: top;
    position: relative;
    top: 7px;
}

/* 2. حاوية القائمة المنسدلة (Responsive) */
#wpadminbar .quicklinks .menupop#wp-admin-bar-rspl_notifications .ab-sub-wrapper {
    /* إعدادات عامة */
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    padding: 0 !important;
    border: 1px solid #ddd !important;
    overflow-y: auto;
    max-height: 500px;
}

/* للديسك توب */
@media screen and (min-width: 783px) {
    #wpadminbar .quicklinks .menupop#wp-admin-bar-rspl_notifications .ab-sub-wrapper {
        min-width: 380px !important;
        width: 380px !important;
    }
}

/* للجوال (إصلاح السكرول الأفقي) */
@media screen and (max-width: 782px) {
    #wpadminbar .quicklinks .menupop#wp-admin-bar-rspl_notifications .ab-sub-wrapper {
        min-width: 300px !important; /* عرض أقل للجوال */
        width: 95vw !important; /* عرض نسبي للشاشة */
        right: 0 !important;
        left: 0 !important;
        margin: 0 auto !important; /* توسيط */
        position: absolute !important;
    }
    
    /* إظهار القائمة في الجوال */
    #wpadminbar li#wp-admin-bar-rspl_notifications {
        display: block !important;
    }
}

/* 3. عنصر الإشعار */
#wpadminbar #wp-admin-bar-rspl_notifications .ab-sub-wrapper .ab-item {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 12px 15px !important;
    white-space: normal !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #333 !important;
    display: block !important;
    text-align: right !important;
    font-size: 13px !important;
    background: #fff !important;
}

#wpadminbar #wp-admin-bar-rspl_notifications .ab-sub-wrapper .ab-item:hover {
    background-color: #f9f9f9 !important;
    color: #000 !important;
}

/* 4. المحتوى الداخلي */
#wpadminbar .rspl-bar-notif-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
}

#wpadminbar .rspl-bar-notif-item .rspl-msg {
    flex-grow: 1 !important;
}

/* 5. زر التجاهل (X) */
#wpadminbar .rspl-dismiss-btn {
    color: #dc3232 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-decoration: none !important;
    padding: 2px 8px !important;
    background: rgba(220, 50, 50, 0.08) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

/* 6. زر إغلاق القائمة (موبايل فقط) */
#wpadminbar #wp-admin-bar-rspl_close_menu .ab-item {
    display: none !important;
}
@media screen and (max-width: 782px) {
    #wpadminbar #wp-admin-bar-rspl_close_menu .ab-item {
        display: block !important;
        text-align: center !important;
        background-color: #f0f0f1 !important;
        color: #555 !important;
        font-weight: bold !important;
        border-top: 2px solid #ddd !important;
    }
}

/* 7. رابط عرض الكل */
#wpadminbar #wp-admin-bar-rspl_see_all .ab-item {
    background-color: #f9f9f9 !important;
    text-align: center !important;
    border-top: 1px solid #ccc !important;
    font-weight: 700 !important;
    color: #0073aa !important;
    padding: 12px !important;
}