/* CRITICAL MOBILE RTL OVERRIDE - REAL DEVICE FIXES */
/* This file contains aggressive fixes for real mobile device RTL issues */
/* Load this file AFTER all other CSS to ensure highest specificity */

/* Force mobile viewport behavior */
@media screen and (max-width: 768px) {

    /* LEVEL 1: Root containers - Force proper RTL mobile behavior */
    html.rtl {
        direction: rtl !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        box-sizing: border-box !important;
        /* CRITICAL: Preserve color variables */
        background: var(--background) !important;
        color: var(--foreground) !important;
    }

    body.rtl {
        direction: rtl !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        /* CRITICAL: Preserve color variables */
        background: var(--background) !important;
        color: var(--foreground) !important;
    }

    /* LEVEL 2: Layout containers - Aggressive width control WITH color preservation */
    .rtl .dashboard-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        overflow-x: hidden !important;
        direction: rtl !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        /* CRITICAL: Eliminate ALL backgrounds */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        /* CRITICAL: Preserve actual content background */
        background: var(--background) !important;
        color: var(--foreground) !important;
    }

    .rtl .main-content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        direction: rtl !important;
        text-align: right !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 4rem 1rem 1rem 1rem !important;
        /* Start right below topbar */
        box-sizing: border-box !important;
        position: relative !important;
        /* CRITICAL: Clean background */
        background: var(--background) !important;
        color: var(--foreground) !important;
        /* CRITICAL: Ensure no mysterious positioning */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* LEVEL 3: Page containers - Force RTL layout with optimized spacing */
    .rtl .page {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Remove any conflicting padding */
    }

    /* LEVEL 4: Inventory specific containers */
    .rtl #inventory-page {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .rtl #inventory-content {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 1rem !important;
        /* Increased padding for better content spacing */
        position: relative !important;
    }

    /* LEVEL 5: Page headers - Critical for first impression */
    .rtl .page-header {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        padding: 1rem 0 !important;
        box-sizing: border-box !important;
    }

    .rtl .page-header h1 {
        direction: rtl !important;
        text-align: right !important;
        margin: 0 0 0.5rem 0 !important;
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    .rtl .page-header p {
        direction: rtl !important;
        text-align: right !important;
        margin: 0 !important;
        font-size: clamp(0.8rem, 3vw, 1rem) !important;
        line-height: 1.4 !important;
        color: var(--text-secondary, #666) !important;
    }

    /* LEVEL 6: Inventory header and search - Most problematic area */
    .rtl .inventory-header {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1rem 0.5rem !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }

    /* CRITICAL: Search input container */
    .rtl .inventory-search {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: Search input field - Main problem area WITH proper colors */
    .rtl .inventory-search .search-input,
    .rtl .search-input {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        padding: 0.75rem 3rem 0.75rem 0.75rem !important;
        margin: 0 !important;
        border: 1px solid var(--input-border, #ddd) !important;
        border-radius: var(--radius, 0.5rem) !important;
        font-size: 16px !important;
        /* Prevent iOS zoom */
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        background: var(--input, var(--surface, #fff)) !important;
        color: var(--foreground) !important;
        transition: all var(--transition-fast, 0.2s ease) !important;
    }

    .rtl .search-input:focus {
        border-color: var(--ring, var(--primary)) !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

    .rtl .inventory-search .search-input::placeholder,
    .rtl .search-input::placeholder {
        direction: rtl !important;
        text-align: right !important;
        color: var(--foreground-muted, var(--foreground-secondary, #999)) !important;
    }

    /* TOPBAR SEARCH FIELD FIX - Critical for mobile RTL */
    .rtl .topbar {
        background: var(--topbar, var(--surface)) !important;
        color: var(--foreground) !important;
        border-bottom: 1px solid var(--topbar-border, var(--border)) !important;
    }

    .rtl .topbar .search-input {
        background: var(--input, var(--surface-secondary)) !important;
        border: 1px solid var(--input-border, var(--border)) !important;
        color: var(--foreground) !important;
        direction: rtl !important;
        text-align: right !important;
        border-radius: var(--radius-lg, var(--radius)) !important;
        /* Fix the "box-like" appearance */
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem) var(--space-2, 0.5rem) 2.25rem !important;
    }

    /* Search icon positioning (RTL: icon aligns to the right/start) */
    .rtl .inventory-search::before,
    .rtl .search-wrapper::before {
        content: '🔍' !important;
        position: absolute !important;
        right: 0.75rem !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 1rem !important;
        color: #999 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* Topbar mobile search (RTL) — Perfect LTR parity */
    html[dir='rtl'] header.topbar .topbar-search-mobile {
        display: flex !important;
        flex: 1 0 auto !important;
        /* Match LTR exactly */
        max-width: 220px !important;
        /* Match LTR exactly */
        min-width: 140px !important;
        /* Match LTR exactly */
        margin: 0 0.25rem !important;
        /* Match LTR --space-1 */
        padding: 0 !important;
        order: 2 !important;
        /* Ensure proper order */
    }

    html[dir='rtl'] header.topbar .topbar-search-input-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 1.8rem !important;
        /* Smaller height for mobile */
        background: var(--surface-secondary, var(--input)) !important;
        border: 1px solid var(--input-border, var(--border)) !important;
        border-radius: 14px !important;
        /* Smaller border radius */
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        /* Prevent content overflow */
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile .search-icon {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        inset-inline-start: .4rem !important;
        /* Closer to edge */
        width: 0.8rem !important;
        /* Smaller icon for compact layout */
        height: 0.8rem !important;
        color: var(--foreground-muted, #94a3b8) !important;
        pointer-events: none !important;
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile .search-input {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        color: var(--foreground, #e5e7eb) !important;
        font-size: 13px !important;
        /* Smaller text for compact layout */
        direction: rtl !important;
        text-align: right !important;
        padding-block: .2rem !important;
        /* Minimal vertical padding */
        padding-inline-start: .4rem !important;
        /* Minimal padding after icon */
        padding-inline-end: 1.4rem !important;
        /* Space for icon */
        border-radius: 14px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile .search-input::placeholder {
        color: var(--foreground-muted, #94a3b8) !important;
        opacity: .95 !important;
    }

    /* CRITICAL: RTL Mobile Body and HTML - Eliminate ALL backgrounds and positioning issues */
    html[dir='rtl'],
    html[dir='rtl'] body {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        position: static !important;
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* CRITICAL: RTL Mobile Topbar - Force to viewport top */
    html[dir='rtl'] header.topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 4rem !important;
        z-index: 1000 !important;
        margin: 0 !important;
        background: var(--topbar) !important;
        background-color: var(--topbar) !important;
        border-bottom: 1px solid var(--topbar-border) !important;
        border-bottom: 1px solid var(--topbar-border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 0.75rem !important;
        /* Slightly increased padding for better edge clearance */
        gap: 0.25rem !important;
        /* Match LTR --space-1 */
        box-sizing: border-box !important;
        overflow: visible !important;
        /* Allow button overflow for proper touch targets */
    }

    /* RTL Mobile: Flexible element positioning with edge protection */
    html[dir='rtl'] header.topbar .topbar-left {
        flex: 0 0 auto !important;
        /* Fixed size, no grow/shrink */
        order: 1 !important;
        min-width: auto !important;
        width: auto !important;
        margin: 0 !important;
        position: relative !important;
        /* Ensure proper positioning */
    }

    /* Ensure hamburger button has proper touch target and positioning */
    html[dir='rtl'] header.topbar .topbar-left .sidebar-toggle {
        min-width: 44px !important;
        /* Minimum touch target size */
        min-height: 44px !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        border-radius: 0.375rem !important;
        position: relative !important;
        z-index: 10 !important;
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile {
        flex: 1 0 auto !important;
        /* Match LTR flexibility exactly */
        order: 2 !important;
        margin: 0 0.25rem !important;
        /* Match LTR --space-1 */
        max-width: 220px !important;
        /* Match LTR exactly */
        min-width: 140px !important;
        /* Match LTR exactly */
    }

    html[dir='rtl'] header.topbar .topbar-right {
        flex: 0 0 auto !important;
        /* Fixed size, no grow/shrink */
        order: 3 !important;
        min-width: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Hide desktop search container completely on mobile RTL */
    html[dir='rtl'] header.topbar .search-container {
        display: none !important;
    }

    /* Ensure optimal button spacing in RTL mobile to match LTR exactly */
    html[dir='rtl'] header.topbar .topbar-right {
        gap: 0.25rem !important;
        /* Match LTR --space-1 */
    }

    html[dir='rtl'] header.topbar .topbar-left {
        gap: 0.25rem !important;
        /* Match LTR --space-1 */
    }

    /* CRITICAL: RTL Mobile Sidebar - Hidden by default but can open */
    html[dir='rtl'] .sidebar {
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        top: 4rem !important;
        height: calc(100vh - 4rem) !important;
        width: 280px !important;
        z-index: 100 !important;
        transform: translateX(100%) !important;
        /* Hidden off-screen */
        visibility: hidden !important;
        opacity: 0 !important;
        /* CRITICAL: No borders when hidden to prevent the grey line */
        border: none !important;
        background: var(--sidebar-background) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        direction: rtl !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* RTL Mobile Sidebar Open State - Show with border */
    html[dir='rtl'] .sidebar.mobile-open {
        transform: translateX(0) !important;
        /* Slide in */
        visibility: visible !important;
        opacity: 1 !important;
        border-left: 1px solid var(--sidebar-border) !important;
        /* Only show border when open */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
            -10px 0 25px rgba(0, 0, 0, 0.1),
            -20px 0 48px rgba(0, 0, 0, 0.1) !important;
    }

    /* CRITICAL: Ensure no sidebar borders or backgrounds leak through when closed */
    html[dir='rtl'] .sidebar:not(.mobile-open)::before,
    html[dir='rtl'] .sidebar:not(.mobile-open)::after {
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        display: none !important;
    }

    /* Hide brand icon on mobile RTL devices */
    html[dir='rtl'] .brand-icon {
        display: none !important;
        /* Hide the 'D' icon on mobile */
    }

    html[dir='rtl'] .brand-text {
        display: none !important;
        /* Hide brand text on mobile RTL */
    }

    /* Desktop override - show brand elements on desktop RTL */
    @media (min-width: 1025px) {
        html[dir='rtl'] .brand-icon {
            display: flex !important;
            /* Show the 'D' icon on desktop RTL */
        }

        html[dir='rtl'] .brand-text {
            display: block !important;
            /* Show brand text on desktop RTL */
        }
    }

    /* Desktop override - show brand-text on larger screens */
    @media (min-width: 769px) {
        html[dir='rtl'] .brand-text {
            display: block !important;
            /* Show brand text on desktop RTL */
        }
    }

    /* LEVEL 7: Widget grid - Force vertical stacking */
    .rtl .inventory-widget-grid {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* LEVEL 8: Individual widgets - Force proper sizing WITH proper colors */
    .rtl .stock-overview-widget,
    .rtl .low-stock-widget,
    .rtl .movements-widget,
    .rtl .warehouse-card,
    .rtl .quick-action-card {
        width: 100% !important;
        max-width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        margin: 0 0 1rem 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        border-radius: var(--radius) !important;
        /* CRITICAL: Use proper CSS variables instead of hardcoded colors */
        background: var(--card, var(--surface, #ffffff)) !important;
        border: 1px solid var(--card-border, var(--border, #e0e0e0)) !important;
        color: var(--foreground) !important;
    }

    /* Widget headers */
    .rtl .widget-header {
        width: 100% !important;
        direction: rtl !important;
        text-align: right !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .rtl .widget-title {
        direction: rtl !important;
        text-align: right !important;
        flex: 1 !important;
        margin: 0 !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #333 !important;
    }

    .rtl .widget-subtitle {
        direction: rtl !important;
        text-align: right !important;
        margin: 0.25rem 0 0 0 !important;
        font-size: 0.85rem !important;
        color: #666 !important;
        line-height: 1.4 !important;
    }

    .rtl .widget-actions {
        direction: rtl !important;
        display: flex !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }

    /* LEVEL 9: Stock stats - Force mobile layout */
    .rtl .stock-stats {
        width: 100% !important;
        direction: rtl !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .rtl .stock-stat {
        width: 100% !important;
        direction: rtl !important;
        text-align: center !important;
        padding: 0.75rem !important;
        background: var(--surface, var(--card, #ffffff)) !important;
        border: 1px solid var(--border, #e0e0e0) !important;
        border-radius: var(--radius-sm, 0.375rem) !important;
        box-sizing: border-box !important;
    }

    .rtl .stock-stat-value {
        direction: ltr !important;
        unicode-bidi: embed !important;
        display: block !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
        text-align: center !important;
        color: var(--foreground) !important;
    }

    .rtl .stock-stat-label {
        direction: rtl !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        color: var(--foreground-secondary, #666) !important;
        line-height: 1.4 !important;
    }

    /* LEVEL 10: Action buttons - Force proper sizing */
    .rtl .inventory-actions {
        width: 100% !important;
        direction: rtl !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        margin-top: 1rem !important;
    }

    .rtl .btn {
        direction: rtl !important;
        text-align: center !important;
        padding: 0.625rem 1rem !important;
        border-radius: var(--radius, 0.375rem) !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        border: 1px solid var(--border, #ddd) !important;
        background: var(--secondary, #f8f9fa) !important;
        color: var(--secondary-foreground, var(--foreground)) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .rtl .btn:hover {
        background: var(--secondary-hover, #e9ecef) !important;
        border-color: var(--border-hover, #adb5bd) !important;
    }

    .rtl .btn-primary {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
        color: var(--primary-foreground) !important;
    }

    .rtl .btn-primary:hover {
        background: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
    }
}

/* LEVEL 11: Small mobile devices - Extra aggressive fixes */
@media screen and (max-width: 480px) {
    .rtl #inventory-content {
        padding: 0.25rem !important;
    }

    .rtl .inventory-header {
        padding: 0.75rem 0.25rem !important;
    }

    .rtl .stock-overview-widget,
    .rtl .low-stock-widget,
    .rtl .movements-widget,
    .rtl .warehouse-card,
    .rtl .quick-action-card {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .rtl .page-header h1 {
        font-size: 1.3rem !important;
    }

    .rtl .page-header p {
        font-size: 0.85rem !important;
    }

    .rtl .widget-title {
        font-size: 1rem !important;
    }

    .rtl .stock-stat {
        padding: 0.5rem !important;
    }
}

/* LEVEL 12: iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 768px) {
        .rtl .search-input {
            -webkit-appearance: none !important;
            appearance: none !important;
            border-radius: 0 !important;
        }

        .rtl .main-content {
            -webkit-overflow-scrolling: touch !important;
        }

        /* Fix iOS viewport units */
        .rtl .dashboard-container {
            width: 100% !important;
            max-width: 100% !important;
        }

        .rtl .main-content {
            width: 100% !important;
            max-width: 100% !important;
        }
    }
}

/* LEVEL 13: Android WebView specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 768px) {
    .rtl body {
        -webkit-text-size-adjust: 100% !important;
    }

    .rtl .search-input {
        font-size: 16px !important;
        /* Prevent zoom */
    }
}

/* Debug helper - Remove in production */
@media screen and (max-width: 768px) {
    .rtl-debug-marker {
        background: rgba(255, 0, 0, 0.1) !important;
        border: 1px dashed red !important;
    }

    .rtl-debug-marker::before {
        content: 'RTL-DEBUG: ' attr(data-debug) !important;
        position: absolute !important;
        top: -1px !important;
        right: -1px !important;
        background: red !important;
        color: white !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
        z-index: 999999 !important;
    }
}

/* FINANCE PAGE SPECIFIC MOBILE RTL FIXES */
.rtl #finance-page,
.rtl #finance-content {
    background: var(--background) !important;
    color: var(--foreground) !important;
    direction: rtl !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.rtl .finance-container {
    background: var(--background) !important;
    color: var(--foreground) !important;
    padding: var(--space-4, 1rem) !important;
    direction: rtl !important;
    text-align: right !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.rtl .finance-header {
    background: var(--gradient-secondary, var(--surface)) !important;
    border: 1px solid var(--card-border, var(--border)) !important;
    color: var(--foreground) !important;
    direction: rtl !important;
    text-align: right !important;
}

.rtl .finance-grid {
    direction: rtl !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
}

.rtl .pl-snapshot-widget,
.rtl .cashflow-timeline-widget,
.rtl .fin-kpi {
    background: var(--card, var(--surface)) !important;
    border: 1px solid var(--card-border, var(--border)) !important;
    color: var(--foreground) !important;
    direction: rtl !important;
    text-align: right !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: var(--space-4, 1rem) !important;
}

/* CRITICAL: Chart containers must have proper background */
.rtl .chart-container,
.rtl .finance-chart-container,
.rtl .cashflow-chart,
.rtl .pl-chart-container {
    background: var(--card, var(--surface, #ffffff)) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--card-border, var(--border)) !important;
    border-radius: var(--radius, 0.5rem) !important;
    padding: var(--space-4, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    /* Fix for endless white space */
    min-height: auto !important;
    height: auto !important;
}

/* CRITICAL: Fix white space issues in finance page */
.rtl .finance-page::after,
.rtl #finance-page::after,
.rtl #finance-content::after {
    display: none !important;
}

.rtl .finance-loading,
.rtl .chart-loading {
    background: var(--surface) !important;
    color: var(--foreground) !important;
}

/* CRITICAL: Chart canvas rendering fixes */
.rtl canvas#cashflowLineChart,
.rtl canvas {
    background: var(--card, var(--surface, #ffffff)) !important;
    border-radius: var(--radius, 0.5rem) !important;
    box-sizing: border-box !important;
}

/* Add missing CSS variables for chart backgrounds */
.rtl {
    --color-canvas-bg: var(--surface, var(--card, #ffffff)) !important;
    --chart-background: var(--surface, var(--card, #ffffff)) !important;
    --chart-text-color: var(--foreground, #333333) !important;
    --chart-grid-color: var(--border, #e0e0e0) !important;
    --chart-line-color: var(--primary, #3b82f6) !important;
}

/* Force chart container proper sizing and colors */
.rtl .cashflow-v2-canvas-wrap {
    background: var(--card, #ffffff) !important;
    border: 1px solid var(--card-border, var(--border)) !important;
    border-radius: var(--radius, 0.5rem) !important;
    padding: var(--space-4, 1rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* EXTRA SMALL MOBILE DEVICES - Maintain LTR parity */
@media screen and (max-width: 480px) {
    html[dir='rtl'] header.topbar .topbar-search-mobile {
        flex: 1 0 auto !important;
        /* Maintain flexibility like LTR */
        max-width: 180px !important;
        /* Slightly reduced for very small screens */
        min-width: 120px !important;
        margin: 0 0.25rem !important;
        /* Keep consistent with LTR */
    }

    html[dir='rtl'] header.topbar {
        padding: 0 0.5rem !important;
        /* Maintain consistent padding */
    }

    html[dir='rtl'] header.topbar .topbar-search-input-wrapper {
        height: 1.6rem !important;
        /* Smaller height */
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile .search-input {
        font-size: 12px !important;
        /* Smaller text */
        padding-inline-start: .3rem !important;
        padding-inline-end: 1.2rem !important;
    }

    html[dir='rtl'] header.topbar .topbar-search-mobile .search-icon {
        width: 0.7rem !important;
        height: 0.7rem !important;
        inset-inline-start: .3rem !important;
    }
}