/**
 * RTL (Right-to-Left) Styles for Persian Language
 * Handles layout mirroring and Persian font support
 */

/* ============================================
   PERSIAN FONT IMPORTS
   ============================================ */

/* Vazir Font - Modern Persian font with excellent readability */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css');

/* Yekan Font - Alternative Persian font */
@font-face {
  font-family: 'Yekan';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/yekan-font@v1.0.1/dist/font-face/Yekan.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/rastikerdar/yekan-font@v1.0.1/dist/font-face/Yekan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* IRANSans Font - Professional Persian font */
@font-face {
  font-family: 'IRANSans';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/iran-sans@v5.0.0/dist/font-face/IRANSans.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/rastikerdar/iran-sans@v5.0.0/dist/font-face/IRANSans.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   RTL DIRECTION & FONT FAMILY
   ============================================ */

/* Apply Persian font when RTL is active */
[dir="rtl"] body {
  font-family: 'Vazir', 'Yekan', 'IRANSans', 'Tahoma', 'Arial', sans-serif !important;
  text-align: right;
}

/* Apply to text elements but NOT icons */
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] span:not(.fa):not(.fas):not(.far):not(.fab):not(.fal),
[dir="rtl"] div:not(.fa):not(.fas):not(.far):not(.fab):not(.fal),
[dir="rtl"] label,
[dir="rtl"] button,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: 'Vazir', 'Yekan', 'IRANSans', 'Tahoma', 'Arial', sans-serif !important;
}

/* Keep FontAwesome icons working */
[dir="rtl"] i.fa,
[dir="rtl"] i.fas,
[dir="rtl"] i.far,
[dir="rtl"] i.fab,
[dir="rtl"] i.fal,
[dir="rtl"] .fa,
[dir="rtl"] .fas,
[dir="rtl"] .far,
[dir="rtl"] .fab,
[dir="rtl"] .fal {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'FontAwesome' !important;
  font-weight: 900;
}

/* ============================================
   ICON CENTERING - Universal Fix
   ============================================ */

/* Ensure all icons are perfectly centered */
[dir="rtl"] i,
[dir="ltr"] i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Icon containers should also center their content */
[dir="rtl"] .stat-icon i,
[dir="ltr"] .stat-icon i,
[dir="rtl"] .card-icon i,
[dir="ltr"] .card-icon i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Card icon container centering */
[dir="rtl"] .card-icon,
[dir="ltr"] .card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Sidebar icons centering */
[dir="rtl"] .sidebar-nav li i,
[dir="ltr"] .sidebar-nav li i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Navigation icons centering */
[dir="rtl"] .nav-links i,
[dir="ltr"] .nav-links i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Button icons centering */
[dir="rtl"] button i,
[dir="ltr"] button i,
[dir="rtl"] .btn i,
[dir="ltr"] .btn i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Keep English font for specific elements */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .code,
[dir="rtl"] .english-only {
  font-family: 'Inter', 'Consolas', 'Monaco', monospace !important;
  direction: ltr;
  text-align: left;
}

/* Numbers and dates should remain LTR */
[dir="rtl"] .number,
[dir="rtl"] .date,
[dir="rtl"] .price,
[dir="rtl"] .token-count,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"] {
  direction: ltr;
  text-align: left;
  display: inline-block;
}

/* ============================================
   LAYOUT MIRRORING
   ============================================ */

/* Flexbox Direction Reversal */
[dir="rtl"] .nav-links,
[dir="rtl"] .hero-buttons,
[dir="rtl"] .action-buttons,
[dir="rtl"] .form-actions,
[dir="rtl"] .chart-controls,
[dir="rtl"] .control-actions {
  flex-direction: row-reverse;
}

/* Grid Layout Adjustments */
[dir="rtl"] .features-grid,
[dir="rtl"] .pricing-grid,
[dir="rtl"] .overview-cards,
[dir="rtl"] .dashboard-stats {
  direction: rtl;
}

/* ============================================
   SPACING & MARGINS
   ============================================ */

/* Reverse margins and paddings */
[dir="rtl"] .logo {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .nav-links li {
  margin-left: 0;
  margin-right: 30px;
}

[dir="rtl"] .nav-links li:last-child {
  margin-right: 0;
}

/* Icon spacing */
[dir="rtl"] i.fas,
[dir="rtl"] i.far,
[dir="rtl"] i.fab {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] label i {
  margin-right: 0;
  margin-left: 5px;
}

/* Button icons */
[dir="rtl"] .btn i,
[dir="rtl"] button i {
  margin-right: 0;
  margin-left: 8px;
}

/* ============================================
   NAVIGATION & HEADER
   ============================================ */

[dir="rtl"] .main-header {
  direction: rtl !important;
}

[dir="rtl"] .main-header nav {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

[dir="rtl"] .logo {
  margin-right: auto !important;
  margin-left: 0 !important;
  order: 3 !important;
}

[dir="rtl"] .token-center {
  order: 2 !important;
  flex-direction: row-reverse !important;
}

[dir="rtl"] .nav-links {
  order: 1 !important;
  flex-direction: row-reverse !important;
  margin-right: 0 !important;
  margin-left: 10px !important;
  text-align: right !important;
}

[dir="rtl"] .nav-links li {
  margin-left: 0 !important;
  margin-right: 20px !important;
  text-align: right !important;
}

[dir="rtl"] .nav-links li:last-child {
  margin-right: 0 !important;
}

[dir="rtl"] .nav-links a {
  text-align: center !important;
  direction: ltr !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[dir="rtl"] .brand-icon {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

[dir="rtl"] .token-logo {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

[dir="rtl"] .nav-logo {
  order: 0 !important;
}

/* ============================================
   SIDEBAR & DASHBOARD LAYOUT
   ============================================ */

/* Force RTL layout for dashboard wrapper */
[dir="rtl"] .dashboard-wrapper {
  flex-direction: row-reverse !important;
  direction: rtl !important;
}

/* Sidebar positioning - move to right side */
[dir="rtl"] .sidebar {
  position: fixed !important;
  left: auto !important;
  right: 0 !important;
  top: 70px !important;
  border-left: none !important;
  border-right: 1px solid rgba(255, 107, 53, 0.1) !important;
  border-radius: 20px 0 0 20px !important;
  margin: 20px 20px 20px 0 !important;
  z-index: 100 !important;
}

/* Content area - add margin on right side for sidebar */
[dir="rtl"] .content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 270px !important;
  padding-left: 30px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure content background stays behind sidebar */
[dir="rtl"] .content::before {
  z-index: -1 !important;
}

/* Sidebar navigation items */
[dir="rtl"] .sidebar-nav {
  direction: rtl !important;
}

[dir="rtl"] .sidebar-nav li {
  text-align: right !important;
  padding: 16px 25px !important;
  border-radius: 25px 0 0 25px !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  direction: rtl !important;
}

[dir="rtl"] .sidebar-nav li span {
  display: inline-block !important;
  text-align: right !important;
  width: 100% !important;
}

[dir="rtl"] .sidebar-nav li i {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

/* Fix hover effect for RTL */
[dir="rtl"] .sidebar-nav li:hover {
  transform: translateX(-8px) !important;
  border-left: none !important;
}

/* Fix active and hover border for RTL */
[dir="rtl"] .sidebar-nav li.active,
[dir="rtl"] .sidebar-nav li:hover {
  border-left: none !important;
  border-right: 4px solid #FFB74D !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

[dir="rtl"] .input-group label {
  text-align: right;
  font-family: 'Vazir', 'Yekan', 'IRANSans', 'Tahoma', 'Arial', sans-serif !important;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  padding-right: 15px;
  padding-left: 15px;
}

[dir="rtl"] input[type="checkbox"],
[dir="rtl"] input[type="radio"] {
  margin-right: 0;
  margin-left: 8px;
}

/* Placeholder text */
[dir="rtl"] ::placeholder {
  text-align: right;
}

/* ============================================
   CARDS & WIDGETS
   ============================================ */

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

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

[dir="rtl"] .card-icon {
  margin-right: 0;
  margin-left: 15px;
}

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

[dir="rtl"] .stat-icon {
  margin-right: 0;
  margin-left: 20px;
}

/* ============================================
   CHARTS & VISUALIZATIONS
   ============================================ */

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

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

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

[dir="rtl"] .feature-badge {
  margin-left: 0;
  margin-right: 15px;
}

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

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

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

[dir="rtl"] th:first-child,
[dir="rtl"] td:first-child {
  border-right: none;
}

[dir="rtl"] th:last-child,
[dir="rtl"] td:last-child {
  border-left: none;
}

/* ============================================
   TABS
   ============================================ */

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

[dir="rtl"] .tab-btn {
  border-right: none;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .tab-btn:first-child {
  border-left: none;
}

/* ============================================
   MODALS & DROPDOWNS
   ============================================ */

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

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

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

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

.language-switcher {
  display: flex;
  gap: 5px;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50px;
  white-space: nowrap;
}

.lang-btn:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
}

.lang-btn.active {
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

[dir="rtl"] .language-switcher {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================
   TOOLTIPS & HINTS
   ============================================ */

[dir="rtl"] .hint-tooltip,
[dir="rtl"] .chart-hint {
  text-align: right;
}

[dir="rtl"] .field-hint {
  left: auto;
  right: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Reverse slide animations for RTL */
[dir="rtl"] @keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[dir="rtl"] @keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Hero section */
[dir="rtl"] .hero-content {
  text-align: center; /* Keep centered for hero */
}

/* Footer */
[dir="rtl"] .footer-inner {
  flex-direction: row-reverse;
}

/* User cards */
[dir="rtl"] .user-card {
  flex-direction: row-reverse;
}

/* Activity feed */
[dir="rtl"] .activity-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .activity-icon {
  margin-right: 0;
  margin-left: 15px;
}

/* File list */
[dir="rtl"] .file-list-item {
  flex-direction: row-reverse;
}

/* Chat messages */
[dir="rtl"] .chat-message {
  text-align: right;
}

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

[dir="rtl"] .chat-message.assistant {
  flex-direction: row;
}

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

@media (max-width: 768px) {
  [dir="rtl"] .sidebar {
    right: -250px !important;
    left: auto !important;
  }
  
  [dir="rtl"] .sidebar.active {
    right: 0 !important;
  }
  
  [dir="rtl"] .content {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

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

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-left-always {
  text-align: left !important;
  direction: ltr !important;
}

.text-right-always {
  text-align: right !important;
}

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

[dir="rtl"] .rtl-content {
  direction: rtl;
  text-align: right;
}

/* ============================================
   PERSIAN NUMBER FORMATTING
   ============================================ */

/* Keep numbers in English format (0-9) instead of Persian (۰-۹) */
[dir="rtl"] input[type="number"],
[dir="rtl"] .number,
[dir="rtl"] .price,
[dir="rtl"] .token-count,
[dir="rtl"] .stat-content h3 {
  font-family: 'Inter', sans-serif;
  direction: ltr;
  unicode-bidi: embed;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

[dir="rtl"] :focus {
  outline-offset: 2px;
}

[dir="rtl"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   SCROLLBAR STYLING FOR RTL
   ============================================ */

[dir="rtl"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[dir="rtl"] ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

[dir="rtl"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 100%);
  border-radius: 10px;
}

[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #D32F2F 0%, #FF6B35 100%);
}

/* ============================================
   PROFILE CARD REDESIGN - Beautiful Layout
   ============================================ */

/* Profile Card Container */
[dir="rtl"] .profile-card,
[dir="ltr"] .profile-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.95) 100%) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 107, 53, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Profile Card Decorative Background */
.profile-card::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.03) 0%, transparent 70%) !important;
  z-index: 0 !important;
}

/* Profile Card Grid Layout */
[dir="rtl"] .profile-card,
[dir="ltr"] .profile-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Individual Profile Info Item */
[dir="rtl"] .profile-card p,
[dir="ltr"] .profile-card p {
  margin: 0 !important;
  padding: 18px 22px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 107, 53, 0.08) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Hover Effect */
[dir="rtl"] .profile-card p:hover,
[dir="ltr"] .profile-card p:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.12) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Label Styling */
[dir="rtl"] .profile-card strong,
[dir="ltr"] .profile-card strong {
  color: #FF6B35 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.9 !important;
  display: block !important;
}

/* Value Styling */
[dir="rtl"] .profile-card span,
[dir="ltr"] .profile-card span {
  color: #2C3E50 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: block !important;
  word-break: break-word !important;
}

/* Special styling for token numbers */
[dir="rtl"] .profile-card span.number,
[dir="ltr"] .profile-card span.number {
  color: #FF6B35 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: 'Inter', 'Vazir', sans-serif !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  [dir="rtl"] .profile-card,
  [dir="ltr"] .profile-card {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 15px !important;
  }
  
  [dir="rtl"] .profile-card p,
  [dir="ltr"] .profile-card p {
    padding: 15px 18px !important;
  }
}

/* ============================================
   DASHBOARD STATS CARDS REDESIGN
   ============================================ */

/* Stat Widget Container - Compact and Clean */
[dir="rtl"] .stat-widget,
[dir="ltr"] .stat-widget {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 20px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.95) 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 107, 53, 0.1) !important;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* RTL specific alignment */
[dir="rtl"] .stat-widget {
  flex-direction: row-reverse !important;
  text-align: right !important;
}

/* Hover effect */
[dir="rtl"] .stat-widget:hover,
[dir="ltr"] .stat-widget:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
}

/* Icon - Smaller and More Compact */
[dir="rtl"] .stat-icon,
[dir="ltr"] .stat-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
  text-align: center !important;
  line-height: 50px !important;
}

/* RTL icon spacing */
[dir="rtl"] .stat-icon {
  margin-right: 0 !important;
  margin-left: 15px !important;
}

[dir="ltr"] .stat-icon {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

/* Content Area */
[dir="rtl"] .stat-content,
[dir="ltr"] .stat-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

[dir="rtl"] .stat-content {
  align-items: flex-start !important;
  text-align: right !important;
}

[dir="ltr"] .stat-content {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Number/Value - Prominent but not huge */
[dir="rtl"] .stat-content h3,
[dir="ltr"] .stat-content h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #FF6B35 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-family: 'Inter', 'Vazir', sans-serif !important;
}

/* Label - Clear and readable */
[dir="rtl"] .stat-content > p,
[dir="ltr"] .stat-content > p {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2C3E50 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  opacity: 0.9 !important;
}

/* Trend indicator - Compact */
[dir="rtl"] .stat-trend,
[dir="ltr"] .stat-trend {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #28a745 !important;
  margin-top: 2px !important;
}

[dir="rtl"] .stat-trend {
  flex-direction: row-reverse !important;
}

[dir="ltr"] .stat-trend {
  flex-direction: row !important;
}

[dir="rtl"] .stat-trend i,
[dir="ltr"] .stat-trend i {
  font-size: 10px !important;
}

/* Dashboard stats container */
[dir="rtl"] .dashboard-stats,
[dir="ltr"] .dashboard-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  [dir="rtl"] .stat-widget,
  [dir="ltr"] .stat-widget {
    flex-direction: row !important;
    text-align: right !important;
  }
  
  [dir="rtl"] .stat-widget {
    flex-direction: row-reverse !important;
  }
  
  [dir="rtl"] .stat-icon,
  [dir="ltr"] .stat-icon {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    font-size: 18px !important;
  }
  
  [dir="rtl"] .stat-content h3,
  [dir="ltr"] .stat-content h3 {
    font-size: 20px !important;
  }
  
  [dir="rtl"] .dashboard-stats,
  [dir="ltr"] .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   OVERVIEW CARDS REDESIGN - Beautiful Layout
   ============================================ */

/* Overview Cards Container */
[dir="rtl"] .overview-cards,
[dir="ltr"] .overview-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  margin-bottom: 30px !important;
}

/* Enhanced Card */
[dir="rtl"] .enhanced-card,
[dir="ltr"] .enhanced-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 245, 0.98) 100%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 107, 53, 0.12) !important;
  padding: 0 !important;
  box-shadow: 0 6px 24px rgba(255, 107, 53, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  position: relative !important;
  backdrop-filter: blur(10px) !important;
}

/* Card Top Accent Bar */
[dir="rtl"] .enhanced-card::before,
[dir="ltr"] .enhanced-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #FF6B35 0%, #D32F2F 50%, #FF6B35 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[dir="rtl"] .enhanced-card:hover::before,
[dir="ltr"] .enhanced-card:hover::before {
  transform: scaleX(1) !important;
}

/* Hover Effect */
[dir="rtl"] .enhanced-card:hover,
[dir="ltr"] .enhanced-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(255, 107, 53, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(255, 107, 53, 0.25) !important;
}

/* Card Header */
[dir="rtl"] .card-header,
[dir="ltr"] .card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 24px 0 24px !important;
}

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

/* Card Icon - Refined */
[dir="rtl"] .card-icon,
[dir="ltr"] .card-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 24px !important;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35) !important;
  transition: all 0.3s ease !important;
}

[dir="rtl"] .enhanced-card:hover .card-icon,
[dir="ltr"] .enhanced-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 8px 28px rgba(255, 107, 53, 0.45) !important;
}

/* Card Status Indicator */
[dir="rtl"] .card-status,
[dir="ltr"] .card-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

[dir="rtl"] .status-dot,
[dir="ltr"] .status-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(40, 167, 69, 0.1);
  }
}

/* Card Content */
[dir="rtl"] .card-content,
[dir="ltr"] .card-content {
  padding: 20px 24px !important;
}

[dir="rtl"] .card-content {
  text-align: right !important;
  direction: rtl !important;
}

[dir="ltr"] .card-content {
  text-align: left !important;
  direction: ltr !important;
}

/* Card Title */
[dir="rtl"] .card-content h3,
[dir="ltr"] .card-content h3 {
  color: #2C3E50 !important;
  margin: 0 0 12px 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
}

[dir="rtl"] .enhanced-card:hover .card-content h3,
[dir="ltr"] .enhanced-card:hover .card-content h3 {
  color: #FF6B35 !important;
}

/* Card Description */
[dir="rtl"] .card-content p,
[dir="ltr"] .card-content p {
  color: #6c757d !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Card Metrics */
[dir="rtl"] .card-metrics,
[dir="ltr"] .card-metrics {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

[dir="rtl"] .card-metrics {
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

[dir="ltr"] .card-metrics {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Metric Badge */
[dir="rtl"] .metric,
[dir="ltr"] .metric {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(211, 47, 47, 0.1) 100%) !important;
  color: #FF6B35 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 107, 53, 0.15) !important;
  transition: all 0.3s ease !important;
}

[dir="rtl"] .metric:hover,
[dir="ltr"] .metric:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(211, 47, 47, 0.15) 100%) !important;
  border-color: rgba(255, 107, 53, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Card Footer */
[dir="rtl"] .card-footer,
[dir="ltr"] .card-footer {
  padding: 16px 24px !important;
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(255, 250, 245, 0.8) 100%) !important;
  border-top: 1px solid rgba(255, 107, 53, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

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

/* Card Action */
[dir="rtl"] .card-action,
[dir="ltr"] .card-action {
  color: #FF6B35 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.3s ease !important;
}

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

[dir="rtl"] .enhanced-card:hover .card-action,
[dir="ltr"] .enhanced-card:hover .card-action {
  color: #D32F2F !important;
}

/* Card Action Icon */
[dir="rtl"] .card-action i,
[dir="ltr"] .card-action i {
  font-size: 12px !important;
  transition: transform 0.3s ease !important;
}

[dir="rtl"] .enhanced-card:hover .card-action i {
  transform: translateX(-4px) !important;
}

[dir="ltr"] .enhanced-card:hover .card-action i {
  transform: translateX(4px) !important;
}

/* Responsive */
@media (max-width: 768px) {
  [dir="rtl"] .overview-cards,
  [dir="ltr"] .overview-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  [dir="rtl"] .card-header,
  [dir="ltr"] .card-header {
    padding: 20px 20px 0 20px !important;
  }
  
  [dir="rtl"] .card-content,
  [dir="ltr"] .card-content {
    padding: 16px 20px !important;
  }
  
  [dir="rtl"] .card-footer,
  [dir="ltr"] .card-footer {
    padding: 14px 20px !important;
  }
  
  [dir="rtl"] .card-icon,
  [dir="ltr"] .card-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    font-size: 22px !important;
  }
}

/* ============================================
   FORM ACTIONS & COST INDICATOR
   ============================================ */

/* Form Actions Container */
[dir="rtl"] .form-actions,
[dir="ltr"] .form-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 25px !important;
}

[dir="rtl"] .form-actions {
  flex-direction: row-reverse !important;
}

/* Cost Indicator - Larger and Better Aligned */
[dir="rtl"] .cost-indicator,
[dir="ltr"] .cost-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(247, 147, 30, 0.12) 100%) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
  border-radius: 25px !important;
  color: #FF6B35 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  min-height: 48px !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1) !important;
}

[dir="rtl"] .cost-indicator {
  flex-direction: row-reverse !important;
}

[dir="rtl"] .cost-indicator i,
[dir="ltr"] .cost-indicator i {
  font-size: 16px !important;
  color: #FF6B35 !important;
}

/* Button alignment */
[dir="rtl"] .btn-primary,
[dir="ltr"] .btn-primary {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
  [dir="rtl"] .form-actions,
  [dir="ltr"] .form-actions {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  [dir="rtl"] .cost-indicator,
  [dir="ltr"] .cost-indicator {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   VISUALIZATION INDICATOR CARDS - EQUAL WIDTH
   ============================================ */

/* Ensure all indicator cards have equal width */
[dir="rtl"] .indicators-grid,
[dir="ltr"] .indicators-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 15px !important;
}

/* Make sure each indicator item takes full width */
[dir="rtl"] .indicator-item,
[dir="ltr"] .indicator-item {
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure the label takes full width */
[dir="rtl"] .indicator-label,
[dir="ltr"] .indicator-label {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 120px !important;
}

/* Ensure consistent spacing for indicator info */
[dir="rtl"] .indicator-info,
[dir="ltr"] .indicator-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Ensure indicator names don't wrap unnecessarily */
[dir="rtl"] .indicator-name,
[dir="ltr"] .indicator-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure indicator descriptions wrap properly */
[dir="rtl"] .indicator-desc,
[dir="ltr"] .indicator-desc {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  [dir="rtl"] .indicators-grid,
  [dir="ltr"] .indicators-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  [dir="rtl"] .indicators-grid,
  [dir="ltr"] .indicators-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  [dir="rtl"] .indicators-grid,
  [dir="ltr"] .indicators-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   JOURNAL CHAT - VIEW CONTENT TAB (LTR)
   ============================================ */

/* Keep View Content tab left-aligned since journal content is always in English */
[dir="rtl"] #viewPanel .view-content,
[dir="rtl"] #viewPanel .view-content * {
  direction: ltr !important;
  text-align: left !important;
}

/* ============================================
   TRADING PAGE - THRESHOLD SLIDER (RTL FIX)
   ============================================ */

/* Allow range sliders to reverse in RTL mode
   In RTL: moving handle right decreases value, moving left increases value
   The gradient fill direction is handled in JavaScript */
[dir="rtl"] input[type="range"] {
  direction: rtl;
}

/* Ensure slider thumb and track work correctly in RTL */
[dir="rtl"] input[type="range"]::-webkit-slider-thumb {
  direction: rtl;
}

[dir="rtl"] input[type="range"]::-moz-range-thumb {
  direction: rtl;
}