/* RTL (Right-to-Left) Support for Arabic */

/* RTL Direction for HTML */
html[dir="rtl"], .rtl {
    direction: rtl;
}

/* CRITICAL: Header RTL Layout Fix - New Flexbox Layout */
.rtl .top-header .header-content {
    flex-direction: row-reverse; /* Reverse the entire header layout */
}

.rtl .top-header .header-text {
    text-align: center; /* Keep text centered in RTL */
}

/* RTL: Maintain button order but with proper spacing */
.rtl .top-header .primary-buttons,
.rtl .top-header .secondary-buttons {
    flex-direction: row-reverse; /* Reverse button order within each group */
}

/* RTL button text alignment */
.rtl .primary-buttons > *,
.rtl .secondary-buttons > * {
    flex-direction: row-reverse;
}

/* Language dropdown positioning in RTL */
.rtl .language-dropdown {
    right: auto !important;
    left: 0 !important;
}

/* Object selector RTL */
.rtl .object-selector {
    text-align: right;
}

.rtl .object-grid {
    direction: rtl;
}

.rtl .object-item .object-name {
    text-align: right;
}

/* Status messages RTL */
.rtl .status-message {
    text-align: right;
}

.rtl .status-message .message {
    direction: rtl;
}

/* Settings modal RTL */
.rtl .settings-modal .settings-content {
    text-align: right;
}

.rtl .settings-modal .setting-item {
    flex-direction: row-reverse;
}

.rtl .settings-modal .setting-item .setting-label {
    text-align: right;
}

/* Progress overlay RTL */
.rtl .progress-overlay {
    text-align: right;
}

.rtl .progress-overlay .progress-text {
    direction: rtl;
}

/* Session info RTL */
.rtl .session-info .info-title {
    text-align: right;
}

.rtl .session-info .param-item {
    flex-direction: row-reverse;
}

.rtl .session-info .param-label {
    text-align: right;
}

.rtl .session-info .param-value {
    text-align: left; /* Keep numbers/coordinates left-aligned */
}

/* History page RTL */
.rtl .history-header {
    text-align: right;
}

.rtl .session-card .session-info {
    text-align: right;
}

.rtl .session-card .session-meta {
    text-align: right;
}

/* Share modal RTL */
.rtl .share-modal .share-title {
    text-align: right;
}

.rtl .share-modal .share-option {
    flex-direction: row-reverse;
    text-align: right;
}

/* Floating elements positioning for RTL */
.rtl .floating-ui.top-left {
    left: auto;
    right: 20px;
}

.rtl .floating-ui.top-right {
    right: auto;
    left: 20px;
}

.rtl .floating-ui.bottom-right {
    right: auto;
    left: 20px;
}

.rtl .floating-ui.bottom-left {
    left: auto;
    right: 20px;
}

/* Navigation buttons RTL spacing */
.rtl .nav-buttons {
    flex-direction: row-reverse;
    gap: 8px;
}

/* Map attribution positioning for RTL */
.rtl .leaflet-control-attribution {
    text-align: left; /* Keep attribution in original direction */
}

/* Language switcher RTL positioning */
.rtl .language-switcher {
    margin-left: 0;
    margin-right: 8px;
}

/* Form elements RTL */
.rtl input,
.rtl select,
.rtl textarea {
    text-align: right;
    direction: rtl;
}

.rtl input[type="number"] {
    direction: ltr; /* Keep numbers left-to-right */
    text-align: left;
}

/* Button text alignment */
.rtl .btn,
.rtl .action-btn,
.rtl .nav-btn {
    text-align: center; /* Keep buttons centered */
}

/* Flex containers RTL adjustments */
.rtl .flex-row {
    flex-direction: row-reverse;
}

.rtl .flex-col {
    text-align: right;
}

/* Popup content RTL */
.rtl .leaflet-popup-content {
    text-align: right;
    direction: rtl;
}

/* Make sure icons stay in logical position */
.rtl .object-item .emoji,
.rtl .nav-btn .icon,
.rtl .header-buttons .icon {
    display: inline-block;
}

/* Animation adjustments for RTL */
.rtl .slide-in-right {
    animation: slideInLeft 0.3s ease;
}

.rtl .slide-in-left {
    animation: slideInRight 0.3s ease;
}

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

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

/* Mobile-specific RTL adjustments */
@media (max-width: 768px) {
    .rtl .top-header .header-buttons {
        flex-wrap: wrap-reverse;
    }
    
    .rtl .object-grid {
        text-align: center; /* Center objects on mobile for better UX */
    }
    
    .rtl .status-message {
        text-align: center;
    }
}