/* Styles RTL pour l'arabe */

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

/* ============================================
   SIDEBAR RTL - Position à droite en arabe
   ============================================ */
body[dir="rtl"] .sidebar {
    left: auto !important;
    right: 0 !important;
}

body[dir="rtl"] .sidebar-nav a {
    border-left: none !important;
    border-right: 3px solid transparent;
}

body[dir="rtl"] .sidebar-nav a:hover,
body[dir="rtl"] .sidebar-nav a.active {
    border-right-color: rgba(255,255,255,0.5) !important;
    border-left-color: transparent !important;
}

body[dir="rtl"] .sidebar-nav a.active {
    border-right-color: white !important;
    border-left-color: transparent !important;
}

/* ============================================
   TOP HEADER RTL - Marges pour sidebar à droite
   ============================================ */
body[dir="rtl"] .top-header {
    margin-left: 0 !important;
    margin-right: 280px !important;
}

/* ============================================
   MAIN CONTENT RTL - Positionné à gauche
   ============================================ */
body[dir="rtl"] .main-content.with-sidebar {
    margin-left: 0 !important;
    margin-right: 280px !important;
}

/* ============================================
   OVERLAY RTL
   ============================================ */
body[dir="rtl"] .sidebar-overlay {
    left: 0;
    right: 0;
}

/* ============================================
   RESPONSIVE RTL - Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Sidebar masquée à droite en RTL mobile */
    body[dir="rtl"] .sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }
    
    body[dir="rtl"] .sidebar.active {
        transform: translateX(0) !important;
    }
    
    body[dir="rtl"] .top-header {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    body[dir="rtl"] .main-content.with-sidebar {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

body[dir="rtl"] .main-nav ul {
    flex-direction: row-reverse;
}

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

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

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

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

body[dir="rtl"] .action-buttons {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

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

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

body[dir="rtl"] .checkbox-group,
body[dir="rtl"] .radio-group {
    direction: rtl;
}

body[dir="rtl"] .user-menu-dropdown {
    right: auto;
    left: 0;
}

body[dir="rtl"] .user-menu-dropdown::before {
    right: auto;
    left: 20px;
}

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

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

body[dir="rtl"] .main-nav a {
    flex-direction: row-reverse;
}

body[dir="rtl"] .main-nav a span {
    margin-right: 0;
    margin-left: 0.5rem;
}

body[dir="rtl"] .btn i {
    margin-right: 0;
    margin-left: 0.5rem;
}

body[dir="rtl"] .nav-dropdown-menu {
    right: 0;
    left: auto;
}

body[dir="rtl"] .nav-dropdown-menu a:hover,
body[dir="rtl"] .nav-dropdown-menu a.active {
    padding-right: 1.5rem;
    padding-left: 1.25rem;
}

/* ============================================
   LOGIN PAGE RTL - Centrage en arabe
   ============================================ */
body[dir="rtl"] .login-page {
    direction: rtl;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body[dir="rtl"] .login-container {
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100% !important;
    max-width: 450px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

body[dir="rtl"] .login-box {
    text-align: right;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

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

body[dir="rtl"] .login-form .form-group input {
    text-align: right;
    direction: rtl;
}

body[dir="rtl"] .login-form .form-group input::placeholder {
    text-align: right;
    direction: rtl;
}

@media (max-width: 768px) {
    body[dir="rtl"] .login-page {
        direction: rtl;
        justify-content: center !important;
        align-items: flex-start !important;
        display: flex !important;
        padding: 1rem !important;
    }
    
    body[dir="rtl"] .login-container {
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    body[dir="rtl"] .login-box {
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100% !important;
        max-width: 450px !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
}

@media (max-width: 480px) {
    body[dir="rtl"] .login-page {
        justify-content: center !important;
        align-items: flex-start !important;
        display: flex !important;
        padding: 0.5rem !important;
    }
    
    body[dir="rtl"] .login-container {
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    body[dir="rtl"] .login-box {
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100% !important;
        max-width: 450px !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
}