/**
 * RTL (Right-to-Left) Language Support
 * 
 * This file provides CSS overrides for RTL languages like Arabic, Hebrew, and Persian.
 * Applied when html[dir="rtl"] or body.rtl is set.
 * 
 * Uses CSS logical properties where possible for automatic flipping.
 * Manual overrides for components that need explicit RTL handling.
 */

/* ==========================================================================
   Base RTL Settings
   ========================================================================== */

[dir="rtl"] {
    /* Use RTL-friendly font stack */
    --font-family-rtl: 'Segoe UI', 'Tahoma', 'Arial', 'Noto Sans Arabic', 'Noto Sans Hebrew', sans-serif;
}

[dir="rtl"] body {
    font-family: var(--font-family-rtl);
    text-align: right;
}

/* ==========================================================================
   Layout - Main Structure
   ========================================================================== */

/* Flip the sidebar to the right */
[dir="rtl"] .app-container {
    flex-direction: row-reverse;
}

/* Left sidebar moves to the right */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid var(--border-color, #e0e0e0);
    border-right: none;
}

/* Page container margins swap */
[dir="rtl"] .page-container {
    margin-left: 370px; /* Right sidebar width */
    margin-right: var(--sidebar-width, 240px); /* Left sidebar width */
}

/* Main content stays centered */
[dir="rtl"] .main-content {
    margin-left: auto;
    margin-right: auto;
}

/* Right sidebar moves to the left */
[dir="rtl"] .right-sidebar {
    right: auto;
    left: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

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

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

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

[dir="rtl"] .search-container {
    margin-left: auto;
    margin-right: 20px;
}

[dir="rtl"] .search-container input {
    padding-left: 16px;
    padding-right: 40px;
    text-align: right;
}

[dir="rtl"] .search-icon {
    left: auto;
    right: 12px;
}

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */

[dir="rtl"] .sidebar-nav {
    text-align: right;
}

[dir="rtl"] .nav-item {
    flex-direction: row-reverse;
    padding-left: 16px;
    padding-right: 16px;
}

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

[dir="rtl"] .nav-item span {
    margin-left: 0;
    margin-right: 0;
}

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

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

/* ==========================================================================
   Thread Cards / Posts
   ========================================================================== */

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

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

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

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

[dir="rtl"] .thread-meta > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] .thread-meta > *:last-child {
    margin-left: 0;
}

[dir="rtl"] .thread-circle-link,
[dir="rtl"] .thread-author-link,
[dir="rtl"] .circle-name,
[dir="rtl"] .thread-author {
    direction: ltr;
    unicode-bidi: embed;
}

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

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

[dir="rtl"] .thread-action .action-icon {
    margin-right: 0;
    margin-left: 4px;
}

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

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

[dir="rtl"] .thread-title {
    text-align: right;
}

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

/* Post flair and badges */
[dir="rtl"] .post-flair {
    margin-left: 8px;
    margin-right: 0;
}

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

/* Award display on posts */
[dir="rtl"] .thread-awards {
    flex-direction: row-reverse;
}

/* ==========================================================================
   Comments
   ========================================================================== */

/* Comment item - flip padding */
[dir="rtl"] .comment-item {
    padding-left: 0;
    padding-right: 1px;
    direction: rtl;
}

/* Comment thread line moves to right side */
[dir="rtl"] .comment-replies {
    margin-left: 0;
    margin-right: 12px;
    padding-left: 0;
    padding-right: 12px;
}

/* The vertical thread line on the right */
[dir="rtl"] .comment-replies::before {
    left: auto;
    right: 0;
}

/* Comment header - flip all children to RTL order */
[dir="rtl"] .comment-header {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    direction: rtl !important;
    text-align: right !important;
}

/* Also target with html selector for higher specificity */
html[dir="rtl"] .comment-header {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

/* Comment header children spacing fix */
[dir="rtl"] .comment-header > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Collapse button stays on far right in RTL */
[dir="rtl"] .comment-collapse-btn {
    order: 0;
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Avatar next to collapse button */
[dir="rtl"] .comment-author-avatar {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Comment meta (author, time, score) */
[dir="rtl"] .comment-meta {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}

/* Keep usernames LTR for readability */
[dir="rtl"] .comment-author {
    direction: ltr;
    unicode-bidi: embed;
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* Score and time spacing */
[dir="rtl"] .comment-score,
[dir="rtl"] .comment-time {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* OP badge */
[dir="rtl"] .comment-op-badge {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* Options button stays on the left (far end in RTL) */
[dir="rtl"] .comment-options-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Comment actions (vote, reply, etc.) */
[dir="rtl"] .comment-actions {
    flex-direction: row-reverse;
}

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

[dir="rtl"] .comment-action .action-icon {
    margin-right: 0;
    margin-left: 4px;
}

/* Comment content */
[dir="rtl"] .comment-content,
[dir="rtl"] .comment-body {
    text-align: right;
}

/* Reply form */
[dir="rtl"] .comment-reply-form {
    margin-left: 0;
    margin-right: 0;
}

/* Legacy comment styles */
[dir="rtl"] .comment {
    border-left: none;
    border-right: 2px solid var(--border-color, #e0e0e0);
    padding-left: 0;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .comment-nested {
    margin-left: 0;
    margin-right: 24px;
}

/* ==========================================================================
   Forms and Inputs
   ========================================================================== */

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

[dir="rtl"] .form-group {
    text-align: right;
}

[dir="rtl"] .form-group label {
    text-align: right;
}

[dir="rtl"] .input-icon-left {
    left: auto;
    right: 12px;
}

[dir="rtl"] .input-icon-right {
    right: auto;
    left: 12px;
}

[dir="rtl"] .input-with-icon-left {
    padding-left: 16px;
    padding-right: 40px;
}

[dir="rtl"] .input-with-icon-right {
    padding-right: 16px;
    padding-left: 40px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

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

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

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

/* ==========================================================================
   Modals and Dropdowns
   ========================================================================== */

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

[dir="rtl"] .modal-close {
    left: 16px;
    right: auto;
}

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

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

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

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

[dir="rtl"] .dropdown-item .icon {
    margin-right: 0;
    margin-left: 8px;
}

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

[dir="rtl"] .notification {
    flex-direction: row-reverse;
    text-align: right;
}

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

[dir="rtl"] .notification-close {
    left: 8px;
    right: auto;
}

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

/* ==========================================================================
   User Profile
   ========================================================================== */

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

[dir="rtl"] .profile-info {
    text-align: right;
    margin-left: 0;
    margin-right: 20px;
}

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

/* ==========================================================================
   Badges and Tags
   ========================================================================== */

[dir="rtl"] .badge,
[dir="rtl"] .tag {
    margin-left: 4px;
    margin-right: 0;
}

[dir="rtl"] .badge:first-child,
[dir="rtl"] .tag:first-child {
    margin-left: 4px;
    margin-right: 0;
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

[dir="rtl"] .tooltip-left {
    left: auto;
    right: 100%;
}

[dir="rtl"] .tooltip-right {
    right: auto;
    left: 100%;
}

/* ==========================================================================
   Icons that need flipping
   ========================================================================== */

/* Flip directional icons */
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-chevron-left,
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] [class*="arrow-left"],
[dir="rtl"] [class*="arrow-right"],
[dir="rtl"] [class*="chevron-left"],
[dir="rtl"] [class*="chevron-right"] {
    transform: scaleX(-1);
}

/* Navigation arrows */
[dir="rtl"] .nav-arrow,
[dir="rtl"] .back-arrow,
[dir="rtl"] .forward-arrow {
    transform: scaleX(-1);
}

/* ==========================================================================
   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 {
    padding-right: 16px;
    padding-left: 8px;
}

[dir="rtl"] th:last-child,
[dir="rtl"] td:last-child {
    padding-left: 16px;
    padding-right: 8px;
}

/* ==========================================================================
   Lists
   ========================================================================== */

[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 20px;
}

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

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

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

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

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

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

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

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

/* ==========================================================================
   Tabs
   ========================================================================== */

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

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

/* ==========================================================================
   Progress Bars
   ========================================================================== */

[dir="rtl"] .progress-bar {
    direction: rtl;
}

[dir="rtl"] .progress-fill {
    transform-origin: right;
}

/* ==========================================================================
   Animations - Adjust for RTL
   ========================================================================== */

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

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* ==========================================================================
   Mobile Responsive RTL
   ========================================================================== */

@media (max-width: 768px) {
    [dir="rtl"] .page-container {
        margin-left: 0;
        margin-right: 0;
    }
    
    [dir="rtl"] .main-content {
        margin-right: 0;
        margin-left: 0;
    }
    
    [dir="rtl"] .mobile-header {
        flex-direction: row-reverse;
    }
    
    [dir="rtl"] .mobile-menu-btn {
        margin-right: 0;
        margin-left: auto;
    }
    
    [dir="rtl"] .sidebar {
        left: auto;
        right: -280px;
        transform: translateX(0);
    }
    
    [dir="rtl"] .sidebar.open {
        right: 0;
        transform: translateX(0);
    }
    
    /* Right sidebar is hidden on mobile, but just in case */
    [dir="rtl"] .right-sidebar {
        display: none;
    }
}

/* Tablet breakpoint */
@media (max-width: 1200px) and (min-width: 769px) {
    [dir="rtl"] .page-container {
        margin-left: 0; /* Right sidebar hidden */
        margin-right: var(--sidebar-width, 240px);
    }
    
    [dir="rtl"] .right-sidebar {
        display: none;
    }
}

/* ==========================================================================
   Admin Panel RTL
   ========================================================================== */

[dir="rtl"] .admin-sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid var(--border-color);
    border-right: none;
}

[dir="rtl"] .admin-content {
    margin-left: 0;
    margin-right: 250px;
}

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

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

[dir="rtl"] .admin-nav-item .icon {
    margin-right: 0;
    margin-left: 12px;
}

/* ==========================================================================
   Sidebar Widgets RTL
   ========================================================================== */

[dir="rtl"] .sidebar-widget {
    text-align: right;
}

[dir="rtl"] .widget-header {
    text-align: right;
}

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

[dir="rtl"] .trending-item,
[dir="rtl"] .recent-post-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .trending-item .trending-rank {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .trending-item .trending-info {
    text-align: right;
}

[dir="rtl"] .recent-post-item .post-thumbnail {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .recent-post-item .post-info {
    text-align: right;
}

/* ==========================================================================
   Dark Mode RTL (Combine with existing dark mode styles)
   ========================================================================== */

[data-theme="dark"][dir="rtl"] .sidebar {
    border-left-color: var(--dark-border-color, #333);
    border-right-color: transparent;
}

[data-theme="dark"][dir="rtl"] .comment {
    border-right-color: var(--dark-border-color, #333);
}

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

@media print {
    [dir="rtl"] body {
        direction: rtl;
    }
}