/* RTL Support Styles for Phyzioline website and dashboards */

/* Base direction */
html[dir="rtl"], body[dir="rtl"] { direction: rtl; }

/* Typography alignment helpers */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

/* Bootstrap margin utility flips */
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }

html[dir="rtl"] .ms-0 { margin-right: 0 !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }

html[dir="rtl"] .me-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

/* Navbar and dropdown alignment */
html[dir="rtl"] .navbar .dropdown-menu { text-align: right; }

/* Icons spacing in lists/links */
html[dir="rtl"] .sidebar-nav .nav-link i { margin-left: 10px; margin-right: 0; }

/* Dashboard layout flips */
html[dir="rtl"] .dashboard-sidebar { right: 0; left: auto; }
html[dir="rtl"] #page-content-wrapper, 
html[dir="rtl"] .dashboard-content { margin-right: 250px; margin-left: 0; }

/* Mobile behaviour for sidebar */
@media (max-width: 768px) {
  html[dir="rtl"] .dashboard-sidebar { transform: translateX(100%); }
  html[dir="rtl"] .dashboard-sidebar.show { transform: translateX(0); }
  html[dir="rtl"] .dashboard-content { margin-right: 0; }
  html[dir="rtl"] .sidebar-toggle { right: 20px; left: auto; }
}

/* Cards and components that assume LTR paddings */
html[dir="rtl"] .appointment-card { border-left: none; border-right: 4px solid #008080; }

/* Forms: switch label/input flow where needed */
html[dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; }
html[dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; }

/* Breadcrumbs, pagination direction */
html[dir="rtl"] .breadcrumb { justify-content: flex-end; }
html[dir="rtl"] .pagination { direction: ltr; } /* keep numbers natural order */

/* Tables */
html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] table .text-start { text-align: right !important; }

/* Utility: flip float helpers where used */
html[dir="rtl"] .float-end { float: left !important; }
html[dir="rtl"] .float-start { float: right !important; }

/* Professional RTL Enhancements */
/* 1) Icon spacing: generic rule for elements with leading icons */
html[dir="rtl"] .with-icon > i,
html[dir="rtl"] .with-icon > .fa,
html[dir="rtl"] .with-icon > .fas,
html[dir="rtl"] .with-icon > .bi,
html[dir="rtl"] a.btn > i,
html[dir="rtl"] button.btn > i,
html[dir="rtl"] .btn > i { margin-right: 0; margin-left: .5rem; }

/* 2) Swap chevrons and carets when used as directional indicators */
html[dir="rtl"] .fa-chevron-right:before { content: "\f053"; } /* becomes left */
html[dir="rtl"] .fa-chevron-left:before { content: "\f054"; }  /* becomes right */
html[dir="rtl"] .fa-arrow-right:before { content: "\f060"; }
html[dir="rtl"] .fa-arrow-left:before { content: "\f061"; }

/* 3) Sidebar and collapses */
html[dir="rtl"] .sidebar-nav .nav-link .fas.fa-chevron-down { transform: scaleX(-1); }
html[dir="rtl"] .sidebar-nav .nav-link { padding-right: 1rem; padding-left: .75rem; }

/* 4) Breadcrumb arrows & order */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; }

/* 5) Pagination: keep sequence natural but flip arrows visually */
html[dir="rtl"] .pagination .page-link .fa-chevron-left:before { content: "\f054"; }
html[dir="rtl"] .pagination .page-link .fa-chevron-right:before { content: "\f053"; }

/* 6) Forms and input groups */
html[dir="rtl"] .input-group .input-group-text { border-radius: 0 .375rem .375rem 0; }
html[dir="rtl"] .input-group > .form-control { text-align: right; }
html[dir="rtl"] .form-label { text-align: right; display: block; }

/* 7) Cards and media objects */
html[dir="rtl"] .card .card-body .d-flex { gap: .5rem; }
html[dir="rtl"] .list-group { padding-right: 0; }

/* 8) Tables: align headers and first column to right by default */
html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; }
html[dir="rtl"] table td .badge { margin-left: .25rem; margin-right: 0; }

/* 9) Website header adjustments */
html[dir="rtl"] header .navbar-nav { margin-right: 0; margin-left: auto; }
html[dir="rtl"] header .navbar .dropdown-menu { right: 0; left: auto; }

/* 10) Provider dashboard sidebar width offsets */
html[dir="rtl"] .dashboard-content { padding-right: 1rem; }

/* 11) Alerts and toasts position */
html[dir="rtl"] .alert { text-align: right; }

/* 12) Modal close button */
html[dir="rtl"] .modal .btn-close { margin: -.5rem auto -.5rem -.5rem; }

/* 13) Tabs and navs */
html[dir="rtl"] .nav-tabs .nav-link { margin-left: .25rem; margin-right: 0; }

/* 14) Badges and chips spacing */
html[dir="rtl"] .badge { margin-left: .25rem; margin-right: 0; }

/* 15) Step indicators or timelines */
html[dir="rtl"] .timeline { border-right: 2px solid #e9ecef; border-left: 0; padding-right: 1rem; padding-left: 0; }
html[dir="rtl"] .timeline .timeline-item { text-align: right; }

/* 16) Fix common me-/ms- class combinations in templates */
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }

/* 17) Switches and toggles alignment (bootstrap form-switch) */
html[dir="rtl"] .form-switch { padding-right: 2.5rem; padding-left: 0; }
html[dir="rtl"] .form-switch .form-check-input { margin-right: -2.5rem; margin-left: 0; }

/* 18) Offcanvas (if used) */
html[dir="rtl"] .offcanvas { right: 0; left: auto; }

/* 19) Breadcrumb icons spacing */
html[dir="rtl"] .breadcrumb i { margin-left: .25rem; margin-right: 0; }

/* 20) Buttons grouped with icons */
html[dir="rtl"] .btn .fa, html[dir="rtl"] .btn .fas, html[dir="rtl"] .btn .bi { margin-left: .35rem; margin-right: 0; }