/* RTL Styles for Arabic Language */

/* Header Section - Icon and text spacing */
[dir="rtl"] .fas.fa-plus {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Statistics Cards - Icon spacing */
[dir="rtl"] .ml-5 {
    margin-left: 0;
    margin-right: 1.25rem;
}

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

/* Search and Filter Section - Icon spacing in labels */
[dir="rtl"] .fas.fa-search.mr-2,
[dir="rtl"] .fas.fa-filter.mr-2,
[dir="rtl"] .fas.fa-sort.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Button icon spacing */
[dir="rtl"] .fas.fa-search.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

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

/* Flex container spacing adjustments */
[dir="rtl"] .space-x-3>*+* {
    margin-left: 0;
    margin-right: 0.75rem;
}

[dir="rtl"] .space-x-2>*+* {
    margin-left: 0;
    margin-right: 0.5rem;
}

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

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

/* Justify content for RTL - DO NOT reverse main header */
[dir="rtl"] .justify-between:not(.mb-8 .justify-between):not(.mb-8 *) {
    flex-direction: row-reverse;
}

/* Specifically ensure main header stays normal */
[dir="rtl"] .mb-8 .flex.items-center.justify-between,
[dir="rtl"] .header .flex.items-center.justify-between {
    flex-direction: row !important;
}

/* Campaign cards - Icon spacing */
[dir="rtl"] .fas.fa-bullhorn,
[dir="rtl"] .fas.fa-play-circle,
[dir="rtl"] .fas.fa-check-circle,
[dir="rtl"] .fas.fa-dollar-sign {
    margin-right: 0;
}

/* Campaign list header icon spacing */
[dir="rtl"] .fas.fa-list {
    margin-right: 0;
}

/* Ensure proper spacing for inline flex items with icons */
[dir="rtl"] .inline-flex.items-center .fas {
    margin-right: 0;
}

[dir="rtl"] .inline-flex.items-center .fas:first-child {
    margin-left: 0.5rem;
}

/* Loading indicator icon spacing */
[dir="rtl"] .fas.fa-spinner.fa-spin.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Specific fixes for search form elements */
[dir="rtl"] label .fas {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Button containers - reverse spacing only for search form */
[dir="rtl"] .px-6.py-6 .flex.items-center.space-x-2 {
    flex-direction: row-reverse;
}

[dir="rtl"] .px-6.py-6 .flex.items-center.space-x-3 {
    flex-direction: row-reverse;
}

/* Header section flex alignment - DO NOT affect main header */
[dir="rtl"] .px-6.py-6 .flex.items-center.justify-between>div:first-child {
    text-align: right;
}

[dir="rtl"] .px-6.py-6 .flex.items-center.justify-between>div:last-child {
    text-align: left;
}

/* Override specific margin utilities for RTL */
[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

/* Ensure icons in flex containers have proper RTL spacing */
[dir="rtl"] .flex.items-center .fas:not(:last-child) {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Card statistics - proper RTL alignment */
[dir="rtl"] .flex.items-center .flex-shrink-0+.ml-5 {
    margin-left: 0;
    margin-right: 1.25rem;
}

[dir="rtl"] .flex.items-center .flex-shrink-0+.ml-3 {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Search section header - icon and text spacing */
[dir="rtl"] .bg-gradient-to-r .flex.items-center .flex-shrink-0+.ml-3 {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Campaign list header - icon and text spacing */
[dir="rtl"] .bg-gradient-to-r.from-indigo-500 .flex.items-center .flex-shrink-0+.ml-3 {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Button group alignment - reverse for RTL only in search section */
[dir="rtl"] .px-6.py-6 .flex.items-center.justify-between .flex.items-center:first-child {
    flex-direction: row-reverse;
}

/* Ensure proper text direction inheritance */
[dir="rtl"] * {
    direction: rtl;
}

/* Form inputs RTL alignment */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

/* Fix campaign status badges alignment */
[dir="rtl"] .absolute {
    left: auto;
    right: 1rem;
}

/* Campaign cards status positioning */
[dir="rtl"] .absolute.top-4.right-4 {
    right: auto;
    left: 1rem;
}

/* Fix for button icons - ensure they stay on the correct side */
[dir="rtl"] button .fas:first-child {
    margin-right: 0;
    margin-left: 0.5rem;
    order: 2;
}

[dir="rtl"] button span:last-child {
    order: 1;
}

/* Ensure create campaign button icon is on the right side for RTL */
[dir="rtl"] a[href*="create"] .fas.fa-plus {
    margin-right: 0;
    margin-left: 0.5rem;
    order: 2;
}

[dir="rtl"] a[href*="create"] {
    flex-direction: row-reverse;
}

/* Fix for view toggle buttons positioning */
[dir="rtl"] .border.border-gray-200.bg-white.p-1 {
    flex-direction: row-reverse;
}

/* Campaign header container - reverse order for RTL */
[dir="rtl"] .campaign-header-container {
    flex-direction: row-reverse;
}

/* Campaign title section - align to right in RTL */
[dir="rtl"] .campaign-title-section {
    justify-self: end;
    text-align: right;
    order: 2;
}

/* Campaign toggle section - align to left in RTL */
[dir="rtl"] .campaign-toggle-section {
    justify-self: start;
    order: 1;
}

/* Campaign toggle section spacing fix for RTL */
[dir="rtl"] .campaign-toggle-section {
    margin-left: 0;
    margin-right: auto;
}

/* Campaign title section spacing fix for RTL */
[dir="rtl"] .campaign-title-section {
    margin-right: 0;
    margin-left: auto;
}

/* Ensure proper text alignment for campaign title in RTL */
[dir="rtl"] .campaign-title-section h3,
[dir="rtl"] .campaign-title-section p {
    text-align: right;
}

/* Campaign status badges - fix positioning */
[dir="rtl"] .bg-green-100.text-green-800,
[dir="rtl"] .bg-blue-100.text-blue-800,
[dir="rtl"] .bg-red-100.text-red-800 {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Campaign card action buttons - icon spacing */
[dir="rtl"] .fas.fa-eye.mr-1,
[dir="rtl"] .fas.fa-edit.mr-1,
[dir="rtl"] .fas.fa-credit-card.mr-1,
[dir="rtl"] .fas.fa-trash.mr-1,
[dir="rtl"] .fas.fa-users.mr-1,
[dir="rtl"] .fas.fa-calendar.mr-1,
[dir="rtl"] .fas.fa-palette.mr-1 {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Campaign info icons spacing */
[dir="rtl"] .ml-1 {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Remove aggressive direction inheritance that affects layout */
[dir="rtl"] .min-h-screen,
[dir="rtl"] .mx-auto,
[dir="rtl"] .mb-8,
[dir="rtl"] .grid {
    direction: ltr;
}

/* Only apply RTL direction to text content */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] label,
[dir="rtl"] button,
[dir="rtl"] a {
    direction: rtl;
}

/* Prevent main page header from reversing */
[dir="rtl"] .mb-8 .flex.items-center.justify-between {
    flex-direction: row;
}

/* Sidebar fixes - prevent RTL from affecting layout */
[dir="rtl"] #sidebar,
[dir="rtl"] .sidebar,
[dir="rtl"] .main-content {
    direction: ltr;
}

/* Sidebar menu items RTL text but keep structure */
[dir="rtl"] .sidebar a,
[dir="rtl"] .sidebar span,
[dir="rtl"] .sidebar .menu-text {
    direction: rtl;
    text-align: right;
}

/* Prevent campaign grid from reversing */
[dir="rtl"] .grid.grid-cols-1.gap-6 {
    direction: ltr;
}

/* Fix campaign card status in grid view */
[dir="rtl"] .mb-3.flex.items-start.justify-between .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Fix status position in table/list view - move to left side */
[dir="rtl"] #list-view .flex.items-start.justify-between {
    flex-direction: row-reverse;
}

[dir="rtl"] .space-y-4 .rounded-lg.border .flex.items-start.justify-between .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
    order: -1;
}

/* Campaign grid alignment - start from right side in RTL */
[dir="rtl"] .p-6 #grid-view.grid.grid-cols-1.gap-6.md\:grid-cols-2.lg\:grid-cols-4 {
    direction: rtl;
    justify-items: start;
}

[dir="rtl"] .p-6 #list-view.space-y-4 {
    direction: rtl;
}

/* Grid view campaign header - reverse order for RTL */
[dir="rtl"] .campaign-grid-header {
    flex-direction: row-reverse;
}

/* Grid view campaign status - position on left in RTL */
[dir="rtl"] .campaign-grid-status {
    margin-left: 0;
    margin-right: 0.5rem;
    order: 1;
}

/* Grid view campaign title - position on right in RTL */
[dir="rtl"] .campaign-grid-title {
    text-align: right;
    order: 2;
}

/* Main Application Header RTL Fixes */
/* Header container - reverse main sections for RTL */
[dir="rtl"] .main-header {
    flex-direction: row-reverse;
}

/* Left section (sidebar toggle & breadcrumb) - position on right in RTL */
[dir="rtl"] .header-left-section {
    order: 3;
    margin-left: 0;
    margin-right: 1rem;
}

/* Fix spacing for left section elements in RTL */
[dir="rtl"] .header-left-section>*:not(:first-child) {
    margin-left: 0;
    margin-right: 1rem;
}

/* Center section (search) - keep in center */
[dir="rtl"] .header-center-section {
    order: 2;
}

/* Right section (notifications, profile) - position on left in RTL */
[dir="rtl"] .header-right-section {
    order: 1;
    margin-right: 0;
    margin-left: 1rem;
}

/* Individual element ordering in right section for RTL */
[dir="rtl"] .header-mobile-search {
    order: 1;
}

[dir="rtl"] .header-notifications {
    order: 2;
}

[dir="rtl"] .header-language-switcher {
    order: 3;
}

[dir="rtl"] .header-user-profile {
    order: 4;
}

/* Fix spacing for right section elements in RTL */
[dir="rtl"] .header-right-section>*:not(:first-child) {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Fix breadcrumb spacing in RTL */
[dir="rtl"] .header-breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .header-breadcrumb>*:not(:first-child) {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Fix breadcrumb chevron direction in RTL */
[dir="rtl"] .header-breadcrumb .fa-chevron-right {
    transform: rotate(180deg);
}

/* Search bar RTL fixes */
[dir="rtl"] .header-center-section input[type="text"] {
    text-align: right;
    padding-left: 1rem;
    padding-right: 2.5rem;
}

[dir="rtl"] .header-center-section .absolute.inset-y-0.left-0 {
    left: auto;
    right: 0;
    padding-left: 0;
    padding-right: 0.75rem;
}

/* User profile dropdown positioning in RTL */
[dir="rtl"] .header-user-profile .absolute.right-0.z-50 {
    right: auto;
    left: 0;
}

/* Notification dropdown positioning in RTL */
[dir="rtl"] .header-notifications .absolute.right-0.z-50.mt-2.w-96 {
    right: auto;
    left: 0;
}