/* =================================================
   RTL Styles for Mrebi.com - Complete & Detailed
   ================================================= */

/* RTL Base Direction */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl * {
    direction: rtl;
}

/* =================================================
   CUSTOM.CSS RTL CORRECTIONS
   ================================================= */

/* Activity Icons */
.rtl .activity-icon {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Achievement Icons */
.rtl .achievement-icon {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Lists Padding */
.rtl .prose ul,
.rtl .prose ol,
.rtl .content-blocks ul,
.rtl .content-blocks ol {
    padding-left: 0 !important;
    padding-right: 2.5rem !important;
}

/* Mobile Menu Button */
.rtl .mobile-menu-button {
    right: auto !important;
    left: 1rem !important;
}

/* Sidebar Order & Shadow */
.rtl .sidebar {
    order: 2;
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1) !important;
}

.rtl .main-content {
    order: 1;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    .rtl .sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .rtl .sidebar.active {
        transform: translateX(0) !important;
    }
}

/* Breadcrumb Direction */
.rtl .breadcrumb ol {
    flex-direction: row-reverse !important;
}

/* Space-x Utilities Fix */
.rtl .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse)) !important;
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

/* Navigation Scroll Buttons */
.rtl #scroll-left {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid #4b5563 !important;
    border-right: none !important;
}

.rtl #scroll-right {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid #4b5563 !important;
    border-left: none !important;
}

.rtl #scroll-left svg,
.rtl #scroll-right svg {
    transform: scaleX(-1);
}

/* Mobile Menu Button */
.rtl #mobile-menu-btn {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid #4b5563 !important;
}

/* Navigation Menu Padding */
.rtl .nav-menu-with-hamburger {
    padding-left: 48px !important;
    padding-right: 96px !important;
}

.rtl #nav-menu {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* Search Input */
.rtl input[name="q"] {
    padding-right: 3rem !important;
    padding-left: 1rem !important;
}

.rtl .search-icon {
    right: 1rem !important;
    left: auto !important;
}

/* Header Button Spacing */
.rtl #language-btn {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

.rtl #mobile-search-btn {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

.rtl #theme-toggle {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

.rtl .header-logo {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Border Utilities */
.rtl .border-r {
    border-right: none !important;
    border-left: 1px solid #4b5563 !important;
}

.rtl .border-l {
    border-left: none !important;
    border-right: 1px solid #4b5563 !important;
}

/* =================================================
   QUIZ.CSS RTL CORRECTIONS
   ================================================= */

/* Option Hover Transform */
.rtl .option-item:hover {
    transform: translateX(-3px) !important;
}

/* Loading Spinner Margin */
.rtl .loading-spinner::before {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* =================================================
   USERS.CSS RTL CORRECTIONS
   ================================================= */

/* Activity Icon */
.rtl .activity-icon {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Achievement Icon */
.rtl .achievement-icon {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Quiz History Table */
.rtl .quiz-history-table th,
.rtl .quiz-history-table td {
    text-align: right !important;
}

/* =================================================
   CODE-EDITOR.CSS RTL CORRECTIONS
   ================================================= */

/* Keep Code Blocks LTR */
.rtl .code-editor-container,
.rtl .code-display,
.rtl .code-block,
.rtl .code-block pre,
.rtl .code-block code {
    direction: ltr !important;
    text-align: left !important;
}

/* Line Numbers */
.rtl .line-numbers {
    right: 0 !important;
    left: auto !important;
    border-right: none !important;
    border-left: 1px solid #e9ecef !important;
    text-align: left !important;
}

/* Code Editor Padding */
.rtl .code-editor {
    padding-right: 3.25rem !important;
    padding-left: 0.75rem !important;
}

/* =================================================
   CODE-RUNNER.CSS RTL CORRECTIONS
   ================================================= */

/* Line Numbers */
.rtl #line-numbers {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Loading Spinner */
.rtl .loading-spinner {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* =================================================
   CREATIVE-TEMPLATES.CSS RTL CORRECTIONS
   ================================================= */

/* Search Result Info Margin */
.rtl .search-result-preview {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

/* Code Tab Fixes - Keep LTR */
.rtl .code-content,
.rtl .code-tab {
    direction: ltr !important;
    text-align: left !important;
}

/* =================================================
   AI-PROMPTS.CSS RTL CORRECTIONS
   ================================================= */

/* Filter Row Direction */
.rtl .filter-row {
    direction: rtl !important;
}

/* Pagination Direction */
.rtl .pagination {
    direction: rtl !important;
}

/* Prompt Tags Direction */
.rtl .prompt-tags {
    direction: rtl !important;
}

/* Stats Section Direction */
.rtl .stats-section {
    direction: rtl !important;
}

/* Prompt Tag Before Margin */
.rtl .prompt-tag::before {
    margin-right: 0 !important;
    margin-left: 0.125rem !important;
}

/* Search Result Preview */
.rtl .search-result-item {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

/* =================================================
   COMING SOON MODAL RTL CORRECTIONS
   ================================================= */

/* Modal Content Direction */
.rtl .coming-soon-content {
    direction: rtl !important;
}

/* Email Input Group - Keep LTR */
.rtl .email-input-group {
    direction: ltr !important;
}

/* Related Link Hover */
.rtl .related-link:hover {
    transform: translateX(-4px) !important;
}

/* =================================================
   DARK MODE RTL ADJUSTMENTS
   ================================================= */

.dark.rtl .sidebar {
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.3) !important;
}

.dark.rtl #mobile-menu-btn {
    border-left-color: #4b5563 !important;
}

.dark.rtl #mobile-menu-btn.active {
    border-left-color: #6b7280 !important;
}

.dark.rtl .line-numbers {
    background: #374151 !important;
    border-left-color: #4b5563 !important;
}

.dark.rtl .border-r {
    border-left-color: #4b5563 !important;
}

.dark.rtl .border-l {
    border-right-color: #4b5563 !important;
}

@media (max-width: 768px) {
    .dark.rtl .sidebar {
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
    }
}

/* =================================================
   MOBILE RESPONSIVENESS RTL
   ================================================= */

@media (max-width: 768px) {
    .rtl .nav-menu-with-hamburger {
        padding-left: 0 !important;
        padding-right: 64px !important;
    }
    
    .rtl #nav-menu {
        padding-left: 0 !important;
        padding-right: 64px !important;
    }
    
    .rtl #line-numbers {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

@media (max-width: 480px) {
    /* Header Mobile Layout - Keep Search Hidden */
    .rtl header .flex-1.max-w-lg.mx-8.hidden.md\:block {
        display: none !important;
        margin: 0 !important;
    }
    
    /* Right Section Button Spacing */
    .rtl header .flex.items-center.space-x-3:last-child {
        gap: 0.5rem !important;
    }
}

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

@media (prefers-contrast: high) {
    .rtl #scroll-left,
    .rtl #scroll-right {
        border: 2px solid #000 !important;
    }
    
    .dark.rtl #scroll-left,
    .dark.rtl #scroll-right {
        border: 2px solid #fff !important;
    }
    
    .rtl .mobile-menu-button {
        border: 2px solid #000 !important;
    }
    
    .dark.rtl .mobile-menu-button {
        border: 2px solid #fff !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rtl #scroll-left svg,
    .rtl #scroll-right svg {
        transform: none !important;
    }
    
    .rtl .related-link:hover {
        transform: none !important;
    }
    
    .rtl .option-item:hover {
        transform: none !important;
    }
    
    .rtl #mobile-menu-btn:hover {
        transform: none !important;
    }
    
    .rtl #mobile-menu-btn svg {
        transform: none !important;
    }
}

/* =================================================
   SPECIFIC ELEMENT SPACING CORRECTIONS
   ================================================= */

/* Header Space Adjustments */
.rtl .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

.rtl .space-x-3 > :last-child {
    margin-right: 0 !important;
}

/* Course Navigation Items */
.rtl .nav-separator {
    margin: 0 0.25rem !important;
}

/* Progress Section Margins */
.rtl .quiz-progress-wrapper {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

@media (max-width: 768px) {
    .rtl .quiz-progress-wrapper {
        margin-left: 0 !important;
    }
}

/* Form Input Icons */
.rtl .input-icon-right {
    right: auto !important;
    left: 0.75rem !important;
}

.rtl .input-icon-left {
    left: auto !important;
    right: 0.75rem !important;
}

/* Card Action Buttons */
.rtl .card-actions {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Notification Icons */
.rtl .notification-icon {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Badge Positioning */
.rtl .badge-notification {
    right: auto !important;
    left: -0.5rem !important;
}

/* =================================================
   FINAL OVERRIDES
   ================================================= */

/* Ensure All Margins Are Properly Reversed */
.rtl .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.rtl .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.rtl .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
.rtl .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }
.rtl .mr-5 { margin-right: 0 !important; margin-left: 1.25rem !important; }
.rtl .mr-6 { margin-right: 0 !important; margin-left: 1.5rem !important; }
.rtl .mr-8 { margin-right: 0 !important; margin-left: 2rem !important; }

.rtl .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.rtl .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.rtl .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
.rtl .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; }
.rtl .ml-5 { margin-left: 0 !important; margin-right: 1.25rem !important; }
.rtl .ml-6 { margin-left: 0 !important; margin-right: 1.5rem !important; }
.rtl .ml-8 { margin-left: 0 !important; margin-right: 2rem !important; }

/* Ensure All Paddings Are Properly Reversed */
.rtl .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
.rtl .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
.rtl .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; }
.rtl .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; }
.rtl .pr-5 { padding-right: 0 !important; padding-left: 1.25rem !important; }
.rtl .pr-6 { padding-right: 0 !important; padding-left: 1.5rem !important; }
.rtl .pr-8 { padding-right: 0 !important; padding-left: 2rem !important; }

.rtl .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
.rtl .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
.rtl .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; }
.rtl .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }
.rtl .pl-5 { padding-left: 0 !important; padding-right: 1.25rem !important; }
.rtl .pl-6 { padding-left: 0 !important; padding-right: 1.5rem !important; }
.rtl .pl-8 { padding-left: 0 !important; padding-right: 2rem !important; }

/* Positioning Fixes */
.rtl .right-0 { right: auto !important; left: 0 !important; }
.rtl .right-1 { right: auto !important; left: 0.25rem !important; }
.rtl .right-2 { right: auto !important; left: 0.5rem !important; }
.rtl .right-3 { right: auto !important; left: 0.75rem !important; }
.rtl .right-4 { right: auto !important; left: 1rem !important; }

.rtl .left-0 { left: auto !important; right: 0 !important; }
.rtl .left-1 { left: auto !important; right: 0.25rem !important; }
.rtl .left-2 { left: auto !important; right: 0.5rem !important; }
.rtl .left-3 { left: auto !important; right: 0.75rem !important; }
.rtl .left-4 { left: auto !important; right: 1rem !important; }