/*
 * Lotix CRM - RTL Support
 * =======================
 * Styles for Right-to-Left language support (Arabic, Hebrew, etc.)
 */

/* ========================================
   Base RTL Adjustments
   ======================================== */

[dir="rtl"] {
  font-family: var(--font-arabic);
}

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

/* ========================================
   Text with Arabic Content
   ======================================== */

.rtl-text,
.arabic-text,
[lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  line-height: var(--line-height-arabic);
}

/* Mixed content container - allows RTL text within LTR context */
.mixed-content {
  unicode-bidi: plaintext;
}

/* Force RTL for specific elements */
.force-rtl {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
}

/* Force LTR for specific elements (numbers, code, etc.) */
.force-ltr {
  direction: ltr;
  text-align: left;
}

/* ========================================
   Icon Flipping
   ======================================== */

[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

/* Icons that should flip in RTL */
[dir="rtl"] .nav-item-icon.directional,
[dir="rtl"] .icon-arrow,
[dir="rtl"] .icon-chevron,
[dir="rtl"] .icon-forward,
[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

/* ========================================
   Sidebar RTL Adjustments
   ======================================== */

[dir="rtl"] .sidebar {
  border-inline-end: 1px solid var(--border-color);
  border-left: none;
}

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

/* ========================================
   Timeline RTL
   ======================================== */

[dir="rtl"] .timeline {
  padding-inline-start: 0;
  padding-inline-end: 2rem;
}

[dir="rtl"] .timeline::before {
  inset-inline-start: auto;
  inset-inline-end: 0.5rem;
}

[dir="rtl"] .timeline-dot {
  inset-inline-start: auto;
  inset-inline-end: -1.625rem;
}

/* ========================================
   Forms RTL
   ======================================== */

[dir="rtl"] .form-select {
  background-position: left 0.75rem center;
  padding-inline-start: 2.5rem;
  padding-inline-end: 0.875rem;
}

[dir="rtl"] .search-icon {
  inset-inline-start: auto;
  inset-inline-end: 0.75rem;
}

[dir="rtl"] .search-input {
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
}

/* ========================================
   Table RTL
   ======================================== */

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

[dir="rtl"] .data-table .actions-col {
  text-align: left;
}

/* ========================================
   Dropdown RTL
   ======================================== */

[dir="rtl"] .dropdown-menu {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* ========================================
   Modal RTL
   ======================================== */

[dir="rtl"] .modal-footer {
  justify-content: flex-start;
}

/* ========================================
   Notifications RTL
   ======================================== */

[dir="rtl"] .notifications-panel {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* ========================================
   Badge RTL
   ======================================== */

[dir="rtl"] .icon-btn .badge {
  inset-inline-end: auto;
  inset-inline-start: 0.25rem;
}

/* ========================================
   AI Notes Display (Arabic Support)
   ======================================== */

.ai-note-arabic {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  line-height: var(--line-height-arabic);
  padding: 1rem;
  background-color: var(--bg-tertiary);
  border-radius: var(--border-radius-lg);
  border-inline-start: 3px solid var(--color-secondary);
}

.ai-analysis-arabic {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  line-height: var(--line-height-arabic);
}

/* Timeline notes with Arabic content */
.timeline-body.arabic-content {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  line-height: var(--line-height-arabic);
}

/* ========================================
   Lead Notes (Mixed Content)
   ======================================== */

.lead-note {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  line-height: 1.8;
  white-space: pre-wrap;
}

.lead-note .number,
.lead-note .phone,
.lead-note .email-text {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ========================================
   Activity Log RTL
   ======================================== */

.activity-log-item.rtl {
  direction: rtl;
  text-align: right;
}

.activity-log-item.rtl .activity-meta {
  direction: ltr;
  text-align: right;
}

/* ========================================
   Quick Actions RTL
   ======================================== */

[dir="rtl"] .quick-actions {
  flex-direction: row;
}

/* ========================================
   Pagination RTL
   ======================================== */

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

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

/* ========================================
   Filters RTL
   ======================================== */

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

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

/* ========================================
   Cards RTL
   ======================================== */

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

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

/* ========================================
   User Menu RTL
   ======================================== */

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

/* ========================================
   Animation Adjustments
   ======================================== */

[dir="rtl"] .slide-in {
  animation-name: slideInRTL;
}

@keyframes slideInRTL {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   Print RTL
   ======================================== */

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

/* ========================================
   RTL Toggle Button
   ======================================== */

.rtl-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rtl-toggle:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.rtl-toggle.active {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.dark .rtl-toggle.active {
  background-color: rgba(13, 148, 136, 0.2);
}