/* Right-to-left overrides (Persian). Loaded only when the app language is RTL.
 * Flex rows and text alignment flip on their own through dir="rtl".
 * Physical Tailwind classes (ml-*, pl-*, left-*, border-r …) do not, so they are mirrored here.
 * Add a rule here when you use a new physical side class in app.js. */
[dir="rtl"] body { font-family: 'Vazirmatn', Tahoma, 'Segoe UI', system-ui, sans-serif; }

[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .pl-9 { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .pl-9.pr-16 { padding-left: 4rem; }
[dir="rtl"] .pl-9.pr-10 { padding-left: 2.5rem; }
[dir="rtl"] .pr-1 { padding-right: 0; padding-left: .25rem; }
[dir="rtl"] .pl-1\.5.pr-2\.5 { padding-left: .625rem; padding-right: .375rem; }
[dir="rtl"] .left-3 { left: auto; right: .75rem; }
[dir="rtl"] .right-3 { right: auto; left: .75rem; }
[dir="rtl"] .right-2\.5 { right: auto; left: .625rem; }
[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }

/* Arrows that mean "forward" or "back" point the other way. */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .chev > svg,
[dir="rtl"] .sub-detail-btn > svg,
[dir="rtl"] #prevDayBtn > svg,
[dir="rtl"] #nextDayBtn > svg { transform: scaleX(-1); }

/* Codes, usernames, times and keys stay left-to-right inside Persian text. */
[dir="rtl"] .kbd, [dir="rtl"] input[type="time"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="date"], [dir="rtl"] input[name="username"], [dir="rtl"] input[type="password"] { direction: ltr; }