/* ============================================================
   JADWA HUB v2.0 - RTL Specific Overrides
   Ensures correct rendering for Arabic right-to-left layout
   ============================================================ */

/* ------------------------------------------------------------
   1. Document Direction & Base RTL
   ------------------------------------------------------------ */
html {
  direction: rtl;
}

body {
  direction: rtl;
  text-align: right;
}

/* ------------------------------------------------------------
   2. Logical Properties - Layout
   ------------------------------------------------------------ */
.app-layout .main-content {
  margin-right: var(--sidebar-width);
  margin-left: 0;
}

.app-layout.sidebar-collapsed .main-content {
  margin-right: 0;
}

/* ------------------------------------------------------------
   3. Sidebar RTL
   ------------------------------------------------------------ */
.sidebar {
  right: 0;
  left: auto;
}

/* Active nav indicator on right side */
.nav-item.active::before {
  right: 0;
  left: auto;
  border-radius: 0 var(--border-radius-full) var(--border-radius-full) 0;
}

/* Nav badge positioned to the left (start) in RTL */
.nav-item .nav-badge {
  margin-right: auto;
  margin-left: 0;
}

/* ------------------------------------------------------------
   4. Top Bar RTL
   ------------------------------------------------------------ */
.top-bar {
  padding-right: var(--space-lg);
  padding-left: var(--space-lg);
}

.top-bar-right {
  flex-direction: row;
}

.top-bar-left {
  flex-direction: row-reverse;
}

/* ------------------------------------------------------------
   5. Forms RTL
   ------------------------------------------------------------ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  direction: rtl;
  text-align: right;
}

/* Select dropdown arrow on the left in RTL */
select {
  background-position: left 12px center;
  padding-left: 32px;
  padding-right: 14px;
}

/* Input icon positioned on the right in RTL */
.input-icon .form-control {
  padding-right: 40px;
  padding-left: 14px;
}

.input-icon .icon {
  right: 12px;
  left: auto;
}

/* ------------------------------------------------------------
   6. Buttons RTL
   ------------------------------------------------------------ */
.btn i {
  margin-right: 0;
  margin-left: 0;
}

/* ------------------------------------------------------------
   7. Cards RTL
   ------------------------------------------------------------ */
.card-header {
  flex-direction: row;
}

/* ------------------------------------------------------------
   8. Table RTL
   ------------------------------------------------------------ */
.table thead th {
  text-align: right;
}

.table tbody td {
  text-align: right;
}

/* ------------------------------------------------------------
   9. Badges RTL
   ------------------------------------------------------------ */
.badge i {
  margin-left: 3px;
  margin-right: 0;
}

/* ------------------------------------------------------------
   10. Alerts RTL
   ------------------------------------------------------------ */
.alert {
  flex-direction: row;
}

.alert i {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------
   11. Toast RTL
   ------------------------------------------------------------ */
.toast {
  flex-direction: row;
  border-right: 4px solid;
  border-left: none;
}

/* Toast progress bar from right to left */
.toast-progress {
  right: 0;
  left: auto;
}

/* ------------------------------------------------------------
   12. Dropdown RTL
   ------------------------------------------------------------ */
.dropdown-menu {
  right: 0;
  left: auto;
  text-align: right;
}

.dropdown-item {
  text-align: right;
  flex-direction: row;
}

/* ------------------------------------------------------------
   13. Modal RTL
   ------------------------------------------------------------ */
.modal-header {
  flex-direction: row;
}

.modal-footer {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ------------------------------------------------------------
   14. Tabs RTL
   ------------------------------------------------------------ */
.tabs {
  flex-direction: row;
}

/* ------------------------------------------------------------
   15. Checkbox / Radio RTL
   ------------------------------------------------------------ */
.checkbox-label,
.radio-label {
  flex-direction: row;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
  margin-right: 0;
  margin-left: 0;
}

/* ------------------------------------------------------------
   16. File Upload RTL
   ------------------------------------------------------------ */
.file-item {
  flex-direction: row;
}

/* ------------------------------------------------------------
   17. Source Item RTL
   ------------------------------------------------------------ */
.source-item {
  flex-direction: row;
}

.source-item .source-actions {
  flex-direction: row;
}

/* ------------------------------------------------------------
   18. Checklist RTL
   ------------------------------------------------------------ */
.checklist-item {
  flex-direction: row;
}

.checklist-item .checklist-actions {
  flex-direction: row;
}

/* ------------------------------------------------------------
   19. Prompt Library RTL
   ------------------------------------------------------------ */
.prompt-card-header {
  flex-direction: row;
}

.prompt-card-header .toggle-icon {
  margin-right: 0;
  margin-left: 0;
}

.prompt-card-footer {
  justify-content: flex-end;
}

/* ------------------------------------------------------------
   20. Stat Card RTL
   ------------------------------------------------------------ */
.stat-card {
  flex-direction: row;
}

/* ------------------------------------------------------------
   21. Filter Bar RTL
   ------------------------------------------------------------ */
.filter-bar {
  flex-direction: row;
}

/* ------------------------------------------------------------
   22. Page Header RTL
   ------------------------------------------------------------ */
.page-header {
  flex-direction: row;
}

.page-header-actions {
  flex-direction: row;
}

/* ------------------------------------------------------------
   23. Form Actions RTL
   ------------------------------------------------------------ */
.form-actions {
  flex-direction: row;
}

/* ------------------------------------------------------------
   24. Sidebar User RTL
   ------------------------------------------------------------ */
.sidebar-user {
  flex-direction: row;
}

/* ------------------------------------------------------------
   25. Confirm Dialog RTL
   ------------------------------------------------------------ */
.confirm-dialog .confirm-actions {
  flex-direction: row;
}

/* ------------------------------------------------------------
   26. Empty State RTL
   ------------------------------------------------------------ */
.empty-state {
  text-align: center;
}

/* ------------------------------------------------------------
   27. Profile Grid RTL
   ------------------------------------------------------------ */
.profile-grid {
  direction: rtl;
}

/* ------------------------------------------------------------
   28. Margin / Padding Logical Overrides
   ------------------------------------------------------------ */
/* Ensure all spacing uses logical inline/end/start where applicable */
.mr-auto { margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }

/* In RTL, "end" is left, "start" is right */
.ms-auto {
  margin-inline-start: auto !important;
}

.me-auto {
  margin-inline-end: auto !important;
}

/* ------------------------------------------------------------
   29. Border Radius Fixes for RTL
   ------------------------------------------------------------ */
/* Toast border is on the right in RTL (reading start side) */
.toast {
  border-radius: var(--border-radius);
  border-right-width: 4px;
  border-right-style: solid;
}

/* ------------------------------------------------------------
   30. Scrollbar Position
   ------------------------------------------------------------ */
/* In RTL, scrollbar may appear on the left in some browsers */
.sidebar-nav::-webkit-scrollbar {
  /* Keep on left side for sidebar */
}

/* ------------------------------------------------------------
   31. Text Alignment Specifics
   ------------------------------------------------------------ */
.text-start {
  text-align: right !important;
}

.text-end {
  text-align: left !important;
}