/**
 * i18n Styles - RTL Support and Language-Specific Adjustments
 */

/* RTL Layout Support */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .container {
    direction: rtl;
}

/* Form adjustments for RTL */
.rtl .form-section,
.rtl .input-group,
.rtl .tab-content {
    text-align: right;
}

.rtl .input-group label {
    text-align: right;
}

.rtl .sum-indicator {
    text-align: left;
}

/* Navigation and tabs for RTL */
.rtl .tab-navigation {
    flex-direction: row-reverse;
}

.rtl .tab-button {
    flex-direction: row-reverse;
}

.rtl .tab-button i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Summary table for RTL */
.rtl .summary-table {
    direction: rtl;
}

.rtl .summary-table th,
.rtl .summary-table td {
    text-align: right;
}

.rtl .summary-table th:last-child,
.rtl .summary-table td:last-child {
    text-align: left;
}

/* Buttons and icons for RTL */
.rtl .help-icon,
.rtl .help-icon-inline {
    margin-left: 0.5rem;
    margin-right: 0;
}

.rtl .ai-assist-btn {
    direction: ltr; /* Keep button content LTR for consistency */
}

.rtl .submit-btn {
    flex-direction: row-reverse;
}

.rtl .submit-btn i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Language selector for RTL */
.rtl .language-selector {
    text-align: left;
    flex-direction: row-reverse;
}

.rtl .language-selector label {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Modal adjustments for RTL */
.rtl .modal-header {
    flex-direction: row-reverse;
}

.rtl .modal-close {
    margin-left: 0;
    margin-right: auto;
}

/* Importance indicators for RTL */
.rtl .importance-input {
    text-align: right;
}

.rtl .tab-importance {
    margin-left: 0;
    margin-right: auto;
}

/* Error messages for RTL */
.rtl .error-msg,
.rtl .error-message {
    text-align: right;
}

/* Population comparison for RTL */
.rtl .comparison-grid {
    direction: rtl;
}

.rtl .comparison-card {
    text-align: right;
}

.rtl .insights-list {
    text-align: right;
    padding-right: 0;
    padding-left: 1.5rem;
}

.rtl .insights-list li {
    text-align: right;
}

/* Language-specific font adjustments */
:lang(ar),
:lang(he),
:lang(fa),
:lang(ur) {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Traditional Arabic', 'Simplified Arabic', 'Arial', sans-serif;
}

:lang(zh) {
    font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
}

:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}

:lang(ko) {
    font-family: -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif;
}

:lang(th) {
    font-family: -apple-system, BlinkMacSystemFont, 'Thonburi', 'Leelawadee', 'Cordia New', sans-serif;
    line-height: 1.8; /* Thai text needs more line height */
}

/* Ensure number inputs remain LTR even in RTL layouts */
.rtl input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* Language selector styling */
.language-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.language-selector label {
    font-weight: 500;
    color: #666;
}

.language-selector select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    font-size: 0.9rem;
}

.language-selector select:hover {
    border-color: #999;
}

.language-selector select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Animation for language switching */
[data-i18n] {
    transition: opacity 0.2s ease-in-out;
}

.language-switching [data-i18n] {
    opacity: 0.7;
}

/* Accessibility improvements */
.rtl [aria-label] {
    /* Ensure ARIA labels work correctly in RTL */
}

/* Print styles for different languages */
@media print {
    .rtl {
        direction: rtl;
    }
    
    .language-selector {
        display: none;
    }
}

/* Responsive adjustments for RTL */
@media (max-width: 768px) {
    .rtl .summary-table {
        /* Ensure table remains readable on mobile in RTL */
        font-size: 0.85rem;
    }
    
    .rtl .tab-navigation {
        flex-direction: column;
    }
}