/* =====================================================
   منظومة إدارة المبيعات والمخزون - تنسيقات اللغة العربية
   RTL (Right-to-Left) Support Stylesheet
   =====================================================
   الوصف: تنسيقات متخصصة لدعم اللغة العربية والاتجاه من اليمين لليسار
   الإصدار: 3.0.0
   التاريخ: 2026-08-06
   الدولة: ليبيا
   الاتجاه: RTL (من اليمين لليسار)
   يعتمد على: app.css (الإصدار 4.0)
   ===================================================== */

/* =====================================================
   1. المتغيرات الخاصة بالعربية
   ===================================================== */
:root {
    /* تعديلات خاصة بالخط العربي */
    --font-family-arabic: 'Tajawal', 'Almarai', 'Noto Kufi Arabic', 'Scheherazade New', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* تعديل أحجام الخط للعربية (الخط العربي يبدو أصغر) */
    --font-size-arabic-base: 0.9375rem;   /* 15px - أكبر قليلاً للقراءة */
    --font-size-arabic-sm: 0.875rem;       /* 14px */
    --font-size-arabic-lg: 1.125rem;       /* 18px */
    
    /* تباعد الأسطر للعربية (تحتاج مسافة أكبر) */
    --line-height-arabic: 1.8;
    
    /* اتجاه النص */
    --direction: rtl;
    --opposite-direction: ltr;
    --start: right;
    --end: left;
}

/* =====================================================
   2. إعادة تعيين الاتجاهات (Direction Reset)
   ===================================================== */
html {
    direction: rtl;
    writing-mode: horizontal-tb;
}

body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-family-arabic);
    font-size: var(--font-size-arabic-base);
    line-height: var(--line-height-arabic);
    letter-spacing: 0; /* الخط العربي لا يحتاج تباعد حروف */
}

/* =====================================================
   3. تعديلات القائمة الجانبية (Sidebar RTL)
   ===================================================== */

/* ── موضع القائمة الجانبية ── */
.sidebar {
    right: 0;
    left: auto;
    border-left: 1px solid var(--border-glass);
    border-right: none;
    box-shadow: var(--shadow-ambient), var(--shadow-neu);
}

/* ── زر طي القائمة ── */
.sidebar-toggle {
    left: 10px;
    right: auto;
}

.sidebar-toggle:hover {
    transform: rotate(-180deg);
}

/* ── روابط القائمة ── */
.sidebar-nav .nav-link::before {
    right: 0;
    left: auto;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.sidebar-nav .nav-link:hover {
    transform: translateX(-4px);
}

.sidebar-nav .nav-link.active::before {
    right: 0;
    left: auto;
}

/* ── أسهم القوائم الفرعية ── */
.submenu-toggle .menu-arrow {
    margin-right: auto;
    margin-left: 0;
}

.submenu-toggle[aria-expanded="true"] .menu-arrow {
    transform: rotate(180deg);
}

/* ── القوائم الفرعية ── */
.submenu .nav-link {
    padding-right: 52px;
    padding-left: 16px;
}

/* ── تذييل القائمة ── */
.sidebar-footer {
    direction: rtl;
}

/* ── الحالة المطوية ── */
.sidebar.collapsed .sidebar-nav .nav-link {
    padding: 12px;
}

/* =====================================================
   4. تعديلات المحتوى الرئيسي (Main Content RTL)
   ===================================================== */
.main-content {
    margin-right: var(--sidebar-width);
    margin-left: 0;
}

.main-content.expanded {
    margin-right: var(--sidebar-collapsed);
    margin-left: 0;
}

/* =====================================================
   5. تعديلات الهيدر (Header RTL)
   ===================================================== */

/* ── شريط البحث ── */
.header-search .search-icon {
    right: 18px;
    left: auto;
}

.header-search input {
    padding: 10px 48px 10px 18px;
}

.header-search .search-shortcut {
    right: auto;
    left: 12px;
}

/* ── قائمة المستخدم المنسدلة ── */
.user-dropdown-btn {
    padding: 6px 8px 6px 16px;
}

.user-dropdown-menu {
    left: 0;
    right: auto;
}

.user-dropdown-menu .dropdown-item {
    text-align: right;
}

.user-dropdown-menu .dropdown-item i {
    margin-left: 0;
    margin-right: 0;
}

/* ── زر الإشعارات ── */
.header-btn .badge-dot {
    left: 6px;
    right: auto;
}

/* =====================================================
   6. تعديلات المحتوى والصفحات (Content RTL)
   ===================================================== */

/* ── رأس الصفحة ── */
.page-title-wrapper {
    direction: rtl;
}

.breadcrumb {
    direction: rtl;
}

.breadcrumb .separator {
    transform: rotate(180deg);
    display: inline-block;
}

/* ── خبز المسار: عكس اتجاه الأسهم ── */
.breadcrumb .separator i::before {
    content: '\f104'; /* أيقونة السهم لليسار (Font Awesome) */
}

/* =====================================================
   7. تعديلات البطاقات (Cards RTL)
   ===================================================== */
.card-header {
    direction: rtl;
}

.card-title {
    direction: rtl;
}

.card-body {
    direction: rtl;
}

/* =====================================================
   8. تعديلات بطاقات الإحصائيات (Stat Cards RTL)
   ===================================================== */
.stat-card {
    direction: rtl;
}

.stat-card .stat-glow {
    right: -50%;
    left: auto;
}

.stat-card::before {
    right: 0;
    left: auto;
}

.stat-change {
    direction: rtl;
}

.stat-change.up i::before {
    content: '\f062'; /* سهم لأعلى */
}

.stat-change.down i::before {
    content: '\f063'; /* سهم لأسفل */
}

/* =====================================================
   9. تعديلات الأزرار (Buttons RTL)
   ===================================================== */
.btn {
    direction: rtl;
}

.btn i {
    margin-left: 4px;
    margin-right: 0;
}

/* =====================================================
   10. تعديلات النماذج (Forms RTL)
   ===================================================== */

/* ── تسميات النماذج ── */
.form-label {
    text-align: right;
}

.form-label .required {
    margin-right: 4px;
    margin-left: 0;
}

/* ── حقول الإدخال ── */
.form-control {
    text-align: right;
    direction: rtl;
}

.form-control::placeholder {
    text-align: right;
}

/* ── رسائل التحقق ── */
.invalid-feedback,
.valid-feedback,
.form-text {
    text-align: right;
}

/* ── مجموعة الإدخال ── */
.input-group .form-control:first-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
}

.input-group .form-control:last-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-text:first-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
    border-right: 2px solid var(--border-color);
}

.input-group-text:last-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
    border-left: 2px solid var(--border-color);
}

/* ── حقول الاختيار والمربعات ── */
.form-check {
    padding-right: 0;
    padding-left: 0;
}

.form-check-input {
    margin-left: 8px;
    margin-right: 0;
    float: right;
}

.form-check-label {
    padding-right: 0;
}

/* =====================================================
   11. تعديلات الجداول (Tables RTL)
   ===================================================== */
.data-table {
    direction: rtl;
}

.data-table thead th {
    text-align: right;
}

.data-table thead th:first-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.data-table thead th:last-child {
    border-radius: var(--radius-md) 0 0 0;
}

.data-table tbody td {
    text-align: right;
}

.data-table tbody tr:last-child td:first-child {
    border-radius: 0 0 var(--radius-md) 0;
}

.data-table tbody tr:last-child td:last-child {
    border-radius: 0 0 0 var(--radius-md);
}

/* ── أعمدة الأفعال (أزرار التعديل/الحذف) ── */
.data-table .actions-column {
    text-align: left;
}

/* =====================================================
   12. تعديلات الشارات (Badges RTL)
   ===================================================== */
.badge {
    direction: rtl;
}

/* =====================================================
   13. تعديلات التنبيهات (Alerts RTL)
   ===================================================== */
.alert {
    border-right: 4px solid;
    border-left: none;
    direction: rtl;
    text-align: right;
}

.alert-success {
    border-right-color: var(--success);
}

.alert-danger {
    border-right-color: var(--danger);
}

.alert-warning {
    border-right-color: var(--warning);
}

.alert-info {
    border-right-color: var(--primary);
}

.alert .btn-close {
    left: 12px;
    right: auto;
    margin-right: auto;
    margin-left: 0;
}

/* =====================================================
   14. تعديلات المودال (Modal RTL)
   ===================================================== */
.modal {
    direction: rtl;
    text-align: right;
}

.modal-header {
    direction: rtl;
}

.modal-close {
    /* يبقى في اليسار */
}

.modal-body {
    text-align: right;
}

.modal-footer {
    justify-content: flex-start; /* الأزرار تبدأ من اليسار بالعربي */
    direction: rtl;
}

.modal-footer .btn:first-child {
    margin-right: 0;
    margin-left: 8px;
}

/* =====================================================
   15. تعديلات التنقل بين الصفحات (Pagination RTL)
   ===================================================== */
.pagination {
    direction: rtl;
}

.pagination .page-link i {
    transform: rotate(180deg);
    display: inline-block;
}

/* =====================================================
   16. تعديلات الحالة الفارغة (Empty State RTL)
   ===================================================== */
.empty-state {
    direction: rtl;
    text-align: center;
}

/* =====================================================
   17. تعديلات التحميل (Loading RTL)
   ===================================================== */
.loading-overlay {
    direction: rtl;
}

/* =====================================================
   18. تعديلات أدوات مساعدة (Utilities RTL)
   ===================================================== */
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

/* ── إصلاح Flexbox للعربي ── */
.d-flex,
.flex-center,
.flex-between,
.header-actions,
.page-actions,
.form-row {
    direction: rtl;
}

/* ── إصلاح Grid للعربي ── */
.d-grid,
.stats-grid {
    direction: rtl;
}

/* =====================================================
   19. تحسينات خاصة بالخط العربي
   ===================================================== */

/* ── تحسين مظهر النصوص العربية ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-arabic);
    letter-spacing: 0;
    line-height: 1.5;
}

p {
    font-family: var(--font-family-arabic);
    line-height: var(--line-height-arabic);
    text-align: justify;
}

/* ── تحسين الأرقام العربية ── */
.stat-value,
.price,
.amount,
.quantity {
    font-family: var(--font-family-arabic);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* ── تحسين المحارف العربية ── */
.sidebar-nav .nav-link,
.page-title,
.card-title,
.form-label,
.btn {
    font-family: var(--font-family-arabic);
}

/* ── الكشيدة (تطويل الحروف) للعناوين ── */
.page-title {
    text-justify: inter-word;
}

/* =====================================================
   20. إصلاحات التوافق (Compatibility Fixes)
   ===================================================== */

/* ── إصلاح مشكلة الاتجاه في المتصفحات القديمة ── */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* =====================================================
   21. تعديلات خاصة بنقطة البيع (POS RTL)
   ===================================================== */
.pos-container {
    direction: rtl;
}

.pos-products-grid {
    direction: rtl;
}

.pos-cart-items {
    direction: rtl;
}

.pos-cart-item {
    direction: rtl;
}

.pos-cart-item .item-quantity {
    direction: rtl;
}

.pos-cart-item .item-total {
    text-align: left;
    direction: ltr;
}

.pos-totals {
    direction: rtl;
    text-align: right;
}

.pos-total-row .value {
    direction: ltr;
}

.pos-total-row.grand .value {
    direction: ltr;
}

.pos-payment-actions .btn-pay {
    direction: rtl;
}

/* ── أزرار الدفع في RTL ── */
.btn-pay-cash {
    grid-column: 1 / -1;
}

/* ── السلة في الجوال (RTL) ── */
@media (max-width: 992px) {
    .pos-cart {
        left: 0;
        right: 0;
    }
    
    .pos-cart::before {
        left: 50%;
        right: auto;
        transform: translateX(50%);
    }
}

/* =====================================================
   22. تعديلات خاصة بطباعة الفواتير (Print RTL)
   ===================================================== */
.invoice-print {
    direction: rtl;
    text-align: right;
    font-family: var(--font-family-arabic);
}

.invoice-print .invoice-header {
    direction: rtl;
}

.invoice-print .invoice-header .company-info {
    text-align: right !important;
}

.invoice-print .invoice-header .invoice-info {
    text-align: left !important;
    direction: ltr !important;
}

.invoice-print .customer-info {
    direction: rtl;
}

.invoice-print table {
    direction: rtl;
}

.invoice-print table th,
.invoice-print table td {
    text-align: right;
}

.invoice-print table .text-right {
    text-align: right !important;
}

.invoice-print table .text-left {
    text-align: left !important;
    direction: ltr !important;
}

/* =====================================================
   23. دعم المحارف القرآنية والدينية (اختياري)
   ===================================================== */
@font-face {
    font-family: 'UthmanicHafs';
    src: local('UthmanicHafs'), local('KFGQPC Uthmanic Script HAFS');
    font-display: swap;
}

.quran-text {
    font-family: 'UthmanicHafs', 'Traditional Arabic', serif;
    direction: rtl;
    text-align: center;
    line-height: 2.5;
    font-size: 1.2em;
}

/* =====================================================
   24. تعديلات التاريخ الهجري (اختياري)
   ===================================================== */
.hijri-date {
    direction: rtl;
    font-family: var(--font-family-arabic);
}

/* =====================================================
   25. فئات مساعدة خاصة بالعربي
   ===================================================== */

/* ── نص عربي مثالي ── */
.arabic-text {
    direction: rtl;
    text-align: right;
    font-family: var(--font-family-arabic);
    line-height: var(--line-height-arabic);
}

/* ── نص إنجليزي داخل السياق العربي ── */
.english-text,
.ltr-text {
    direction: ltr;
    text-align: left;
    display: inline-block;
    font-family: 'Segoe UI', -apple-system, sans-serif;
}

/* ── رقم بالعربي ── */
.arabic-number {
    font-family: var(--font-family-arabic);
    font-feature-settings: "tnum";
}

/* ── رقم هندي (إن أمكن) ── */
.hindi-number {
    font-family: 'Tajawal', 'Almarai', sans-serif;
}

/* ── إصلاح اتجاه ms-auto و me-auto ── */
.ms-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.me-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* =====================================================
   26. إصلاحات لمكتبات خارجية (RTL)
   ===================================================== */

/* ── Chart.js للعربي ── */
.chart-container {
    direction: ltr; /* المخططات البيانية تعمل بشكل أفضل مع LTR */
}

.chart-container .chart-title {
    direction: rtl;
    text-align: right;
}

/* ── Select2 للعربي ── */
.select2-container--default .select2-selection--single {
    direction: rtl;
    text-align: right;
}

.select2-container--default .select2-results__option {
    direction: rtl;
    text-align: right;
}

/* ── DataTables للعربي ── */
.dataTables_wrapper {
    direction: rtl;
}

.dataTables_filter {
    float: left;
    text-align: left;
}

.dataTables_length {
    float: right;
    text-align: right;
}

.dataTables_info {
    float: right;
    text-align: right;
}

.dataTables_paginate {
    float: left;
}

/* =====================================================
   27. استعلامات الوسائط للعربي (RTL Media Queries)
   ===================================================== */

/* ── أجهزة لوحية (أقل من 992px) ── */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ── الهواتف (أقل من 768px) ── */
@media (max-width: 767.98px) {
    .page-header {
        align-items: flex-start;
    }
    
    .data-table tbody td {
        text-align: right;
    }
    
    .data-table tbody td::before {
        text-align: right;
    }
    
    .modal-footer {
        justify-content: center;
    }
}

/* ── هواتف صغيرة (أقل من 576px) ── */
@media (max-width: 575.98px) {
    body {
        font-size: var(--font-size-arabic-sm);
    }
}

/* =====================================================
   28. طباعة RTL
   ===================================================== */
@media print {
    body {
        direction: rtl;
        text-align: right;
    }
    
    .invoice-print {
        direction: rtl;
    }
    
    .invoice-print table th,
    .invoice-print table td {
        text-align: right;
    }
}

/* =====================================================
   نهاية الملف
   ===================================================== */