/* RTL (Right-to-Left) Specific Styles */

/* Base RTL direction */
[dir="rtl"] body {
    font-family: 'Segoe UI', Tahoma, Arial, 'Times New Roman', serif;
    direction: rtl;
}

/* Sidebar positioning for RTL */
[dir="rtl"] .app-sidebar {
    right: 0;
    left: auto;
}

[dir="rtl"] .app-sidebar.collapsed {
    transform: translateX(320px);
}

[dir="rtl"] .app-main {
    margin-right: 320px;
    margin-left: 0;
}

[dir="rtl"] .app-main.expanded {
    margin-right: 0;
}

/* Sidebar content alignment */
[dir="rtl"] .sidebar-header {
    text-align: right;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .sidebar-toggle {
    order: 2;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    left: var(--space-lg);
    right: auto;
}

[dir="rtl"] .sidebar-title {
    text-align: right;
    margin-right: 0;
    margin-left: 0;
    flex: 1;
    padding-left: 60px;
}

[dir="rtl"] .section-title {
    text-align: right;
    border-left: none;
    border-right: 3px solid var(--primary-color);
    padding-left: 0;
    padding-right: var(--space-sm);
}

[dir="rtl"] .current-date-display {
    text-align: right;
}

[dir="rtl"] .current-date-display h4 {
    text-align: right;
}

[dir="rtl"] .current-date-display .date-meta {
    text-align: right;
    justify-content: flex-end;
}

[dir="rtl"] .date-controls {
    flex-direction: row-reverse;
}

[dir="rtl"] .filter-group .btn-group-vertical .btn {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .language-controls .btn {
    text-align: center;
}

/* Timeline adjustments for RTL */
[dir="rtl"] .timeline-container {
    padding-right: 30px;
    padding-left: 0;
}

[dir="rtl"] .timeline-container::before {
    right: 0;
    left: auto;
}

[dir="rtl"] .timeline-event {
    margin-right: 20px;
    margin-left: 0;
}

[dir="rtl"] .timeline-event::before {
    right: -35px;
    left: auto;
}

/* Source header alignment */
[dir="rtl"] .source-header {
    text-align: right;
    flex-direction: row-reverse;
}

[dir="rtl"] .source-header .flag-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Source meta alignment */
[dir="rtl"] .source-meta {
    justify-content: flex-end;
}

/* Source perspective order */
[dir="rtl"] .source-perspective.iran {
    order: 2;
}

[dir="rtl"] .source-perspective.israel {
    order: 1;
}

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .app-sidebar {
        transform: translateX(320px);
    }
    
    [dir="rtl"] .app-sidebar.show {
        transform: translateX(0);
    }
    
    [dir="rtl"] .app-main {
        margin-right: 0;
    }
    
    [dir="rtl"] .timeline-container {
        padding-right: 20px;
        padding-left: 0;
    }
    
    [dir="rtl"] .timeline-event {
        margin-right: 10px;
        margin-left: 0;
    }
    
    [dir="rtl"] .timeline-event::before {
        right: -25px;
        left: auto;
    }
    
    /* Mobile date controls RTL */
    [dir="rtl"] .date-controls {
        flex-direction: row-reverse;
        gap: 0.5rem;
    }
    
    [dir="rtl"] .current-date-display {
        text-align: right;
        padding-right: 0;
    }
    
    [dir="rtl"] .sidebar-section {
        text-align: right;
    }
}

/* Date display */
[dir="rtl"] .date-display {
    text-align: center;
}

/* Source toggle alignment */
[dir="rtl"] .source-toggle {
    text-align: right;
    flex-direction: row-reverse;
}

[dir="rtl"] .source-info {
    align-items: flex-end;
}

/* Navigation arrows - swap order and fix positioning */
[dir="rtl"] .date-controls .btn-nav:first-child {
    order: 3;
}

[dir="rtl"] .date-controls .btn-nav:last-child {
    order: 1;
}

[dir="rtl"] .date-controls .dropdown {
    order: 2;
}

/* Language button RTL */
[dir="rtl"] .btn-language {
    direction: rtl;
    text-align: center;
}

[dir="rtl"] .btn-language i {
    margin-left: var(--space-xs);
    margin-right: 0;
}

[dir="rtl"] .language-controls .btn {
    text-align: center;
    direction: rtl;
}

/* Offcanvas positioning */
[dir="rtl"] .offcanvas-end {
    border-right: 1px solid var(--gray-200);
    border-left: none;
}

/* Modal positioning */
[dir="rtl"] .modal-header {
    text-align: right;
}

[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}

/* Source perspective cards order swap */
[dir="rtl"] .source-perspective.iran {
    order: 2;
}

[dir="rtl"] .source-perspective.israel {
    order: 1;
}

/* Source perspective alignment */
[dir="rtl"] .source-perspective {
    text-align: right;
}

/* Button groups */
[dir="rtl"] .btn-group-vertical .btn {
    text-align: right;
}

/* Badge positioning */
[dir="rtl"] .badge {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Loading and empty state */
[dir="rtl"] .loading-content {
    text-align: center;
}

[dir="rtl"] .empty-state {
    text-align: center;
}

/* Icon adjustments */
[dir="rtl"] .header-controls .btn i {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .btn i:first-child {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .btn i:last-child {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Date picker positioning */
[dir="rtl"] .date-picker-dropdown {
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    margin-top: 0.5rem;
}

[dir="rtl"] .dropdown-menu.date-picker-dropdown {
    left: auto !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    margin-right: 0;
}

[dir="rtl"] .date-controls .dropdown {
    direction: rtl;
}

[dir="rtl"] .btn-date-picker {
    text-align: center;
    justify-content: center;
    direction: rtl;
}

[dir="rtl"] .btn-date-picker i {
    margin-left: var(--space-xs);
    margin-right: 0;
}

/* Calendar RTL adjustments */
[dir="rtl"] .calendar {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .calendar-header {
    text-align: center;
}

[dir="rtl"] .calendar-grid {
    direction: rtl;
}

[dir="rtl"] .calendar-day-header {
    text-align: center;
}

[dir="rtl"] .calendar-date {
    text-align: center;
}

/* Event content alignment */
[dir="rtl"] .event-content {
    text-align: right;
}

[dir="rtl"] .event-title {
    text-align: right;
}

[dir="rtl"] .source-headline {
    text-align: right;
}

/* View full button alignment */
[dir="rtl"] .view-full-btn {
    text-align: right;
}

/* Responsive adjustments for RTL */
@media (max-width: 768px) {
    [dir="rtl"] .timeline-container {
        padding-right: 0;
    }
    
    [dir="rtl"] .timeline-event {
        margin-right: 0;
    }
    
    [dir="rtl"] .header-controls {
        align-items: stretch;
    }
}

/* Language-specific typography */
[dir="rtl"] .app-title,
[dir="rtl"] .app-subtitle,
[dir="rtl"] .event-title,
[dir="rtl"] .source-headline {
    font-weight: 600;
    line-height: 1.6;
}

/* Arabic text improvements */
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div {
    line-height: 1.7;
}

/* Toggle switch RTL */
[dir="rtl"] .toggle-switch::before {
    right: 2px;
    left: auto;
}

[dir="rtl"] .toggle-switch.active::before {
    transform: translateX(-20px);
}

/* Dropdown menus RTL */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

/* Form elements RTL */
[dir="rtl"] .form-control {
    text-align: right;
}

/* Breadcrumb RTL */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    transform: scaleX(-1);
}

/* Pagination RTL */
[dir="rtl"] .page-link {
    text-align: center;
}

/* Alert RTL */
[dir="rtl"] .alert {
    text-align: right;
}

/* Card RTL */
[dir="rtl"] .card-body {
    text-align: right;
}

/* List group RTL */
[dir="rtl"] .list-group-item {
    text-align: right;
}

/* Nav RTL */
[dir="rtl"] .nav-link {
    text-align: right;
}

/* Table RTL */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right;
}

/* Progress RTL */
[dir="rtl"] .progress-bar {
    right: 0;
    left: auto;
}

/* Tooltip RTL */
[dir="rtl"] .tooltip {
    text-align: center;
}

/* Popover RTL */
[dir="rtl"] .popover {
    text-align: right;
}

/* Toast RTL */
[dir="rtl"] .toast {
    text-align: right;
}

/* Carousel RTL */
[dir="rtl"] .carousel-control-prev {
    right: 0;
    left: auto;
}

[dir="rtl"] .carousel-control-next {
    left: 0;
    right: auto;
}

/* Custom scrollbar RTL */
[dir="rtl"] ::-webkit-scrollbar {
    width: 8px;
}

[dir="rtl"] ::-webkit-scrollbar-track {
    background: var(--gray-100);
}

[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Desktop toggle button RTL positioning */
[dir="rtl"] .desktop-sidebar-toggle {
    order: 3;
}

[dir="rtl"] .main-header {
    flex-direction: row-reverse;
}

/* Additional RTL fixes for sidebar */
[dir="rtl"] .sidebar-content {
    direction: rtl;
}

[dir="rtl"] .app-title {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .app-subtitle {
    text-align: right;
    direction: rtl;
}

/* Fix Arabic date display spacing */
[dir="rtl"] .current-date-display h4 {
    direction: rtl;
    unicode-bidi: embed;
    font-weight: 600;
    line-height: 1.4;
}

[dir="rtl"] .date-meta {
    direction: rtl;
    unicode-bidi: embed;
}

/* Ensure proper spacing for Arabic numerals and text */
[dir="rtl"] #eventCount {
    direction: ltr;
    display: inline-block;
    unicode-bidi: embed;
}

/* Fix sidebar sections padding and alignment */
[dir="rtl"] .sidebar-section {
    text-align: right;
    direction: rtl;
}

/* Ensure dropdown positioning works correctly */
[dir="rtl"] .date-controls .dropdown-menu {
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    margin-top: 0.5rem;
    margin-right: 0;
}

/* Fix button icon spacing in RTL */
[dir="rtl"] .btn i + span,
[dir="rtl"] .btn span + i {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .btn i:first-child {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .btn i:last-child {
    margin-right: 0.5rem;
    margin-left: 0;
}
