/* ================================================================
   Horse Saleor Dashboard — RTL + Vazirmatn CSS overrides
   اعمال‌شده پس از باندل اصلی در index.html
   ================================================================ */

/* ----------------------------------------------------------------
   ۱. فونت Vazirmatn (محلی، woff2)
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("./fonts/vazirmatn-arabic-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("./fonts/vazirmatn-arabic-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("./fonts/vazirmatn-arabic-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("./fonts/vazirmatn-arabic-700-normal.woff2") format("woff2");
}

/* ----------------------------------------------------------------
   ۲. جهت اساسی سند — horse-fa-ui.js هم این را بازگذاری می‌کند
   ---------------------------------------------------------------- */
html[dir="rtl"] {
  direction: rtl !important;
}

html[dir="rtl"] body {
  direction: rtl !important;
  font-family: "Vazirmatn", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

/* ----------------------------------------------------------------
   ۳. فونت روی ریشه اپ و همه فرزندان
   ---------------------------------------------------------------- */
html[dir="rtl"] #dashboard-app,
html[dir="rtl"] #portal,
html[dir="rtl"] #modal-root {
  direction: rtl !important;
  text-align: right;
  font-family: "Vazirmatn", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

html[dir="rtl"] #dashboard-app *,
html[dir="rtl"] #dashboard-app *::before,
html[dir="rtl"] #dashboard-app *::after,
html[dir="rtl"] #portal *,
html[dir="rtl"] #portal *::before,
html[dir="rtl"] #portal *::after,
html[dir="rtl"] #modal-root *,
html[dir="rtl"] #modal-root *::before,
html[dir="rtl"] #modal-root *::after {
  font-family: "Vazirmatn", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

/* آیکون‌های Material باید فونت خودشان را حفظ کنند */
html[dir="rtl"] #dashboard-app .material-icons,
html[dir="rtl"] #dashboard-app [class*="material-icons"],
html[dir="rtl"] #portal .material-icons,
html[dir="rtl"] #portal [class*="material-icons"],
html[dir="rtl"] #modal-root .material-icons,
html[dir="rtl"] #modal-root [class*="material-icons"] {
  font-family: "Material Icons" !important;
}

/* ================================================================
   ۴. MUI v4 — جداول کلاسیک
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiTable-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiTableCell-root {
  text-align: right !important;
}

html[dir="rtl"] #dashboard-app .MuiTableCell-alignLeft {
  text-align: right !important;
}

html[dir="rtl"] #dashboard-app .MuiTableCell-alignRight {
  text-align: left !important;
}

/* checkbox column */
html[dir="rtl"] #dashboard-app .MuiTableCell-paddingCheckbox {
  padding: 0 4px 0 0 !important;
  text-align: right !important;
}

/* ================================================================
   ۵. MUI v4 — Pagination
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiTablePagination-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiTablePagination-toolbar {
  flex-direction: row-reverse !important;
  padding-right: 2px !important;
  padding-left: 0 !important;
}

html[dir="rtl"] #dashboard-app .MuiTablePagination-spacer {
  flex: 1 1 0 !important;
  order: 2 !important;
}

html[dir="rtl"] #dashboard-app .MuiTablePagination-caption {
  direction: rtl !important;
}

/* آیکون‌های next/prev صفحه‌بندی باید آینه شوند */
html[dir="rtl"] #dashboard-app .MuiTablePagination-actions button svg,
html[dir="rtl"] #dashboard-app [aria-label*="next page"] svg,
html[dir="rtl"] #dashboard-app [aria-label*="previous page"] svg,
html[dir="rtl"] #dashboard-app [aria-label*="صفحه بعد"] svg,
html[dir="rtl"] #dashboard-app [aria-label*="صفحه قبل"] svg {
  transform: scaleX(-1) !important;
}

/* Saleor داشبورد از کامپوننت Pagination سفارشی macaw هم استفاده می‌کند */
html[dir="rtl"] #dashboard-app [data-test-id="pagination-navigate-forward"] svg,
html[dir="rtl"] #dashboard-app [data-test-id="pagination-navigate-back"] svg {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۶. MUI v4 — دکمه‌ها (آیکون + متن)
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiButton-startIcon {
  margin-left: 8px !important;
  margin-right: -4px !important;
}

html[dir="rtl"] #dashboard-app .MuiButton-endIcon {
  margin-right: 8px !important;
  margin-left: -4px !important;
}

/* IconButton با آیکون جهت‌دار */
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="ArrowBackIcon"],
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="ArrowForwardIcon"],
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="NavigateNextIcon"],
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="NavigateBeforeIcon"],
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="ChevronLeftIcon"],
html[dir="rtl"] #dashboard-app .MuiIconButton-root [data-testid="ChevronRightIcon"] {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۷. MUI v4 — فیلدهای ورودی
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiInputBase-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiInputBase-input {
  text-align: right !important;
}

/* آرایش: adornment ابتدایی (شروع) در RTL = سمت راست */
html[dir="rtl"] #dashboard-app .MuiInputAdornment-positionStart {
  margin-left: 8px !important;
  margin-right: 0 !important;
  order: 1 !important;
}

html[dir="rtl"] #dashboard-app .MuiInputAdornment-positionEnd {
  margin-right: 8px !important;
  margin-left: 0 !important;
  order: -1 !important;
}

/* OutlinedInput — Legend label راست‌چین */
html[dir="rtl"] #dashboard-app .MuiOutlinedInput-notchedOutline legend {
  text-align: right !important;
}

/* TextField label */
html[dir="rtl"] #dashboard-app .MuiFormLabel-root,
html[dir="rtl"] #dashboard-app .MuiInputLabel-root {
  right: 0 !important;
  left: auto !important;
  transform-origin: top right !important;
}

html[dir="rtl"] #dashboard-app .MuiInputLabel-shrink {
  transform-origin: top right !important;
}

html[dir="rtl"] #dashboard-app .MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(14px, -6px) scale(0.75) !important;
}

/* helperText راست‌چین */
html[dir="rtl"] #dashboard-app .MuiFormHelperText-root {
  text-align: right !important;
  margin-right: 14px !important;
  margin-left: 0 !important;
}

/* ================================================================
   ۸. MUI v4 — Select و Combobox
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiSelect-root {
  padding-right: 16px !important;
  padding-left: 32px !important;
  text-align: right !important;
}

/* آیکون dropdown Select از سمت راست به چپ می‌رود */
html[dir="rtl"] #dashboard-app .MuiSelect-icon {
  right: auto !important;
  left: 7px !important;
}

html[dir="rtl"] #dashboard-app .MuiSelect-select.MuiSelect-select {
  padding-right: 16px !important;
  padding-left: 32px !important;
}

/* ================================================================
   ۹. MUI v4 — لیست و منو
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiListItem-root,
html[dir="rtl"] #portal .MuiListItem-root {
  text-align: right !important;
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #dashboard-app .MuiListItemIcon-root,
html[dir="rtl"] #portal .MuiListItemIcon-root {
  min-width: auto !important;
  margin-left: 16px !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #dashboard-app .MuiListItemText-root,
html[dir="rtl"] #portal .MuiListItemText-root {
  text-align: right !important;
}

/* MenuItem */
html[dir="rtl"] #portal .MuiMenuItem-root,
html[dir="rtl"] #modal-root .MuiMenuItem-root {
  direction: rtl !important;
  text-align: right !important;
}

/* ================================================================
   ۱۰. MUI v4 — Chip
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiChip-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiChip-label {
  padding-left: 4px !important;
  padding-right: 12px !important;
}

html[dir="rtl"] #dashboard-app .MuiChip-deleteIcon {
  margin: 0 -6px 0 5px !important;
}

html[dir="rtl"] #dashboard-app .MuiChip-icon {
  margin-left: -6px !important;
  margin-right: 5px !important;
}

/* ================================================================
   ۱۱. MUI v4 — Tooltip (سمت‌بندی محور)
   ================================================================ */
html[dir="rtl"] #portal [data-popper-placement="left"] .MuiTooltip-tooltip,
html[dir="rtl"] #portal [data-popper-placement="left-start"] .MuiTooltip-tooltip,
html[dir="rtl"] #portal [data-popper-placement="left-end"] .MuiTooltip-tooltip {
  transform-origin: right center !important;
}

/* ================================================================
   ۱۲. MUI v4 — Breadcrumbs
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiBreadcrumbs-ol {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #dashboard-app .MuiBreadcrumbs-separator {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۱۳. MUI v4 — Snackbar → پایین راست در RTL
   ================================================================ */
html[dir="rtl"] #portal .MuiSnackbar-anchorOriginBottomLeft {
  left: auto !important;
  right: 24px !important;
}

html[dir="rtl"] #portal .MuiSnackbar-anchorOriginBottomCenter,
html[dir="rtl"] #portal .MuiSnackbar-anchorOriginBottomLeft {
  left: auto !important;
  right: 24px !important;
}

/* ================================================================
   ۱۴. MUI v4 — Alert
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiAlert-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiAlert-icon {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

html[dir="rtl"] #dashboard-app .MuiAlert-action {
  margin-right: auto !important;
  margin-left: -8px !important;
  padding-left: 0 !important;
  padding-right: 16px !important;
}

/* ================================================================
   ۱۵. MUI v4 — Drawer (کشوی نوار کناری)
   آینه کردن: anchor=right ↔ anchor=left
   ================================================================ */
html[dir="rtl"] #portal .MuiDrawer-paperAnchorLeft {
  right: 0 !important;
  left: auto !important;
  border-left: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html[dir="rtl"] #portal .MuiDrawer-paperAnchorRight {
  left: 0 !important;
  right: auto !important;
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* ================================================================
   ۱۶. MUI v4 — Badge (نشان‌گر تعداد)
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiBadge-anchorOriginTopRightRectangle,
html[dir="rtl"] #dashboard-app .MuiBadge-anchorOriginTopRightCircle {
  right: auto !important;
  left: 0 !important;
  transform: scale(1) translate(-50%, -50%) !important;
  transform-origin: 0% 0% !important;
}

/* ================================================================
   ۱۷. MUI v4 — Switch
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiSwitch-root {
  direction: ltr !important; /* Switch خودش RTL-aware است اگر LTR بماند */
}

/* ================================================================
   ۱۸. MUI v4 — FormControlLabel
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiFormControlLabel-root {
  flex-direction: row-reverse !important;
  margin-left: 16px !important;
  margin-right: -11px !important;
}

html[dir="rtl"] #dashboard-app .MuiFormControlLabel-label {
  margin-right: 8px !important;
  margin-left: 0 !important;
}

/* ================================================================
   ۱۹. macaw-ui 0.7.x — کامپوننت Button (data-macaw-ui-component)
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Button"],
html[dir="rtl"] #portal [data-macaw-ui-component="Button"] {
  direction: rtl !important;
}

/* آیکون داخل دکمه macaw: margin را برعکس کن */
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Button"] svg:first-child,
html[dir="rtl"] #portal [data-macaw-ui-component="Button"] svg:first-child {
  margin-left: 6px !important;
  margin-right: 0 !important;
}

html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Button"] svg:last-child,
html[dir="rtl"] #portal [data-macaw-ui-component="Button"] svg:last-child {
  margin-right: 6px !important;
  margin-left: 0 !important;
}

/* ================================================================
   ۲۰. macaw-ui 0.7.x — آرایش کلی
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Text"],
html[dir="rtl"] #portal [data-macaw-ui-component="Text"] {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Checkbox"] {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Combobox"],
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Select"],
html[dir="rtl"] #portal [data-macaw-ui-component="Combobox"],
html[dir="rtl"] #portal [data-macaw-ui-component="Select"] {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Accordion.Trigger"],
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Accordion.TriggerButton"] {
  direction: rtl !important;
  text-align: right !important;
}

/* آیکون expand/collapse Accordion باید آینه شود */
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Accordion.Trigger"] svg,
html[dir="rtl"] #dashboard-app [data-macaw-ui-component="Accordion.TriggerButton"] svg {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۲۱. macaw-ui — ورودی با label floating
   اگر label با transform-origin: left باشد باید right شود
   ================================================================ */
html[dir="rtl"] #dashboard-app ._9mn26xj {
  transform-origin: right !important;
}

/* ================================================================
   ۲۲. جدول Glide Data Grid
   (روی canvas اعمال نمی‌شود — پچ‌های جداگانه برای font و کلاس)
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id="list"] .SearchInput,
html[dir="rtl"] #dashboard-app [class*="SearchInput"] {
  direction: rtl !important;
  text-align: right !important;
}

/* نوار چسبان rightElement در Glide */
html[dir="rtl"] #dashboard-app .dvn-scroll-inner > div:last-child {
  right: auto !important;
  left: 0 !important;
  padding-left: 0 !important;
  padding-right: 1px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* کلاس‌های پایدار از patch-datagrid-rtl-mark.cjs */
html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome-bordered {
  border-left: none !important;
  border-right: 1px solid rgba(40, 40, 40, 0.16) !important;
}

@media (prefers-color-scheme: dark) {
  html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome-bordered {
    border-right-color: rgba(255, 255, 255, 0.14) !important;
  }
}

html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome-shadow {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome-shadow--on {
  box-shadow: 1px 0 12px rgba(0, 0, 0, 0.8) !important;
}

html[dir="rtl"] #dashboard-app .horse-datagrid-column-picker,
html[dir="rtl"] #dashboard-app [data-test-id="open-column-picker-button"] {
  direction: rtl !important;
}

/* نوار اکشن انتخاب چند ردیف */
html[dir="rtl"] #dashboard-app .horse-datagrid-action-bar {
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 50px !important;
  justify-content: flex-start !important;
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .horse-datagrid-column-group-fixer {
  left: auto !important;
  right: 0 !important;
}

/* ================================================================
   ۲۳. breadcrumb و ناوبری
   ================================================================ */
html[dir="rtl"] #dashboard-app [class*="breadcrumb" i],
html[dir="rtl"] #dashboard-app nav[aria-label="breadcrumb"],
html[dir="rtl"] #dashboard-app [aria-label="breadcrumb"] {
  direction: rtl !important;
}

/* ================================================================
   ۲۴. مرتب‌سازی در header جداول
   آیکون‌های ArrowUp/ArrowDown نیاز به آینه ندارند ولی ArrowBack/Forward دارند
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id*="sort"] svg[data-testid="ArrowDropDownIcon"],
html[dir="rtl"] #dashboard-app [data-test-id*="sort"] svg[data-testid="ArrowDropUpIcon"] {
  margin-right: 4px !important;
  margin-left: 0 !important;
}

/* ================================================================
   ۲۵. Topbar / AppBar
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiAppBar-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiToolbar-root {
  flex-direction: row-reverse !important;
}

/* ================================================================
   ۲۶. Stepper
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiStepConnector-root {
  left: calc(-50% + 20px) !important;
  right: calc(50% + 20px) !important;
}

html[dir="rtl"] #dashboard-app .MuiStepLabel-root {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #dashboard-app .MuiStepLabel-labelContainer {
  text-align: right !important;
}

/* ================================================================
   ۲۷. کارت‌ها و Box
   ================================================================ */
html[dir="rtl"] #dashboard-app [class*="Box-sc-"],
html[dir="rtl"] #dashboard-app main,
html[dir="rtl"] #dashboard-app article {
  font-family: "Vazirmatn", "Inter", sans-serif !important;
}

/* ================================================================
   ۲۸. فیلترها
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id="filters-chips-section"],
html[dir="rtl"] #dashboard-app [data-test-id="filter-bar"] {
  direction: rtl !important;
  text-align: right !important;
}

/* دکمه‌های فیلتر popover */
html[dir="rtl"] #portal [role="dialog"],
html[dir="rtl"] #portal [role="listbox"] {
  direction: rtl !important;
  text-align: right !important;
}

/* ================================================================
   ۲۹. Dialog / Modal
   ================================================================ */
html[dir="rtl"] #portal [role="dialog"],
html[dir="rtl"] #modal-root [role="dialog"] {
  direction: rtl !important;
}

html[dir="rtl"] #portal .MuiDialogTitle-root,
html[dir="rtl"] #modal-root .MuiDialogTitle-root {
  text-align: right !important;
}

html[dir="rtl"] #portal .MuiDialogContent-root,
html[dir="rtl"] #modal-root .MuiDialogContent-root {
  text-align: right !important;
}

html[dir="rtl"] #portal .MuiDialogActions-root,
html[dir="rtl"] #modal-root .MuiDialogActions-root {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
}

/* دکمه بستن (X) dialog باید در گوشه راست باشد */
html[dir="rtl"] #portal .MuiDialog-paper [aria-label="close"],
html[dir="rtl"] #modal-root .MuiDialog-paper [aria-label="close"] {
  right: auto !important;
  left: 8px !important;
}

/* ================================================================
   ۳۰. ناوبری صفحات macaw-ui (Next/Prev)
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id="button-next-page"] svg,
html[dir="rtl"] #dashboard-app [data-test-id="button-previous-page"] svg {
  transform: scaleX(-1) !important;
}

/* دکمه‌های Paginator که در Saleor Dashboard استفاده می‌شوند */
html[dir="rtl"] #dashboard-app button[data-test-id$="-next"] svg,
html[dir="rtl"] #dashboard-app button[data-test-id$="-prev"] svg {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۳۱. آیکون‌های جهت‌دار عمومی
   ================================================================ */
/* همه SVGهایی که نام تست آن‌ها نشان‌دهنده جهت است */
html[dir="rtl"] #dashboard-app svg[data-testid="ChevronRightIcon"],
html[dir="rtl"] #portal svg[data-testid="ChevronRightIcon"] {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] #dashboard-app svg[data-testid="ChevronLeftIcon"],
html[dir="rtl"] #portal svg[data-testid="ChevronLeftIcon"] {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] #dashboard-app svg[data-testid="ArrowForwardIcon"],
html[dir="rtl"] #portal svg[data-testid="ArrowForwardIcon"] {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] #dashboard-app svg[data-testid="ArrowBackIcon"],
html[dir="rtl"] #portal svg[data-testid="ArrowBackIcon"] {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] #dashboard-app svg[data-testid="NavigateNextIcon"],
html[dir="rtl"] #portal svg[data-testid="NavigateNextIcon"] {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] #dashboard-app svg[data-testid="NavigateBeforeIcon"],
html[dir="rtl"] #portal svg[data-testid="NavigateBeforeIcon"] {
  transform: scaleX(-1) !important;
}

/* ================================================================
   ۳۲. صفحه ورود — جزئیات
   ================================================================ */
/* لوگوی Saleor در صفحه ورود: موقعیت top-right در RTL صحیح است */
html[dir="rtl"] #dashboard-app .login-page,
html[dir="rtl"] #dashboard-app [class*="login"] {
  direction: rtl !important;
}

/* چشم رمزعبور: در macaw Input، دکمه toggle با flex قرار می‌گیرد */
html[dir="rtl"] #dashboard-app input[type="password"] + button,
html[dir="rtl"] #dashboard-app input[type="password"] ~ button {
  order: -1 !important;
}

/* ================================================================
   ۳۳. بخش تنظیمات، کانال‌ها، اپ‌ها
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id="channel-item"],
html[dir="rtl"] #dashboard-app [data-test-id="app-row"] {
  direction: rtl !important;
}

/* ================================================================
   ۳۴. جستجو و SearchInput
   ================================================================ */
html[dir="rtl"] #dashboard-app input[type="search"],
html[dir="rtl"] #dashboard-app [role="searchbox"] {
  direction: rtl !important;
  text-align: right !important;
}

/* آیکون جستجو که معمولاً سمت چپ است → سمت راست */
html[dir="rtl"] #dashboard-app [data-test-id="search-input-wrapper"] svg,
html[dir="rtl"] #dashboard-app [class*="SearchInput"] svg {
  order: 1 !important;
}

/* ================================================================
   ۳۵. Tag / Label محصول
   ================================================================ */
html[dir="rtl"] #dashboard-app [data-test-id="product-status"],
html[dir="rtl"] #dashboard-app [data-test-id="channel-availability-label"],
html[dir="rtl"] #dashboard-app [class*="StatusLabel"] {
  direction: rtl !important;
}

/* ================================================================
   ۳۶. تاریخ‌نگاری / Timeline
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiTimeline-root {
  direction: rtl !important;
}

html[dir="rtl"] #dashboard-app .MuiTimelineItem-root {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #dashboard-app .MuiTimelineOppositeContent-root {
  text-align: left !important;
}

html[dir="rtl"] #dashboard-app .MuiTimelineContent-root {
  text-align: right !important;
}

/* ================================================================
   ۳۷. ResponsiveTable در Saleor Dashboard
   ================================================================ */
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] {
  direction: rtl !important;
}

/* ستون‌های عددی وسط جدول‌های لیستی باید دقیقاً زیر عنوانشان قرار بگیرند */
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table th:nth-child(2),
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table th:nth-child(3),
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table td:nth-child(2),
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table td:nth-child(3),
html[dir="rtl"] #dashboard-app .MuiTable-root th:nth-child(2),
html[dir="rtl"] #dashboard-app .MuiTable-root th:nth-child(3),
html[dir="rtl"] #dashboard-app .MuiTable-root td:nth-child(2),
html[dir="rtl"] #dashboard-app .MuiTable-root td:nth-child(3) {
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext;
  font-variant-numeric: tabular-nums;
}

html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table th:nth-child(2),
html[dir="rtl"] #dashboard-app [class*="ResponsiveTable"] table th:nth-child(3),
html[dir="rtl"] #dashboard-app .MuiTable-root th:nth-child(2),
html[dir="rtl"] #dashboard-app .MuiTable-root th:nth-child(3) {
  white-space: nowrap;
}

/* ================================================================
   ۳۸. رفع مشکل transform-origin برای label animation (macaw)
   ================================================================ */
html[dir="rtl"] #dashboard-app label[for] {
  right: 0;
  left: auto;
}

/* ================================================================
   ۳۹. وضعیت بارگذاری (Skeleton)
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiSkeleton-root {
  transform-origin: right !important;
}

/* ================================================================
   ۴۰. Collapse / Expand
   ================================================================ */
html[dir="rtl"] #dashboard-app .MuiCollapse-entered {
  direction: rtl !important;
}

/* ================================================================
   dark mode – تطابق border برای chrome grid
   ================================================================ */
@media (prefers-color-scheme: dark) {
  html[dir="rtl"] #dashboard-app .horse-datagrid-row-chrome-bordered {
    border-right-color: rgba(255, 255, 255, 0.14) !important;
  }
}

/* ================================================================
  ۴۱. Glide Data Grid — viewport RTL با scroller لبه-راست
  ================================================================
  ترتیب ستون‌ها در JS معکوس می‌شود، اما خود scroll container باید LTR بماند
  تا scrollToEnd ما را به لبه راست واقعی ببرد:
    checkbox | محصول | دسترسی | ...
  canvas داخلی هم LTR می‌ماند تا رندر Glide درست باشد.
  ================================================================ */
html[dir="rtl"] .dvn-scroller {
  direction: ltr !important;
}

html[dir="rtl"] .dvn-scroller canvas {
  direction: ltr !important;
}

html[dir="rtl"] #dashboard-app [data-horse-product-variants-area],
html[dir="rtl"] #dashboard-app [data-horse-product-variants-grid] {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
  clear: both !important;
}

html[dir="rtl"] #dashboard-app [data-horse-product-variants-area] {
  margin-bottom: 28px !important;
}