/**
 * RTL System - Reusable for Hebrew, Arabic, Urdu, Persian, and other RTL languages
 *
 * This file uses CSS Logical Properties to automatically flip layouts for RTL languages
 * Works with ANY RTL language when html[dir="rtl"] is set
 *
 * Browser Support: Modern browsers (Chrome 79+, Firefox 41+, Safari 12.1+, Edge 79+)
 * Fallbacks: Includes physical properties for older browsers
 *
 * Usage: Include after main CSS files
 * <link rel="stylesheet" href="assets/css/rtl/rtl-system.css">
 */

/* ============================================================================
   RTL CORE RESET - Apply logical properties to all directional elements
   ============================================================================ */

html[dir="rtl"] {
  direction: rtl;
  text-align: start;
  unicode-bidi: embed;
}

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

/* ============================================================================
   SPACING - Margins & Padding (Logical Properties)
   ============================================================================ */

html[dir="rtl"] .me-1, html[dir="rtl"] .me-2, html[dir="rtl"] .me-3,
html[dir="rtl"] .me-4, html[dir="rtl"] .me-5 {
  /* Bootstrap: me = margin-end (right in LTR, left in RTL) - already logical */
}

html[dir="rtl"] .ms-1, html[dir="rtl"] .ms-2, html[dir="rtl"] .ms-3,
html[dir="rtl"] .ms-4, html[dir="rtl"] .ms-5 {
  /* Bootstrap: ms = margin-start (left in LTR, right in RTL) - already logical */
}

html[dir="rtl"] .ps-1, html[dir="rtl"] .ps-2, html[dir="rtl"] .ps-3,
html[dir="rtl"] .ps-4, html[dir="rtl"] .ps-5 {
  /* Bootstrap: ps = padding-start (left in LTR, right in RTL) - already logical */
}

html[dir="rtl"] .pe-1, html[dir="rtl"] .pe-2, html[dir="rtl"] .pe-3,
html[dir="rtl"] .pe-4, html[dir="rtl"] .pe-5 {
  /* Bootstrap: pe = padding-end (right in LTR, left in RTL) - already logical */
}

/* Non-Bootstrap custom spacing with logical properties */
html[dir="rtl"] {
  --margin-inline-start: var(--space-4, 1rem);
  --margin-inline-end: var(--space-4, 1rem);
  --padding-inline-start: var(--space-4, 1rem);
  --padding-inline-end: var(--space-4, 1rem);
}

/* ============================================================================
   POSITIONING & ALIGNMENT
   ============================================================================ */

/* Text alignment */
html[dir="rtl"] .text-start {
  text-align: end;
}

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

/* Float replacement */
html[dir="rtl"] .float-start {
  float: inline-end;
}

html[dir="rtl"] .float-end {
  float: inline-start;
}

/* Absolute positioning with logical properties */
html[dir="rtl"] {
  --inset-inline-start: auto;
  --inset-inline-end: auto;
  --inset-block-start: auto;
  --inset-block-end: auto;
}

/* ============================================================================
   NAVIGATION & MENU ITEMS
   ============================================================================ */

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

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

html[dir="rtl"] .navbar-collapse {
  justify-content: flex-start;
}

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

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

html[dir="rtl"] .breadcrumb {
  direction: rtl;
  unicode-bidi: bidi-override;
}

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

html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] textarea,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="password"] {
  direction: rtl;
  text-align: end;
  padding-inline-start: 0.75rem;
  padding-inline-end: 2.375rem;
}

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

html[dir="rtl"] .input-group-text {
  border-inline-start: none;
  border-inline-end: 1px solid #dee2e6;
}

html[dir="rtl"] .form-check {
  padding-inline-start: 1.5em;
}

html[dir="rtl"] .form-check-input {
  margin-inline-start: -1.5em;
  margin-inline-end: 0.5rem;
}

html[dir="rtl"] .form-label {
  text-align: end;
  display: block;
}

html[dir="rtl"] .form-floating > .form-control {
  text-align: end;
}

html[dir="rtl"] .form-floating > label {
  text-align: end;
  right: auto;
  left: 0;
}

/* ============================================================================
   BUTTONS & ICONS
   ============================================================================ */

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

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

/* Icon spacing in buttons */
html[dir="rtl"] .btn .bi {
  margin-inline-start: 0.375rem;
  margin-inline-end: 0;
}

html[dir="rtl"] .btn .bi:first-child {
  margin-inline-start: 0;
  margin-inline-end: 0.375rem;
}

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

html[dir="rtl"] table {
  direction: rtl;
  text-align: end;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: end;
}

html[dir="rtl"] th:first-child,
html[dir="rtl"] td:first-child {
  text-align: end;
}

/* ============================================================================
   CARDS & PANELS
   ============================================================================ */

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

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

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

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

/* ============================================================================
   LISTS & ITEMS
   ============================================================================ */

html[dir="rtl"] .list-group-item {
  text-align: end;
}

html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-inline-start: 2rem;
  margin-inline-start: 0;
}

html[dir="rtl"] li {
  text-align: end;
}

/* ============================================================================
   ACCORDION & COLLAPSIBLES
   ============================================================================ */

html[dir="rtl"] .accordion-button {
  text-align: end;
  justify-content: flex-end;
}

html[dir="rtl"] .accordion-button::after {
  margin-inline-start: 0.375rem;
  margin-inline-end: auto;
}

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

/* ============================================================================
   ALERTS & MESSAGES
   ============================================================================ */

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

html[dir="rtl"] .alert-icon {
  margin-inline-start: 1rem;
  margin-inline-end: 0;
}

html[dir="rtl"] .toast {
  direction: rtl;
  text-align: end;
}

/* ============================================================================
   MODALS & DIALOGS
   ============================================================================ */

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

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

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

html[dir="rtl"] .close,
html[dir="rtl"] .btn-close {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ============================================================================
   SIDEBAR & NAVIGATION PANELS
   ============================================================================ */

html[dir="rtl"] .sidebar {
  padding-inline-start: 0;
  padding-inline-end: 1rem;
  border-inline-start: none;
  border-inline-end: 1px solid #dee2e6;
}

html[dir="rtl"] .sidebar-nav {
  flex-direction: column;
}

html[dir="rtl"] .nav-item {
  text-align: end;
}

/* ============================================================================
   BUILDER-SPECIFIC RTL STYLES
   ============================================================================ */

html[dir="rtl"] .header-compact-row {
  flex-direction: row-reverse;
  justify-content: space-between;
}

html[dir="rtl"] .header-left-section {
  order: 3;
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}

html[dir="rtl"] .header-nav-section {
  order: 2;
}

html[dir="rtl"] .header-user-section {
  order: 1;
  flex-direction: row-reverse;
}

html[dir="rtl"] .language-switcher {
  margin-inline-start: 0;
  margin-inline-end: 0.75rem;
}

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

html[dir="rtl"] .workflow-steps {
  justify-content: center;
  flex-direction: row;
}

html[dir="rtl"] .step-button {
  flex-direction: column;
}

html[dir="rtl"] .form-builder-sidebar {
  order: 2;
  padding-inline-start: 0;
  padding-inline-end: 1rem;
}

html[dir="rtl"] .preview-section {
  order: 1;
}

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

html[dir="rtl"] .accordion-button::after {
  margin-inline-start: auto;
  margin-inline-end: 0.375rem;
}

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

html[dir="rtl"] .field-description {
  text-align: end;
}

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

html[dir="rtl"] .field-group-icon {
  margin-inline-start: 1rem;
  margin-inline-end: 0;
}

/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */

html[dir="rtl"] .nav-tabs {
  flex-direction: row;
  justify-content: center;
}

html[dir="rtl"] .tab-pane {
  direction: rtl;
  text-align: end;
}

/* ============================================================================
   TRANSLATION & FORM PREVIEW
   ============================================================================ */

html[dir="rtl"] .translation-review-content {
  direction: rtl;
  text-align: end;
}

html[dir="rtl"] .language-selector-grid {
  direction: rtl;
  justify-content: flex-end;
}

html[dir="rtl"] .phone-mockup {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ============================================================================
   SHARED FORM (guest-facing)
   ============================================================================ */

html[dir="rtl"] .form-wrapper {
  direction: rtl;
  text-align: end;
}

html[dir="rtl"] .form-field {
  text-align: end;
}

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

html[dir="rtl"] .guest-field-container {
  text-align: end;
}

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

/* ============================================================================
   UTILITY CLASSES FOR RTL
   ============================================================================ */

/* Use these classes in HTML for fine-grained RTL control */
html[dir="rtl"] .rtl-flex-row-reverse {
  flex-direction: row-reverse;
}

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

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

html[dir="rtl"] .rtl-margin-start {
  margin-inline-start: 1rem;
}

html[dir="rtl"] .rtl-margin-end {
  margin-inline-end: 1rem;
}

html[dir="rtl"] .rtl-padding-start {
  padding-inline-start: 1rem;
}

html[dir="rtl"] .rtl-padding-end {
  padding-inline-end: 1rem;
}

html[dir="rtl"] .rtl-border-start {
  border-inline-start: 1px solid #dee2e6;
}

html[dir="rtl"] .rtl-border-end {
  border-inline-end: 1px solid #dee2e6;
}

html[dir="rtl"] .rtl-float-start {
  float: inline-start;
}

html[dir="rtl"] .rtl-float-end {
  float: inline-end;
}

/* ============================================================================
   MIXED DIRECTIONAL CONTENT (RTL page with LTR embedded content)
   ============================================================================ */

html[dir="rtl"] .ltr-content {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

html[dir="rtl"] .rtl-content {
  direction: rtl;
  text-align: end;
  unicode-bidi: embed;
}

/* ============================================================================
   BIDIRECTIONAL TEXT HANDLING
   ============================================================================ */

html[dir="rtl"] .bidi-auto {
  direction: auto;
  unicode-bidi: auto;
}

html[dir="rtl"] .bidi-isolate {
  unicode-bidi: isolate;
}

/* ============================================================================
   BROWSER-SPECIFIC RTL FIXES
   ============================================================================ */

/* Firefox RTL adjustments */
@supports (-moz-appearance: none) {
  html[dir="rtl"] .form-control,
  html[dir="rtl"] input[type="text"],
  html[dir="rtl"] textarea {
    direction: rtl;
  }
}

/* Safari/WebKit RTL adjustments */
@supports (-webkit-appearance: none) {
  html[dir="rtl"] input[type="text"],
  html[dir="rtl"] input[type="email"],
  html[dir="rtl"] input[type="number"],
  html[dir="rtl"] textarea {
    direction: rtl;
  }

  html[dir="rtl"] select {
    background-position-x: 0;
  }
}

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

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

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

  html[dir="rtl"] .screen-only {
    display: none;
  }
}

/* ============================================================================
   ACCESSIBILITY - RTL
   ============================================================================ */

html[dir="rtl"] [role="navigation"] {
  direction: rtl;
  text-align: end;
}

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

html[dir="rtl"] [role="contentinfo"] {
  direction: rtl;
  text-align: end;
}

/* ============================================================================
   ANIMATIONS FOR RTL
   ============================================================================ */

html[dir="rtl"] .slide-in-right {
  animation: slide-in-left 0.3s ease-out;
}

html[dir="rtl"] .slide-out-right {
  animation: slide-out-left 0.3s ease-out;
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

html[dir="rtl"] .fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   LOGICAL PROPERTY CHEAT SHEET (for developers)
   ============================================================================

   Physical → Logical Mapping:

   MARGINS:
   margin-left  → margin-inline-start
   margin-right → margin-inline-end
   margin-top   → margin-block-start
   margin-bottom→ margin-block-end

   PADDING:
   padding-left  → padding-inline-start
   padding-right → padding-inline-end
   padding-top   → padding-block-start
   padding-bottom→ padding-block-end

   BORDERS:
   border-left   → border-inline-start
   border-right  → border-inline-end
   border-top    → border-block-start
   border-bottom → border-block-end

   POSITIONING:
   left  → inset-inline-start
   right → inset-inline-end
   top   → inset-block-start
   bottom→ inset-block-end

   TEXT ALIGNMENT:
   text-align: left  → text-align: start
   text-align: right → text-align: end

   FLOAT:
   float: left  → float: inline-start
   float: right → float: inline-end

   FLEX:
   flex-direction: row    → (auto-flips with dir="rtl")
   flex-direction: column → (stays vertical in both LTR and RTL)

   ========================================================================== */