/**
 * RTL (Right-to-Left) Overrides for Arabic Language Support
 *
 * This file contains all RTL-specific styles to properly support Arabic layout
 * Apply this file AFTER all other CSS files
 */

/* ============================================
   LAYOUT RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .dashboard-main {
    margin-left: 0;
    margin-right: var(--sidebar-width);
    transition: margin-right 0.3s ease;
}

[dir="rtl"] .sidebar--collapsed ~ .dashboard-main,
[dir="rtl"] .dashboard-layout.sidebar-collapsed .dashboard-main {
    margin-left: 0;
    margin-right: var(--sidebar-width-collapsed);
}

/* ============================================
   SIDEBAR RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--puwer-border, #e5e7eb);
}

[dir="rtl"] .sidebar-toggle {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .sidebar-menu-link {
    border-left: none;
    border-right: 3px solid transparent;
}

[dir="rtl"] .sidebar-menu-link:hover {
    border-left-color: transparent;
    border-right-color: var(--puwer-primary, #2563eb);
}

[dir="rtl"] .sidebar-menu-icon {
    margin-right: 0;
    margin-left: 0.75rem;
}

[dir="rtl"] .sidebar--collapsed .sidebar-menu-icon {
    margin-left: 0;
}

[dir="rtl"] .sidebar--collapsed .sidebar-toggle {
    margin-right: 0;
}

/* ============================================
   TABLE RTL ADJUSTMENTS
   ============================================ */

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

[dir="rtl"] .users-table th:first-child,
[dir="rtl"] .users-table td:first-child {
    text-align: right;
}

/* ============================================
   FORM RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .checkbox-label input[type="checkbox"] {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .form-group input[type="checkbox"] {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================
   BUTTON & ICON RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .btn-icon {
    margin: 0 0.25rem;
}

[dir="rtl"] .actions-cell {
    direction: ltr; /* Keep action buttons in logical order */
    text-align: left;
}

/* ============================================
   MODAL RTL ADJUSTMENTS
   ============================================ */

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

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

/* ============================================
   FILTER SECTION RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .filters-section {
    direction: rtl;
}

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

/* ============================================
   PAGE HEADER RTL ADJUSTMENTS
   ============================================ */

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

/* ============================================
   MOBILE RTL ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    [dir="rtl"] .dashboard-main {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] .sidebar.sidebar--open {
        transform: translateX(0);
    }
}

/* ============================================
   IMAGE GRID RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .images-list {
    direction: rtl;
}

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

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

/* ============================================
   BADGE RTL ADJUSTMENTS
   ============================================ */

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

/* ============================================
   FORM ROW RTL ADJUSTMENTS
   ============================================ */

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

/* ============================================
   ADDITIONAL RTL POLISH
   ============================================ */

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

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

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

[dir="rtl"] .empty-state,
[dir="rtl"] .error-state,
[dir="rtl"] .loading-indicator {
    text-align: center;
}

/* ============================================
   LOGIN PAGE RTL ADJUSTMENTS
   ============================================ */

[dir="rtl"] .login-header {
    text-align: center;
}

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

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

[dir="rtl"] .checkbox-label input[type="checkbox"] {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

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