/* i18n.css — تجاوزات الاتجاه الإنجليزي (LTR) وخطّه.
   العربية هي الأساس في بقية الملفات (RTL مفترض)؛ هنا فقط ما يلزم انعكاسه
   عند html[dir="ltr"]. المبدأ: كل قاعدة فيزيائية (left/right/translateX) في
   ملفات الثيم لها مقابلها معكوس هنا، والقواعد المنطقية (inline-start/…) لا
   تُلمس أصلاً. يُحمَّل آخراً (بعد onboarding.css) كي يعلو في الـcascade. */

/* ===== الخط: إنجليزي → Plus Jakarta Sans (محمَّل أصلاً في _head) ===== */
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] .orders-list,
html[lang="en"] .customers-table {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* الأرقام والشيفرة تبقى monospace كما في الثيم */
html[lang="en"] .font-mono, html[lang="en"] code {
    font-family: 'JetBrains Mono', monospace !important;
}

/* ===== مبدّل اللغة: يظهر اسم اللغة الهدف فقط ===== */
.lang-label-when-en { display: none; }
html[lang="en"] .lang-label-when-ar { display: none; }
html[lang="en"] .lang-label-when-en { display: inline; }
.lang-toggle {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: start;
}

/* زر شاشة الدخول — مثبّت أعلى البداية */
.intro-lang-toggle {
    position: absolute;
    top: 14px;
    inset-inline-end: 16px;
    z-index: 10;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-main, #e0e6ef);
    background: var(--surface-solid, #fff);
    color: var(--text-main, #2a3547);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
.intro-lang-toggle:hover { border-color: var(--primary, #4870d6); color: var(--primary, #4870d6); }

/* ===== جداول: ترويسات وخلايا تبدأ من اليسار ===== */
html[dir="ltr"] .orders-list thead th,
html[dir="ltr"] .orders-list tbody td,
html[dir="ltr"] .customers-table thead th,
html[dir="ltr"] .customers-table td {
    text-align: left;
}

/* ===== الحقول: تسميات ومسافات الأيقونات ===== */
html[dir="ltr"] .form-label { text-align: left; padding-right: 0; padding-left: 10px; }
html[dir="ltr"] .form-label::after { left: 0; right: auto; }
html[dir="ltr"] .sortable-header { padding-right: 0; padding-left: 28px; }
html[dir="ltr"] .sort-icon { left: 8px; right: auto; }

/* ===== Topbar: الأزرار تلتصق بطرف البداية ===== */
html[dir="ltr"] .topbar-actions { margin-right: 0; margin-left: auto; }
@media (min-width: 901px) {
    html[dir="ltr"] .topbar-actions { margin-left: 0; }
}

/* ===== درج الشريط الجانبي على الجوال: ينزلق من اليسار في LTR ===== */
@media (max-width: 900px) {
    html[dir="ltr"] .sidebar {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }
    html[dir="ltr"] body.sidebar-open .sidebar { transform: translateX(0); }
}

/* ===== درج لوحة القناة (دردشة الفريق): ينزلق من اليمين في LTR =====
   العمود ملتصق بـ inset-inline-end، أي الحافة اليسرى في RTL واليمنى في LTR،
   فتنعكس إشارة الإزاحة معه. الورقة السفلية (≤768px) تستعمل translateY فلا
   تحتاج نظيراً هنا. */
@media (min-width: 769px) and (max-width: 1100px) {
    html[dir="ltr"] #teamChatPage .tc-panel { transform: translateX(100%); }
    html[dir="ltr"] #teamChatPage .tc-panel.is-open { transform: translateX(0); }
}

/* ===== مفاتيح التبديل (toggles) — الإزاحة تنعكس ===== */
html[dir="ltr"] #onboardingOverlay .ob-toggle-row input:checked + .ob-toggle-track::after {
    transform: translateX(16px);
}

/* ===== سهم صفّ الإعدادات: يشير إلى جهة الفتح في الاتجاهَين ===== */
html[dir="ltr"] .sg-item-chev { transform: scaleX(-1); }

/* ===== سهام ومسافات صغيرة ===== */
html[dir="ltr"] .notification-dropdown-link:hover .nt-arrow { transform: translateX(3px); }
html[dir="ltr"] .ai-topup-req .ai-st { margin-right: 0; margin-left: auto; }
html[dir="ltr"] .assistant-msg-text, html[dir="ltr"] .ai-chip { text-align: left; }

/* ===== قوائم منسدلة متمركزة: translateX(-50%) يبقى صحيحاً في الاتجاهَين ===== */

/* ===== لوحة ألوان الثيم: مسافة شريط التمرير ===== */
html[dir="ltr"] .theme-color-pickers { padding-right: 4px; padding-left: 10px; }

/* ===== منتقي الحالة: سهم القائمة على اليمين في LTR ===== */
html[dir="ltr"] .status-select-dropdown {
    background-position: right 0.7em top 50%;
    padding-right: 0;
    padding-left: 2.2em;
}

/* ===== ظل صفّ hover المحدَّد من طرف البداية ===== */
html[dir="ltr"] .clickable-row:hover {
    box-shadow: inset -3px 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
}

/* ===== هاتف العميل في تفاصيل الطلب: العنصر مقلوب إلى ltr لعرض الأرقام سليمة،
   فمحاذاته تتبع اتجاه الصفحة لا اتجاهه هو (right في العربية · left هنا) ===== */
html[dir="ltr"] .odd-cust-phone { text-align: left; }