/**
 * RTL (Right-to-Left) Layout Support for Arabic
 * Comprehensive styling for proper Arabic text direction
 */

/* ============================================
   BASE RTL STYLES
   ============================================ */

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] {
  direction: rtl;
}

/* ============================================
   SIDEBAR RTL ADJUSTMENTS
   ============================================ */

html[dir="rtl"] .modern-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--sidebar-border);
  box-shadow: -1px 0 0 0 var(--sidebar-border);
}

html[dir="rtl"] .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

html[dir="rtl"] body.sidebar-collapsed .main-content {
  margin-right: var(--sidebar-width-collapsed);
}

@media (max-width: 767px) {
  html[dir="rtl"] .modern-sidebar {
    transform: translateX(100%);
    right: 0;
    left: auto;
  }
  html[dir="rtl"] .modern-sidebar.open {
    transform: translateX(0);
  }
  html[dir="rtl"] .main-content,
  html[dir="rtl"] body.sidebar-collapsed .main-content {
    margin-right: 0;
  }
}

/* Sidebar header RTL */
html[dir="rtl"] .sidebar-header {
  flex-direction: row-reverse;
  padding-left: 2.75rem;
  padding-right: 0.875rem;
}
html[dir="rtl"] .sidebar-collapse-btn {
  right: auto;
  left: 0.5rem;
}
html[dir="rtl"] .sidebar-collapse-icon { transform: rotate(180deg); }
html[dir="rtl"] .modern-sidebar.collapsed .sidebar-collapse-icon { transform: rotate(0deg); }
html[dir="rtl"] .modern-sidebar.collapsed .sidebar-header {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
html[dir="rtl"] .modern-sidebar.collapsed .sidebar-collapse-btn {
  left: auto;
  right: auto;
  margin: 0 auto;
  transform: none;
}

/* Search RTL */
html[dir="rtl"] .sidebar-search-icon {
  left: auto;
  right: 1.375rem;
}
html[dir="rtl"] .sidebar-search-input { padding: 0 2rem 0 0.75rem; }

/* Menu items RTL */
html[dir="rtl"] .sidebar-menu > li > a,
html[dir="rtl"] .sidebar-submenu-toggle,
html[dir="rtl"] .sidebar-bottom-link,
html[dir="rtl"] .sidebar-dark-mode { flex-direction: row-reverse; }

html[dir="rtl"] .sidebar-submenu-toggle .submenu-label { flex-direction: row-reverse; }

html[dir="rtl"] .sidebar-submenu-toggle .submenu-chevron {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .sidebar-section-label { flex-direction: row-reverse; }

/* Submenu RTL: accent line on right */
html[dir="rtl"] .sidebar-has-submenu.open .sidebar-submenu {
  border-left: none;
  border-right: 1.5px solid rgba(16, 185, 129, 0.18);
  margin-left: 0;
  margin-right: calc(var(--sidebar-icon-w) / 2 + 0.625rem);
}

html[dir="rtl"] .sidebar-submenu a {
  margin-left: 0;
  margin-right: calc(var(--sidebar-icon-w) + 0.5rem);
  text-align: right;
}

/* Toggle switch RTL */
html[dir="rtl"] .sidebar-toggle-switch { margin-left: 0; margin-right: auto; }

/* Notification bell RTL */
html[dir="rtl"] .sidebar-notif-btn { margin-left: 0; }
html[dir="rtl"] .sidebar-notif-badge { right: auto; left: 2px; }

/* Notification panel items RTL */
html[dir="rtl"] .sidebar-notif-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .sidebar-notif-panel-title { text-align: right; }

/* Language row RTL */
html[dir="rtl"] .sidebar-lang-row { flex-direction: row-reverse; }
html[dir="rtl"] .sidebar-lang-switch { margin-inline-start: 0; margin-inline-end: auto; }

/* ============================================
   MOBILE TOPBAR RTL ADJUSTMENTS
   ============================================ */

html[dir="rtl"] .mobile-topbar {
  flex-direction: row-reverse;
}

html[dir="rtl"] .mobile-topbar-badge {
  right: auto;
  left: 3px;
}

/* ============================================
   DROPDOWN MENUS RTL
   ============================================ */

html[dir="rtl"] .dropdown-menu {
  text-align: right;
  right: 0;
  left: auto;
}

html[dir="rtl"] .dropdown-menu-end {
  right: auto !important;
  left: 0 !important;
}

html[dir="rtl"] .dropdown-item {
  text-align: right;
  padding: 0.5rem 1.5rem 0.5rem 1rem;
}

html[dir="rtl"] .dropdown-item i {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .user-dropdown-item {
  text-align: right;
}

html[dir="rtl"] .user-dropdown-item i {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* ============================================
   FORM ELEMENTS RTL
   ============================================ */

html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .form-control-modern {
  text-align: right;
}

html[dir="rtl"] .form-label,
html[dir="rtl"] .form-label-modern {
  text-align: right;
}

html[dir="rtl"] .input-group {
  flex-direction: row-reverse;
}

html[dir="rtl"] .input-group-text {
  border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .input-group .form-control {
  border-radius: 0.375rem 0 0 0.375rem;
}

/* ============================================
   BUTTONS RTL
   ============================================ */

html[dir="rtl"] .btn i {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .btn-modern i {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .btn-glass i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* ============================================
   TABLES RTL
   ============================================ */

html[dir="rtl"] .table,
html[dir="rtl"] .table-modern {
  text-align: right;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] .table-modern th,
html[dir="rtl"] .table-modern td {
  text-align: right;
}

html[dir="rtl"] .table-responsive {
  direction: rtl;
}

/* ============================================
   CARDS & CONTAINERS RTL
   ============================================ */

html[dir="rtl"] .glass-card {
  text-align: right;
}

html[dir="rtl"] .stat-card {
  text-align: right;
}

html[dir="rtl"] .stat-card-icon {
  margin-right: 0;
  margin-left: 1rem;
}

html[dir="rtl"] .table-container {
  direction: rtl;
}

/* ============================================
   ALERTS RTL
   ============================================ */

html[dir="rtl"] .alert {
  text-align: right;
}

html[dir="rtl"] .alert i {
  margin-right: 0;
  margin-left: 0.5rem;
}

html[dir="rtl"] .alert-modern {
  text-align: right;
}

html[dir="rtl"] .alert-modern i {
  margin-right: 0;
  margin-left: 0.75rem;
}

html[dir="rtl"] .btn-close {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================
   BADGES RTL
   ============================================ */

html[dir="rtl"] .badge {
  margin-left: 0;
  margin-right: 0.25rem;
}

html[dir="rtl"] .badge-modern {
  margin-left: 0;
  margin-right: 0.25rem;
}

html[dir="rtl"] .badge-modern i {
  margin-right: 0;
  margin-left: 0.25rem;
}

/* ============================================
   ICONS & ARROWS RTL
   ============================================ */

/* Mirror directional icons */
html[dir="rtl"] .fa-arrow-right:before {
  content: "\f060"; /* fa-arrow-left */
}

html[dir="rtl"] .fa-arrow-left:before {
  content: "\f061"; /* fa-arrow-right */
}

html[dir="rtl"] .fa-chevron-right:before {
  content: "\f053"; /* fa-chevron-left */
}

html[dir="rtl"] .fa-chevron-left:before {
  content: "\f054"; /* fa-chevron-right */
}

html[dir="rtl"] .fa-angle-right:before {
  content: "\f104"; /* fa-angle-left */
}

html[dir="rtl"] .fa-angle-left:before {
  content: "\f105"; /* fa-angle-right */
}

html[dir="rtl"] .fa-caret-right:before {
  content: "\f0d9"; /* fa-caret-left */
}

html[dir="rtl"] .fa-caret-left:before {
  content: "\f0da"; /* fa-caret-right */
}

/* ============================================
   PAGINATION RTL
   ============================================ */

html[dir="rtl"] .pagination {
  flex-direction: row-reverse;
}

html[dir="rtl"] .page-item:first-child .page-link {
  border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .page-item:last-child .page-link {
  border-radius: 0.375rem 0 0 0.375rem;
}

/* ============================================
   BREADCRUMB RTL
   ============================================ */

html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-right: 0;
  padding-left: 0.5rem;
  content: "/";
}

/* ============================================
   MODAL RTL
   ============================================ */

html[dir="rtl"] .modal-header {
  text-align: right;
}

html[dir="rtl"] .modal-body {
  text-align: right;
}

html[dir="rtl"] .modal-footer {
  flex-direction: row-reverse;
}

html[dir="rtl"] .modal-header .btn-close {
  margin: -0.5rem auto -0.5rem -0.5rem;
}

/* ============================================
   FLEXBOX UTILITIES RTL
   ============================================ */

html[dir="rtl"] .d-flex {
  direction: rtl;
}

html[dir="rtl"] .justify-content-start {
  justify-content: flex-end !important;
}

html[dir="rtl"] .justify-content-end {
  justify-content: flex-start !important;
}

html[dir="rtl"] .text-start {
  text-align: right !important;
}

html[dir="rtl"] .text-end {
  text-align: left !important;
}

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;
}

/* Margin utilities */
html[dir="rtl"] .ms-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}
html[dir="rtl"] .ms-2 {
  margin-right: 0.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-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}
html[dir="rtl"] .me-2 {
  margin-left: 0.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;
}

/* Padding utilities */
html[dir="rtl"] .ps-1 {
  padding-right: 0.25rem !important;
  padding-left: 0 !important;
}
html[dir="rtl"] .ps-2 {
  padding-right: 0.5rem !important;
  padding-left: 0 !important;
}
html[dir="rtl"] .ps-3 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}
html[dir="rtl"] .ps-4 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}
html[dir="rtl"] .ps-5 {
  padding-right: 3rem !important;
  padding-left: 0 !important;
}

html[dir="rtl"] .pe-1 {
  padding-left: 0.25rem !important;
  padding-right: 0 !important;
}
html[dir="rtl"] .pe-2 {
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
}
html[dir="rtl"] .pe-3 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}
html[dir="rtl"] .pe-4 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}
html[dir="rtl"] .pe-5 {
  padding-left: 3rem !important;
  padding-right: 0 !important;
}

/* ============================================
   LANGUAGE TRANSITION
   ============================================ */

.language-transition {
  transition: opacity 0.2s ease-in-out;
}

.language-transition * {
  transition: opacity 0.2s ease-in-out !important;
}

/* ============================================
   LANGUAGE SELECTOR STYLING
   ============================================ */

#languageSwitcher {
  font-weight: 500;
}

#languageSwitcher .lang-current-label {
  min-width: 60px;
  text-align: center;
}

html[dir="rtl"] #languageSwitcher .lang-current-label {
  text-align: center;
}

/* Language dropdown items */
.dropdown-menu [data-lang] {
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-menu [data-lang]:hover {
  background: rgba(16, 185, 129, 0.1);
}

.dropdown-menu [data-lang][aria-checked="true"] {
  background: rgba(16, 185, 129, 0.15);
  font-weight: 600;
}

/* ============================================
   ARABIC FONT OPTIMIZATION
   ============================================ */

/* Arabic Font Optimization - Applied to body for inheritance */
html[dir="rtl"] body {
  font-family: "Inter", "Cairo", "Segoe UI", "Tahoma", "Arial", sans-serif;
}

/* Ensure Font Awesome icons preserve their font-family */
html[dir="rtl"] .fas, 
html[dir="rtl"] .far, 
html[dir="rtl"] .fab,
html[dir="rtl"] .fa-solid,
html[dir="rtl"] .fa-regular,
html[dir="rtl"] .fa-brands,
html[dir="rtl"] .fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Improve Arabic text rendering */
html[dir="rtl"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   SPECIFIC COMPONENT ADJUSTMENTS
   ============================================ */

/* Page Header */
html[dir="rtl"] .page-header {
  text-align: right;
}

html[dir="rtl"] .page-header h1 i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Stats Grid */
html[dir="rtl"] .stats-grid {
  direction: rtl;
}

/* Progress bars */
html[dir="rtl"] .progress {
  direction: ltr; /* Keep progress direction LTR for consistency */
}

/* Notifications */
html[dir="rtl"] .position-absolute.top-0.start-100 {
  right: 0;
  left: auto;
}

/* User dropdown */
html[dir="rtl"] .user-dropdown {
  text-align: right;
}

/* Login page */
html[dir="rtl"] .login-container {
  direction: rtl;
}

html[dir="rtl"] .login-card {
  text-align: right;
}

html[dir="rtl"] .login-logo {
  text-align: center;
}

/* ============================================
   RESPONSIVE RTL ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  html[dir="rtl"] .navbar-brand {
    margin-left: 0.5rem;
  }

  html[dir="rtl"] .btn-modern span {
    display: none;
  }

  html[dir="rtl"] .d-md-inline {
    display: none !important;
  }
}

/* ============================================
   DASHBOARD RTL
   ============================================ */

/* Welcome banner */
html[dir="rtl"] .db-welcome-title,
html[dir="rtl"] .db-welcome-sub { text-align: right; }
html[dir="rtl"] .db-welcome-inner { flex-direction: row-reverse; }
html[dir="rtl"] .db-welcome-actions { flex-direction: row-reverse; }
html[dir="rtl"] .db-welcome-glow::before { right: auto; left: -80px; }

/* Filter bar */
html[dir="rtl"] .db-filter-bar { flex-direction: row-reverse; }
html[dir="rtl"] .db-filter-arrow { transform: scaleX(-1); }

/* Top grid cards */
html[dir="rtl"] .db-card-header { flex-direction: row-reverse; }
html[dir="rtl"] .db-card-title  { text-align: right; }

/* Health list */
html[dir="rtl"] .db-health-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .db-health-pct  { text-align: right; }

/* Pulse card */
html[dir="rtl"] .db-pulse-inner { flex-direction: row-reverse; }
html[dir="rtl"] .db-pulse-row   { flex-direction: row-reverse; }
html[dir="rtl"] .db-pulse-name  { text-align: right; }

/* Metric cards */
html[dir="rtl"] .db-metric-top     { flex-direction: row-reverse; }
html[dir="rtl"] .db-metric-label,
html[dir="rtl"] .db-metric-value,
html[dir="rtl"] .db-metric-compare { text-align: right; }
html[dir="rtl"] .db-metric-trend   { flex-direction: row-reverse; }

/* Stream table */
html[dir="rtl"] .db-stream-head    { flex-direction: row-reverse; }
html[dir="rtl"] .db-stream-indicator { flex-direction: row-reverse; }
html[dir="rtl"] .db-stream-table   { direction: rtl; }
html[dir="rtl"] .db-stream-table th,
html[dir="rtl"] .db-stream-table td { text-align: right; }
html[dir="rtl"] .db-stream-table th:last-child,
html[dir="rtl"] .db-stream-table td:last-child { text-align: left; }
html[dir="rtl"] .db-stream-footer  { flex-direction: row-reverse; }

/* Calibration alerts */
html[dir="rtl"] .db-calib-item { flex-direction: row-reverse; }
html[dir="rtl"] .db-calib-name,
html[dir="rtl"] .db-calib-loc  { text-align: right; }

/* Trend chart title */
html[dir="rtl"] .db-card.db-trend-card .db-card-title { text-align: right; }

/* ============================================
   PRINT STYLES RTL
   ============================================ */

@media print {
  html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
  }
}