/**
 * RTL Support for AutoReels AI
 * Comprehensive RTL styling for Arabic and other RTL languages
 */

/* =====================================================
   General RTL Overrides
   ===================================================== */

/* HTML and Body */
html[dir="rtl"],
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* All elements default to RTL - Force RTL on all elements when HTML has dir="rtl" */
[dir="rtl"] * {
    direction: rtl !important;
    unicode-bidi: embed;
}

/* Text alignment utilities */
[dir="rtl"] .text-left {
    text-align: right !important;
}

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

/* Flexbox utilities */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .justify-start {
    justify-content: flex-end;
}

[dir="rtl"] .justify-end {
    justify-content: flex-start;
}

/* Spacing utilities */
[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

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

/* Padding and margin swaps */
[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}

[dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Border radius */
[dir="rtl"] .rounded-l {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

[dir="rtl"] .rounded-r {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

/* =====================================================
   Public Header RTL
   ===================================================== */

/* Main header containers */
[dir="rtl"] header,
[dir="rtl"] .header,
[dir="rtl"] .public-header,
[dir="rtl"] nav {
    direction: rtl !important;
}

.public-header.rtl,
[dir="rtl"] .public-header {
    direction: rtl;
}

/* Header content layout - enhanced */
[dir="rtl"] .header-content,
[dir="rtl"] .header-container {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
}

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

/* Brand/Logo section - enhanced */
[dir="rtl"] .brand-section,
[dir="rtl"] .public-header .brand-section {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .brand-link,
[dir="rtl"] .public-header .brand-link {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
}

[dir="rtl"] .brand-text {
    text-align: right !important;
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .public-header .brand-logo,
[dir="rtl"] .public-header .brand-fallback {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .desktop-nav,
[dir="rtl"] .public-header .desktop-nav {
    display: flex !important;
    flex-direction: row-reverse !important;
    margin-left: 2rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .nav-link,
[dir="rtl"] .public-header .nav-link {
    margin-left: 1.5rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .public-header .nav-link:first-child {
    margin-right: 0;
}

[dir="rtl"] .right-section,
[dir="rtl"] .public-header .right-section {
    display: flex !important;
    flex-direction: row-reverse !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .language-switcher,
[dir="rtl"] .public-header .language-switcher {
    position: relative !important;
    margin-left: 0;
    margin-right: 1rem;
}

[dir="rtl"] .language-button {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
}

[dir="rtl"] .language-button svg:first-child {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

[dir="rtl"] .language-button .chevron {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .language-dropdown,
[dir="rtl"] .public-header .language-dropdown {
    right: auto !important;
    left: 0 !important;
    text-align: right !important;
}

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

[dir="rtl"] .public-header .login-button {
    margin-left: 0;
    margin-right: 0.75rem;
}

[dir="rtl"] .public-header .cta-button {
    margin-left: 0;
}

[dir="rtl"] .public-header .mobile-menu {
    right: auto;
    left: -100%;
}

[dir="rtl"] .public-header .mobile-menu.active {
    left: 0;
}

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

[dir="rtl"] .public-header .mobile-menu-nav-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 1.5rem;
}

[dir="rtl"] .public-header .mobile-menu-nav-item i {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .public-header .mobile-menu-nav-item.active {
    border-right: none;
    border-left: 3px solid var(--primary-color);
}

/* =====================================================
   Dashboard Header RTL
   ===================================================== */

.dashboard-header.rtl,
[dir="rtl"] .dashboard-header {
    direction: rtl;
}

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

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

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

[dir="rtl"] .dashboard-header .brand-logo,
[dir="rtl"] .dashboard-header .brand-fallback {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .dashboard-header .desktop-nav {
    margin-left: 2rem;
    margin-right: auto;
    flex-direction: row-reverse;
}

[dir="rtl"] .dashboard-header .nav-link {
    margin-left: 0;
    margin-right: 1.5rem;
    flex-direction: row-reverse;
}

[dir="rtl"] .dashboard-header .nav-link i {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .dashboard-header .nav-link:first-child {
    margin-right: 0;
}

[dir="rtl"] .dashboard-header .right-section {
    margin-left: 0;
    flex-direction: row-reverse;
}

[dir="rtl"] .dashboard-header .quick-actions {
    flex-direction: row-reverse;
    margin-right: 1rem;
    margin-left: 0;
}

[dir="rtl"] .dashboard-header .action-button {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .dashboard-header .action-button:last-child {
    margin-right: 0;
}

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

[dir="rtl"] .dashboard-header .notifications-trigger,
[dir="rtl"] .dashboard-header .language-trigger {
    margin-left: 0;
    margin-right: 0.75rem;
}

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

[dir="rtl"] .dashboard-header .user-avatar {
    margin-right: 0;
    margin-left: 0.75rem;
}

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

[dir="rtl"] .dashboard-header .language-dropdown,
[dir="rtl"] .dashboard-header .notifications-menu,
[dir="rtl"] .dashboard-header .user-menu {
    right: auto;
    left: 0;
    text-align: right;
}

[dir="rtl"] .dashboard-header .mobile-menu {
    right: auto;
    left: -100%;
}

[dir="rtl"] .dashboard-header .mobile-menu.active {
    left: 0;
}

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

[dir="rtl"] .admin-layout {
    direction: rtl;
}

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

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

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

[dir="rtl"] .sidebar-logo-icon {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .sidebar-toggle {
    transform: rotate(180deg);
}

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

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

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

[dir="rtl"] .nav-arrow {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(180deg);
}

[dir="rtl"] .nav-submenu {
    padding-left: 0;
    padding-right: 2.5rem;
}

[dir="rtl"] .admin-content {
    margin-right: var(--sidebar-width);
    margin-left: 0;
}

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

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

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

[dir="rtl"] .breadcrumb-separator {
    transform: rotate(180deg);
    margin: 0 0.5rem;
}

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

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

[dir="rtl"] .header-search-icon {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .header-search input {
    padding-left: 2.5rem;
    padding-right: 1rem;
    text-align: right;
}

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

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

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

[dir="rtl"] .user-avatar {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .user-dropdown,
[dir="rtl"] .notification-dropdown,
[dir="rtl"] .language-dropdown {
    right: auto;
    left: 0;
    text-align: right;
}

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

[dir="rtl"] .dropdown-item i {
    margin-right: 0;
    margin-left: 0.75rem;
}

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

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

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

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

[dir="rtl"] .input-group-prepend {
    margin-right: 0;
    margin-left: -1px;
}

[dir="rtl"] .input-group-append {
    margin-left: 0;
    margin-right: -1px;
}

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

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

[dir="rtl"] .btn i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* =====================================================
   Cards and Panels RTL
   ===================================================== */

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

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

/* =====================================================
   Tables RTL
   ===================================================== */

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

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

/* =====================================================
   Modals RTL
   ===================================================== */

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

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

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

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

/* =====================================================
   Alerts and Notifications RTL
   ===================================================== */

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

[dir="rtl"] .alert-dismissible .close {
    right: auto;
    left: 1.25rem;
}

/* =====================================================
   Tooltips and Popovers RTL
   ===================================================== */

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

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

/* =====================================================
   Icons and Badges RTL
   ===================================================== */

[dir="rtl"] .fa-chevron-right:before {
    content: "\f053"; /* fa-chevron-left */
}

[dir="rtl"] .fa-chevron-left:before {
    content: "\f054"; /* fa-chevron-right */
}

[dir="rtl"] .fa-angle-right:before {
    content: "\f104"; /* fa-angle-left */
}

[dir="rtl"] .fa-angle-left:before {
    content: "\f105"; /* fa-angle-right */
}

[dir="rtl"] .fa-arrow-right:before {
    content: "\f060"; /* fa-arrow-left */
}

[dir="rtl"] .fa-arrow-left:before {
    content: "\f061"; /* fa-arrow-right */
}

/* =====================================================
   Responsive RTL Adjustments
   ===================================================== */

@media (max-width: 768px) {
    [dir="rtl"] .mobile-menu {
        right: auto;
        left: -100%;
    }
    
    [dir="rtl"] .mobile-menu.active {
        right: auto;
        left: 0;
    }
    
    [dir="rtl"] .mobile-menu-button {
        margin-left: 0;
        margin-right: auto;
    }
}

/* =====================================================
   Animations RTL
   ===================================================== */

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

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

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

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

/* =====================================================
   Utility Classes for RTL
   ===================================================== */

[dir="rtl"] .float-left {
    float: right !important;
}

[dir="rtl"] .float-right {
    float: left !important;
}

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

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Border utilities */
[dir="rtl"] .border-left {
    border-left: none !important;
    border-right: 1px solid var(--border-color) !important;
}

[dir="rtl"] .border-right {
    border-right: none !important;
    border-left: 1px solid var(--border-color) !important;
}

/* Position utilities */
[dir="rtl"] .left-0 {
    left: auto !important;
    right: 0 !important;
}

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

/* Transform utilities */
[dir="rtl"] .translate-x-full {
    transform: translateX(-100%) !important;
}

[dir="rtl"] .-translate-x-full {
    transform: translateX(100%) !important;
}

/* =====================================================
   Bootstrap 5 RTL Utilities
   ===================================================== */

/* Margin Start/End (Bootstrap 5) */
[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }

[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }

/* Padding Start/End (Bootstrap 5) */
[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }

[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

/* Border Start/End (Bootstrap 5) */
[dir="rtl"] .border-start { 
    border-right: 1px solid #dee2e6 !important; 
    border-left: 0 !important; 
}

[dir="rtl"] .border-end { 
    border-left: 1px solid #dee2e6 !important; 
    border-right: 0 !important; 
}

/* Rounded Start/End (Bootstrap 5) */
[dir="rtl"] .rounded-start { 
    border-top-right-radius: 0.375rem !important; 
    border-bottom-right-radius: 0.375rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .rounded-end { 
    border-top-left-radius: 0.375rem !important; 
    border-bottom-left-radius: 0.375rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Position Start/End (Bootstrap 5) */
[dir="rtl"] .start-0 { right: 0 !important; left: auto !important; }
[dir="rtl"] .start-50 { right: 50% !important; left: auto !important; }
[dir="rtl"] .start-100 { right: 100% !important; left: auto !important; }

[dir="rtl"] .end-0 { left: 0 !important; right: auto !important; }
[dir="rtl"] .end-50 { left: 50% !important; right: auto !important; }
[dir="rtl"] .end-100 { left: 100% !important; right: auto !important; }

/* Float Start/End (Bootstrap 5) */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end { float: left !important; }

/* Breadcrumb separator fix */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\" !important;
    float: right !important;
    padding-left: 0.5rem !important;
    padding-right: 0 !important;
}