/* =============================================================================
   RTL (Right-to-Left) Support for Arabic Language
   Applied when html[dir="rtl"] is set on the document root element.
   ============================================================================= */

/* =============================================================================
   1. BASE DIRECTION AND TEXT ALIGNMENT
   ============================================================================= */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] span,
html[dir="rtl"] div {
    text-align: right;
}

html[dir="rtl"] .empty-state {
    text-align: center;
}

html[dir="rtl"] .stat-item {
    text-align: center;
}

/* =============================================================================
   2. HEADER / NAVIGATION - FLEXBOX DIRECTION REVERSAL
   ============================================================================= */

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

html[dir="rtl"] .user-section {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links a {
    margin-left: 0;
    margin-right: 20px;
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .user-stats {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

html[dir="rtl"] .stat-badge {
    flex-direction: row-reverse;
}

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

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

/* Logo stays in the right side for RTL */
html[dir="rtl"] .logo {
    margin-left: 0;
    margin-right: 0;
}

/* =============================================================================
   3. KEYBOARD ROWS - RTL DIRECTION
   ============================================================================= */

html[dir="rtl"] .keyboard {
    direction: rtl;
}

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

html[dir="rtl"] .keyboard-container {
    direction: rtl;
}

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

html[dir="rtl"] .keyboard-visual {
    direction: rtl;
}

/* =============================================================================
   4. TYPING TEXT AREA - RTL DIRECTION
   ============================================================================= */

html[dir="rtl"] .typing-area {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .text-display {
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
}

html[dir="rtl"] .text-line {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .typing-text {
    direction: rtl;
    text-align: right;
}

/* Chars should flow RTL */
html[dir="rtl"] .char {
    direction: rtl;
}

/* =============================================================================
   5. SIDEBAR / SIDE-COLUMN POSITION SWAP
   ============================================================================= */

html[dir="rtl"] .sidebar,
html[dir="rtl"] aside {
    left: auto;
    right: 0;
}

html[dir="rtl"] .side-column {
    order: -1;
}

/* For flex-based layouts with sidebar, reverse the order */
html[dir="rtl"] .dashboard-layout,
html[dir="rtl"] .page-layout {
    flex-direction: row-reverse;
}

/* Main content and sidebar swap */
html[dir="rtl"] .main-column {
    order: 0;
}

/* =============================================================================
   6. FORM INPUT ALIGNMENT
   ============================================================================= */

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input::placeholder {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] textarea::placeholder {
    text-align: right;
    direction: rtl;
}

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

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

/* Select dropdown arrow position swap */
html[dir="rtl"] select {
    background-position: left 12px center;
    padding-left: 30px;
    padding-right: 15px;
}

/* Settings forms */
html[dir="rtl"] .setting-item,
html[dir="rtl"] .setting-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .setting-label,
html[dir="rtl"] .setting-desc {
    text-align: right;
}

html[dir="rtl"] .design-mode-option {
    flex-direction: row-reverse;
}

html[dir="rtl"] .design-mode-name,
html[dir="rtl"] .design-mode-desc {
    text-align: right;
}

/* =============================================================================
   7. PADDING / MARGIN DIRECTION SWAPS (LEFT <-> RIGHT)
   ============================================================================= */

/* Navigation links: swap margin-left to margin-right */
html[dir="rtl"] .nav-links a {
    margin-left: 0;
    margin-right: 20px;
}

@media (max-width: 1200px) {
    html[dir="rtl"] .nav-links a {
        margin-left: 0;
        margin-right: 12px;
    }
}

@media (max-width: 900px) {
    html[dir="rtl"] .nav-links a {
        margin-left: 0;
        margin-right: 8px;
    }
}

@media (max-width: 650px) {
    html[dir="rtl"] .nav-links a {
        margin-left: 0;
        margin-right: 5px;
    }
}

/* Legal footer link margins */
html[dir="rtl"] .legal-footer a {
    margin: 0 15px;
}

/* Alert padding */
html[dir="rtl"] .alert {
    padding: 15px 20px;
    text-align: right;
}

/* Card heading flex direction */
html[dir="rtl"] .card h2 {
    flex-direction: row-reverse;
}

/* Achievement items */
html[dir="rtl"] .achievement-item {
    flex-direction: row-reverse;
}

/* Activity items */
html[dir="rtl"] .activity-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .activity-stats {
    flex-direction: row-reverse;
}

/* Welcome section */
html[dir="rtl"] .welcome-section {
    flex-direction: row-reverse;
    text-align: right;
}

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

html[dir="rtl"] .welcome-text h1 {
    text-align: right;
}

html[dir="rtl"] .welcome-text p {
    text-align: right;
}

/* Start button */
html[dir="rtl"] .start-btn {
    flex-direction: row-reverse;
}

/* Pro upgrade banner */
html[dir="rtl"] .pro-upgrade-banner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pro-banner-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pro-banner-text {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pro-banner-close {
    right: auto;
    left: 15px;
}

/* Container padding */
html[dir="rtl"] .container {
    direction: rtl;
}

/* Skip link */
html[dir="rtl"] .skip-link {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

html[dir="rtl"] .skip-link:focus {
    transform: translateX(50%);
}

/* =============================================================================
   8. PROGRESS BARS - RTL DIRECTION
   ============================================================================= */

html[dir="rtl"] .progress-bar {
    direction: rtl;
}

html[dir="rtl"] .progress-fill {
    /* Progress fills from right to left */
    background: linear-gradient(270deg, var(--accent), var(--warning));
    float: right;
    border-radius: 5px;
}

/* Formell mode progress bar */
html[dir="rtl"] body.design-formell .progress-fill {
    float: right;
}

/* =============================================================================
   9. DROPDOWN MENU POSITION ADJUSTMENTS
   ============================================================================= */

/* Avatar dropdown menu - flip to left side */
html[dir="rtl"] .avatar-dropdown-menu {
    right: auto;
    left: 0;
}

/* Dropdown menu arrow - move to left side */
html[dir="rtl"] .avatar-dropdown-menu::before {
    right: auto;
    left: 20px;
}

/* Dropdown items - reverse flex direction */
html[dir="rtl"] .dropdown-item {
    flex-direction: row-reverse;
    text-align: right;
    padding: 12px 20px;
}

html[dir="rtl"] .dropdown-item:hover {
    padding-left: 20px;
    padding-right: 25px;
}

/* Dropdown icon */
html[dir="rtl"] .dropdown-icon {
    margin-left: 0;
    margin-right: 0;
}

/* Dropdown arrow (submenu indicator) */
html[dir="rtl"] .dropdown-arrow {
    margin-left: 0;
    margin-right: auto;
    transform: scaleX(-1);
}

/* Theme toggle position */
html[dir="rtl"] .theme-toggle {
    margin-left: 0;
    margin-right: auto;
}

/* Dropdown theme item */
html[dir="rtl"] .dropdown-theme {
    flex-direction: row-reverse;
}

/* =============================================================================
   10. MODAL ALIGNMENT ADJUSTMENTS
   ============================================================================= */

html[dir="rtl"] .modal {
    direction: rtl;
}

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

html[dir="rtl"] .modal-title {
    text-align: center;
}

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

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

html[dir="rtl"] .modal-close {
    margin: 1rem auto 0;
}

/* Level modal */
html[dir="rtl"] #level-modal .modal-content {
    text-align: right;
}

/* =============================================================================
   ADDITIONAL RTL ADJUSTMENTS
   ============================================================================= */

/* Level grid and level items */
html[dir="rtl"] .level-grid {
    direction: rtl;
}

html[dir="rtl"] .level-item {
    direction: rtl;
}

/* Level options */
html[dir="rtl"] .level-option {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .level-option-name {
    text-align: right;
}

/* Stats grid */
html[dir="rtl"] .stats-grid {
    direction: rtl;
}

/* Activity list */
html[dir="rtl"] .activity-list {
    direction: rtl;
}

/* Achievement list */
html[dir="rtl"] .achievement-list {
    direction: rtl;
}

/* Shop items */
html[dir="rtl"] .shop-grid {
    direction: rtl;
}

html[dir="rtl"] .shop-item {
    text-align: right;
}

/* Achievements grid */
html[dir="rtl"] .achievements-grid {
    direction: rtl;
}

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

html[dir="rtl"] .achievement-info {
    text-align: right;
}

/* Coins info */
html[dir="rtl"] .coins-info {
    flex-direction: row-reverse;
    text-align: right;
}

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

/* Sections */
html[dir="rtl"] .section {
    text-align: right;
}

html[dir="rtl"] .section h2 {
    text-align: right;
}

/* Category tabs */
html[dir="rtl"] .category-tab {
    direction: rtl;
}

/* Account info */
html[dir="rtl"] .account-info {
    text-align: right;
}

html[dir="rtl"] .account-info p {
    text-align: right;
}

/* Avatar grid */
html[dir="rtl"] .avatar-grid {
    direction: rtl;
}

/* Danger zone */
html[dir="rtl"] .danger-zone {
    text-align: right;
}

/* Leaderboard */
html[dir="rtl"] .leaderboard-pos {
    flex-direction: row-reverse;
}

html[dir="rtl"] .leaderboard-link {
    direction: rtl;
}

/* Page titles and subtitles */
html[dir="rtl"] .page-title {
    text-align: right;
}

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

/* Buttons - ensure icons and text are properly ordered */
html[dir="rtl"] .btn {
    direction: rtl;
}

html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary,
html[dir="rtl"] .btn-success,
html[dir="rtl"] .btn-danger {
    direction: rtl;
}

/* Formal stats panel */
html[dir="rtl"] .formal-stats-header {
    direction: rtl;
    text-align: right;
}

/* Theme icons container - mirror animation */
html[dir="rtl"] .theme-icons-container {
    direction: rtl;
}

/* Dashboard cards */
html[dir="rtl"] .dashboard-card {
    text-align: right;
}

/* Stat boxes */
html[dir="rtl"] .stat-box {
    text-align: center;
}

/* Range/slider labels */
html[dir="rtl"] .range-value,
html[dir="rtl"] output {
    text-align: right;
}

/* Hint text */
html[dir="rtl"] .hint {
    text-align: right;
}

/* =============================================================================
   RESPONSIVE RTL ADJUSTMENTS
   ============================================================================= */

@media (max-width: 800px) {
    html[dir="rtl"] .header,
    html[dir="rtl"] .dashboard-header {
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    html[dir="rtl"] .user-section {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .header {
        flex-direction: column;
        align-items: stretch;
    }

    html[dir="rtl"] .welcome-section {
        flex-direction: column;
        text-align: center;
    }

    html[dir="rtl"] .welcome-text {
        text-align: center;
    }

    html[dir="rtl"] .welcome-text h1,
    html[dir="rtl"] .welcome-text p {
        text-align: center;
    }

    html[dir="rtl"] .pro-upgrade-banner {
        padding: 10px 15px 10px 40px;
    }
}

@media (max-width: 500px) {
    html[dir="rtl"] .user-section {
        justify-content: flex-end;
    }
}

@media (max-width: 950px) {
    html[dir="rtl"] .user-stats {
        justify-content: flex-start;
    }
}

/* =============================================================================
   TABLE RTL SUPPORT
   ============================================================================= */

html[dir="rtl"] table {
    direction: rtl;
}

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

/* =============================================================================
   MISCELLANEOUS RTL FIXES
   ============================================================================= */

/* Ensure list markers appear on the right */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 2em;
}

/* Fix float-based layouts */
html[dir="rtl"] .float-left {
    float: right;
}

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

/* Border radius adjustments for asymmetric corners */
html[dir="rtl"] .skip-link {
    border-radius: 0 0 10px 10px;
}

/* Pro banner responsive RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .pro-banner-close {
        right: auto;
        left: 15px;
    }
}

/* Tooltip positioning (if tooltips exist) */
html[dir="rtl"] [data-tooltip]::after,
html[dir="rtl"] [data-tooltip]::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Notification/toast positioning */
html[dir="rtl"] .notification,
html[dir="rtl"] .toast {
    left: 20px;
    right: auto;
}

/* Fix inline icon + text spacing */
html[dir="rtl"] .nav-icon + .nav-text {
    margin-left: 0;
    margin-right: 0;
}

/* Achievement animation */
html[dir="rtl"] .achievement-animation {
    direction: rtl;
}

/* Legal footer - centered, no RTL direction change needed but ensure spacing */
html[dir="rtl"] .legal-footer {
    text-align: center;
    direction: rtl;
}

/* Scrollbar position (for browsers that support it) */
html[dir="rtl"] {
    scrollbar-gutter: stable;
}

/* Ensure grid layouts maintain proper cell ordering */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* Pro glow animation - no change needed, symmetric */
/* Pulse animation - no change needed, symmetric */
/* Float icon animation - no change needed */