/**
 * RTL (Right-to-Left) Styles for Arabic Language Support
 * This file contains all necessary style adjustments for Arabic/RTL languages
 */

/* Root RTL adjustments */
html[dir="rtl"], html.rtl {
  direction: rtl;
}

html[dir="ltr"], html.ltr {
  direction: ltr;
}

/* Text alignment */
.rtl {
  text-align: right;
}

.ltr {
  text-align: left;
}

/* Tailwind CSS RTL overrides */
.rtl .text-left {
  text-align: right !important;
}

.rtl .text-right {
  text-align: left !important;
}

/* Margin adjustments */
.rtl .ml-2 { margin-left: 0; margin-right: 0.5rem; }
.rtl .mr-2 { margin-right: 0; margin-left: 0.5rem; }
.rtl .ml-3 { margin-left: 0; margin-right: 0.75rem; }
.rtl .mr-3 { margin-right: 0; margin-left: 0.75rem; }
.rtl .ml-4 { margin-left: 0; margin-right: 1rem; }
.rtl .mr-4 { margin-right: 0; margin-left: 1rem; }
.rtl .ml-6 { margin-left: 0; margin-right: 1.5rem; }
.rtl .mr-6 { margin-right: 0; margin-left: 1.5rem; }
.rtl .ml-8 { margin-left: 0; margin-right: 2rem; }
.rtl .mr-8 { margin-right: 0; margin-left: 2rem; }
.rtl .ml-auto { margin-left: 0; margin-right: auto; }
.rtl .mr-auto { margin-right: 0; margin-left: auto; }

/* Padding adjustments */
.rtl .pl-2 { padding-left: 0; padding-right: 0.5rem; }
.rtl .pr-2 { padding-right: 0; padding-left: 0.5rem; }
.rtl .pl-3 { padding-left: 0; padding-right: 0.75rem; }
.rtl .pr-3 { padding-right: 0; padding-left: 0.75rem; }
.rtl .pl-4 { padding-left: 0; padding-right: 1rem; }
.rtl .pr-4 { padding-right: 0; padding-left: 1rem; }
.rtl .pl-6 { padding-left: 0; padding-right: 1.5rem; }
.rtl .pr-6 { padding-right: 0; padding-left: 1.5rem; }
.rtl .pl-8 { padding-left: 0; padding-right: 2rem; }
.rtl .pr-8 { padding-right: 0; padding-left: 2rem; }

/* Border adjustments */
.rtl .border-l { border-left: 0; border-right: 1px solid; }
.rtl .border-r { border-right: 0; border-left: 1px solid; }
.rtl .border-l-2 { border-left: 0; border-right: 2px solid; }
.rtl .border-r-2 { border-right: 0; border-left: 2px solid; }
.rtl .border-l-4 { border-left: 0; border-right: 4px solid; }
.rtl .border-r-4 { border-right: 0; border-left: 4px solid; }

/* Border radius adjustments */
.rtl .rounded-l { border-radius: 0 0.25rem 0.25rem 0; }
.rtl .rounded-r { border-radius: 0.25rem 0 0 0.25rem; }
.rtl .rounded-tl { border-top-left-radius: 0; border-top-right-radius: 0.25rem; }
.rtl .rounded-tr { border-top-right-radius: 0; border-top-left-radius: 0.25rem; }
.rtl .rounded-bl { border-bottom-left-radius: 0; border-bottom-right-radius: 0.25rem; }
.rtl .rounded-br { border-bottom-right-radius: 0; border-bottom-left-radius: 0.25rem; }

/* Transform adjustments */
.rtl .rotate-0 { transform: scaleX(-1); }
.rtl .scale-x-[-1] { transform: scaleX(1); }

/* Flexbox adjustments */
.rtl .flex-row { flex-direction: row-reverse; }
.rtl .flex-row-reverse { flex-direction: row; }

/* Position adjustments */
.rtl .left-0 { left: auto; right: 0; }
.rtl .right-0 { right: auto; left: 0; }
.rtl .left-4 { left: auto; right: 1rem; }
.rtl .right-4 { right: auto; left: 1rem; }
.rtl .left-auto { left: 0; right: auto; }
.rtl .right-auto { right: 0; left: auto; }

/* Float adjustments */
.rtl .float-left { float: right; }
.rtl .float-right { float: left; }

/* Icons that should flip in RTL */
.rtl .icon-flip {
  transform: scaleX(-1);
}

/* Icons that should NOT flip in RTL */
.rtl .icon-no-flip {
  transform: none;
}

/* Font adjustments for Arabic */
.rtl body, .rtl input, .rtl textarea, .rtl select, .rtl button {
  font-family: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;
}

/* Input field adjustments */
.rtl input[type="text"],
.rtl input[type="email"],
.rtl input[type="password"],
.rtl input[type="search"],
.rtl textarea {
  text-align: right;
  direction: rtl;
}

.rtl input[type="text"]::placeholder,
.rtl input[type="email"]::placeholder,
.rtl input[type="password"]::placeholder,
.rtl input[type="search"]::placeholder,
.rtl textarea::placeholder {
  text-align: right;
}

/* Dropdown and select adjustments */
.rtl select {
  background-position: left 0.5rem center;
  padding-left: 2.5rem;
  padding-right: 0.75rem;
}

/* Button adjustments */
.rtl button svg, .rtl .btn svg {
  margin-left: 0.5rem;
  margin-right: 0;
}

.rtl button svg:first-child, .rtl .btn svg:first-child {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Navigation menu adjustments */
.rtl nav ul {
  padding-right: 0;
}

.rtl nav li {
  padding-right: 0;
}

/* Table adjustments */
.rtl table {
  direction: rtl;
}

.rtl th, .rtl td {
  text-align: right;
}

.rtl th:first-child, .rtl td:first-child {
  padding-right: 1.5rem;
  padding-left: 0.75rem;
}

.rtl th:last-child, .rtl td:last-child {
  padding-left: 1.5rem;
  padding-right: 0.75rem;
}

/* List adjustments */
.rtl ul, .rtl ol {
  padding-right: 1.5rem;
  padding-left: 0;
}

.rtl li {
  text-align: right;
}

/* Badge and tag adjustments */
.rtl .badge, .rtl .tag {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Modal and dialog adjustments */
.rtl .modal-header {
  text-align: right;
}

.rtl .modal-close {
  right: auto;
  left: 1rem;
}

/* Notification adjustments */
.rtl .notification {
  right: auto;
  left: 1rem;
}

/* Progress bar adjustments */
.rtl .progress-bar {
  direction: rtl;
}

/* Breadcrumb adjustments */
.rtl .breadcrumb {
  direction: rtl;
}

.rtl .breadcrumb-separator {
  transform: scaleX(-1);
}

/* Card adjustments */
.rtl .card {
  text-align: right;
}

/* Sidebar adjustments */
.rtl .sidebar {
  left: auto;
  right: 0;
}

.rtl .sidebar-open {
  transform: translateX(0);
}

.rtl .sidebar-closed {
  transform: translateX(100%);
}

/* Tooltip adjustments */
.rtl .tooltip {
  text-align: right;
}

/* Scrollbar adjustments for RTL */
.rtl ::-webkit-scrollbar {
  left: 0;
  right: auto;
}

/* Animation adjustments */
@keyframes slideInRightRTL {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInLeftRTL {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.rtl .slide-in-right {
  animation: slideInRightRTL 0.3s ease-out;
}

.rtl .slide-in-left {
  animation: slideInLeftRTL 0.3s ease-out;
}

/* Chat/Message adjustments */
.rtl .message-sent {
  margin-right: auto;
  margin-left: 0;
  border-radius: 1rem 1rem 0 1rem;
}

.rtl .message-received {
  margin-left: auto;
  margin-right: 0;
  border-radius: 1rem 1rem 1rem 0;
}

/* Form label adjustments */
.rtl label {
  text-align: right;
}

/* Checkbox and radio adjustments */
.rtl input[type="checkbox"],
.rtl input[type="radio"] {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Dashboard and grid adjustments */
.rtl .grid {
  direction: rtl;
}

/* Stepper adjustments */
.rtl .stepper {
  direction: rtl;
}

.rtl .stepper-connector {
  transform: scaleX(-1);
}

/* Timeline adjustments */
.rtl .timeline {
  border-left: 0;
  border-right: 2px solid #e5e7eb;
  padding-left: 0;
  padding-right: 2rem;
}

.rtl .timeline-item::before {
  left: auto;
  right: -0.5rem;
}

/* Number formatting for Arabic */
.rtl .number {
  font-family: 'Arial', sans-serif;
  direction: ltr;
  display: inline-block;
}

/* Preserve LTR for specific elements even in RTL */
.rtl .preserve-ltr,
.rtl code,
.rtl pre,
.rtl .code-block {
  direction: ltr !important;
  text-align: left !important;
}

/* Logo and branding (typically should not flip) */
.rtl .logo {
  transform: none;
}

/* Social media icons (should not flip) */
.rtl .social-icon {
  transform: none;
}

/* Mathematical and technical content */
.rtl .math, .rtl .formula {
  direction: ltr;
  text-align: left;
}

/* Media queries for responsive RTL */
@media (max-width: 768px) {
  .rtl .mobile-menu {
    right: auto;
    left: 0;
  }
  
  .rtl .mobile-menu-open {
    transform: translateX(0);
  }
  
  .rtl .mobile-menu-closed {
    transform: translateX(-100%);
  }
}

/* Print styles for RTL */
@media print {
  .rtl {
    direction: rtl;
  }
  
  .rtl .no-print {
    display: none;
  }
}

/* Accessibility improvements for RTL */
.rtl [role="navigation"] {
  direction: rtl;
}

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

/* Focus states for RTL */
.rtl *:focus {
  outline-offset: 2px;
}

/* Custom scrollbar for RTL browsers */
.rtl ::-webkit-scrollbar {
  width: 8px;
}

.rtl ::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.rtl ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.rtl ::-webkit-scrollbar-thumb:hover {
  background: #555;
}